Web Designing
NOTE: This information is gathered from different sources over internet few days back, and i dont remember the sources yet. Copyrighted material is belongs to the actual owner, and i don’t own this information.
Web Design Guidelines
– Web Designs can be created in any designing application, as it is not necessary to use the vectors or the simple jpegs.
– Best approach for creating web designs is to work on Adobe Photoshop, as it is easy to maintain the layers.
– Important to note that we should aim for less download time for the all the pages.
– Use the image format according to requirements in this order. JPEG, GIF, and PNG as last.
– Gather the information for the website layout from the client.
Web Page Template
– Select a design theme and pattern
– All images and layouts should be 72 DPI and use the RGB colorspace.
– Include a site color palette example with the layout. Below is an example of a color palette. When creating a webpage layout, knock up the design grid first in Illustrator, then a color palette on a hidden layer for fast color selection.
– Keep site consistent throughout. Don’t have a different background color on every page, or a different navigation scheme. Try to have at least one small icon or logo on every page on your site, somewhere at the top preferably, so that people will know they are still at your site.
Index / Landing Page
– Keep your home page / landing page below 100KB if possible, or reduce the content and images so it should load within 15 seconds.
– If page have vertical scroll bar, it should not require more than four clicks on the scrollbar to get to the bottom of a page.
– Keep main page as small as possible and include most important elements / services / products.
Web Page Navigation
– Make navigation on your site easy. Have navigation links at the top, bottom, left or right side of the page.
– Keep the number of clicks required to get from main page to any other page, down to three or four.
Web Page Fonts
– When placing text within web page, always be consistent with fonts. Don’t use different fonts throughout pages. The standard fonts used on the Internet are Arial and Verdana. The standard text size is 2.
– Headlines require a larger font size, are a bit different. A popular headline font used is Georgia.
Web Page Background and Text Colors
– Busy backgrounds make text difficult to read and draw the attention away from the text. In addition, always be consistent with background theme on each page of your site.
– Select your colors very carefully, as colors affect your mood and will have an affect on your visitors as well.
– Get client geographical location, it is very necessary to identify the desired layout and color theme for the website layout.
This color chart is solely based on my own experiences.
Colors names are taken from http://oreilly.com/catalog/wdnut/excerpt/color_names.html
Region |
Colors |
Indo / Pak |
Lightseagreen, limegreen, silver, white, honeydew, |
China |
Crimson, firebrick, saddlebrown, tomato, white, navy |
Middle East |
Dodgerblue, lightsteelblue, azure, honeydew, |
Germany |
Darkorange, orange, yellowgreen, black, orangered, |
Africa |
Navy, teal, darkolivegreen, purple, limegreen, |
U.S.A. |
Gray, linen, peru, whitesmoke |
These colors are not what everyone from the region will accept but it is for the majority. If client already told about the colors or already have a website, we must consider the colors wisely.
Screen Sizes & Layout
Create a layout from one of the screen sizes below and use “safe dimensions” if it is required not to have any scrollbars on the website.
Screen Size |
Safe Dimension |
800px X 600px |
768px X 410px |
1024px X 768px |
1000px X 575px |