Smashing Newsletter: Issue #192

Editorial

Not all digital products are remarkable, but many digital products are designed fairly well. If we want to stand out with our products today, we need to find a signature that defines our personality, and use it consistently throughout the spectrum of our experiences. It doesn’t have to go overboard and create a sophisticated visual treatment or advanced campaigns; a consistent 11 degree tilting of the icons, a lovely transition or playful copy can be just enough.

It’s also about a consistency in the design language you are using. Polaroid has just rebranded in Polaroid Originals, polishing up their brand identity to establish consistency and coherence in their appearance. Even Dropbox has evolved into an expressive (some people would probably say “too expressive”) voice; you might not like it, but it speaks in a consistent, unique voice.

Perhaps it’s better to tell a story that a number of folks won’t like, rather than have no story to tell at all? Just one subtle thing used consistently, in a UI that does its job well. No need for grand ideas. Focus is enough. We all just need to figure out what we use our signature for, and what it actually means when we use it consistently enough.

Find your personality, and build on top of it!
Vitaly (@smashingmag)

Learning Flexbox By Doing
The Secret Recipe To Scaling
Inclusive Components, Piece By Piece
Free Fonts: Oraqle Script And Aleo
Behind The Scenes Of The Slack.com Redesign
Responsive UX Pattern Inspiration
On The Artist’s Color Palette
24 Hours Of Inclusive Design Goodness

1. Learning Flexbox By Doing

Flexbox. The best way to get to grips with it (as with any new technique), is to learn the fundamentals and then get your feet wet and build lots of stuff with it. If you haven’t gotten a chance to wrap your head around Flexbox yet, Ohans Emmanuel’s “The Ultimate Guide to Flexbox” is a great read to start your Flexbox adventures.

The guide illustrates the Flexbox fundamentals at hand of six practical examples: the seventh example then is a little challenge to test your newly aquired skills. The examples start with using Flexbox to build a photo gallery, and slowly get more complex, so that, in the end, you’ll have learned to build cards, grids, website layouts, media objects, form elements and even a mobile app layout with Flexbox. A great base to tackle everyday UI layout challenges. (cm)

2. The Secret Recipe To Scaling

How to grow a company from zero to gazillion? Is there a secret recipe to successful scaling? Reid Hoffman, co-founder of Linkedin and Greylock Partner, has some theories of how it could work. Two examples of Reid’s advise are: “You have to be as skilled at breaking plans as you are at making them” and “If you’re not embarrassed by your first product release, you’ve released it too late”.

To test and turn his ideas, Reid talks to famous founders. And, luckily for us, the conversations don’t happen behind closed doors! Masters of Scale is a podcast in which special guests are invited, such as Facebook’s Mark Zuckerberg, Evite’s Selina Tobaccowalla, Airbnb’s Brian Chesky and Crisis Text Line’s Nancy Lublin — just to name a few. A nice detail: The podcast commits to a 50-50 gender balance for guests. Interesting insights into big concepts and small hacks that have the power to change everything. (cm)

3. Inclusive Components, Piece By Piece

The web is full of interfaces which don’t consider different abilities, circumstances and preferences that users bring along. Just take a tabbed interface that isn’t accessible with the keyboard, for example, or a tooltip that doesn’t work with screen readers. To promote good, accessible interface design patterns, Heydon Pickering dedicated a blog to the topic: Inclusive Components.

Inclusive Components collects interface components that are easy to get wrong accessibility-wise: tabbed interfaces, theme switchers, tooltip, menus, to-do lists, toggle buttons. To help us do better, Heydon dissects the patterns, shows common pitfalls and bottlenecks, and provides tips on how to circumvent them so that everyone can use the interface no matter how they use it. It’s great to see that the awareness for inclusiveness is growing in the community and how people make their contribution to it. Sometimes, something so small such as an interface component (accessible drag & drop, anyone?) can already make a big difference. (cm)

4. Free Fonts: Oraqle Script And Aleo

Who doesn’t love a free font? Recently, we stumbled across two real gems that are too good not to share. One of them is the brush font Oraqle Script designed by 50Fox. With its bold strokes and authentic brush texture, it’s bound to make your design stand out, no matter if it’s a logo, a poster or an invitation. You may use it for free in both personal and commercial projects.

If you’re looking for something less bold and more versatile, Aleo could be for you. Designed by Alessio Laiso, the focus of the slab-serif font family lies on readability. It features six weights and shines with its semi-rounded details and sleek structure. Multi-language diacritics make it a good fit for non-English language projects, too. Just like Oraqle Script, Aleo is free to use in personal and commercial projects. Enjoy! (cm)

5. Behind The Scenes Of The Slack.com Redesign

There probably isn’t anything more inspiring as sneaking a peek behind the scenes of how fellow developers tackle their projects. Mina Markham, senior engineer at Slack, now shares valuable insights into the making of the recent Slack website redesign. In a nutshell: The redesign is powered by CSS Grid and optimized for performance and accessibility.

To streamline and simplify the codebase, Slack introduced a new UI framework — with stunning effects. :spacesuit:, as the framework is called, allowed the team to reduce the CSS payload significantly, in one case by nearly 70%. For maximum flexibility in terms of layout, they didn’t force themselves into a fixed number of columns, but created CSS Grid objects for some of the common layout patterns in the design. Flexbox acts as a fallback. Clever!

To be equally adaptable as the layout itself, typography has gotten an upgrade, too, and image art direction using picture and source elements (with Picturefill as a polyfill for older browsers) makes the well-thought-out, responsive experience complete. Apart from that, a lot of small but impactful improvements to color contrast, HTML semantics, and keyboard accessibility were made to provide the best experience to every user. If you want to dive in deeper into their redesign, be sure to check out Mina’s article. Interesting takeaways are guaranteed. (cm)

6. Responsive UX Pattern Inspiration

Sometimes, great inspiration lies where you least expect it. Or would you have thought that you’d find a stellar example of a responsive calendar in a blog post about horror films? Well, we wouldn’t have neither, but the calendar that designer Rob Weychert used on his blog to visualize his annual October schedule of horror films is a great example of what a well-done responsive calendar could look like. Minimalistic, clear and clean.

Another interesting design pattern that we stumbled upon rather by accident lately comes from Aegean Airlines. Their solution to a responsive table is simple yet efficient. It’s small details like these that remind us to keep our eyes open when browsing the web. After all, one of these lucky findings could come in handy some day. (cm)

7. On The Artist’s Color Palette

Growing up as kids, we all probably had a very intuitive, unbiased feeling of color. Pink and orange? Why not! The selection of shades was limited to the size of our pencil case anyways. Today, as designers, things have gotten more complex, of course. We’ve got thinkable shades and tints at our fingertips almost all of the time. We turn the color wheel, adjust the hex value, always on the hunt for the perfect hue. The possibilities have become endless, and that makes decisions, well, not exactly easy.

To give you some fresh color inspiration, and maybe even help you break out of trusted patterns you usually tend to resort to, the folks at digital product studio okay bueno came up with an unusual color inspiration tool: Palette. Starting base for Palette are contemporary artworks: street art, paintings, photography, collages. Every time you refresh the site, you’ll see a new artwork, along with the colors that have been used to create it. So if you like what you see, just copy the color to your clipboard or take a look at the entire palette in hex and RGB values. Color inspiration has never been so beautiful. (cm)

8. 24 Hours Of Inclusive Design Goodness

24 hours, 24 speakers, and all things accessibility — that’s Inclusive Design 24. Organized by the Paciello Group, the free, 24-hour long community event is bound to take your inclusive design knowledge beyond the basics to ensure that people with disabilities get full and equal access to the web.

Thursday, November 16th, will be dedicated to all things accessibility. Every full hour, #ID24 will present a new session with a new speaker sharing their accessiblity tips and best practices — among them Aaron Gustafson, Estelle Weyl, Vasilis van Gemert and Marcy Sutton, just to name a few. Topics of the talks range from inclusive markup, HTML email accessibility and testing, to aspects that usually stay unaddressed, such as VR and Internet of Things accessibility. Sounds good? All sessions will be streamed live on YouTube, so there’s no need to sign-up or register for anything. (cm)

October 13, 2017 Smashing Newsletter: Issue #192

Previous Issues