Design Guidelines

This page outlines best practices in regards to designing for our content management systems and industry best practices.

File Format
Here are a few tips on sending us your files.

Proofs/Mockups
It is just fine to send a JPG format for mock ups (with smaller file sizes) while working on the design, or showing mock ups. Sending the entire design file isn't needed until it is final, and sometimes can be difficult to send large PSD files. Please make sure to rename all your revisions with numbers, and change the numbers each time you send a mock up. Example Design 6.1, 6.2, 6.3. This way we can reference them if revisions are needed.

Example of a mockup sample

Final Design Files
When the design is finished, please send the files in PSD, or another layered/vectorized format. PNG is also acceptable. If your artwork is large (file size) use YouSendIt.com.

Site Width
Your entire design should be no less than 1,000px wide (excluding background images). 1,000px is a good width, that will display correctly on most monitors. This allows room for a scroll bar on 1024 monitors.
You are welcome to design a stretchy (100% width design). Just be sure that it will still fit nicely with a minimum width of 1,000px.

Here is a list of the percentage of users that use certain displays.

Here is an example on how to measure the width of a site:


Site Fonts
All fonts are not shared between computers. Some programs install nonstandard fonts on your computer to widen your choices of typeface, but many of these fonts will not display correctly on the web. To ensure that your fonts will work, choose a web-safe font. For titles and navigation, sometimes you'd like to use a fancier font. In this case, we can embed specific fonts on the page.

Here is a list of web-safe fonts: /web-safe-fonts
Here is a list of fonts we can embed: http://www.google.com/webfonts?subset=latin
Read more about web safe fonts:http://en.wikipedia.org/wiki/Web_typography

Site Colors
Colors for the web need to have a hex value. These are referred to as web safe colors. It is a good idea to use the customer logo or marketing material colors for the website. Taking the logo and deriving color varifations is a good way to match the site color scheme to the logo. To do this take the logo into your graphic program, select the color you'd like to use, and adjust the transparency and or hue to get similar colors. Typically its good to have 3 or so colors on a website. Too many may look busy, and too little may look too plain.

Read more about web safe colors:http://en.wikipedia.org/wiki/Web_colors

Main Site Navigation
The location of site navigation should be above the top fold of the website. This means that when a website is viewed, the navigation is visible without any scrolling. Visitor resolutions vary, so most of the time, this means you will place the navigation within the top 400px of the website. Ideally it should be as close as the design allows to the top of the browser. It's a good idea if possible to have the navigation area expandable. Many times customers want to add or remove main navigation links, and you don't want the site to look incomplete if an items are remove, or crowded if any items are added.

Too Low: This navigation is not ideal, it is about 530px from the top of the page. It will most likely be below the fold on monitors that have a height of 600px .


Ideal: This design is ideal, it is close to the top and navigation items can easily be added or removed without changing the design, or layout.


Too Fancy: This design makes it hard to remove and add navigation items. It may require a redesign if changes are made to the main navigation. The location of navigation is fine, just the design limits the number if navigation items.


Rollover/Mouseover
Please show an example in your design to show what a link or navigation item looks like when moused over, or selected as the current page. In the above example you will see "search" is the current site section.

Footer Navigation
Sites with sections or even with just a few pages can benefit from a site footer. This includes usually just plain text links to all pages, or all main pages. This is very valuable for seo (search engine optimization).

Good example of site sections: Outlines site sections, and popular locations. Also has company contact information


Good example of site sections: Outlines site sections, and popular locations. Map of company location is also included.


Good example of site sections: Outlines site sections, and popular locations. Contact information is also included.


Sub-navigation/Site Sections
Sub-navigation is often a requirement for sites with a lot of content. It is a good idea to organize the site content into main sections. Typically each section has a sub-navigation menu. These are also know as sub-navs. Here are a few common location of sub-navs. it's also a good idea to have the site design indicate to the visitor which section and sub navigation page the visitor is currently on.

A "Horizontal Sub-Nav" will limit the number of items you can have, by the width of the navigation area. This type of sub-nav also prevents you from having multiple levels of sub-navs (menus under a sub-nav item).


A "Vertical Sub-Nav" is good for sites with a lot of pages. Only limits you by the height of the site, which can be extended if a lot of sub-nav items are needed. Multiple level sub-nav menus are possible with this type of sub-nav.


A "Dropdown Sub-Nav" is an older-style navigation, but is still useful in some applications. Generally we typically advise against this type of navigation, but it is very flexible, and can work well for some designs. This style of sub-nav will easily support multiple levels of  navigation.


Use of Images
For easy to edit and fast loading websites, it is best to use plain text for page titles, navigation items, and body text. This means you should avoid the use of drop shadows or other text effects that are not basic text properties.

Here is an example of using images for buttons. While they may look great, they will take longer to load (especially on a slow connection) and will be more difficult for the client to edit or add additional buttons if needed.


Main Navigation Images: It's best not to use images in your main navigation mainly for search engine reasons. There are fonts that can be used, and other ways to do navigation (javascript replacement), but they aren't idea, unless absolutely crucial. It is much harder to update or change navigation items if images are used.


This is a good example of an image rich page title, that uses plain text. The green is a background image, and the text is actual text with a embeddable font applied. This is ideal for search engines, and our content management system.


Site Tag
It's important you make room for either the netguava site tag or a graphic artists (reseller) tag. Normally this goes in the bottom of the website, on the right side. It's a good idea to use your slogan and link back to your website. It is important that this tag match the website, but also remain standard throughout all websites.

Here is an example of our standard one


Another example