Smashing Magazine


Smashing Magazine is focused on designing and building websites. We present most valuable techniques, ideas and resources for Web designers — articles written by...





4.2 items/week

Building A Component Library Using Figma

I’ve been working on the creation and maintenance of the main library of our design system, Lexicon. We used the Sketch app for the first year and then we moved to Figma where the library management was different in certain aspects, making the change quite challenging for us. To be honest, as with any library construction, it requires time, effort, and planning, but it is worth the effort becau...

Monthly Web Development Update 6/2019: Rethinking Privacy And User Engagement

Last week I read about the web turning into a dark forest. This made me think, and I’m convinced that there’s hope in the dark forest. Let’s stay positive about how we can contribute to making the web a better place and stick to the principle that each one of us is able to make an impact with small actions. Whether it’s you adding Webmentions, removing tracking scripts from a website, recycling...

Inspired Design Decisions: Avaunt Magazine

I hate to admit it, but five or six years ago my interest in web design started to wane. Of course, owning a business meant I had to keep working, but staying motivated and offering my best thinking to clients became a daily struggle. Looking at the web didn’t improve my motivation. Web design had stagnated, predictability had replaced creativity, and ideas seemed less important than data. The ...

Bringing A Healthy Code Review Mindset To Your Team

A ‘code review’ is a moment in the development process in which you (as a developer) and your colleagues work together and look for bugs within a recent piece of code before it gets released. In such a moment, you can be either the code author or one of the reviewers. When doing a code review, you might not be sure of what you are looking for. On the other side, when submitting a code review, y...

UX Optimizations For Keyboard-Only And Assistive Technology Users

(This is a sponsored article.) One of the cool things about accessibility is that it forces you to see and think about your application beyond the typical sighted, mouse-based user experience. Users who navigate via keyboard only (KO) and/or assistive technology (AT) are heavily dependent not only on your application’s information architecture being thoughtful, but the affordances your applicat...

Styling In Modern Web Apps

If you search for how to style apps for the web, you’ll come across many different approaches and libraries, some even changing day by day. Block Element Modifier (BEM); preprocessors such as Less and SCSS; CSS-in-JS libraries, including JSS and styled-components; and, lately, design systems. You come across all of these in articles and blogs, tutorials and talks, and — of course — debates on T...

Web Accessibility In Context

Haben Girma, disability rights advocate and Harvard Law’s first deafblind graduate, made the following statement in her keynote address at the AccessU digital accessibility conference last month: “I define disability as an opportunity for innovation.” She charmed and impressed the audience, telling us about learning sign language by touch, learning to surf, and about the keyboard-to-braille com...

Image Optimization In WordPress

A slow website is everyone’s concern. Not only that it chases visitors away but it also affects your SEO. So trying to keep it ‘in shape’ is definitely one of the main items to tick when you run a business or even a personal site. There are many ways to speed up your WordPress site, each one complementing the other. There is not a universal method. Improving your site speed is actually the sum ...

How To Start Using Sketch And Framer X

When it comes to showing the transition, interaction and animation of elements in the user interface, a prototyping tool like Framer X can make a difference in the way you communicate your vision to the team and stakeholders and as a result, boost your efficiency as a designer. With the following example, I will illustrate how you can add interaction to static designs. To profit the most from t...

Increase Customer Centricity With Workshops

Workshops are interactive group activities and exercises cohesively designed to meet a goal. Generally, workshops are in-person with a facilitator guiding participants. They take people out of their normal day-to-day environment and laser focus them on the task at hand. In this distraction-free zone, what normally takes weeks or months to accomplish takes just a few days. You can harness this e...

When Do We Need A Design System? An Interview With Brad Frost

Design systems have been around for quite some time. We’ve even published a book on design systems, yet just as they can be difficult to maintain, how do we know when we actually need one in the first place? Design systems are a wonderful yet intricate tool. They provide us with a solid ground to stand on as we tackle the increasingly diverse and fast-moving digital landscape. However, like mos...

Inspiring Wallpapers For A Colorful June (2019 Edition)

No matter if June means the beginning of summer for you, that monsoon season is here, or that winter is just around the corner, our new wallpapers are bound to sweeten the beginning of the month with some fresh inspiration. Created by artists and designers from across the globe, the designs featured in this collection are part of our wallpaper series which has been going on for more than nine y...

Creating Your Own React Validation Library: The Developer Experience (Part 3)

If you’ve been following along this little article series, you’ve now learned how to put together your very own validation library. It can handle almost any challenge you can throw at it, and it even helps out with accessibility concerns! Its only downfall is that it sucks to work with. Yep, that’s right. The user experience from a developer point of view is seriously lacking. We don’t get any ...

Should Chatbots Replace Forms On Mobile?

I recently was on Jeff Bullas’ website when I encountered a pop-up promoting an ebook. Nothing about that seemed too out of the ordinary. However, what struck me as odd was that the CTA wasn’t an Email field and “Submit” button. Instead, it just had a blue “Send to Messenger” button. Jeff Bullas sends ebook leads to his Facebook Messenger chatbot. (Image source: Jeff Bullas) (Large preview) To ...

Tips For Managing Design Systems

(This is a sponsored article.) A design system enables a product team to create a product faster by making the design reusable. But quite often, despite everyone’s best intentions, all the effort that a product team puts into making a thoughtful design system can go straight down the drain. Nowadays, there’s no shortage of articles explaining what a design system is and how to create one. Howev...
© 2000-2019 ANNECA s.r.o., Klíšská 977/77, 400 01 Ústí nad Labem, Tel: +420 478571021, Email:, Twitter: @hreader