116 articles by Vitaly Friedman.
UX checklists with best design practices, accessibility guidelines, design system checklist, tables UX checklist, UX research methods, form design UX and flowcharts.
Meet “Understanding Privacy”, our upcoming book on what data privacy is really about beyond scary headlines. Approx. 350 pages. eBook available in October, print shipping in early December.
Error messages need to be easy to spot, but they also need to be helpful. Let’s explore when error messages should live above input fields and why toast error messages are usually not a very good idea.
With the “Back” button, users often get confused and frustrated. How to design a better back button UX and where to put those “Back” buttons in our interfaces.
Nobody wakes up in the morning hoping to finally identify crosswalks and fire hydrants that day. Yet every day, we prompt users through hoops and loops to sign up and log in. Let’s fix that. Authentication is everywhere, and sometimes it’s extremely frustrating, and sometimes it’s seamless. Let’s explore a few patterns to create experience that are a bit more seamless than frustrating.
Pricing pages can be complex and confusing. Let
Do you feel stuck in your company? Do you believe you deserve a raise but it never happens? Do you think you might need to quit the job? Every single person has their own goals and ambitions, and too often, our individual goals are left far behind the company’s goals and product development roadmaps. Let’s figure it out. In this article, Vitaly looks at some things he wishes he’d known earlier in
How difficult can it be to design a bulletproof language selector? It’s not as straightforward as one might think. We need to avoid redirects, decouple our language and country presets, allow for overrides, and use non-modal windows. Can we fix it? Absolutely! We just need to decouple presets, allow for overrides and allow users to specify their intent.
We should be able to measure how well a particular design solves a particular problem. Let’s explore design KPIs that capture user’s experience, how to measure them and how to keep both users and business stakeholders happy, over time. In this [series of articles](https://www.smashingmagazine.com/category/design-patterns/), we highlight design patterns and techniques to design better interfaces. Y
There are a few navigation patterns that are often forgotten or dismissed. We can think of them as navigation shortcuts, helping users get where they want to go, faster — without having to use traditional navigation at all. As it turns out, sometimes they are much more effective, especially on large sites with thousands of pages, many of which have been gathering dust over the years. In UX, we can
Carousels have plenty of accessibility issues, they often exhibit low click-through rates, can be very disruptive when auto-advancing and people frequently scroll past through them. In this series of articles, we highlight design patterns and techniques to design better interfaces. You can find more examples in “Smart Interface Design Patterns”, a 10h-video course with 100s of hand-picked examples
Breadcrumbs UX are often neglected, but they can be extremely helpful when designing a complex navigation. We can improve them with sideways navigation, clearer breadcrumbs paths and accordions on mobile.
You need to help customers explore relevant entries, and to do so, you need to support and speed up browsing through entries. Infinite scroll can be designed well. Best practices and guidelines to improve the UX of infinite scroll with bookmarks, footer reveal and pagination.
Good interface design shows the right things at the right moment. We need to understand when to display a call to action, and how to build a relationship with the user before promting them to act.
As a design community, we all can’t be silent in these times. We need to be united in our fight against the war, for democracy, for those dreams that children are entitled to have when they are growing up. It’s our obligation to help as much as we can. **We are donating all proceeds** of the “[Interface Design Checklists PDF](https://www.smashingmagazine.com/printed-books/checklist-cards/)” to sup
It’s shipping! Meet “Touch Design for Mobile Interfaces”, our brand-new guide with guidelines and best practices to improve usability and accessibility on mobile. 400 pages. For designers and developers working with mobile UIs. Jump to details and get the book right away.
Meet “Touch Design for Mobile Interfaces”, our brand-new guide on designing for mobile with proven, universal, human-centric standards. 400 pages. Shipping starting in mid-January 2022. Jump to details and get the book right away.
You’ve seen them before. Confusing and frustrating design patterns that seem to be chasing you everywhere you go, from one website to another. It’s time to fix them for good in a [free Smashing online workshop](https://smashingconf.com/online-workshops/workshops/frustrating-design-patterns/) next week. Today, Vitaly Friedman will take a look into carousels, modals, infinite scroll, parallax and sc
We love little useful tools and techniques to help folks get their work done better and faster. Today, we’d love to shine the spotlights on a little helper that helps spot common performance bottlenecks easily: [ct.css](https://csswizardry.com/ct/).
How can we make disabled buttons more inclusive? When do they work well, and when do they fail on us? And finally, when do we actually need them, and how can we avoid them? In this article, Vitaly Friedman will take a look to common usability issues with disabled buttons, how to fix these issues and when disabling buttons actually makes sense. We’ll start from the beginning, looking into when disa
Too often the filtering experience on the web is broken and frustrating, making it just unnecessarily difficult for customers to get to that shiny comfortable range of relevant results. When designing the next filter, take a look at some of the common issues that you might want to avoid, and hopefully avoid all the frustration that comes from broken and inaccessible implementations.
It’s here! For the last year, we’ve been working with Addy Osmani on a new Smashing Book all around image optimization. And now it’s here. Meet “Image Optimization”, our deep-dive guide to understand how to deliver high-quality images on the web fast. 528 pages. From formats and compression to delivery and maintenance. Get the book right away!
With such a complex multi-level navigation, showing the breadth of options requires quite a bit of space. Think of large eCommerce retailers and large corporate sites, catering to many audiences and having plenty of entry points. Do we need mega-dropdown hover menus in 2021? Probably not. Let’s explore things to keep in mind when designing and building a mega-dropdown, alternatives to hover menus
They are everywhere. Confusing and frustrating design patterns that seem to be chasing you everywhere you go, from one website to another. Perhaps it’s a disabled submit button that never communicates what’s actually wrong, or tooltips that — once opened — cover the input field just when you need to correct a mistake. In this new series of articles on UX, we take a closer look at some frustrating
Over a decade ago, we set out to send a [truly smashing newsletter](https://www.smashingmagazine.com/the-smashing-newsletter/) with useful tips and techniques for designers and developers. The first issue was sent out in early 2009. Today marks the day we sent out our 300th edition of the Smashing Newsletter. This article is a little celebration in which we share little Smashing stories from peopl
The cat is out! For the last year, we’ve been working with Addy Osmani on a new Smashing Book all around image optimization. And now it’s here. Meet “Image Optimization”, our practical modern guide to delivering high-quality images on the web with the best performance. Image optimization, loading behavior and rendering in the browser require understanding of image formats and image compression tec
At Smashing, we’ve been busy over the last few months. We’ve set up new workshops, redesigned our navigation, refined performance and improved accessibility. There are subtle UX changes coming in, and we’d love to share what we’ve been cooking. A sincere thank you for your kind, ongoing support and generosity — thank you for being smashing, now and ever!
In a new short series of posts, we highlight some of the useful tools and techniques for developers and designers. Recently we’ve covered CSS generators, SVG generators and accessible front-end components. This time we look into templates and tools for building and designing HTML emails. Don
In a new series of posts, we highlight some of the useful tools and techniques for developers and designers. This time around, let’s look at vanilla JavaScript code snippets — resources and lightweight libraries to help you solve a problem without a large overhead or third-party dependencies.
In a new short series of posts, we highlight some of the useful tools and techniques for developers and designers. Recently we’ve covered CSS Auditing Tools and CSS Generators, and this time we look into reliable accessible components: from tabs and tables to toggles and tooltips. We sincerely hope that these tools and techniques will prove to be useful in your day-to-day work — and most important
Wondering what’s happenin’ at Smashing? Well, we’ve been busy. Here’s a little story of how we removed floating labels, improved performance on mobile, and launched a new series of articles. Oh, and how you can contribute to Smashing, too.
Meet our new workshops on front-end and UX — on web performance, interface design, psychology and modern CSS. With Lea Verou, Harry Roberts, Stephanie Eckles, Dan Mall and so many others. [Jump to all online workshops ↬](https://smashingconf.com/online-workshops/)
DevTools is very advanced and helpful, but can also be very intimidating and overwhelming. Let’s fix that. In this article, Vitaly reviews useful features and shortcuts for debugging in Chrome, Firefox, Edge and Safari.
In this article, we’ll take a close look at some of the changes we made on this very site — running on JAMStack with React — to optimize the web performance and improve the Core Web Vitals metrics. With some of the mistakes we’ve made, and some of the unexpected changes that helped boost all the metrics across the board. Hopefully, this little case-study will be useful to you, and perhaps there ar
Let’s make 2021... fast! An annual front-end performance checklist with everything you need to know to create fast experiences on the web today, from metrics to tooling and front-end techniques. Updated since 2016.
Let’s make 2021... fast! An annual front-end performance checklist with everything you need to know to create fast experiences on the web today, from metrics to tooling and front-end techniques. Updated since 2016.
Let’s make 2021... fast! An annual front-end performance checklist with everything you need to know to create fast experiences on the web today, from metrics to tooling and front-end techniques. Updated since 2016.
Let’s make 2021... fast! An annual front-end performance checklist with everything you need to know to create fast experiences on the web today, from metrics to tooling and front-end techniques. Updated since 2016.
Let’s make 2021... fast! An annual front-end performance checklist with everything you need to know to create fast experiences on the web today, from metrics to tooling and front-end techniques. Updated since 2016.
Let’s make 2021... fast! An annual front-end performance checklist with everything you need to know to create fast experiences on the web today, from metrics to tooling and front-end techniques. Updated since 2016.
Let’s make 2021... fast! An annual front-end performance checklist with everything you need to know to create fast experiences on the web today, from metrics to tooling and front-end techniques. Updated since 2016.
Let’s make 2021... fast! An annual front-end performance checklist with everything you need to know to create fast experiences on the web today, from metrics to tooling and front-end techniques. Updated since 2016.
Let’s make 2021... fast! An annual front-end performance checklist with everything you need to know to create fast experiences on the web today, from metrics to tooling and front-end techniques. Updated since 2016.
Let’s make 2021... fast! An annual front-end performance checklist, with everything you need to know to create fast experiences on the web today, from metrics to tooling and CSS/JavaScript techniques.
Do you like building relationships and exploring creative options? At Smashing, we are looking for a team member who’ll take good care of advertising and sponsorships across the range of everything we do at Smashing — from the magazine to our conferences. Interested? We’d love you to join us.
Meet our new practical guide on everything you need to know about TypeScript, its type system, and all its benefits in 50 lessons. Jump to table of contents and get the book right away.
Many companies had to struggle in one way or another in the last couple of months. We had to get creative, and we had to rethink our conferences and workshops altogether. In this article, CEO and co-founder Vitaly Friedman shares how Smashing runs online workshops and online conferences these days, and the lessons learned along the way.
We’re running a lil’ giveaway among our dear Smashing newsletter subscribers, and if you subscribe, you join in the raffle, too! With online workshop tickets, books and an entire collection of 100 Smashing cats in SVG format! We’ll announce the winners in the upcoming issue on Oct. 27, 2020. Meow, join in and good luck!
Meet our new book, “TypeScript in 50 Lessons”, a deep-dive to understand what TypeScript is, how it works, and how you can make it work for you. With code walkthroughs, hands-on examples and common gotchas. 464 pages. Jump to table of contents and get the book right away.
Meet our Smart Interface Design Patterns Checklist Cards, a deck of 100 cards with questions to ask when designing and building any interface component — carousel, hamburger, table, date picker, autocomplete, slider, onboarding, pricing plans, authentication, web forms and many others. Check the preview (PDF) and jump to description ↓
We stand firmly behind the Black Lives Matter movement. We have always stood strongly behind introducing a wide range of voices to Smashing publications and conferences. Positive change is difficult, but it’s possible. It takes work, time, and dedication. We are fully committed as a team to see it through.
Whether we are designers, marketers, entrepreneurs, or product owners, we are all in the same boat. We want to give users a good experience, but we also need them to take action. Meet “Click!”, our new practical guide on how to build trust, increase conversion and boost business KPIs effectively — without alienating people along the way. Written by Paul Boag. Jump to table of contents and get the
How, then, do we encourage users to act? By establishing trust with small commitments, at the right time, and in the right order. Click! explains how to do just that. Meet our new practical guide on how to build trust, increase conversion and boost business KPIs effectively — without alienating people along the way. Written by Paul Boag. Coming up in June. Jump to table of contents and get the boo
The cat is out of the bag! Meet SmashingConf Live (Aug 20–21), our very first online conference. For SmashingConf Live, our new online conference, we don’t want to replicate in-person experiences online. Instead, we’ve designed an entirely new conference experience, focusing around interactive live sessions and discussion zones where you actively shape what happens next, and learn along the way.
It
We need to craft better digital products that respect customer’s choices without hurting business KPIs. And we need to do so by taming data collection and abandoning dark patterns, from hidden checkboxes to ambiguous copywriting. Today, Vitaly Friedman brings you our new practical guide on how to influence a positive change in your company and help your business grow sustainably. Without dark patt