Smashing Magazine - #369: Interface Design & UX

Free UX handbooks, constructive feedback, UX checklists, interpolation in color schemes, copywriting and UX podcasts. Issue #369 September 6, 2022 View in the browser 💨

Smashing Newsletter

Salut Smashing Friends,

Over the last few years, I’ve acquired a slightly strange but helpful habit. I question absolutely every single design decision, and try to find a purpose and intent that it drives. Why do we display error messages under text boxes? Do we really need to use a mega-menu at all? Have we measured just how reliable is our inline validation is in the first place?

Boosting UX With Design KPIs

In the past, I would often jump into design with both feet, experimenting with ideas on a busy canvas, with plenty of moodboards and semi-finished mock-ups all over the place. These days I spend a lot of time in a text editor first. We think and establish design KPIs, accessible color schemes, font budgets, performance goals and carbon footprint emission targets before a single pixel is drawn on the screen.

And I love relying on wonderful UX tools and resources that help me drive the right decisions confidently. That’s what this newsletter is all about — some useful UX gems that hopefully will help you in your work as well.

If you want to dive a bit deeper, there are still a few spots left for the Live Interface Design Patterns UX Training, a 4-weeks-long online UX training on complex UX challenges, and how to deal with them confidently. I can’t wait to see you there!

Greetings from the SmashingConf Freiburg,
— Vitaly (@vitalyf)

1. Color Scale Interpolation

Imagine you want to visualize data on a choropleth map. Let’s say the unemployment rate in US counties. Interpolation plays an important role when doing so. The method assigns each of your data values to a certain color and heavily influences how the data is perceived and how well your statement is communicated. But how to get interpolation right? Lisa Charlotte Muth summarized everything you need to know.

How to choose an interpolation for your color scale

Depending on the interpolation you choose, your data will get segmented into differently-sized parts and the values will get colored differently. Lisa explores the effect that different interpolation has on your data visualization and gives tips for when to use which.

For example, which one is best suited for data with fairly even distributions? And how to deal with distributions that have extreme outliers? Practical tips for finding the balance between drawing attention to the facts you want to draw attention to and showing the data in a way that represents its actual distribution. (cm)

2. Meet "Understanding Privacy", A New Smashing Book

Data privacy often seems like a scary topic. And, well, in fact, over time, it has become challenging to master the balance between collecting data to enhance the experience for users and staying transparent, ethical, and fair. But how to make sure that your approach to data doesn't cause any harm? In our upcoming book Understanding Privacy, Heather Burns brings clarity to the subject.

Understanding Privacy

Understanding Privacy is by no means a legal reference manual but a deep dive into the concepts and ideas that inform privacy on the open web. Heather teaches you the principles behind the collection, storage, and use of personal data and how you can adopt them to create a healthy, user-centric approach to privacy in everything you do. By the end of the book, you will have shifted your understanding from a negative view of privacy as a scary legal compliance obligation to a positive view of privacy as an opportunity to build a better web. Jump to the details and pre-order the book now.

3. The Power Of Words

Words are powerful. And with that power comes great responsibility. Language, Please is a great initiative to help copy editors, writers, storytellers, journalists, and everyone else stay on top of current language debates and make thoughtful wording decisions when covering social, cultural, and identity-related topics.

Language, Please

At the heart of Language, Please is a searchable list with hundreds of terms spanning six categories with detailed definitions, related terms, and additional resources: borders and populations; class and social standing; disabilities, neurodiversity, and chronic illness; gender and sexuality; mental health, trauma, and substance use; and race and ethnicity.

The site also features a directory of independent inclusivity readers who can be hired to assist with your project and a set of reference tools and interactive exercises to spark conversations and thoughtful decision-making around story-framing and language usage.

Looking for more writing advice? The Writer’s Room blog offers helpful tips for content designers and writers, as well as an interesting look at the current state of AI-generated content. (cm)

4. Guide To Color And Contrast

Do you know how the human eye works? How people with dichromacy see the world around them? Or have you ever heard of the Bezold effect or what lateral inhibition is all about? If not, no worries. Nate Baldwin’s guide Color & Contrast will take you on an interesting journey through the world of color, how we perceive it, and how the before-mentioned effects (and many more!) affect how users experience the interfaces you built.

Color And Contrast

In his guide, Nate breaks down scientific, theoretical, and practical information into small, comprehensive bits with actionable insight. From the physiology of the eye, color vision, sensory adaptations, and visual impairments, all the way to color appearance phenomena, color models, color scales for UI and data visualization, and much more, the guide equips you with the knowledge you need to make educated decisions about color and contrast. Each topic cross-references related topics for deeper learning if you want to learn more. An in-depth, yet easy-to-digest, guide. (cm)

From our sponsor

Managing Projects Doesn’t Have To Be A Mess

Managing Projects Doesn’t Have To Be A Mess
Basecamp helps teams organize projects in a way that makes sense for all. Stop guessing where files are or when discussions happened. Try Basecamp.

5. Accessibility For Teams

Accessibility goes far beyond the code, so when it comes to delivering accessible websites, each person in a team has their specific responsibilities. If you feel that your team hasn’t found the right strategy to tackle accessibility yet, Peter van Grieken’s guide “Accessibility for teams” has got your back.

Introduction to the chapter “Accessibility for UX Designers” from the guide, along with a short summary of the chapter and an illustration of a person working on wireframes.

The guide consists of six parts, with each one of them aimed at the different specialists in your team: product managers, content designers, UX and UI designers, and front-end developers, plus a guide on accessibility testing. A great resource that helps incorporate accessibility into your team’s workflow from the ground up. (cm)

6. Upcoming Online Workshops

That’s right! We run online workshops on frontend and design, be it accessibility, performance, navigation, or landing pages. 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 Events
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 an overview of our upcoming workshops:

7. Feedback In UX

Giving and receiving feedback is a crucial part in the field of UX. It helps get to a good outcome and improves trust in a team. However, it can also be hard — and scary. What if my colleague gets offended by my feedback? What if my colleagues don’t like my work? What am I supposed to say if I don’t agree with the feedback? Concerns like these are legitimate. And while each person and situation is unique, there are some things we can keep in mind to get the most out of feedback — whether we give or receive it.

Giving, seeking, and receiving feedback in UX

Meltem Barcelona wrote a helpful checklist to help us navigate the muddy waters of feedback in UX. She shares valuable tips for how we can try to understand the other person better and how to adjust our communication style to them, how to give space to make the engagement more successful, and, finally, what we can do if we notice that feedback as a method doesn’t work particularly well. A must-read — not only for UX professionals. (cm)

8. Free UX Handbooks

What practices power the world’s best design teams? DesignBetter by InVision published 10 free eBooks that share valuable insights into how successful teams work — and how you can apply that knowledge to your workflow, too.

DesignBetter Books

The books help you bring design and development closer together, share tips to get the best out of a design sprint, guide you through planning and implementing a design system, look into strategies to communicate with business partners, and much more. All of them are available in ePUB, PDF, and audiobook formats. Happy reading! (cm)

From our sponsor

Scalable Design Systems With StencilJS

Build your components and design systems and support the wide ecosystem of frontend technologies and frameworks, all with StencilJS. Using Stencil you can ship a collection of Web Components that can support whatever frameworks your teams are using. Get started and build your Design System today.

9. UI And UX Checklists

Good checklists are worth gold. Even in complex design projects, they help you keep track of the things that matter while keeping your head free for creativity and problem-solving. When George Hatzis went from project to project a few years ago, he noticed that he was constantly missing fundamental parts of the experience, so he started to write down the critical pieces of a screen he knew would come up again. As he went along, he could tick each item off without needing to go back to fix the things he missed in the first phase of work.

Checklist Design

As time went by, George’s collection of checklists grew, and, well, he decided to share them with the community so fellow designers and developers could benefit from them, too. That’s when Checklist Design was born. The site features George’s checklists with UI and UX best practices for all the typical elements you have on standard SaaS pages. You can check and uncheck the items right in your browser, and George even included resources for inspiration, further reading, and examples to dig deeper into each topic. One for the bookmarks. (cm)

10. Podcasts For UI And UX Designers

Podcasts are perfect for gaining fresh insights and giving your knowledge a little boost. But which podcasts are worth tuning into? To help you stay up to date on what’s happening in the world of UX, Camren Browne compiled a list of eleven outstanding podcasts for UX and UI designers.

11 Outstanding Podcasts for UX/UI Designers

Whether it’s interview podcasts with industry experts from large organizations, inspiring stories from Black designers and developers from all over the world, the latest graphic design news, or tips for launching your own business ventures, the podcasts in the collection are all bound to broaden your horizons and fine-tune your practices. And if that’s not enough choice for you yet, we are regularly publishing a new episode of our very own Smashing Podcast with interviews with guests from the web community. Just sayin’. ;-) (cm)

From our sponsor

Northwestern’s Online MS in Information Design and Strategy

Northwestern’s Online MS in Information Design and Strategy
Prepare for a range of dynamic communication roles and build the skills needed to lead communication strategy, translate complex data, and drive user interactions. Choose from specializations in content strategy, UX/UI, communication with data, and learning design. Learn more.

12. New On Smashing Job Board

12. Recent Smashing Articles

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

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

#368: JavaScript

Tuesday, August 30, 2022

JavaScript techniques, libraries and case studies: from building a design system with React to JavaScript visualized. Issue #368• August 30, 2022 • View in the browser 💨 Smashing Newsletter Salut

#367: Front-End Helpers

Tuesday, August 23, 2022

Little helpers for JavaScript and CSS, with a few tools for HTML email workflow and interactive timelines.Issue #367• August 23, 2022 • View in the browser 💨 Smashing Newsletter Yasou Smashing Friends,

#366: Fearless Salary Negotiation and Job Interviews

Tuesday, August 16, 2022

Better salary negotiations, job interviews, company culture and software engineering skills. Issue #366 • August 16, 2022 • View in the browser 💨 Smashing Newsletter Yasou Smashing Friends, Producing

NL #365: Design Systems

Tuesday, August 9, 2022

On motion and accessibility in design systems, naming conventions, and design systems in enterprise settings. Issue #365• August 9, 2022 • View in the browser 💨 Smashing Newsletter Howdy Smashing

#364: Design and UX

Tuesday, August 2, 2022

With UX encyclopedia, authentication UX, data visualization, accessibility, and an exquisite look in Leonardo da Vinci's work. Issue #364• August 2, 2022 • View in the browser 💨 Smashing Newsletter

AI and Design, Grid Areas, FigStats, ChatGPT, Payments UX

Tuesday, February 7, 2023

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar February 7 2023 Combining AI and Design: A Step-by-Step Guide

Game On! 23 Glorious Game Rooms From the AD Archive

Monday, February 6, 2023

Plus, The Future Perfect spotlights contemporary Korean design & more news View in your browser | Update your preferences Architectural Digest AD PRO Logo moon jars on a shelf THE FUTURE PERFECT

🏡 Flawless Smart Home Mobile Apps + 🏆 Challenge Updates

Monday, February 6, 2023

Your UpLabs Design Fix Is Here 🙌 First and foremost, we want to congratulate RH Agency, the winner of our latest 📑 Asana Redesign Challenge! Congrats! Secondly, the end of January has brought us an

Accessibility Weekly #330: Modern Health, Frameworks, Performance, and Harm

Monday, February 6, 2023

Sponsored by Automattic. They're hiring. February 6, 2023 • Issue #330 View this issue online or browse the full issue archive. Featured: Modern Health, frameworks, performance, and harm “A person

Latest stories

Monday, February 6, 2023

Submit Story Techcopes – The best free online SEO tools you will ever need Unlock the Full Potential of Your Youtube Channel with These Must-Have Free Online SEO Tools and more Find used fonts on any

Netflix Users, color-mix(), Poline, WhatsApp, TresJS

Monday, February 6, 2023

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar February 6 2023 The users Netflix forgot about

Pondering the future of web interactions

Sunday, February 5, 2023

Issue 129: If the internet was designed today, what would it feel like? ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

Latest stories

Sunday, February 5, 2023

Submit Story ColorMagic – Generate ideal color palettes with the power of AI ColorMagic is a color palette generator with GPT-3 AI. Just enter a color mood or image in text to generate a ready-to-use

Latest stories

Saturday, February 4, 2023

Submit Story UX Podcasts For Designers Podcasts are a fantastic opportunity to get up close with the people who know their craft. In this post, we compiled podcasts that are bound to provide valuable

Color Toilets and Sinks—Fixtures of Midcentury, Kitschy Interiors—Are Chic Now

Friday, February 3, 2023

Plus, a "Westworld" house goes on the market + more real estate news View in your browser | Update your preferences Architectural Digest AD PRO Logo A WESTWORLD HOUSE GOES ON THE MARKET,