Smashing Newsletter #192: Free Fonts, UX and Accessibility

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. Issue #192 • Tuesday, October 17th 2017 • 225,285 readers • [View in the browser]( [Smashing Email Newsletter]( Dear Friends, 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. [Polaroid Originals]( 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! From SmashingConf Barcelona, Vitaly (@smashingmag) --------------------------------------------------------------- Table of Contents 1. [Learning Flexbox By Doing](#a1) 2. [The Secret Recipe To Scaling](#a2) 3. [Inclusive Components, Piece By Piece](#a3) 4. [Free Fonts: Oraqle Script And Aleo](#a4) 5. [Behind The Scenes Of The Slack.com Redesign](#a5) 6. [Responsive UX Pattern Inspiration](#a6) 7. [On The Artist's Color Palette](#a7) 8. [24 Hours Of Inclusive Design Goodness](#a8) 9. [New On Smashing Job Board](#a9) 10. [Popular Articles On Smashing](#a10) 11. [Most Recent Articles On Smashing](#a11) --------------------------------------------------------------- #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 Ultimate Guide to Flexbox]( 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". [Masters of Scale]( 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) --------------------------------------------------------------- Our sponsor: Project Management Is Better When It's Visual [Ad]( Dapulse is the next generation of visual tools, built specifically for designers and developers. --------------------------------------------------------------- #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]( 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. [Oraqle Script]( 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) --------------------------------------------------------------- Our sponsor: Take Your Layout Skills To The Next Level With Mozilla's CSS Grid Playground CSS Grid is changing the way we do layout, and more and more designers and developers are falling in love with the possibilities it offers. If you haven't gotten around to tinker with the concept yet, Mozilla's [CSS Grid Playground]( is a great place to dive into the magic of the technique and learn to build your first own grid. [CSS Grid Playground]( By the way, did you know that Mozilla also upgraded their Firefox Developer Tools to reflect the shiny new possibilities that Grid brings along? The new Grid Inspector makes inspecting grids as easy as never before, thanks to a row of nifty features — one of them lets you display an overlay, for example, to visualize the grid and all relevant information around it (even when transformations are applied to its container). The features are currently available in Firefox Nightly and the [Firefox Developer edition](. A perfect companion to get the most out of your CSS Grid Playground adventures. (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. [Slack redesign]( 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. [Responsive calendar]( 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) --------------------------------------------------------------- Our sponsor: Online Masters in Information Design and Strategy [Ad]( Learn to drive effective digital communication. --------------------------------------------------------------- #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. [Palette]( 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. [Inclusive Design 24]( 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) --------------------------------------------------------------- #9. New On Smashing Job Board Here are some of the most recent job openings at [Smashing Jobs]( - [Back-End Developer]( at GatherContent Ltd (Remote, UK only) "We're looking for an experienced, UK-based Back-end Developer who wants to be part of a remote-working, fast growing startup (we've been around for a few of years). You will be working as part of our Agile, 8 person team to help deliver iterations to our product." - [WordPress Developer & Support Specialist]( at Cornershop Creative (Remote, US Only) "The core responsibility for this position will be investigating, troubleshooting, and coding solutions for WordPress-based websites and applications for our non-profit and small business clients." - [UX Director]( at CNBC (Englewood Cliffs, NJ) "CNBC Digital Product & Design is seeking a Director, User Experience to join our team to drive user analysis, research, and testing of prototypes and designs across all the digital properties and platforms of CNBC." --------------------------------------------------------------- #10. Popular Articles On Smashing In October - [Naming Things In CSS Grid Layout]( When first learning how to use CSS Grid Layout, you might begin by addressing positions on the grid by their line number. Rachel takes an in-depth look at the various ways to name lines and areas, and some of the interesting possibilities this creates. - [Minimalistic Design With Large Impact: Functional Minimalism For Web Design]( Carefully applied minimalist principles can help designers make attractive and effective websites with fewer elements, simplifying and improving users' interactions. Nick Babich explains why sometimes less is more. - [Non-Disclosure Agreements For Developers: What To Know Before You Sign]( The most common legal document you will be asked to sign when working on a website or app is a non-disclosure agreement (NDA). If you're not sure whether to sign an NDA as a developer, this article will guide you to make an educated decision. --------------------------------------------------------------- #11. Most Recent Articles On Smashing - [Don't Let Your Brain Deceive You: Avoiding Bias In Your UX Feedback]( When soliciting and listening to user feedback, you will inevitably run into bias on both sides of the coin. Hunter Jensen shares tips to overcome common biases to get the most out of user feedback. - [Implementing A Service Worker For Single-Page App WordPress Sites]( Leonardo Losoviz shares his experience with implementing service workers for PoP, a single page application website that runs on WordPress, with the goal of speeding up the loading time and providing offline-first capabilities. - [Building A Large-Scale Design System: How A Design System Was Created For The U.S. Government (Case Study)]( Federal websites are the front door to government services. Maya Benari sheds some light on how they built tools to leverage industry-standard best practices and produce a design system with reusable components for the U.S. government. --------------------------------------------------------------- Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. Email: newsletter@smashingmagazine.com [Follow us on Twitter]( • [Join us on Facebook]( [Smashing Freddie: Sent via Mailchimp.]( The authors are: Cosima Mielke (cm), Iris Lješnjanin (il), Vitaly Friedman (vf), Markus Seyfferth (ms), Christiane Rosenberger (research), Elja Friedman (tools). [unsubscribe]( • [update preferences]( • [View in the browser](