It is important to keep in mind that it is the duty of your hired web design firm to educate you on the “in’s and out’s” of web design. Though the concepts and technology behind web design may be foreign to you, it is always beneficial to have a general understanding of this new investment.
Through research and experience, Lform has come up with a list of top web design principles for you to keep in mind when providing design feedback. Remember, it is your job to present the designer with visual or functional problems, and it is the designers job to come up with the best solution.
To begin, it is important to understand the difference between graphic design and web design. Though the words, graphic and web design, are often used interchangeably, they are not one in the same. Web design (design for the web) can be seen as a specific sub-set of graphic design (print), which has its own rules and ideas. Good web design involves the use of appropriate graphics, fonts, colors, layout, web accessibility, and design, to give your target audience a unique and exciting user experience.
Remember, design principles exist because they work. How you apply those principles determines how effective your design is in conveying the desired message and how attractive it appears. These principles will help you create a visual hierarchy, thus being able to effectively community your message to your users.
Below you will find a list of the most widely recognized principles of web design, and how they can be applied to your new website!
Have a Clear Message
There needs to be a clear message or an idea to be communicated. It doesn’t matter how beautiful the design may look; without a clear message, it’s an empty shell.
Speak with One Visual Voice
All parts of a design must talk to each other… in the same language. Ask yourself: “Do all the elements in the design relate to each other?” As soon as one element seems out of place, the message is weakened.
Communicate — Don’t Decorate
Good design instantly communicates a message visually. Be creative with your designs; just don’t go over-board. Creativity and originality are amazing assets, but try not to stray too far from a typical layout because it can cause difficulties in navigation and functionality. In other words, don’t abandon proven design principles for the sake of being “creative”. Remember that even though creativity is essential, the most important part of a website is usability. If it’s beautiful, but not functional, it is worthless.
Make a Great First Impression
When you meet someone for the first time, you want to make a good first impression. The same should be applied to your website. The overall look and feel of the site is the first thing your visitors notice. Remember, the homepage sets the tone of your website, and all secondary pages should take its’ lead.
Clean + Simple ≠ Boring
“Clean and Simple” does not equal boring. Cramming too much content into each page creates confusion. Having to scroll through rows of links and images to find what you are looking for can be frustrating. Not to mention, too many colors can be daunting to the eye. Keep your pages clean so your visitors can easily locate what they need. Bottom line, less is more.
White Space is Your Friend
Maximizing the “white space” (or “negative space”) in your design is a great way to draw attention to important aspects of a page. If a page is too cluttered, the reader doesn’t know what to look at, and you run the risk of your message getting lost. White space is used to divide the space on a page and create a natural movement throughout the content. Remember, white space doesn’t mean “wasted” space, so fight the urge to fill it up!
Layout & Alignment — Visually Connecting the Dots
Each element of the design needs to be visually connected. If something is out of place or distinct from other elements, it will alienate itself and become non-functional. Existing hard edges should be used to line up other elements. Break alignment only for emphasis.
2 Typeface Maximum
Its important to keep the number of typefaces low. Too many fonts usually conflict with each other and overwhelm the viewer. Each font has a personality, and too many personalities can create disorder.
Fonts — Just the Right Size!
There are many factors that play into a font’s legibility on a website: user’s vision, computer screen resolution, color contrast between the foreground (text) and background, font typeface, and of course, font size. Because some of these factors vary so greatly, it is best to give the user more control over the design’s font size. When coding font sizes using CSS, relative size increments should be used, like ems or percentages, instead of set measurements, such as pixels or points. Relative increments are generally more legible because that are rendered relative to the user’s screen resolution. It is good practice to set the body text size in increments that are relative to 10-14 points.
Pick Colors on Purpose
Color selection can make or break a site, so make sure that when choosing a color palette it is both appropriate and relevant to your brand identity. Know what the colors will do when you combine them, and more important, what they might mean to your target audience. Color carries an abundance of psychological and emotional meaning, and this meaning can vary tremendously between cultural groups and individuals. Keep in mind that flashy colors or excessive use of various colors makes the site overwhelming. A good rule of thumb is to have 1-3 muted colors and 1 “pop” color (for contrast).
High Contrast = Greater Legibility
Always make sure there is a high contrast between the content (text and imagery) and background. This makes your website look professional, and of course, easy to read. White is still the safest choice for a background color (as black and white yields the highest contrast and best readability), but other colors can work as well.
Consistency is KEY
It is important to keep in mind that consistency ALWAYS outweighs creativity. Visitors shouldn’t feel like they have been sent to a completely different website each time they open a new page on your site. Most people are accustomed to familiar layouts within websites. Consistency among the pages on your site makes navigation a much easier task. All graphic images and elements, typefaces, headings, colors, layout and alignment should remain consistent throughout your website. Consistency and coherence on any web page projects a sense of professionalism.
Navigation Should be Intuitive
Don’t try to reinvent the wheel with your navigation; if people have to hunt for it, they won’t find it! Users should be able to find what they want quickly. There are few things more frustrating than not being able to find what you are looking for on a website. Pages should be well-organized with a top-down design so that people can easily browse to where they want to go on your site. Your visitors should be able to find what they are looking for in your site within three clicks. If not, they are very likely to click off your site as quickly as they clicked on.
Have Confidence in Your Logo
Often times clients ask designers to make their logo larger. This is usually a response to over compensate for something problematic in the design (i.e. the overall text or imagery within the site is too large, thus making the logo seem small). Generally speaking, a logo should be no more than 300px wide and 100px high. These dimensions, along with common logo placement (top left or center) will ensure brand recognition, along with user satisfaction.
Avoid Image Overload
Of course images are great to look at, especially if they’re relevant or beautifully designed, but when they take over a web page it can be daunting. It is never a good idea to replace
text with images. Rather, you should add imagery only to support the text (a diagram, graph, or example of what the content is trying to convey). By using text rather than unnecessary images, it will help you with accessibility, and it will allow your page to load faster.
Keep User Needs at the Forefront
Websites are like brands, they’re about your customers, not you. Breaking design rules “because you like it better that way” is always a bad idea. Remember that you are NOT the focus of the design; rather, your target audience is!
Break the Rules!
Breaking the rules is okay when a design calls for it. Many of the design choices reviewed here would not be considered by the average designer. This is what separates great designers from average ones. Those brave enough to go against what they’ve been taught always stand out. If you’re going to break a rule, be ready to provide examples and statistics!
Think you might be able to add insight to this post? Don’t be shy, let us know what you think!
