Winnipeg Web Design
a winnipeg website design company.
a winnipeg website design company.
Tuesday, November 18th, 2008
When we think of CRAP we usually use it in a negative way. Today I will put a positive spin on the acronym by breaking it down into 4 design concepts that you should keep in mind when designing anything, not just websites. They are Contrast, Repetition, Alignment, and Proximity.
Contrast is the process of making different elements stick out from the surrounding elements. If the type, size, and color are not the same – make them VERY DIFFERENT. As a previous instructor I had put it – “Don’t Be a WIMP!”
Contrast is most often classified the most important of all the following aspects, as it is what gets the reader to look at the page in the first place.
Having elements repeated across your website helps establish unity. These elements do not have to be exactly the same as they can have slight variations and different shapes and sizes.
For example, take the underline out of your logo and use it as a horizontal rule. Maybe take the hat of your comic character and use it as a bullet. There are many creative and unique ways to repeat elements to continually give the user a good feel about the layout.
Alignment is something that should always be taken into consideration. Every element you put on your page, poster, or business card should be put in the proper place. It should not be thrown onto the page to merely take up space. Aligning elements to other elements gives them a visual connection and guides the eye of the reader/visitor.
Center aligning everything is a sure sign of an amateur. Center align has its place, but the problem with it is that there is no hard edge for your eye to follow. Now if you right-align your information, the right edge stops at the same place on every line. This gives your eye an imaginary line which gives strength to the layout.
When items relate to each other they should be placed near each other. You shouldn’t have your address in the top right corner, and your zip code in the bottom left corner. They should be grouped together in order to help the visitor get the information they need quickly with a simple scan.
For example, when you create a list; elements are placed one under another. Imagine if these related items where all over the page. Would it be as easy to see what is all in the list?
Take a look at the following image and you will notice how much of a difference it makes to apply the above principles.
Tags: crap, design
Posted in Uncategorized | 1 Comment »
Sunday, November 9th, 2008
It is tough to get a nicely designed site that has visual appeal, but at the same time is usable and isn’t overly busy. The mistake of many web designers is that too much emphasis is put on graphics, and not enough on the content.
A few points that overall make a website aesthetically pleasing are:
Layout and Composition is the starting point at which a design is created. For most designers it is tough trying to come up with new ideas for each website, and decide how it is going to lay out. One of the most important things needed at this stage is a good overall background of the company. What do they do? Who is your target audience? What are their goals? Any design been done previously such as Business cards, posters, etc…?
Once you have a good idea about the above elements, you can beginning creating some initial sketches. These are usually done using some scrap paper, dinner napkin, or anything you can get your hands on. You sketch out the typically web components, not worrying about fancy graphics yet. Are you going to have a horizontal or vertical menu? Liquid or Fixed width? Pages going to have a sidebar? Is local navigation needed?
Once this wire frame is done, you can finally open up Photoshop and design your layout using graphics and text that you see matching the companies branding. One thing to remember is that good design pleases users, but the actually reason they come to your site is for content. “Content is King” is a phrase I have heard many times over. The graphics just support, and give you a professional look.
Color is a vital part of any web design. Color is something that brings life to your website and sets the mood. You may not realize that different colors have a mood surrounding them. For example:
When designing a site, you want to select several colors that you want to include and stick to them. Choose 2-3 different colors, and then use shades of each to draw different attention to each.
Here I will mention an acronym that will change the way you view any website, or advertisment. The acronym is CARP. CARP stands for Contrast, Alignment, Repetition, and Proximity. These are all factors that you want to include in any design descision you make. When choosing colors, the one that applys is Contrast. Select colors that can contrast well. White text on a black background will draw attention just because of the fact that the colors are complete opposites. Down the road I may expand more on the CARP theory.
We all hate reading that tiny text that is all squished together with very little whitespace. If I come across a website like this, I usually don’t care how great your content is, I will hit that backbutton. Choosing the appropriate fonts can go along way to keeping your visitors interested. The web has a bad rap when it comes to fonts as you need to stick to the defaults such as Times New Roman, Arial, Georgia, Verdana, etc… Many print designers when they design for the web are completely lost using only these fonts. They usually will creates sites entirely in graphics with no text as then they have the most control.
Most fonts can be defined into two categories.
Serif fonts are ones that have a little tail on each letter that guides the eye along the text. Times New Roman would be the most famous font that falls in this category. Newspapers, and printed material make extensive use of serif fonts.
Sans-Serif fonts do not have the serif (tail) on the letters. It is thought to be easier to read than serif on monitors. This is due to the fact that monitors do not have the level of detail that printed type can. A monitor has a DPI somewhere in the 72 range, and print is usually at 300 DPI. These fonts are also great for headlines. An example of a sans-serif font is Arial.
Imagery really complements all of the above points well. It has been said that “a picture is worth a thousand words”. Well on the web it is no different. People are known to scan the web and not read large blocks of text before deciding if they want to stay. What can grab the visitors eye than an image that complements the content well.
Images come from a variety of sources. You can take your camera off the shelf, go and visit the client and take pictures. You can use images the company already has taken in the past, use free images from the web, or even hire a professional photographer to take some images. All of the above do the trick in different ways. Icons can be taken from different sites to help give the visitor a little visual clue as to what a page does. A shopping cart icon draws a users attention sooner than text that says “Shopping Cart”.
There are just a few of the points to be made about creating that pleasing layout over and over again for each one of your clients. It is not always an easy task, but keeping the above in mind will go a long way to keeping your design usable and eye catching.
I suggest purchasing the following book, if you wish to learn more on this topic.
The Principles of Beautiful Web Design
Tags: design
Posted in Uncategorized | 4 Comments »
Twitter
Follow me on Twitter to keep up to date!
RSS Feed
Keep up with all of our updates by subscribing to our RSS feed!
FaceBook
Join our group on Facebook and become a fan of us!