Partner With Vanguard

Sep 27, 2019, 21:39 PM by Mark Havelka

When styling a website, where do you draw the line between implementing commonly used elements that have been proven to work and unique elements that push limits and stand out?

When you boil it down, websites are text, links, and images. And websites aren't going anywhere, at least for a long time. At times, because all websites boil down to these elements, websites can feel very bland or repetitive. However, we also know that these elements can be styled and arranged in ways that help them stand out, have their own character, and their own experience. And, as web designers, we're always in a tug of war between "what works?" and "what's unique?"

Consider the following websites. There are two newspapers and two blogs. What did you expect to see? Are there any elements that are used in a way that is different than what you expected? Were these effective and pleasing? Or jarring and uncomfortable?


Images courtesy of:https://www.nytimes.com/,
https://www.washingtonpost.com/,https://medium.com/, https://design.google/

What works is often what we've grown used to:

• Clicking on the logo in the header brings us back to the homepage.
• Navigation links are also in the header, with utility navigation links above the header.
• Maybe we're expecting some sort of hero image once we land on the homepage of a website.
• Wait.
• Is that a serif font? What the heck is THAT doing here?

Jokes aside, the websites above all have the previously listed items that we’re used to seeing. Large typeface logos to let us know where we are and who we’re reading from. Images pepper the page to both help our eyes travel from content item to content item and give us something to associate with headlines. For some people, however, the layouts of the first three websites may be too busy for them to engage with. For others, the fourth may not have enough to their taste.

One more time, think about what you’re used to clicking. How much of how you interact with the following page is second nature to you at this point?


Image courtesy of: https://www.amazon.com/

What's unique often takes our expectations and riffs on them in a way that is delightful and not jarring:

• "Oh! What a pleasant hover state on this button."
• "I appreciate this font treatment for dates and subtitles."
• "Oh hey, that serif font actually works here. How refreshing."

Now how about this website that uses a lot of “typical” elements? Does it stand out from what you’re used to seeing despite using what we’re “used to?”


Image courtesy of: https://momentfactory.com/home

This website utilizes what we’ve seen before. Logo in the top left, with links in the top right. There’s a large hero image with a title and call-to-action. However, this image is actually a video that extends beyond the normal borders and behind the header, making this website much more engaging experience. To some, this might be too much action and movement when arriving on this page. To others, they may feel that the visual interaction of the video and elements on the page creates a fun and delightful dynamic.

What we do is dance between the two of these. Trying to design with elements and styles that people are comfortable with, but also finding the space to create something that's more nuanced and more, you.

So today what I'm asking us to do, is to try to push the envelope a little bit when it comes to the website. Yes, I know most websites don't actually need too many bells and whistles, or they need a lot less, but ask yourself the following:

1. Am I being too safe with my fonts? Are they really reflective of my organization.
2. Are my pictures being used effectively? Filler/background noise is okay, but when I don’t need that, am I using photography deliberately and not “just because?”
3. How are my micro-interactions? When my users hover over buttons, links, and other interactive elements, are those interactions jarring or delightful?
4. Are we going too far with these? Will it seem like we're trying too hard to "fit in" with modern web design?

The goal is to find the sweet spot between what works, what delights, and what communicates. The answer is sometimes simpler than it seems, and other times it's a combination of a lot of various elements, but let's not get lazy and instead let's take the time to really flesh out how we want to present ourselves online.

Addendum: Here are some of my personal favorite resources when it comes to brainstorming and inspiration.

• https://www.typewolf.com/
• https://fonts.google.com/
• https://fonts.adobe.com/
• https://fontjoy.com/
• https://unsplash.com/
• https://www.awwwards.com/