Five Basic Website Design Tips

Through our course about website design many different concepts have been covered. Today I will go through five of my favorite and/or more important concepts that I have learned.

Tip #1 Asymmetry

Asymmetrical imagery is used on a website page to create visually interesting balance. There are 6 ways an image can be balanced this way, by colour, by shape, by value/contrast, by texture, by placement, and by eye direction. If you would; consider the image below:

As you can see in the image there is a creature near the center of the image. The creature is rather large, and the colour scheme is very dark/bleak. Now compare this to the ‘shadow’ that the creature creates on the water. It is made up of small intricate lines and patterns that are shown with bright, vivid colours offsetting the bleakness of the creature. This creates a balance in the image that is visually pleasant to the viewer.

Tip #2 Focal Point Placement

All imagery has focal points, which are points in the image that the viewer is supposed to focus on. There are several tricks that artists and designers use in order to guide the viewers eye to the focal point. These tricks are things such as geometrical lines pointing to the focal point, or faces and hands on the picture pointing to the focal point. Once again please look at the image below for a great example of this:

Although this is a gory picture, it has a very distinctive focal point. The man laying in the middle (Samson.) As you can see all of the faces of the other people are looking at Samson. As you can see the man on the left is pointing his spear directly at Samson, and the man right on top of him is plunging a dagger directly into Samson’s eye. If you look in the top left of the picture you will notice the entrance to the cave that they are in, look carefully and you’ll notice that the curvature of the cave entrance points directly to Samson as well. In fact almost everything in the image is pointing directly at the focal point.

Tip #3 Unity by Repetition

We as humans love repetition. Being able to spot familiar patterns is something that almost all of us do inherently. When an image uses lots of repetition with either colours or shapes it ties the entire image together and is visually pleasing. Take the image below as an example:

The above image is a great example of repetition. The first thing that you notice is that every shape in the image is either a square, or a rectangle. Although they vary in sizes, many of these shapes are the same size relative to each other. The other note worthy repetition is the colour scheme. The artist only uses primary colours, black, white, and a single shade of grey. By simplifying the colour palette, the piece becomes unified as a whole.

Tip #4 Out of Context Headlines

This practice is more commonly known as ‘link bait’, and it is incredibly unappealing to users. Headlines for posts and sites should always use informative and relevant headlines to the user knows what to expect:

As you can tell from the above image, Vice loves to use out of context headlines for their articles. I hope that I will never read an entire article about how straight men like ‘butt stuff’.

Tip #5 Avoid Focusing on Fads Instead of Function

While growing up I had the unfortunate opportunity of accessing the internet in the mid-90’s, when every person online was making their own page on geocities, angelfire, and other web hosting servers. These sites were a visual nightmare. With so many things going on the site, it made me and most others want to blind themselves:

You can’t tell from the still image, but there are moving and flashing animations on this site. What you can tell is that the text is incredibly hard to read. Kids today don’t know how lucky they have it to not have to deal with this.

Five Basic Website Design Tips was first published on www.wordpress.com

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s