Optimizing your Website Design (Part Two)

If your website needs some serious overhauling, you’ve come to the right spot. And if your website sucks and you don’t even realize it, this is also the blog post for you. This blog is the second installment of website design advice, so if you missed part one you can check it out here. Below, we’ve compiled four key categories that everyone should know before creating a website. Whether an artist, executive, or anything in between, you can save the world - with the evolution of one bad website at a time.

(If you missed part one of our website design blog, you can find it here.)


Color Me Pretty

Believe it or not, color is a huge component to brand identity. Colors are so strongly affiliated with brands that consumers associate them interchangeably. Quick, what color is Coca-Cola? Maybe that one was too easy. What color does Starbucks use? Twitter? You get the idea. But more than just recognizing brand colors, up to 90% of snap judgments users make about products can be based on color alone. And if consumers don’t believe your colors align with your identity, they’ll perceive your brand as inauthentic.


Different colors elicit different feelings and emotions (and they’ll even create different purchasing decisions!). See the color wheel below for a description of each color, or for more detailed information, we recommend this site.

Photo courtesy of color-wheel-pro.com

Photo courtesy of color-wheel-pro.com


Regardless of which colors you choose to represent your brand, be sure to be consistent. Imagine how confusing it would be if Target’s logo was red in stores, purple online, yellow for mailed items… one would feel the constant need to make sure they had purchased the right thing from the right company. Don’t do that to your customers. Make your colors cohesive across platforms.


The Zen of Unity

Speaking of cohesion, few things are equally as important. Once you’ve made design decisions, stick with them. Incorporate the same elements across every platform you use: your website, your business cards, your social media pages.

The example below is a prime case. Even though each image is used in a different medium, you can immediately recognize them as the same brand. The logos, fonts, colors, and overall design are unified - it catches your eye, doesn’t it? There’s something very satisfying about visual cohesion. It lends credence and authenticity to your brand in a way that most things simply cannot.

hestia.jpg

Feeling Fonty


Like colors, some fonts are easily recognizable with their brands. Walt Disney, Harry Potter, and Ray-Ban utilize fonts that are so distinguishable, you’d probably recognize a branded message in their font right away, even without the appearance of the company logo.


Although most companies aren’t gifted a custom font, there are certain ways to utilize your fonts in website design that set you apart from the crowd.


You may be surprised to discover there are actually quite a few design rules related to the choice of fonts. We’ll keep it simple with a few of the basics. For starters, AVOID SUPERFLUOUS USES OF CAPS LOCK. It’s terrifying. Also, it can cause hierarchy confusion (remember in our Website Design Pt. 1 blog, we discussed the importance of promoting one thing at a time? Still applicable here.)


Second, if you choose to use accent fonts, use them sparingly. Reading an entire page in Chiller or Jester is nightmarish - and most people won’t do it.


Finally, limit the number of fonts that you use. While different fonts can seem cute or exciting, the use of more than 4 of them is the cause for a headache. Using too many fonts also reduces the unity of your page, which is both ugly and confusing.

Social Butterfly

This one might seem overly obvious, but sometimes it’s nice to have a reminder. Make sure your social media is easily accessible from your website. Users should be able to find it, regardless of what page they’re currently viewing. If you’re going to the trouble of creating original content, show it off!

You should also provide access for viewers to post your website content to their own social media pages. There are several extensions through Google Chrome that will do just that, allowing you to embed access directly to social media. Such extensions typically place social media logos within the heading of your articles; when clicked, they can post the page directly to your users’ social space. Blogs, podcasts, and spectacular images are most commonly posted to social media, so especially make sure pages with this type of content have easy posting access.

Your website doesn’t have to be expensive to look expensive. With these tips, you can design a website that embodies the style of your company, without breaking the bank. Competitors will quake in fear and tremble in awe at the sophistication and flair of your website, knowing that they will never achieve your standards. And you, your secret will be just how easy it was to achieve.

Designing your Website to Maximize Interest (Part One)

We all know that not many things are worse than a poorly designed website. If you’re like most small or start-up businesses, you’re probably going to be designing your own website. While this can allow your creativity to shine (and is great for your pocketbook!), it can also result in a mess that leaves potential customers confused. Designing a website is a tricky balance between expressing the identity of your company and creating a convenient, user-friendly space. A little too much in either direction can have users running to find a more accessible website, abandoning yours in the process.

F-Yourself

We’re not telling you to F*** off. We’re talking about the pattern our eyes use when looking over websites. Eye-tracking studies have shown that upon landing on a website page, users focus first on the top left corner, then move down the page, then jump back up and move to the right. If you were to draw that pattern out, it would resemble the shape of an F. Everything within the F will be focused on for a longer period of time, and most things outside of the F will be skimmed over without absorption.

Heat map showing where eyes linger, courtesy of Instapage.com

Logically, this means that there are some prime locations on your landing page that need to be properly maximized. The most important spot is the upper left corner, as it’s the first thing upon which a person’s eyes will focus. This space should feature the company’s logo to immediately show that the person has come to the correct site.

The top section should prominently display a headline or any current deals you want to promote. Bolded subheadings help guide the eye down the page and convince the user to keep reading. Your information is valuable! Make sure to show it.



Less is More

It might seem like the best way to show your personality is to cover your page in bright colors and photos. But too much can be overwhelming (or worse, make the webpage load slower! Afterall, webpage abandonment skyrockets with each half second a page takes to load). Remember the F pattern? If you overload a website with too much text or too many images, your users won’t know where to look. When everything has emphasis, nothing does. See the example below: a significant portion of the text is bolded, and your eye freaks out when looking at the page. Do I look at the red numbers? Or the deals at the bottom? The pictures of bugs? Your eye darts around the page without absorbing any information.

Not what you want your customers to experience.

Instead, think of companies renowned for their design. For the webpage below, notice the simplicity of the design; there is one thing on the page being promoted. Just one. This design is so signature that you immediately recognize the company without any extra identifiers. Wouldn’t it be incredible if customers could do the same with your company?

Don’t be afraid of white space. When used correctly, it can convey style, simplicity, elegance. Even Google has an almost-all white landing page (and they seem to be doing just fine).



Be an Idea(l)ist

However you decide to design your site, make sure to gather ideas beforehand. Develop photo galleries of inspiration- well done websites or images that convey your company tone.

An emblematic expression that white space can be stylish

A different take on the portrayal of one item- in this case, a person. Notice the unified color scheme

An example that a background can be exciting, but the site is still focused

Just because you’re designing your own website does NOT mean a user has to be able to tell. In fact, it’s not hard to make your website look more expensive than it is; you just have to know the tricks of design that is both functional and visually appealing. Big name companies who spend thousands of dollars on their website follow very specific tricks to achieve their ‘look’ - don’t be scared to use similar tactics. By the time you add your own touches, your website will still stand out from the crowd and will be better optimized for user access. Meanwhile, you’re free to conduct your business with a flair that is uniquely you.

This blog is brought to you by Rethink Creative Group, a Creative Agency specializing in boosting client growth through digital marketing. Some of our services include: photography, social media, design, and digital advertising. Want to grow your business? Check out our podcast called Brand Junkies. Each week we interview highly successful business owners and executives to talk about how they're growing their brand.

David Valentine