This Week In Web Design – April 24, 2020

It’s the last Friday in April, and, because it’s Friday, that means it’s time for another edition of “This Week in Web Design”, our weekly roundup of all the web design and development related articles published in the past seven days. So pull up a chair, grab a beverage, and browse our curated list of weekly reading. Enjoy!

Awesome Demos Roundup #15

A fresh collection of the most intriguing coding experiments from around the web.

Brutalism in Web Design

A few cases of ‘brutalism in Web Design’ that goes beyond the boundaries of the basics (and they probably had a lot of fun making these.)

20+ Best Figma Tutorials for Beginners

We’ve gathered twenty Figma tutorials for beginners to make learning this tool a breeze!

Exciting New Tools for Designers, April 2020

Some of the newest tools and resources for designers are for working through or with the virus’ impact or are inspired by this change to our lifestyles.

How To Harden WordPress For Maximum Security

How to harden WordPress, including the steps you can take from the outset as well as what you must continue to do to ensure your site’s ongoing security.

A Look Into: HTML5 <article> and <section> Elements

In what circumstances should we use these elements and how do we use these elements correctly?

Creating Playful Effects With CSS Text Shadows

Look at how we can use the CSS text-shadow property to create truly 3D-looking text.

10 Things You Must Stay Away From When Designing a Perfect Website Footer

Studies have shown that more easily navigable footer designs may increase the number of customers and increase revenue.

Implementing Skeleton Screens In React

Learn what a skeleton screen UI is and some types of skeleton screen libraries, along with their pros and cons.

Designing the Block: How UX can improve underserved communities

The design process can bring social change.

Using AI to Streamline Website Building Process

Creating a great site takes time, money, and for first-timers, trial and error. Artificial Design Intelligence (ADI) is promising to change that.

Can JavaScript Detect the Browser’s Zoom Level?

No, not really.

Less rigid design systems

What would it take to start swinging the pendulum back towards less rigid design systems that enable experimentation, while at the same time promoting consistency?

15+ Creative Website Header Design Examples + Tips

To help you find inspiration and learn a few tricks about effective header design, we handpicked some of the best website header design examples for your inspiration.

How To Disable RSS Feeds In WordPress

There are certain situations where you may want to turn off RSS feeds. Here’s how to do it without a plugin!

Building a Scalable CSS Architecture With BEM and Utility Classes

This method relies on CSS globals, BEM, and utility classes.

What is SSH? The Magic Of Remote WordPress Access

Did you know you can securely access your WordPress site remotely? But how is it done? By some magician’s trick? Actually, it’s called SSH.

How to Boost Your Developer Career with a Personal Brand

Personal branding is one the most (in)famous trends of the last decade.

Brutalist Web Design – A Big Trend to Notice

These raw, unrefined, and constructive interfaces are widespread and pass for a normal thing that still wins over the audience with its eccentric appearance.

How To Create A Compelling Landing Page

It involves a combination of clear focus, persuasive copy, considered design and relentless testing. Without all four your page will fail.

10 Tools That Will Help Your Remote Design Team Stay On The Same Page

Project management and roadmapping tools, organization tools, and tools to help you stay personally productive.

18 Modern Fonts To Use In 2020

Using modern fonts can really elevate the look of your work, brand, website, promotional materials – whatever! Here are 18 great modern fonts to choose from.

Responsive Web And Desktop Development With Flutter

Here’s what you need to know to be ready to take on the task of developing web and desktop apps using this wonderful cross-platform framework.

How to Add Lunr Search to your Gatsby Website

Build a search index and add search functionality to a Gatsby website with Lunr, a lightweight JavaScript library providing an extensible and customizable search without the need for external, server-side services.

20 Best Icon Search Engines For Web Designers

A collection of the best icon search engines, icons libraries, and repositories for finding unique new icons for your projects.

User Story Template With Examples

Use this format to create a shared understanding of why users do what they do.

Some Little Improvements to My VS Code Workflow (Workspaces, Icons, Tasks)

From Chris Coyier.

10 Must-have VS Code Extensions for JavaScript Developers

Extensions that have gained popularity and those that are indispensable for JavaScript developers.

How to Create a Finance App UI Design in Adobe XD

How to create a finance app design in Adobe XD, and (more importantly) how to easily animate parts of its UI.

How To Limit WordPress Search Results By Post Type

There are occasions in which you may want to limit WordPress search results to a specific post type rather than just the default. Here’s how to do it without a plugin!

Create Flow Diagrams in Sketch With User Flows Plugin

Link artboards with flow charts.

Accessible Font Sizing, Explained

Explore the WCAG requirements for fonts.

15+ Figma Plugins to Help You Design Better

Take a look at some of the best Figma plugins so far.

Exploring Node.js Internals

Learn about what makes up Node.js, give it a meaningful definition, understand how the internals of Node.js interact with one another, and explore the project repository for Node.js on GitHub.

Dark mode and variable fonts

Looking at a fix for font weights in dark mode.

Cover photo courtesy of StockSnap.