This Week In Web Design - September 11, 2020

It’s “Fri-Yay” again, meaning we’ve made it through another week as this crazy year continues to move forward. It also means it’s time for this week’s edition of our weekly roundup of all the web design and development related articles we’ve found published on the interwebs over the past seven days. From CSS to JavaScript, WordPress to color pallets, tutorials to design systems – whatever you’re interested in or looking to hone your skills, we have it here. Let’s dive in!

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

Menu Reveal By Page Rotate Animation | CSS-Tricks

There are many different approaches to menus on websites. Some menus are persistent, always in view and display all the options. Other menus are hidden by

10 Best Mind Mapping Software Tools for Designers

10 Best Mind Mapping Software Tools for Designers at Line25, your #1 web design blog.

Working with JavaScript Media Queries | CSS-Tricks

What’s the first thing that comes to mind when you think of media queries? Maybe something in a CSS file that looks like this: body { background-color:

Using max() for an inner-element max-width | CSS-Tricks

I go into all this in The "Inside" Problem. The gist: you want an edge-to-edge container, but the content inside to have a limited width. I think there is

How to Create a Simple Gutenberg Block Pattern in WordPress

We introduce you to the concept of Gutenberg block patterns and demonstrate how to create one of your own in WordPress.

10 Best UI/UX Practices To Adopt While Building A Website For Your Brand

Did you know that 88% of online shoppers say they wouldn’t return to a website after having a bad user experience? User Experience Design (UX/UI or UXD) in web design is the method of improving user satisfaction by enhancing the usability, accessibility, and performance of user interaction with websites. When a website’s design is so […]

3 Essential Design Trends, September 2020

A seasonal change is on the horizon and that always has me looking to refresh projects. This month’s design trends provide a few different ways to do that wit

15 designer curated color palettes to inspire your next project

To inspire your next graphic design or illustration project, we've rounded up a handful of Shots packed with beautiful color palettes curated by our very own design community.

30 Free HTML and CSS Book Effects and UI Design

Display your books online in a realistic way and spice up your digital library and bookshelf with these free HTML and CSS book effects and UI.

Getting Started With the JavaScript Fetch API

The JavaScript Fetch API provides very easy way to make requests. Learn all you need about what fetch API is, how it works and how to use it.

The Freelancer's LinkedIn ProFinder Guide to Getting New Clients

Your step-by-step guide for LinkedIn ProFinder to connect employers with expert freelancers for their projects.

A beginner's guide to develop your WordPress theme

Develop and create your own WordPress theme with this easy step-by-step beginner's guide to have a unique and brand-focused website!

The Ultimate List of YouTube Channels to Boost your Web Development and Programming Skills · Dev & Gear

These YouTubers are followed by thousands for their high-quality programming tutorials, find your favorite channel in this ultimate list to learn and boost your web development skills today.

30+ Useful Pure CSS Code Snippets - 1stWebDesigner

We’ve rounded up a collection of useful pure CSS code snippets for elements that are commonly used when designing and developing a website.

How CSS Perspective Works | CSS-Tricks

As someone who loves creating CSS animations, one of the more powerful tools I use is perspective. While the perspective property is not capable of 3D

Looping Measures of Effectiveness Back to the Creative Team

The creative process doesn’t end when a project is approved and deployed as a marketing asset. Looping that asset’s performance metrics back to the design team is a pivotal part of the overall creative workflow.

7 questions to ask when hiring a remote website developer

When you are a company owner or a manager of a business of any size and think of creating a website, all you have to do is to hire a web developer. They should

Jumping Through Hoops for Prospective Web Design Clients

You’ll start to spot those red flags for projects and clients you want to avoid. It is about understanding the types of clients you want to work with.

How to become financially stable as a remote freelancer

This article was originally published on .cult by Apinya Dechalert. .cult is a Berlin-based community platform for developers. We write about all things career-related, make original documentaries and share heaps of other untold developer stories from around the world. Switching from traditional full-time employment to contract work can be a bit of a transition — especially […]

How To Build A Blog With Next And MDX — Smashing Magazine

In this guide, we will be looking at Next.js, a popular React framework that offers a great developer experience and ships with all of the features you need for production.

UX Design for Navigation Menus

Navigation menus are one of the most-viewed and most-clicked-on pieces of interface. Let’s look at some principles of nav design that will help our users have a better experience.

Web Design & Development News: Collective #622 | Codrops

Collective #622: react-three-flex * AVIF has landed * Parsel * How they test * Colors for your data visualizations

Landing Page 101: How to design a landing page that converts

Landing pages can be one of the most important parts of a website—and mastering landing page design can set a designer apart from their competition. Here are eight simple tips for landing page success.

Get Up And Running With Craft CMS — Smashing Magazine

In this guide, we’re going to run through the potential of Craft CMS, setting up a local environment and creating a basic cat blog with an API endpoint to accompany it.

Similarity Principle in Visual Design

Design elements that appear similar in some way — sharing the same color, shape, or size — are perceived as related, while elements that appear dissimilar are perceived as belonging to separate groups.

Setting up and Customizing the Ant Design System in a Nuxt App | CSS-Tricks

I don’t typically work with UI libraries because they can be cumbersome and hard to override, which can contribute to a bloated. However, Ant Design has

13 JavaScript Libraries to Create Interactive and Customized Maps - Hongkiat

We previously featured Google Map Maker and 10 other tools to help you build maps. However, if you prefer using Javascript libraries instead, have we got

Modifying Specific Letters with CSS and JavaScript | CSS-Tricks

Changing specific characters can be a challenge in CSS. In this article, we'll explore several ways to modify specific letters using CSS and JavaScript.

13 Related Services for Web Designers to Offer - Vandelay Design

If you offer web design services to clients, regardless of whether you’re a freelancer or running an agency, there are plenty of other related services that you could offer. By offering additional services, you’ll be able to increase the revenue that you earn from the average client, meaning that you can make more money with […]

Explaining UX Design to a 5-year-old

Have you ever tried explaining [UX design](https://dribbble.com/stories/2018/11/07/what-is-ux-design) to someone who has absolutely no idea what that means? Well, a few weeks ago, we challenged our design community to tell us how they'd explain user experience design to a five-year-old... And you can bet we got all sorts of creative answers—both spot-on and down-right hilarious ones.

How to Get Handwriting Animation With Irregular SVG Strokes | CSS-Tricks

I wanted to do a handwriting animation for calligraphy fonts — the kind where the words animate like they are being written by an invisible pen. Because