See how your layout looks on any device with Visual Composer's Responsive Preview - The free Visual Composer Website Builder comes with a responsive preview tool, 10 templates, 50 elements, plus lots of features. Download here. - Sponsored
Week 34
Top design and frontend links this week.
Highlights of the week ↘
Stop using secondary navigation bars… maybe - There was a time when almost all sites had a secondary navigation bar showing the children and even… -
4 rules for intuitive UX - This is my advice on improving the UX of your designs without hours of user research sessions, paper… -
Design ↘
UI cheat sheet: text fields - Apart from buttons, text fields are probably one of the most used user inputs. When you sign in… -
Everything I know about style guides, design systems, and component libraries - For the better part of the last year, I've been investing heavily in front-end development and design. When… -
Manage UI component lifecycle in single file - The next big thing after having mature & well-implemented Design System is how to manage it easily. Design… -
The 3-click rule for navigation is false - While it is important to keep key information easily accessible, the 3-click rule is an arbitrary rule of… -
Reducing the number of interactions isn’t important - My technical partner and I were set on designing the best time picker component ever. We were building… -
Development ↘
Responsive design ground rules - Creating a responsive design can be intimidating. There are many moving parts, things might lay out in ways… -
The differing perspectives on CSS-in-JS - Some people outright hate the idea of CSS-in-JS. Just that name is offensive. Hard no. Styling doesn't belong… -
Minify your SVGs - How I optimize SVGs for this blog and why you probably should, too. I use a lot of… -
All the new ES2019 tips and tricks - The ECMAScript standard has been updated yet again with the addition of new features in ES2019. Now officially… -
Under-engineered toggles too - In my post Under-Engineered Toggles I showed you how to take a standard checkbox and use some CSS… -
Tools and resources ↘
Responsify - A Figma plugin to quickly test your designs across multiple device sizes. 1. Select any frame, component, or… -
Inspiration and creativity ↘
How we keep brand consistency in our visual language — a design system for illustrations - Imagine: you create illustrations to be a part of a company’s branding. You define a style, give it… -
Dieter Rams designed one of Gillette’s most successful razors - Dieter Rams is best known for the products he created at Braun. Search his name on Google images,… -
Refactoring UI: Transistor - For this edition of Refactoring UI, we take a look at Transistors's integration page, sharing lots of tips… -
My story as a WordPress Builder user… and a surprising discovery - I usually don’t bother to write reviews about 2 or 3 star-rated products unless there seems to be… - Sponsored
Self development ↘
Work Responsibly: A collection of resources for a healthy and balanced approach to work - Opening up a conversation about the benefits of having a balanced, mindful and more responsible approach to work.… -
Last but not least ↘
Why a cookie-cutter design system won’t work for your organization - Linzi Berry, Product Design Systems Manager at Lyft, shares the story and core principles of their design system.… -
Subscribe to the newsletter
Design and frontend links delivered to your inbox every day or week. No spam, unsubscribe at anytime.