Article Archive by Shawn Escott

Emphasis in Design – Part 3 – Graphic Elements

by Shawn Escott

I once heard a great oil painter say, “Unity with variety makes great pictures.” My first thought was, “How on earth can you have unity with variety? It seems like a contradiction.” From then on, I started really looking at the world around me, I began to see what he was talking about.

For example, in nature, a row of trees look similar, but still have variety in the branches, leaves and sizes. Clouds on a beautiful day will be off-white against a blue sky, but will have variety in sizes, shapes and distances. Consider the human face, we are used to seeing 2 eyes, 1 nose and 1 mouth, but there are differences that make us distinctly unique.

Lets take a closer look at this concept in a graphic example. Below we have 3 content boxes which represent areas which could possibly link to sections of a website. First of all, notice the similarities of these simple and uninspired boxes. We don’t know what to look at first and may not even be compelled to read the text at all. The boxes have the same shape, fonts, colors, and format. Boring.

Below are the new graphics which have been spiced up a bit with variations in color, font sizes and distances, but still have unity of shape, fonts and effects. We clearly know what to look at first, starting with the orange box labeled “1”. This is the main emphasis of the group. Then, we proceed to look at “2” and “3”.

Another thing to keep in mind when using graphic elements is unity with your website. Notice how I didn’t randomly choose orange, teal, and gray as my new box colors, I picked them because they are specific to the MoreVisibility website and will therefore strengthen branding.

Until next time, look at the world around you and be inspired by the beauty and wonder nature has to offer.

Emphasis in Design – Part 2 – Photography

by Shawn Escott

When it comes to emphasis using photography, the same concept holds true from my last post regarding Emphasis in design: Part 1- Content. We want to have a main focal image and subordinate, enhancing images to strengthen our theme. We can accomplish this by utilizing subject, size and placement on the page.

In this blog post I’ll be referring to a landing page example MoreVisibility created for our Design and Usability Webinar. The challenge was to create a design for a fictitious beach town which could be used for an in-depth look at Search Engine Optimization design.

For our main image we chose a tropical photograph depicting the ocean, a clear blue sky, and a palm tree island. This image immediately evokes a calm and relaxing feeling and certainly strengthens our message of a tropical getaway.

The smaller thumbnail images in the left top corner support and enhance the viewer’s perception of a tropical getaway: Kids playing, a woman relaxing, a beautiful sunset, a vacation home, tropical palm trees, and a relaxing game of golf.

Questions to ask yourself when searching for photography.
What feelings do I want my users to experience when they see my images? For example: warm, fun, sunny, privacy, relaxing, cool breezes, etc.
How much emphasis should I give an image?
What will be the sizes, formats and placements for my images? The way you crop a photograph can make or break your design.
Will the colors in the photograph harmonize with my design?
Always keep in mind the cohesive feel of your design.

Lastly, don’t forget your “alt”tags

Check back soon for part 3:
Emphasis in Design: Graphics Elements

Contact us today to learn more about having your website designed by MoreVisibility.

Emphasis in Design

by Shawn Escott

Imagine for a minute that you’re watching your favorite band in concert and everyone is playing their instrument as loud as possible and in a random manner. The result would be a noise that is almost intolerable. The same goes for design and usability.

A well structured and organized website with good eye flow is essential to getting your message across to the user as quickly as possible. You must have a hierarchy of importance with content, photography and graphics. This relevancy is also a key ingredient to Search Engine Optimization.

Over this 3 part series we will focus on Emphasis in Design using content, photography and graphic elements.

Let’s get started by covering a few text formats to be aware of when designing your web page.

Headline
(Known as an “H1” in html. H1’s are highly important in SEO)
Ask yourself this question: What is my main message? What do I want someone to read if they are only on my site for a few seconds? This is where you place all of your emphasis. Emphasizing a headline doesn’t necessarily mean making it big, bold and bright yellow. That would be the equivalent of someone shouting in your ear. It’s not very pleasing and can be quite an eyesore. A better way to grab someone’s attention is to use a more elegant font with a lot of white space. Ever heard of the saying, “Less is more”?

Subhead
(Known as an “H2” in html. Also very important in SEO. It is possible to have H2, H3, H4, H5, H6. Keep in mind that the relevance is reduced by the higher number.)
The subhead is the supporting message to the headline. It gives a little more information in regard to the main message and entices the reader to continue on.

Body copy
This is where you provide complete information about what you want to communicate. It is subordinate to the headline and subhead and should reflect that.
This is a simple concept but often abandoned. I’ve seen companies, even Fortune 500 companies, miss the mark on this. Design is a “give and take” and sometimes you have to give a little to make your content interesting enough to look at.

Lets take a look at some examples:

Here is a prime example of how NOT to layout information. Everything has the same emphasis and wants all the attention.

This is a Headline
This is a Subhead
This is Body Copy

This Example is a little better but still confusing as to what gets the attention.

THIS IS A HEADLINE
This is a Subhead
This is Body Copy

In this last example, we can clearly see what content is relevant and important.

This is a Headline
This is a Subhead

This is body copy. This is body copy. This is body copy. This is body copy. This is body copy. This is body copy. This is body copy. This is body copy. This is body copy. This is body copy. This is body copy. This is body copy. This is body copy. This is body copy. This is body copy.
This format is exactly how search engines read your content. Now you can see how important it is to have correct emphasis on a web page. Not only will your users thank you, but the search engines will love you!