Hi everyone,
I’ve distilled some of our company’s design guidelines down into article form! I hope you’re able to take away some useful info on good web design practices.
Your website design is the foundation upon which your web presence will be built. It affects you (or your company’s) identity, your user’s experience, the strength of your message, and much, much more. Web design is about more than just a strong visual. It consists of a myriad of separate details that accumulate to provide a strong website and a smooth user experience.
To that end, there are basics that you should always keep in mind when building or requesting a website.
Design
1.) A user’s experience is largely affected by your website design. The atmosphere of a website is built from the combination of many small details (icon styles, gradients used, shadows, element padding, and more). Taken separately, these details seem unimportant, almost frivolous, but worked on in the context of the larger site design concept, these details subsequently add up to a singular user experience. Thus, you should be very detail-oriented when coming up with concepts and when constructing all the separate elements of a website.
This applies to any website or design. Even plain or seemingly empty designs can have a lot of detailed touches. In fact, such a design may even rely more on consistency and quality in its details, as that design has little else within which to establish its identity.
2.) The color scheme for your website helps establish an identity for you, your business, or product. Try to stick to only two major colors (blue and white is the most commonly used color combo, but certainly not the only one.) For example, Noam Design’s own site works with green and black.
You can use a three-color combination as a design scheme, but keep in mind that a two-color combo will invariably involve a third color when assigning a color to the website’s content. (For example: the text on Noam Design is white or grey.)
The use of only two or three colors in an overall design scheme goes a long way towards focusing the user onto the site’s content, and immediately establishes the identity of that website or the business reflected in that site. A limited color scheme is a bold, direct statement.
3.) Speaking of focusing the user…each page on a website should be anchored by a singular element in order to focus a visitor. Think about what information should be first presented to a visitor and make that it is the most immediately visible. Don’t place main elements of this nature down the page. If a user has to scroll down to find the focus, then it’s not the focus.
Anchoring the page with a focus is also useful for avoiding informational and/or design clutter on a website. A user must be able to quickly ascertain where they want to go, what links they want to click, where their information is, etc. Both Google and Yahoo are extreme examples of this. Google sacrifices almost all other information in preference to focusing a user on the search field. Yahoo, on the other hand, piles all of its features on its front page, but still provides its iconic logo and search function at the top, immediately visible and larger than all other elements, to focus the user on the primary goal of the site.
The elements themselves should also be designed with focus in mind. The more important the information contained in the element, the larger it should be. Think bigger fonts or other ways to differentiate your information.
Don’t get too crazy, though. In general, a clean and uncluttered site is the golden rule in web design.
4.) One of the most important design characteristics to maintain is a sense of consistency. This goes hand in hand with the above design basics. The design, color scheme, and details of your website should remain consistent throughout the entire site. Navigation bars or menus should remain present wherever a user goes. Effects and design details, large or small, should function the same way on every page. When spacing or padding elements, always maintain the same distance between them. This contributes to the overall style of the website.
Search Engine Optimization (SEO)
Your website is consistent and clear in its design, but is it visible to the internet at large? Good SEO practices are (or should be) interwoven with web design. Practice optimization in addition to design and you’ll make it easier for you or your clients’ site to remain prevalent in search engine results.
1.) Use title tags for all links. This improves the user’s experience (they know where they’re going before they click) and makes it easier for Google as well.
2.) Use friendly URLs. The name of the URL in a website should always be related to the page it represents. This makes it more recognizable to visitors and easier to categorize in Google searches. If you have a page name that is several words, separate them with a dash or an underscore. (For example, www.noamdesign.com/Web-Design-Blog)
3.) URL redirects. URLs without a “www” in the beginning should ALWAYS redirect to a “www” address. Not only is this the industry standard, but you risk losing half your inbound links (and thus your Google page rank) if you do not do this. Google will often read a site without the www as a different site than the one with the www. You can avoid this split with a redirect.
4.) Content-wise, try and keep to one topic per page. This helps in delineating a singular page title, description, and URL. (Again, making it easier for Google to index your site.) You should follow this when designing and implementing headings, as well. The H1 tag should be used very sparingly; preferably only to mark the applicable topic. Use H2 and H3 tags for the sub-headings (and sub sub headings, etc.)
5.) /index pages aren’t necessary (ditto for /home). For example: “www.mysite.com” should be your index, there is no need to redirect.
If you have an image or announcement you need to put before the index, that can be accomplished just as well with Javascript, which has the upshot of increasing the interactivity of the site.
Interactivity
Interactivity is a great way to keep a user on your website and is something to keep in mind while designing your website. Always try to increase user interactivity in everything you do!
1.) Include calls to action (Buy Now! Click Here!) and keep those calls to action prevalent, repeated, and consistent through the site.
2.) Interactivity can be on both large and small scales. Make sure images and links have titles and alt tags, so a user has them pop up whenever they mouse over (this also helps with SEO). Consider other mouse-over effects where applicable, as well.
On the smaller end of the scale, make your menus in four states: Regular, Current, Hover, and Down/Clicked (or Active, if you use that term).
Pages within the site can be made so they open in a JavaScript window while keeping the originating web page viewable. (A good example is the Contact Us field on the Noam Design website. Or RSS feeds on the My Yahoo sites.) This can be accomplished with a Javascript “lightbox”.
However, you should always attempt to use CSS when adding interactivity to elements, pages, or the site. As opposed to CSS, Javascript will tax a browser’s memory and make the page load slower, so use CSS unless Javascript is necessary. You can also use Flash and combinations of CSS, Javascript, and Flash, but again, only when necessary.
(A note for developers: keep CSS and Javscript code and/or files external, with CSS stationed on top and Javascript on the bottom.)
Load Speed
Interactivity is intertwined with your website’s loading speeds. Both function to keep a user interested and both should be kept in mind when designing a website!
1.) Another golden rule: A website should always load as quickly as possible, regardless of content or programming.
You always want to reduce the number of HTTP requests. Big sites with rich images can be a hindrance to this, so combine images wherever possible. Use CSS as a background positioner, with separate divs. (Don’t use tables.)
A good example of this can be found in the Noam Design website menu. Notice that it is one image that contains all four states of each link, instead of several images. (In general, you should do this with any website menu.) Another example of this can be found when you do a Google search. Many various icons and images come up, but the page itself only contains three images! In this manner, Google maximizes the efficiency of their site, allowing it to always load quickly for millions (perhaps billions) of user’s worldwide.
2.) Once you’ve combined your graphics into one image, the file size of an image itself can be reduced by utilizing Photoshop to save images as .png8′s.
When making an image to be saved as .png8, make sure you’re only using 8 colors, as the png8 format doesn’t use gradients. Always design icons and images for .png8, as it usually provides the most quality for the smallest file size. A sharp website and iconic design can still be accomplished in this manner. If you want proof, just visit Apple’s website. Almost every image there, including their iconic logo, is a .png8 file.
The reason we insist on this format is because it avoids cross-browser compatibility issues.
3.) If you need to create an image that utilizes gradients, transparency, or opacity effects, use the .png24 format (or true png, as it might be called). You can also save these images as .jpegs, but check to see how large the file will be first. In most cases, saving as a .png24 will provide a smaller file with no quality loss.
4.) Flash loaders should always be as unobstrusive as possible. Pre-load only what you need when utilizing Flash. Have the rest of the elements load on demand.
And that’s all for now!
Design, consistency, interactivity, SEO, loading speeds, and so much more. All of these combined result in a solid design foundation that makes it easy for your visitors to use your website. It’s a lot of little touches to remember, but they add up to a solid and powerfully functional result.
Web Design Basics – Good Web Design Practices is a post from: Noam Design
The post Web Design Basics – Good Web Design Practices appeared first on Noam Design.