It’s the first Friday of August, and Friday’s around here mean it’s time for another edition of “This Week In Web Design”, our weekly roundup of web design and development articles published in the past seven days. This week we have some inspiration, plus articles about React, UX, tools, and some handy CSS tricks, plus much more. So grab your favorite beverage and have a look!

Your Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets


16 Impressive SVG Animations - 1stWebDesigner

Are you familiar with SVG animations? These awesome animations can be used on any website to add character, interest, and interactivity. Check out our collection to see how they can benefit your site.
Read More

3 Essential Design Trends, August 2020

Do the lazy days have you longing for a new design technique to try? You are in luck. This month’s collection of essential design trends is packed with funct
Read More

Should a Web Designer Ever Provide Discounts?

Discounting your services is not really a good move. But, there are some scenarios where it does make sense to offer a lower price for your web services.
Read More

Proximity Principle in Visual Design

Design elements near each other are perceived as related, while elements spaced apart are perceived as belonging to separate groups.
Read More

A Lightweight Masonry Solution | CSS-Tricks

Back in May, I learned about Firefox adding masonry to CSS grid. Masonry layouts are something I've been wanting to do on my own from scratch for a very
Read More

Moving from Corporate to Contract - Boxes and Arrows

Working as a full time in house employee definitely has its benefits; camaraderie, stability, and the support of a team are alluring aspects for many designers. Yet, it also has many drawbacks. If you’re frustrated with the politics, tired of endless meetings, or you just want creative freedom and increased income, contract work can be … Continue reading Moving from Corporate to Contract
Read More

Getting the Most Out of Variable Fonts on Google Fonts | CSS-Tricks

I have spent the past several years working (alongside a bunch of super talented people) on a font family called Recursive Sans & Mono, and it just
Read More

How Destructuring Assignment in JavaScript Works

Destructuring assignment is one of the features introduced in ES6. Learn what destructuring assignment is, how it works and how to use it and what to avoid.
Read More

Setting Up Redux For Use In A Real-World Application — Smashing Magazine

Redux is a robust state-management library for single-page Javascript apps. It is described on the official documentation as a predictable state container for Javascript applications and it’s fairly simple to learn the concepts and implement Redux in a simple app. Going from a simple counter app to a real-world app, however, can be quite the jump.
Read More

Can You Design A Website For The Five Senses? — Smashing Magazine

In this article, we’ll take a look at five ways you can use the senses to put your visitors in a better headspace when they enter your site and interact with your brand.
Read More

How to Make your Landing Pages Visually Attractive - [Infographic]

Landing pages are like gateways to conversions, if done right. Rather than having a wall of text on your landing pages, it is always better to have impactful vi
Read More

5 Different Paths to Becoming a Designer

Five design professionals share their different paths into the design industry, what their experience was like, and lend some advice to those building their own careers in design.
Read More

UI Interactions & Animations Roundup #9 | Codrops

A fresh set of inspirational UI interactions and animations from the past couple of weeks.
Read More

Making Sense of react-spring | CSS-Tricks

Animation is one of the trickier things to get right with React. In this post, I’ll try to provide the introduction to react-spring I wish I had when I
Read More
Carousel tutorial thumbnail

Create a Carousel using CSS Scroll Snap and JavaScript - 1WD

This tutorial will help you create a responsive carousel using the CSS scroll-snap property and very little JavaScript for navigation.
Read More

Computed Values: More Than Meets the Eye | CSS-Tricks

Browser DevTools are indispensable for us front end developers. In this article, we'll take a look at the Computed tab, a small corner of the DevTools
Read More

Advice for Beginners That Are Starting Out in Web Design

Whether you are looking for a professional career or to pick up a new hobby, we will help to guide you towards becoming a web designer.
Read More

How to Integrate AI Into Your Toolset

Artificial Intelligence is the use of computers or machines that have been created to work and react like humans. Some of the computers that have AI, are design
Read More

Magnetic Buttons | Codrops

A small set of magnetic buttons with some fun hover animations. Inspired by the button animation seen on Cuberto.
Read More

A Practical Guide To Product Tours In React Apps — Smashing Magazine

In this guide, you’ll learn how to proactively use product tours to onboard users into a new and complex UX, and how to familiarize them with UI functionality without boring them, using a typical React app.
Read More

TypeScript, Minus TypeScript | CSS-Tricks

Unless you’ve been hiding under a rock the last several years (and let’s face it, hiding under a rock sometimes feels like the right thing to do), you’ve
Read More

SEO Web design: how to create SEO friendly pages

SEO and web design are two disciplines that, if combined, can improve your Google rankings and provide a better user experience.
Read More

HTML for Subheadings and Headings | CSS-Tricks

Let's say you have a double heading situation going on. A little one on top of a big one. It comes up, I dunno, a billion times a day, I'd say. What HTML
Read More

Web Design: 27 Modern Website UI / UX Design Examples

If you are looking web design or website design templates or web reference, so you are just in right place. In this showcase we are gathered new web design trend website examples, you might want to look into. Read through our article to find a list of the newest web design practices and developments – everything from shapes, fonts, colors, layout, and features. GDJ is the best place for Website Design Inspiration. Here you can discover the fresh and creative website designs of the world. In this huge list  award winning websites design by web designers, web design agencies and entrepreneurs.
Read More

Web Design for Seniors: UX From a Mature Perspective

It’s no secret that the senior population is growing. By 2030, people over the age of 65 are predicted to make up 20.6% of the population of the US.  Around
Read More

26 Inspiring Website Color Schemes in 2020 (Colorblind-Friendly Palettes)

Looking for great inspiration on website color schemes? Check out this huge list of the best color schemes to use on your website, ecommerce, landing page.
Read More

WordPress Security: 17 tips for keeping your website secure [2020]

In this article, we provide 17 tips to guide you to the ultimate WordPress security. It is a step-by-step process that will prevent you from cyber attacks.
Read More

Inspirational Websites Roundup #17 | Codrops

A new set of websites to get you inspired and updated on the freshest design trends.
Read More