#440: Interface Design

Design better animations, typography, icons and use Gestalt principles in product design. Issue #440 • Jan 23, 2024 • [View in the browser]( [Smashing Newsletter]( Konbanwa Smashing Friends, Interface design matters. A well-functioning product will get people through their tasks, but 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. Andd: 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! [SmashingConf Freiburg]( [SmashingConf Freiburg]( [SmashingConfs 2024]( our schedule for 2024, and we’d be absolutely delighted to welcome you! [Jump to all photos]( (by Marc Thiele). 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 ultimate guide to proper use of animation in UX]( 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. [Gestalt Principles In UI Design]( 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]( 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) --------------------------------------------------------------- From our sponsor Make Better Use Of Data With Datacamp [DataCamp]( DataCamp helps individual learners make better use of data. Build data skills online while learning from the world’s top data scientists. Help close the talent gap with [DataCamp](. --------------------------------------------------------------- 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. [Typographic Hierarchy]( As Oliver explains, contrast can be achieved in several ways, with weight being the most striking one. The second cornerstone to creating 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. [Smashing Online Workshops]( With [online workshops]( we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are. 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. [The World’s Writing Systems]( 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) --------------------------------------------------------------- From our sponsor Explore Thousands Of Hands-on Creative Classes With Skillshare [Skillshare]( From creative arts to business and technology, Skillshare has something for everyone. If you're looking to learn something new or enhance your existing skills, [explore the Skillshare platform today]( and start your own learning journey. --------------------------------------------------------------- 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](. [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 →]( [Success At Scale]( … and we’re currently working on a new book: [Success At Scale]( shipping in February. [Pre-order your copy]( or [browse the complete library](. --------------------------------------------------------------- 9. Recent Smashing Articles - [The Complex But Awesome CSS border-image Property]( - [Top Front-End Tools Of 2023]( - [SolidStart: A Different Breed Of Meta-Framework]( - [The View Transitions API And Delightful UI Animations (Part 2)]( --------------------------------------------------------------- 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 Cosima Mielke (cm), Vitaly Friedman (vf) and Iris LjeÅ¡njanin (il). Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( • [Join us on Facebook]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](