It’s the first Friday of September, and the eve of a 3-day weekend in the US. What does that mean? Yep, it means it’s time for another edition of “This Week In Web Design”, our weekly roundup of all the web design and development articles we’ve found that were published in the past seven days. Peruse the articles below and catch up on anything you may have missed. Enjoy!

Your Web Designer Toolbox

Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets
Starting at only $16.50/month!


Ground Rules for Web Animations

Animations can make a site stand out. Or, they can just as easily kill the experience. When working with web animations, there are a few things that could
Read More

The Dos and Don'ts of Logo Design

When designing a logo, there are 6 essential "dos" you need to follow from initial planning through to execution. Likewise, there are 6 big "don'ts" to avoid.
Read More

8 Easy Ways To Ruin Your User Onboarding | Webdesigner Depot

To understand why user onboarding is such an indispensable tool, we need to empathize with the people using our products; we all come from different backgrounds and cultures, we make different assumptions, and we see the world differently. User onboarding helps mitigate these differences by making your product’s learning curve less steep. However, companies often […]
Read More

Static Methods and Properties in JavaScript Classes

Static methods and properties are interesting features of JavaScript classes. Learn what static methods and properties are and how they work
Read More

Pure CSS Images: 35 Free CSS Cartoon Characters

Let's explore the use of pure CSS technique in creating and displaying images in web and mobile with these free CSS cartoon characters.
Read More

Design is Changing Shopping (for the Better) - Boxes and Arrows

Technology changes at the speed of light. Just when a shopping experience is updated for the latest craze, something new arrives on the scene and uproots the way people shop online. Even though this happens all the time, some design trends can give hints at how the landscape of eCommerce changes from year to year. Paying attention to these improvements allows us to stay on top of consumer needs and make educated guesses about where and when the next big
Read More

'Building React Apps With Storybook — Smashing Magazine' /

In this article, you will learn how to build and test React components in isolation using Storybook. You will also learn how to use the knobs add-on to modify data directly from the storybook explorer.
Read More

How to Make a Media Query-less responsive Card Component

Fun fact: it’s possible to create responsive components without any media queries at all. Certainly, if we had container queries, those would be very
Read More

Diagonal Thumbnail Slideshow Animation | Codrops

A simple slideshow with tilted thumbnails and large titles that animate when navigating.
Read More

Rethinking Table Design for Mobile

There might be a problem with that table on your website. It doesn’t look or function well on my phone. It sounds like a simple problem (that should have a simple solution), but might not be quite as simple as you’d think. There are a variety of reasons that could contribute to thi...
Read More

25+ Best Color Fonts of 2021

OpenType fonts created a whole new world of possibilities for typography. And one of the best inventions made from OpenType features is color fonts. Some call color fonts the next big revolution in graphic design. Others say it’s going to change the way we use typography. One thing is fo...
Read More

Chill Out with These Calming CSS & JavaScript Code Snippets

Our mission is to help you recharge from your daily coding grind. Sit back and gain some positive energy from these clever code creations.
Read More

How to Use CSS Grid for Sticky Headers and Footers

CSS Grid is a collection of properties designed to make layout easier than it’s ever been. Like anything, there's a bit of a learning curve, but Grid is
Read More

10 habits of successful freelance designers

Turns out, the most successful freelancers have a few things in common that set them apart from the rest. Here are 10 powerful habits every freelance designer should hone.
Read More

Top 10 Graphic Designers to Follow in 2020

Need some spur to bounce back and move in the right direction? If that’s a categorical yes, we have your back with today’s article. We show you ten dazzling graphic designers to follow in 2020. The
Read More

Comparing Browsers for Responsive Design

There are a number of these desktop apps where the goal is showing your site at different dimensions all at the same time. So you can, for example, be
Read More

'4 Ways To Creatively Use Icons In Your Mobile Apps — Smashing Magazine' /

Icons have long held an important place in the design of mobile apps. But beyond using them to create larger and more attractive touch targets, there are other ways mobile app designers can use these tiny elements to make an app more engaging. This post will explore four ways to do this.
Read More

5 Best Free Courses to Level Up as a Web Designer | Webdesigner Depot

Education is the key to leveling up as a freelance web designer, but it shouldn't cost you a lot! This list will introduce you to 5 of the best free courses.
Read More

Using @property for CSS Custom Properties

Una Kravetz digs into how Chrome now allows you to declare CSS custom properties directly from CSS with more information than just a string. So rather
Read More

'Everything Developers Need To Know About Figma — Smashing Magazine' /

Unlike most design software, Figma is free and browser-based so developers can easily access the full design files making the developer handoff process significantly smoother. This article explains everything they need to know to work with Figma.
Read More

How to Simplify SVG Code Using Basic Shapes

There are different ways to work with icons, but the best solution always includes SVG, whether it’s implemented inline or linked up as an image file.
Read More

5 excellent color palette generators every designer should try

On the hunt for your next best color palette? We're rounding up five essential color palette picking tools to help you come up with endless new combinations.
Read More

76 Tools for Designers in 2020 - Masterpicks - Design Inspiration

Tools For Designers – These 76 best design tools for web and graphic design professionals will help you to create your next project.
Read More

Web Design & Development News: Collective #621 | Codrops

Collective #621: Component Driven User Interfaces * Present * Increment: APIs * Omatsuri * Stitches
Read More

Your bundled code deserves some attention too!

Looking at the code as-is in production This first step involves opening up devtools on your production site, opening the network tab, and looking at each JS file that is loaded. This is an opportunity to see if any unexpected files are being loaded, and to find out if and how code splitting is being...
Read More

Styling Complex Labels

Consider the common pattern of selecting a pricing plan for a hypothetical service. To make a selection, users need to know the name of the plan, the price, and its features. But if we include all of those details, it gets hard to read: Each option's plan information is included in a label. To improve...
Read More

Beyond Media Queries: Using Newer HTML & CSS Features for Responsive Designs

Beyond using media queries and modern CSS layouts, like flexbox and grid, to create responsive websites, there are certain overlooked things we can do
Read More