Web Design Tips & Trends

Table of Contents

Some Tips You Should Learn for 2020

Modern and simpler website design is back, and in 2020 it will only get more widespread, but in a smart way.

It’s time to make user experience (UX) a top priority in 2020.

Some search engine optimization companies started the trend years back to make website content more accessible for more users, including the blind.

Remember that ALT tag reference you keep hearing from your niece or nephew?

The ALT tag simply means alternative text, which is text (behind the content) read by browsers and screen readers.

Check out the official ADA Best Practices Tool Kit checklist here.

I suggest you print it out and post it over your desk so you have a constant reminder of its importance.

Here’s more website accessibility resources:

2020 is the Year for CSS Grid

Designing websites based on a grid layout is nothing new. Just look at Bootstrap’s widely implemented 12-column grid or Foundation’s ultra-responsive framework. 

However, CSS Grid is a new and more straightforward way to build responsive, complex layouts. It’s a valuable skill set to consider. 

Here are our top resources and examples to learn CSS Grid in 2020:

CSS Grids result in cleaner, more maintainable code as you are not shoving all your structural elements into the html (compared to how one sets up columns in Bootstrap).

Instead, your HTML only has content markup – as it is supposed. 

You manipulate media queries in CSS Grid, which allows you to build entirely responsive layouts with purely HTML and CSS. No need to fiddle around with Javascript.

While CSS Grid does not have full backward compatibility (approx. 89%), educator Morten Rand-Hendriksen makes a good argument on why 2020 is a good year to implement it.

CSS Grid is compatible with all major modern web browsers, and since the HTML is just a marked up document, older web browsers can still render the content.

It will be displayed differently. However, the content will still be accessible. Web developers can implement fallbacks for older browsers to ensure there is always an attractive design. 

Microinteractions Create Visual Appeal

It’s the little things in life that matter.

Microinteractions are usually a trigger associated with completing a task – the like button pulsates with a click, or an image moves when the pointer hovers by.

Many online stores  have item images that change perspective when you hover on them. Or animations like hearts when you click something.

Why do micro-interactions matter? These little details help build an exceptional UX interface by turning a standard experience into something fun. It also rewards the visitor when they complete actions.

Microinteractions can help show your brand personality as well. Humaan expertly uses this feature on their About page, giving visitors a display of their quirky nature.

Artificial Intelligence Infiltrates the Web

Live chat will be popping up more and more on websites. Statistics show customers enjoy the immediate response chat interfaces provide.

Not only that, but with improvements in AI and machine, virtual assistants will be more equipped to handle customer questions. This will also allow for greater customization.

Here are some notable live chat statistics for 2020:

Massive Text Demands Attention

Typography has always played a critical role in design. Text is the primary way we present content to the viewer. The fonts and weights used to display text change how we perceive it. Words may be bold to draw attention from the reader.

Many sites, such as the Taylor Freund example above, are going more extreme and having the text take up the entirety of the page.

This tactic forces the user’s undivided attention to the message displayed. And since not many words can fit, users can read the phrases in short, digestible snippets.

Brutalism in Web Design

A counterintuitive design trend that has been popping up is “Brutalism”, which turns against most principles that are coveted in an excellent website.

Web-safe colors and clear links? A website that’s easy on the eyes with an intuitive UX experience to benefit its users?

Brutalism is none of those things. Its design is purposefully “ugly”, supposedly inspired by the concrete infrastructure popular post-WWII. It’s basic and flat, with about as much styling as Craigslist.

However, major brands such as Bloomberg and Balenciaga have embraced this chaotic and dividing style (though Bloomberg has since toned it down).

Web Designer Awards is a Thing

I’ve always heard rumors of web design awards being given out, but never took it seriously.

Remember the Twitter awards, aka Shorty Awards?

That was a gimmick that quickly turned into a worldwide phenomenon.

But if you’re serious about your code, diligent with your drive and motivated to become the best in the art of web design, I strongly encourage you to check out the developer guidelines here and submit your work.

Web Designer Reading (Books & Audio)

Sometimes it’s essential to get away from the computer screen and enjoy some old fashioned reading.

This will not only help you relax, but also calm your brain and allow you to retain information in a whole new way.

I found a couple of best-selling books on Amazon that I highly recommend pictured above.

But my favorite is by Stefan Mischook: A no-nonsense guide to web design fundamentals.

Google Books is also a fantastic resource for free web design books that you can read or listen to on the go.

And of course, the internet’s second-largest search engine, YouTube, provides tons of videos on website design tips that you can filter by date, relevance, and more.

Clean Code is Key in 2020

Simple. Clean. Modern.

Keep that in mind at all times; not just within your graphic design elements of website development, but also the beautiful code you draft behind the scenes.

Remember, you’re not just trying to impress your website visitors, you’re also going to want to to impress the big search engines with less code, social media networks with OG data (this may be more of an SEO feature but still very relevant to 2019) and let’s not forget, the cleaner the code, the faster the web page speed loading times for browsers.

If your website design in Sonoma County doesn’t load within 3 seconds, you will lose the majority of your visitors.

This came right from Google’s mouth.

Ok, so Google doesn’t have a mouth, but Google’s John Mueller does.

Come to think of it, your website visitors may not even count as a visitor if your website didn’t even load completely.

Check your website speed here for free and then do a free website audit here to ensure you’ll be at the top of your game for 2020.

Anyone is welcome to come to our office for a free SEO consult or just brainstorm ideas for your business.

Google's Web Designer Beta

BONUS: Learn from Google! Click here to learn about Google’s Web Designer.

If your curious to learn how to use Google Web Designer, Google has some great tutorials posted. 

While I wouldn’t recommend it for building a full site, it’s a great tool for designing Google Ads, sidebars, and pop ups. 

What’s really popular for website design trends in 2020 is Material Design.

Another trick up Google’s sleeve in the website development niche. Web designers beware.

Voice Search in Web Development

Voice search, also called voice-enabled search, allows users to use a voice command on their mobile device to search the online.

While there is many aspects of specific search engine optimization that attribute to making voice search capabilities more prominent within a website, there’s still rules within your design that can help your potential customers.

Two recent blog posts you can learn a lot from are How to Optimize Your Website for Voice Search by websolutions.com and of course The Ultimate Guide to Optimize Your Website for Voice Search.

According to Google, 20% of all searches are voice. However, by 2020, 50% of searches will be voice-based. 

This statistic is especially important considering over half of households will have smart speakers in just two years.

Backlinko has a comprehensive study on voice search SEO available. It reveals what ranking factors matter in order to optimize your site for voice search.

If you have some input or feel some vital web design tips have been missed, please contact us here.