We love useful stuff, and we love quality writing, that’s why we send out an editorial email newsletter twice a month with useful tips, tricks and resources for designers and developers — thoroughly collected, written and edited by us exclusively for our readers. Once subscribed, you’ll receive a small token of appreciation — a free eBook just for you.
Of course, you can cancel your subscription at any time (just check the “unsubscribe” link in the footer of the last newsletter issue). The Smashing Newsletter will always be free of charge. We respect your privacy; we will never give your data to third parties, nor would we ever spam you. You have our word!
Please keep in mind that we keep the number of ads per issue to a minimum; and to help us cover our costs, we send out at most one monthly special issue which is dedicated to Smashing projects and products. We appreciate your support, and we’ll make sure to keep your subscription worthwhile.
- Issue #193 is scheduled for Tuesday, November 7th 2017
- See below for Issue # 1921 published on Tuesday, October 17th
- Issue #191 | Tuesday, October 3rd 20172 – Readers: 226,457
- Issue #190 | Tuesday, September 19th 20173 – Readers: 226,812
- Issue #189 | Tuesday, August 29th 20174 – Readers: 226,933
- Issue #188 | Tuesday, August 15th 20175 – Readers: 227,450
- Issue #187 | Tuesday, August 1st 20176 – Readers: 227,579
- Issue #186 | Tuesday, July 18th 20177 – Readers: 227,520
- Issue #185 | Tuesday, July 4th 20178 – Readers: 227,600
- Issue #184 | Tuesday, June 20th 20179 – Readers: 228,599
- Issue #183 | Tuesday, June 6th 201710 – Readers: 228,882
- Issue #182 | Tuesday, May 23th 201711 – Readers: 229,438
Last Newsletter Issue #192
This newsletter issue was sent out to 225,285 recipients newsletter subscribers on Tuesday, October 17th 2017.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 overboard13 and create a sophisticated visual treatment or advanced campaigns; a consistent 11 degree tilting of the icons14, a lovely transition15 or playful copy16 can be just enough.
It’s also about a consistency in the design language you are using. Polaroid has just rebranded in Polaroid Originals18, polishing up their brand identity to establish consistency and coherence in their appearance. Even Dropbox has evolved19 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,
Table of Contents
- Learning Flexbox By Doing20
- The Secret Recipe To Scaling21
- Inclusive Components, Piece By Piece22
- Free Fonts: Oraqle Script And Aleo23
- Behind The Scenes Of The Slack.com Redesign24
- Responsive UX Pattern Inspiration25
- On The Artist’s Color Palette26
- 24 Hours Of Inclusive Design Goodness27
- New On Smashing Job Board28
- Popular Articles On Smashing29
- Most Recent Articles On Smashing30
311. 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 Flexbox32” 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)
342. 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 Scale36 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)
373. 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 Components38.
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 & drop40, anyone?) can already make a big difference. (cm)
414. 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 Script42 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, Aleo44 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)
455. 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 redesign46. 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
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)
486. 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 films49 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 table51 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)
527. 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: Palette54. 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)
558. 24 Hours Of Inclusive Design Goodness
24 hours, 24 speakers, and all things accessibility — that’s Inclusive Design 2456. 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)
589. New On Smashing Job Board
Back-End Developer60 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 Specialist61 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 Director62 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.”
6310. Popular Articles On Smashing In October
Naming Things In CSS Grid Layout64
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 Design65
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 Sign66
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.
6711. Most Recent Articles On Smashing
Don’t Let Your Brain Deceive You: Avoiding Bias In Your UX Feedback68
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 Sites69
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)70
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.
- 1 #newsletter-issues
- 2 https://www.smashingmagazine.com/smashing-newsletter-issue-191/
- 3 https://www.smashingmagazine.com/smashing-newsletter-issue-190/
- 4 https://www.smashingmagazine.com/smashing-newsletter-issue-189/
- 5 https://www.smashingmagazine.com/smashing-newsletter-issue-188/
- 6 https://www.smashingmagazine.com/smashing-newsletter-issue-187/
- 7 https://www.smashingmagazine.com/smashing-newsletter-issue-186/
- 8 https://www.smashingmagazine.com/smashing-newsletter-issue-185/
- 9 https://www.smashingmagazine.com/smashing-newsletter-issue-183/
- 10 https://www.smashingmagazine.com/smashing-newsletter-issue-183/
- 11 https://www.smashingmagazine.com/smashing-newsletter-issue-182/
- 12 mailto:firstname.lastname@example.org
- 13 https://www.bloomberg.com/features/elon-musk-goals/
- 14 https://staging.smashingmagazine.com/
- 15 https://waaark.com/
- 16 http://hansbrinker.com/amsterdam/
- 17 https://magazine.polaroidoriginals.com/bringing-polaroid-originals-to-life/
- 18 https://magazine.polaroidoriginals.com/bringing-polaroid-originals-to-life/
- 19 http://dropbox.design/
- 20 #a1
- 21 #a2
- 22 #a3
- 23 #a4
- 24 #a5
- 25 #a6
- 26 #a7
- 27 #a8
- 28 #a9
- 29 #a10
- 30 #a11
- 31 #
- 32 https://medium.freecodecamp.org/the-ultimate-guide-to-flexbox-learning-through-examples-8c90248d4676
- 33 https://medium.freecodecamp.org/the-ultimate-guide-to-flexbox-learning-through-examples-8c90248d4676
- 34 #
- 35 https://mastersofscale.com/
- 36 https://mastersofscale.com/
- 37 #
- 38 https://inclusive-components.design/
- 39 https://inclusive-components.design/
- 40 https://a11ywins.tumblr.com/post/166008481313/dragon-drop-accessible-reordering-library
- 41 #
- 42 https://www.behance.net/gallery/57076225/ORAQLE-SCRIPT-FREE-FONT
- 43 https://www.behance.net/gallery/57076225/ORAQLE-SCRIPT-FREE-FONT
- 44 https://www.behance.net/gallery/8018673/ALEO-Free-Font-Family
- 45 #
- 46 https://slack.engineering/rebuilding-slack-com-b124c405c193
- 47 https://slack.engineering/rebuilding-slack-com-b124c405c193
- 48 #
- 49 http://v6.robweychert.com/blog/2017/10/robtober/
- 50 http://v6.robweychert.com/blog/2017/10/robtober/
- 51 https://en.aegeanair.com/milesandbonus/how-to-earn/all-airlines/#AEGEAN
- 52 #
- 53 https://palette.okaybueno.com/p/59ce422b3a5905064c32b753
- 54 https://palette.okaybueno.com/p/59ce422b3a5905064c32b753
- 55 #
- 56 https://www.inclusivedesign24.org/
- 57 https://www.inclusivedesign24.org/
- 58 #
- 59 http://jobs.smashingmagazine.com/
- 60 https://jobs.smashingmagazine.com/j/Back-end-Developer/2503655
- 61 https://jobs.smashingmagazine.com/j/WordPress-Developer-Support-Specialist/2503651
- 62 https://jobs.smashingmagazine.com/j/UX-Director-CNBC/2503649
- 63 #
- 64 https://www.smashingmagazine.com/2017/10/naming-things-css-grid-layout/
- 65 https://www.smashingmagazine.com/2017/10/functional-minimal-web-design/
- 66 https://www.smashingmagazine.com/2017/10/developer-non-disclosure-agreements/
- 67 #
- 68 https://www.smashingmagazine.com/2017/10/avoid-bias-ux-feedback/
- 69 https://www.smashingmagazine.com/2017/10/service-worker-single-page-application-wordpress-sites/
- 70 https://www.smashingmagazine.com/2017/10/large-scale-design-system-us-government/