January 23, 2024 Smashing Newsletter: Issue #440
This newsletter issue was sent out to 207,878 subscribers on Tuesday, January 23, 2024.
Editorial
Interface design matters. A well-functioning product will get people through their tasks, but if it’s also well-designed, people might stay with it for years to come. That’s also how we craft a compelling story and guide users through their flows. And: that’s also where interface design patterns come into play.
In today’s newsletter, we look at the interface design — from Gestalt principles and typographic hierarchy to iconography, writing systems, and animation. Happy exploring, everyone!
On our end, we are slowly rolling out new speakers, workshops and projects for 2024. As always, if you are looking for kind, passionate, and smart friends, we have wonderful SmashingConfs this year — with early-bird tickets and friendly bundles for teams.
- New Online Workshops on UX, design and front-end.
- Free Workshop: Designing Search UX In 2024 with Vitaly Friedman — Feb 29
- SmashingConf Freiburg 2024 🇩🇪 — The Web, Sep 9–11
- SmashingConf NYC 2024 🇺🇸 — Front-End/UX, Oct 7–10
- SmashingConf Antwerp 2024 🇧🇪 — Design/UX, Oct 28–31
Sending a lot of positive energy and peace your way, everyone — to you and to wonderful people around you.
— Vitaly
1. Guide To Animation In UX
Getting UI animation right can be a challenge. It needs to feel natural and be unobtrusive enough not to distract users from the task they want to perform. But how to achieve that? Taras Skytskyi wrote a practical guide to using animation in UX, covering all the rules and principles you need to be aware of to create delightful animation effects that, well, feel just right.
The guide explores animation duration and speed, easing, and choreography. You’ll learn to adapt your animation to different screen sizes and platforms, how to read animation curves, and how to guide your user’s attention when transitioning from one state to another. Taras doesn’t cover specific use cases but rather universal principles that you can apply to all kinds of interface animations. (cm)
2. Gestalt Principles In UI Design
The human brain is constantly trying to make sense of the things it perceives, connecting the dots and comparing previous experiences. Understanding how these mechanisms work can help you make better UI design decisions. That’s where Gestalt principles come in.
Developed by German psychologists in the 1920s, Gestalt (“form” or “shape” in German) defines a group of visual perception principles that explain how people perceive visual elements.
Eleana Gkogka wrote a detailed overview of Gestalt principles in which she not only explains each principle in detail but also explores how it applies in UI design. A great reminder that UI design isn’t all about pretty pixels and polished layouts but rather psychology and communication. (cm)
3. The Art Of Symbols
The dot, the pentagram, the Star of Venus, the Saint Hannes Cross. For more than 40,000 years, humans have used symbols to communicate complex ideas. And while some symbols are still widely understood today, others are more obscure. To learn more about the origin and meaning of ancient symbols, the team at brand strategy and design agency Emotive Brand created Art of Symbols.
Art of Symbols explains 100 symbols from the history of humanity. But not only that. It also renders them in a new way to breathe fresh life into the ancient shapes and reflect on their core ideas. The project is a wonderful encyclopedia of symbology and a great example of how a simple symbol and creative decision-making can create a powerful design. (cm)
4. Typographic Hierarchy
Typographic hierarchy helps users find the things they need more quickly. So what’s the key to creating a visual hierarchy that guides a user’s view and attention purposefully? Oliver Schöndorfer shares practical tips for establishing typographic hierarchy with contrast and space.
As Oliver explains, contrast can be achieved in several ways, with weight being the most striking one. The second cornerstone to creating a visual hierarchy is space, meaning that you reduce space when elements belong together. To help you get typographic hierarchy right in your next project, Oliver also compiled a five-step roadmap you can follow along. (cm)
5. Upcoming Workshops and Conferences
That’s right! We run online workshops on frontend and design, be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.
As always, here’s a quick overview:
- UX Strategy Masterclass UX
with Vitaly Friedman. Jan 23 – Feb 6 - Live Interface Design UX Training 🍣 UX
with Vitaly Friedman. Mar 8 – Apr 5 - Resilient & Maintainable CSS Dev
with Miriam Suzanne. Feb 26 – Mar 12 - Scalable CSS Masterclass Dev
with Andy Bell. May 9–23 - Smart Interface Design Patterns Video Course UX
10h-video + Live UX Training with Vitaly Friedman - Jump to all workshops →
6. The World’s Writing Systems
Did you know that 131 of the 293 writing systems we know of today aren’t encoded in the Unicode standard and thus can’t be used on a computer? The World’s Writing Systems is the first step of an initiative to identify them — and an exciting journey through the history of writing systems and the remote corners of typography.
From historic scripts like Egyptian hieroglyphs to writing systems that have developed in the last few years, such as Luo in Africa or Badaga in South Asia, the site showcases writing systems throughout history. It presents one glyph for each writing system and also features details on whether the system is already encoded in Unicode. Fascinating! (cm)
7. Complete Guide To Iconography
Icons are mighty little helpers. They can be quickly understood, are language-independent, and don’t take up much space in a design. If you’ve always wanted to create your own icon set or need to design icons for an upcoming project, Bonnie Kate Wolf wrote a complete guide to iconography.
The guide takes you step-by-step through the process of building icons, aligning them with your brand, and integrating them into your design system. You’ll dive deep into the basic elements of icons, explore design considerations, and also learn more about using boolean operations and vector networks. Precious advice for design systems experts, illustrators, and product designers alike. (cm)
8. News From The Smashing Library 📚
Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been at the core of everything we do at Smashing.
In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. Have you checked them out already?
- Understanding Privacy by Heather Burns
- Touch Design for Mobile Interfaces by Steven Hoober
- Image Optimization by Addy Osmani
- Check out all books →
That’s All, Folks!
Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!
This newsletter issue was written and edited by Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.