Every UI component, no matter if it’s an accordion, a hamburger navigation, a data table, or a carousel, brings along its unique challenges. Coming up with a new solution for every problem takes time, and often it’s really not necessary. We can rely on smart design patterns and usability tests, and ask the right questions ahead of time to avoid issues down the line. Meet "Smart Interface Design Checklists", with questions to ask when designing and building any interface component.

https://www.smashingmagazine.com/2020/08/checklist-cards-release/

Maybe it’s the whiff of someone’s perfume. Or a bite of pizza from a new restaurant. Or a song playing over the loudspeakers at the store. But the second it hits, you’re immediately transported to another place, time, or mood. Imagine if your website could evoke this kind of response. Visitors who respond to the sensory stimulation would instantly be in a more positive headspace, which they’d then associate with the site and your brand.

https://www.smashingmagazine.com/2020/08/design-website-five-senses/

Redux is an important library in the React ecosystem, and almost the default to use when working on React applications that involve state management. As such, the importance of knowing how it works cannot be overestimated. This guide will walk the reader through setting up Redux in a fairly complex React application and introduce the reader to “best practices” configuration along the way. It will be beneficial to beginners especially, and anyone who wants to fill in the gaps in their knowledge of Redux.

https://www.smashingmagazine.com/2020/08/redux-real-world-application/

Are you ready to push Sketch to its limits once again? As noted in the previous part, this tutorial is geared more towards experienced illustrators, but if you’re new to Sketch then you should also be able to profit from it since all of the steps are explained in great detail. After finished off the tail lights, let’s continue with the design of the car windows. 7. Rubber Seals Around The Windows In this step, we will add rubber seals around the windows.

https://www.smashingmagazine.com/2020/07/porsche-911-sketch-tutorial-part-2/

Everybody loves a beautiful wallpaper to freshen up their desktops and home screens, right? To cater for new and unique artworks on a regular basis, we started our monthly wallpapers challenge more than nine years ago, and from the early days on to today, artists and designers from all across the globe have accepted the challenge and submitted their designs to it. It wasn’t any different this time around, of course.

https://www.smashingmagazine.com/2020/07/desktop-wallpaper-calendars-august-2020/

The word Renaissance — which means “rebirth” in French — was given to a tremendous period of philosophical and artistic achievements that began in the 14th century. During this time, there were a wide range of developments, including: Use of oil paints, rather than tempera, which made the painting process easier. Use of fabric, rather than wooden boards, which reduced the expenses of painting. Translation of classical texts in architecture, anatomy, philosophy, and more, making knowledge more accessible to the general public.

https://www.smashingmagazine.com/2020/07/renaissance-no-code-web-designers/

According to State of JavaScript 2019, 38.7% of developers would like to use GraphQL, while 50.8% of developers would like to learn GraphQL. Being a query language, GraphQL simplifies the workflow of building a client application. It removes the complexity of managing API endpoints in client-side apps because it exposes a single HTTP endpoint to fetch the required data. Hence, it eliminates overfetching and underfetching of data, as in the case of REST.

https://www.smashingmagazine.com/2020/07/client-side-graphql-apollo-client-react-apps/

Along with advertising, selling is a skill that people often frown on. It’s true: no one likes someone coercing or misleading them, and nobody enjoys being interrupted. But being sold to well — by a salesperson who understands your aspirations, motivations, and needs — can be an experience that benefits buyers and sellers. Learning how to sell was one of the best things I did early on in my working life.

https://www.smashingmagazine.com/2020/07/inspired-design-decisions-emmett-mcbain/

Today, we’re asking if modern best practices are bad for the web? Are modern frameworks taking us down the wrong path? I speak to Lean Web expert Chris Ferdinandi to find out. Show Notes Chris’ page with links and notes for the podcast The Lean Web book Chris Ferdinandi on the web Chris on Twitter The Vanilla JavaScript Podcast Weekly Update “Translating Design Wireframes Into Accessible HTML/CSS”

https://www.smashingmagazine.com/2020/07/smashing-podcast-episode-21/

Creating a dashboard from scratch is often pretty complicated. You have to create tools to collect data on items of interest. Once collected this data has to be presented in an easy to understand and meaningful way to your users. It involves intricate planning of what data to include and how to display it effectively. Once you have a plan, implementing the design is a massive task especially since it involves building multiple components.

https://www.smashingmagazine.com/2020/07/responsive-dashboard-angular-material-ng2-charts-schematics/

If you’re both a petrolhead (a.k.a. a big car enthusiast) with a special place in your heart for the legendary Porsche 911, and also a fan of the powerful Sketch app, then this tutorial is for you. Today, we’ll be pushing Sketch to its limits — step by step. You will learn how to create a very realistic and detailed vector illustration of a vintage Porsche 911 using basic shapes, layer styles and Sketch features (such as “Rotate Copies” and “Symbols”).

https://www.smashingmagazine.com/2020/07/porsche-911-sketch-tutorial-part-1/

Styled components are a CSS-in-JS tool that bridges the gap between components and styling, offering numerous features to get you up and running in styling components in a functional and reusable way. In this article, you’ll learn the basics of styled components and how to properly apply them to your React applications. You should have worked on React previously before going through this tutorial. If you’re looking for various options in styling React components, you can check out our previous post on the subject.

https://www.smashingmagazine.com/2020/07/styled-components-react/

We can read in many ways, and there are many different types of readers, each with their own needs, skills, language, and, above all, habits. Reading a novel at home is different from reading it on the train, just as reading a newspaper is different from browsing its online version. Reading, like any other activity, requires practice for someone to become fast and efficient. Basically, we read better those things that we are used to reading the most.

https://www.smashingmagazine.com/2020/07/css-techniques-legibility/

JavaScript used to be known as the language for building websites and web applications especially with some of its frameworks such as React, Vue, and Angular but over time (as early as 2009), it became possible for JavaScript to run outside the browser with the emergence of Node.js, an open-source, cross-platform, JavaScript runtime environment that executes JavaScript code outside a web browser. This has led to the ability to use JavaScript for a whole lot more than just web applications, and one of which is building desktop applications using Electron.

https://www.smashingmagazine.com/2020/07/desktop-apps-electron-vue-javascript/

All too often, accessibility doesn’t cross a designer’s mind when creating user interfaces. Overlooking accessibility considerations in the design phase can trickle down through to your website or application and have a large impact on your users. Whether it is usability testing, creating prototypes, adopting an accessible pattern library, or even just annotating wireframes, designers must incorporate accessibility into their workflow. Instead of overloading QA engineers to find accessibility defects, thinking of accessibility from the start, or “shifting left,” can have a tremendously positive impact on the content you create.

https://www.smashingmagazine.com/2020/07/design-wireframes-accessible-html-css/

For many people, the web is an essential part of their daily lives. They use it at work, home, and even on the road. Web accessibility means people with disabilities can use the web equally. So it’s crucial for developers and organizations building on the web to build inclusivity and accessibility into their applications. In order to make the web more accessible, there are a couple of best practices and standards that you will have to implement in your applications, such as adhering to the following:

https://www.smashingmagazine.com/2020/07/accessible-front-end-application-chakra-ui-nuxtjs/

Well, I guess we can all agree that this year has been quite something. We’ve all been challenged in one way or the other, and the new normal is not quite the old normal. Still, the overriding emphasis remains on safety and everyone’s wellbeing, as well as the importance on sharing thoughts and feelings on creative wellness within the community. Unfortunately, the effects of COVID-19 are still so wide-reaching throughout the world, so that the Smashing team has had to make big changes to our plans this year.

https://www.smashingmagazine.com/2020/07/monthly-roundup-07-2020/

In fields as fast-paced and technical as web design and development, it’s easy to lose sight of our own wellbeing. For many, there’s a constant sense of trying to keep up or ahead. We may not even realize we’re doing it. Ask yourself, when was the last time you stepped away for a day and didn’t think about coding or design for a day? For me, that’s very hard to answer.

https://www.smashingmagazine.com/2020/07/thoughts-feelings-creative-wellness/

React enables web applications to update their user interfaces (UIs) quickly, but that does not mean your medium or large React application will perform efficiently. Its performance will depend on how you use React when building it, and on your understanding of how React operates and the process through which components live through the various phases of their lifecycle. React offers a lot of performance improvements to a web app, and you can achieve these improvements through various techniques, features, and tools.

https://www.smashingmagazine.com/2020/07/methods-performance-react-apps/

The web moves pretty fast and picking an approach for your frontend that will feel sensible in a year’s time is tricky. My biggest fear as a developer is picking up a project that hasn’t been touched for a while, and finding the documentation for whatever approach they used is either non-existent or is not easily found online. About a year ago, I started using Stimulus and I felt really happy about the code I was shipping.

https://www.smashingmagazine.com/2020/07/introduction-stimulusjs/