As professionals who care about our craft, our design discussions often circle around best practices and perfect solutions for design problems. We care, and that’s what makes our work good and our workflow better with every new project. But perfect solutions don’t exist in the real world2, and so seeking pragmatic alternatives that get projects finished in time is fine, too — as long as we don’t compromise our professional principles, that is.
As Harry Roberts and Nicolas Gallagher remind us, questioning status quo is helpful4 and necessary5. So when was the last time you broke your CSS/JS habit and tried something different and counter-intuitive for a change? What about trying out OOCSS, LESS, SASS or RESS? Or refactoring a stylesheet with rems and SVG sprites?
That’s exactly what we’ve set out to do this week on Smashing Magazine’s website to improve the performance and the code base. So in case you notice any bugs or issues, please let us know on Twitter6 and share your experiences on breaking your habits using the hashtag
#smnlhabits. Good luck!
PS: If you happen to be around Freiburg, Germany this week, make sure to drop by a Smashing Meetup With Paul Boag on April 4th — we’d love to meet you! By the way, Paul Boag’s “Client Centric Web Design” eBook is available in our Smashing eBook Library7 starting from today, so happy reading and stay tuned to the updates!
Table of Contents
- CSS Icon Stacks8
- What Are Your Biggest Failures?9
- Building An Automatic Table Of Contents10
- Adaptive SVG Illustrations With CSS11
- CSS3 For Responsive Web Design: Workshop With Andy Clarke12
- Free PSD: Corporate Identity Mock-Up Set13
- Photoshop Shortcut To Copy Color Hex Value14
- Windows Of New York15
- So What Exactly Is UX Anyway?..16
- New Characters To Extend Your Superhero Collection17
1. CSS Icon Stacks
If you worked with PNG sprites for a while, you probably experienced a sense of relief when you first played around with SVG or icon fonts. The latter provide a couple of interesting features that you don’t have with “classic” vector graphics. With icon fonts you can define custom ligatures and assign any combination of characters to an icon glyph — e.g. to embed scalable logos into your Web font. In fact, you can do more than that. What about building modular, complex, stacked, multi-colored icons?
Conor Muirhead was struggling with a solution for displaying multi-colored icons using Web fonts. So he came up with a nice little technique that he calls Icon Stacks. Split apart the components of your multi-color vector, add each element to your icon font, and then stack them to create a “mega-icon.” And if you’d like to add a little bit more depth or polish to your mega-icons, just use CSS gradients and the
background-clip property to pop things up a bit. Simple, right? A clever technique that might save some headaches and time in your next project. (vf)
2. What Are Your Biggest Failures?
While we love discussing our success stories and the mysterious paths that lead us to happy accidents and important achievements, we tend to avoid talking about our failures and biggest mistakes. However, usually it’s the times when we fail miserably and have to start over when we are truly getting better at what we do.
In his blog, the designer Ben Krogh started a fantastic series of interviews about failures19 and mistakes designers made in their careers. Interviews go into detail examining the reasons behind and the consequences of failures and what designers learned from them. An insightful series of articles, worth reading, bookmarking and learning from. (vf)
3. Building An Automatic Table Of Contents
4. Adaptive SVG Illustrations With CSS
Responsive design is usually associated with fluid images, adjusted navigation patterns and layout shifts. However, what if we applied responsive design techniques in places where they aren’t usually used — e.g. when working with SVG illustrations?
Because SVG is XML-based, the same CSS attributes that we use to style HTML pages can also be used to style SVG files. So we can apply an
id attribute to SVG elements (e.g.
svg id="flourish" and customize their appearance using an
id or class selector. And if we apply a media query, we can easily create adaptive SVG illustrations. In his blog, Dudley Storey explains how to create adaptive SVG illustrations23 and embed them in a responsive design. Another way to break out of the boxes of thinking that we are all sometimes used to.
5. CSS3 For Responsive Web Design: Workshop With Andy Clarke
It’s always useful to see how our colleagues — professional designers and developers — work and think and what we can learn from their design processes to improve our own design workflow. What sounds fantastic in theory, doesn’t necessarily work in real-life projects, and this is why it’s great to get practical insights into work done by well-respected professionals.
That’s why we invited Andy Clarke, author, speaker, designer and the creative mind behind Stuff and Nonsense25, to host a brand new full-day workshop in our hometown Freiburg, Germany. Andy will explain how you can use Flexbox and
display: table to rearrange content, make the most of tiny bitmaps with border images and improve Web typography in your designs. The workshop will be held on June 25th 2013. The number of seats is limited, so make sure to grab your ticket now!. We’d love to meet you! (vf)
6. Free PSD: Corporate Identity Mock-Up Set
We live in a world of brands and logos. Everything requires its own identity, and creating a memorable and recognizable corporate identity (CI) is often an essential part of any design project. However, when it comes to presenting a newly designed CI to clients, how would you present a brand? As a vector graphic or as a print-out? Wouldn’t it be helpful to have a complete mock-up set of the various assets that the CI could be displayed on — e.g. CDs, pencils, letterhead, calendars or bags — to give the client a better idea of how the logo would feel in various settings and environments?
Well, the creative minds behind blugraphic did just that. They released a Photoshop PSD freebie which you can use to present your CI designs to your clients or in your design portfolio: Corporate Identity Photoshop Mock-Up27. The free mock-up consists of those assets which are typically used to display and promote a brand: office utensils, letterhead, business cards, CD cases, etc.
All elements are build with vector shapes, which means that you can easily resize them without losing quality. You can also change the proportions of everything to fit the sizes of your identity elements. (ea)
7. Photoshop Shortcut To Copy Color Hex Value
Have you ever wondered if there’s a shortcut to copy the hex color value of a color selected in Photoshop using the eye dropper tool? The same question was bothering Noah Stokes28, so he asked on Twitter. Sean McCabe29 came up with a handy little tip: You can set a keyboard shortcut to copy a color’s hex value.
Just select a color with the eye dropper, switch to your code editor and paste the hex value into your CSS. To make things even easier, you can assign this feature to one of your function keys and have it at your fingertips whenever you need it. Looking for yet another alternative? Dries Delaey31 noted that a simple right click on a color with the eye dropper, which copies the hex value, also does the job. (cm)
8. Windows Of New York
Windows are the eyes of a city: they watch people walking, the rush hours of traffic, the movements of nature, life. Sometimes we just pass by them without really attempting to see the details which make them so unique.
Graphic Designer Jose Guizar noticed the beauty of the Windows of New York33 and had an idea: to illustrate them and categorize them by their neighborhoods. Take a look at his project and you will observe the nuances of the architectural style present in the Big Apple. (tts)
9. So What Exactly Is UX Anyway?..
Everybody is talking about UX, UI, IA, intuitive interfaces and easy-to-use products, but do we and our clients have a common shared vocabulary about what these terms actually mean? To get you well prepared for your next conversation about UX-related issues, UX Apprentice34 has broken down this vast territory to the absolute basics, explaining the process of UX design by exploring its three layers: Discovery, Strategy and Design.
After learning about the core principles, you will see them being put into practice in real-life examples. A little quiz puts your newly aquired knowledge to the test. And in case you want to learn even more, Theresa Neil, the author of the resource, has put together lists of further resources like books, blogs and links to advanced UX topics for you to explore. The topics covered include an entire UX process from customer research to storyboarding, prototyping and testing to the final launch — the basics every designer should understand. (cm)
10. New Characters To Extend Your Superhero Collection
We all love our good ol’ superheros like Batman or Catwoman, but we have to admit that this set can become quite limited over time. Everett Downing is just in time to save our bored minds by presenting us hundreds of new characters36 to love. The animator draws at Pixar and decided that his New Year’s resolution for 2010 would be to draw one new superhero each day for one year. He didn’t quite manage to finish in the same year but has picked up the challenge again to complete the set of 365 characters.
When beginning with a character, he starts first with the name. A name is either cool, comes from a pun or is made up of a word play. From there, he creates the rest. He also sets a deadline and only spends one hour on each drawing. Those simple rules set boundaries for infinite creative possibilities and to define the working process — a perfect example of how to create an efficient workflow. (ml)
The authors in this newsletter are: Cosima Mielke (cm), Esther Arends (ea), Talita Telma Stöckle (tts), Melanie Lang (ml), Iris Lješnjanin (il), Vitaly Friedman (vf), Sven Lennartz (sl), Christiane Rosenberger (research), Elja Friedman (tools), Clarissa Peterson (proofreading).
- 1 https://www.smashingmagazine.com/the-smashing-newsletter/
- 2 http://rainypixels.com/words/the-myth-of-perfect/
- 3 http://www.youtube.com/watch?v=XQWOKBBJ114
- 4 https://vimeo.com/44773888
- 5 http://www.youtube.com/watch?v=XQWOKBBJ114
- 6 http://www.twitter.com/smashingmag
- 7 https://shop.smashingmagazine.com/smashing-library-complete.html?pk_campaign=NL-2-4-2013&pk_kwd=smashing-library
- 8 #a1
- 9 #a2
- 10 #a3
- 11 #a4
- 12 #a5
- 13 #a6
- 14 #a7
- 15 #a8
- 16 #a9
- 17 #a10
- 18 http://benkrogh.com/blog/
- 19 http://benkrogh.com/blog/
- 20 http://css-tricks.com/automatic-table-of-contents/
- 21 http://css-tricks.com/automatic-table-of-contents/
- 22 http://demosthenes.info/blog/675/Create-Adaptive-SVG-Illustrations-With-CSS
- 23 http://demosthenes.info/blog/675/Create-Adaptive-SVG-Illustrations-With-CSS
- 24 http://css-tricks.com/using-svg/
- 25 http://stuffandnonsense.co.uk/
- 26 http://www.blugraphic.com/2013/03/08/blugraphic/
- 27 http://www.blugraphic.com/2013/03/08/blugraphic/
- 28 http://esbueno.noahstokes.com/post/38327388263/photoshop-shortcut-to-copy-color-hex-value
- 29 http://seanwes.com/
- 30 http://esbueno.noahstokes.com/post/38327388263/photoshop-shortcut-to-copy-color-hex-value
- 31 https://twitter.com/driesdelaey
- 32 http://www.windowsofnewyork.com/
- 33 http://www.windowsofnewyork.com/
- 34 http://uxapprentice.com/
- 35 http://uxapprentice.com/
- 36 http://365supers.blogspot.de/
- 37 http://365supers.blogspot.de
Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.