Our products become slower, clunkier and more painful to use — often simply unbearable for keyboard- and screen reader users, and as such fragile and vulnerable for legal disputes. Let’s fix it. IToday, we bring you Heydon Pickering’s new book Inclusive Components, which explores more accessible and robust solutions for the UI patterns we author, plug in, and use every day. Jump to table of contents or pre-order the book right away.Read more…
Short-living trends don’t matter much, but the way we design and build things for the web does. That’s why we created Smashing Magazine Print, our brand-new printed magazine, with practical and thought-provoking articles, written to make us all think. Download a free PDF sample (3 MB) or jump to table of contents. Also, free for Smashing Members.
Read more…
The web is more than predictable compositions of rectangles, circles and triangles. With CSS Grid Layout, CSS Shapes and a bit of art direction we can achieve remarkable results — we just need a front-end strategy how to get there. That’s why we created “Art Direction for the Web,” a new Smashing Book for breaking out of generic experiences on the web. Now we can study the once uncharted territory of layout, type treatment and composition that print designers have skillfully and meticulously conquered, and explore which lessons from print we could bring to our web experiences today.
Read more…
Last year, Rachel Andrew wrote “Take A New Look At CSS Shapes” where she reintroduced readers to the basics of using CSS Shapes. In this new tutorial, Andy Clarke expands on the topic of “Art Direction for the Web” with CSS Shapes to create exciting and inspired new design ideas. Andy is going to show you how to use CSS Shapes to create the following five different types of layout: v-shapes, z-patterns, curved shapes, diagonal shapes, and rotated shapes.
Read more…
Art direction has been part of advertising and print design for over 100 years, but on the web art direction is rare and there have been few meaningful conversations about it. Art Direction for the Web by Andy Clarke changes that and explains art direction, what it means, why it matters, and who can do it. Jump to table of contents or pre-order the book right away. This is a book about why art direction matters and how you can art-direct compelling and effective experiences across devices and platforms.
Read more…
Forms are at the center of every meaningful interaction, so they’re worth getting a firm handle on. That’s why we published Form Design Patterns, a new printed book about accessible and well-designed web forms. With the new Form Design Patterns book, you will go through common real-world problems step by step, and learn how to design simple, robust, lightweight, responsive, accessible, progressively enhanced, interoperable and intuitive forms that let users get stuff done no matter what. And by the end of the book you’ll have a close-to exhaustive list of components delivered as a design system that you can use immediately in your own projects. Jump to table of contents or get the book right away.
Read more…
We’re happy to announce Adam Silver’s new book Form Design Patterns. In this excerpt from the book, Adam takes a look at the foundational qualities of a well-designed form and how to think about them.
Read more…
Smashing Book 6 is now shipping worldwide. With everything from design systems to accessible single-page apps, CSS Custom Properties, CSS Grid, service workers, performance patterns, AR/VR/XR, conversational UIs and responsive art direction. Check table of contents and get the book now.Read more…
Images are powerful. They can provide key information and context to articles, or merely add humorous asides. They do anything for us that plain text just can’t by itself. But when there’s too much imagery, it can be frustrating for users on slow connections, or run afoul of data plan allowances. In this eBook, you’ll learn all about WebP: what it’s capable of, how it performs, how to convert images to the format in a variety of ways, and most importantly, how to use it. Meet “The WebP Manual,” our latest edition to the Smashing eBook Library that covers everything you need to know about the latest image format to sweep the web!
Read more…
In times when everything is generic, how do we stand out without spending too much time and resources on elaborate art direction? Let’s explore a strategic guide for bringing back personality to the web, in regular real-life projects.
Read more…
