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

When you want to represent ideas and concepts in a graphical or pictorial form, you use a mind map or mind mapping tools. Mind mapping tools allow a person to have visual thinking, which helps in o...

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:

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.

How Does Accessibility Relate to Web Design? - SpyreStudios

Inclusivity in Web Design Web design should always be inclusive. For any beginner designer, do you factor in differently-abled users in your design considerations? There are actually different considerations when creating an accessible website as there are many forms of different abilities. Those that are most affected include people with auditory, visual, and physical disabilities. Is […]

How to Make Effective Video Landing Pages | SpyreStudios

Here's how to make effective video landing pages on your website

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

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 without ripping up your entire website. Here’s what’s trending in design this month. Animated Heroes (That Aren’t Video) Hero headers and screens that feature video animation have […]

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 LinkedIn ProFinder Guide to Get More Clients

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

5 Ways the Best Web Designers Stand Out (and Get More Work) | SpyreStudios

Here are 5 ways the best web designers stand out

Learn How to Build CLI Automation Tools with NodeJS

Learn by building a weight tracking CLI tool with Oclif in NodeJS.

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!

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 effects

Looping Measures of Effectiveness Back to the Creative Team | Webdesigner Depot

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

Hiring a remote developer can be a daunting task. But if you know which questions to ask, the task is simple. Read more to find out more.

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

Web Design & Development News: Collective #622 - Codrops

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

6 Common SEO Mistakes Most Web Designers Make (And How To Avoid Them) | SpyreStudios

Learn 6 SEO mistakes that can affect the quality of a web designer’s work, and how to avoid them to make the best impression on clients.

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.

What Are Wireframes, Mockups, and Prototypes? | SpyreStudios

Learn more about wireframes, mockups, and prototypes.

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.

Tips on How to Create an Engaging Website Design | SpyreStudios

A list of tips on how to create an engaging website design

Explaining UX Design to a 5-year-old

A few weeks ago, we challenged our design community to tell us how they'd explain UX design to a five-year-old... And you can bet we got all sorts of answers! Check out a few of our favorites.

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