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 | CSS-Tricks

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 | JUST™ Creative

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
Summer UI Kit

30+ Fresh New UI Kits - Free and Premium - 1stWebDesigner

Here are over 30 of the best new free and premium UI kits to choose from, so you don't have to spend your valuable time searching.
Read More

8 Easy Ways To Ruin Your User Onboarding

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
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

Developers, watch out for these burnout symptoms

So you like our media brand Growth Quarters? You should join our Growth Quarters event track at TNW2020, where you’ll hear how the most successful founders kickstarted and grew their companies. I know what you might think: “Not me. I’m not the kind of person to burnout! I know how to manage my stress. I […]
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. … Continue reading Design is Changing Shopping (for the Better)
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 addon to modify data directly from the storybook explorer.
Read More

How to Make a Media Query-less responsive Card Component | CSS-Tricks

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

20+ Best Color Fonts of 2020

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-Tricks

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 | CSS-Tricks

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 and Resources to Level Up as a Web Designer

I often see freelancers on social media asking what the secret is to working fewer hours, making more money, and helping new clients to find them. While those t
Read More
CSS background effects - main photo

15 Amazing CSS Background Effects - 1stWebDesigner - Best of the best!

From simple scrolling animations to complex environments, these CSS background effects can add a lot of personality to your website.
Read More

Using @property for CSS Custom Properties | CSS-Tricks

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 | CSS-Tricks

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

Web designers, here’s how to build a great portfolio and land your dream job

Did you know we have an online event about product design coming up? Join the Sprint track at TNW2020 to explore the latest trends and emerging best practices in product development. Getting your first paid job as a web designer seems like the most difficult task in this universe. It’s not because you are incompetent or lack […]
Read More

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

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