Barupa's Website Design Tutorial
WWWearth logo
Step 1: Create Identity 



Establish an identity and use it consistently on all pages

          Viewers of our school/library webpages should know exactly who we are, and after linking should know if they're still on one of our site's pages. It doesn't mean every page looks the same, but the colors and graphics we use should be consistent throughout the website.

     First, establish a theme or identifying characteristic for your website. School colors and the school mascot are an already existing theme. Free graphics are plentiful on the web, and a little searching will locate several different pictures of a school mascot in appropriate colors. Use the school name in some combination of school colors to make a classy graphic. Or use any of the hundreds of free graphics related to education and to particular subjects.

     Second, coordinate thematic elements. Choose one or two main graphics, perhaps a logo and a background image, and two or three additional graphics related to the main one. For example, a colorful graphic of a Native American mascot can be the main identity, an outline or silhouette of the mascot's head can be a background image for some pages, and related images like  tomahawk, arrowhead, headdress, teepee or moccasins are graphics for other pages.

     An educational main theme might be a pencil and notebook, with apples, alphabets and children as added themes. A pencil image on the homepage can be a background image on subpages; use the apple or children image as a secondary theme, carried forward as a background or an icon to other subpages. This transition ties the images together and makes it clear that the identity of the website is a school. Subject-specific teachers can use clipart, icons and backgrounds related to their subject to clearly identify their pages.

     Third, use colors and graphics consistently throughout the website. Even before knowing the number/type of pages or the navigation scheme, create a homepage template and three or four sub-page templates using the chosen colors and graphics in combinations that are eye-catching and carry forth your identity. Use similar colors as background colors, in background graphics, as text colors, and in navigation bars and elements.

     Design the templates to establish background color or image, text and link colors, and a particular identifying graphic for each page. (Keep in mind that dark backgrounds with light text will not be printable.) When displayed as a group, your templates should clearly show consistency of identity. Creating templates now may seem premature, but time spent establishing the theme and identity through color and graphics gives a professional look to the website and saves time later on as templates are adapted to navigation and content. Remember that fancy graphics won't help a poorly planned or inconsistently applied theme.

     Fourth, reinforce your school or district website identity. A large and varied site can be overwhelmed as individual schools, teachers, and departments establish a unique identity. Coordinate pages with the main school or district website by including recommended school & district logos for a links to the relevant pages. Skillful design on subsites can embellish and enhance the main site's web presence.

     We can all have professional-looking websites by establishing a consistent theme for our webpages. Does your identity carry through all your webpages?


Barbara Paciotti 2004

Intro | 1-Identity | 2-Customer | 3-Navigation | 4-Layout | 5-Content | 6-Graphics | Back to HOMEPAGE