What is Modern Web Design?

In my time as a technologist (I know that sounds pretentious, but I’ve had roles all over the tech spectrum, so I’m going to use it just for simplicity’s sake), which includes my time as a Web Developer I have seen website designs evolve quite a bit. Early on during the NetScape days, Web Design wasn’t really a thing unto itself, so people just did what they wanted. Most sites were

simply text-based infodumps that ranged from how-to’s to random facts (that may or may not have been true). Color palettes as a concept hadn’t really transferred over from graphic art, so you got a lot of bright backgrounds against dark colors and they rarely ever meshed. I remember typing random addresses just to see what would come up (if anything), and having my eyes assaulted by combinations like Fuchsia + Periwinkle.

Penny-Juice from the 90's.
Remember sites like this? I wish I couldn’t.

 

Now, we have standards and best practices to guide our hand when it comes to web design. However, I still find that there are a LOT of differing opinions around what constitutes ‘Modern’ Web Design, so what I would like to do here is build a kind of framework for people to use as a reference for determining whether or not a given design is ‘Modern’, or if it could use a refresh.

Here are the guidelines:

#1 Style Guide Rules

So the obvious thing here is if you don’t have a style guide for your site, you should. A style guide is basically a set of visual rules for your site, ensuring anyone who works on the site itself is able to make sure whatever they create fits the site’s visual theme. It will mainly consist of two key pieces of information: the site’s color palette, and the fonts (or typesets) that should be used for different font sizes (or headings).

Regarding the Color Palette:

The palette itself should be simple – no more than four colors. Often one of those colors will be black or white, and sometimes they will both be in use (they both work well as background colors). The other two or three colors should goo together well on their own (black and white go with pretty much everything).

Regarding Fonts:

Similar to the color palette, you want to keep your font selections simple – no more than two or three fonts, and generally split between one font type for headings, and another for the rest of your text. They should look good together on the same page, which may sound obvious when you hear it, but a lot of folks out there haven’t considered this. While it would certainly help to find a font that would be unique to your site, make sure it’s also readable. Again, it sounds like a no-brainer, but  it’s one consideration that can easily get lost in the search for uniqueness.

Example Style Guide
The Medium Style Guide, Courtesy of Hubspot
Medium Style Guide Continued
Medium Style Guide From Hubspot

 

#2: Layout Rules

For your overall site layout, you want to keep it simple, while making sure your branding and message take center stage.  People will often be attracted to a company’s website by a product, but having that message and branding in a place of prominence will leave an impression that will hopefully keep your company in the customer’s mind, bringing them back. Saying ‘keep it simple’ doesn’t seem like enough, though so let’s define this a bit:

  1. One Menu: keep all your page links under one menu. Nothing is more confusing than when you have multiple menus on one page. Not only that, but they wind up taking up space needlessly. Remember, your customer is NOT going to spend twenty minutes pouring over every little thing you’ve put on the site. In fact, you have less than a minute to get and keep their attention. If your site draws attention to too many places at once, the customer is going to move along.
  2. Whitespace: Repeat after me: It is okay to have empty space on my page. True story! Just because you have 1920 x 1080 resolution does not mean you have to use all of it. By all means use what you need, and be sure to leave a bit of space between your elements. Your customers will thank you.
#3: Front Page Rules

Your front page is the first thing people see when they come to your site, so it needs to work a lot like a book cover. It doesn’t have to tell the customer everything about your site, but it does need to convey enough so that they get interested and continue browsing. One big trend that is pretty modern is having a large, moving hero image that takes up most of the screen space with a minimized, or hamburger menu and some simple text near the middle to grab the user’s attention, and then the user scrolls or clicks and the site comes up. It’s a really slick thing to do, and definitely grabs attention. Sliders work pretty well also, because they add motion to the page; it gives the eyes something to do beside just fix on a static spot.

And that’s it folks – 3 guidelines to ensure your site is modern. Remember, when it comes to web design, there’s a ton of subjectivity, and at the end of the day the most valuable input comes from your customers. Be sure to engage them and see what they would like to see in your site.

As always, if you’d like to leave a comment below feel free, and if you have any questions about your next web project, feel free to reach out!

Contact Us!

One thought on “What is Modern Web Design?

Leave a Reply

Your email address will not be published. Required fields are marked *