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.
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
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)
Our sponsor: Project Management Is Better When It's Visual
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 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)
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.
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.
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)
Our sponsor: Online Masters in Information Design and Strategy
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.
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)
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
No comments:
Post a Comment