<<< HOME

PAGE DESIGN BASICS: HOW TO START THINKING ABOUT A WEB SITE

      1) WHAT IS THE SITE FOR?
Most Web sites start out the same way, and you're already at that point: they start with a need.In your case, you need a job. So all right, you know you want a site to reach out to potential employers, but how do you begin? The next question that starts a Web site rolling is:
      2) WHO IS YOUR TARGET AUDIENCE?
That is: who are you trying to reach with your site? OK, employers in audio and video, but what are they like? What do they respond to visually? What things will they be looking for in an employee? Research: go to the Web sites of the companies for whom you would like to work. What is the imagery you find there? How would you characterize their sites?
      3) MAKE A FEATURES LIST
Once you have a good idea what your audience is looking for in your skills and the style of your site, it's time to list the features your site should have. Should your site have work examples? Should it have a certain look? Do you need a bio? Think of every little thing that should be on your site, and compare what you have on your list to the successful portfolio sites you know.
      4) CREATE YOUR SITE'S ARCHITECTURE
With your features list in hand, you can now realistically begin work on the "architecture" of your site. "Architecture" in this context means the structure. First of all, you need to confront the UI (user interface) design of your site: what is on the index page (home page)? What is not? What sections should there be, and where are the buttons or links that take the user to them? Do you have a logo? Once you've worked out a flowchart of your site, you can name and group the folders (directories) that will make up your site as it sits both on the host server and on your workstation.
      4) SKETCH OUT A BASIC DESIGN
By now, you have figured out the kind of look your site should have: it's time to sit down and work it out on paper or in Photoshop. What is your business "image"? Do you have a logo? What should your color scheme be? Are there images you think sum up your work?

 

ON THE LOOKOUT FOR EXAMPLES ON THE WEB

    Every week you should be looking for sites in your discipline that you think are great.
  • What do you like about the overall feel of the site?
  • Do they offer you something you want?
  • Are they set up do the same kind of things you want your site to do?

 

WHAT ARE THE FEATURES OF A PRO WEB SITE?

Go to MSN.com, the site we've been using for an example. There are basic things you will find on most professional sites: corporate branding, content, navigation scheme, and advertisements. Think about them as you think about your own site, in order of importance.
        1) Corporate branding:
Whose site is it? "Branding" is not about cattle identification in a corporation, it's about creating a corporate identity and building that identity with the public. Look in the upper left-hand corner of the home page. See the "msn" and the little multicolored butterly logo? MSN has spent millions creating and testing that logo, and putting "butterly" ads on TV to reinforce it with the public. The logo says many things: this site is free-wheeling and fun, not stuffy, colorful and (importantly) looks good with the NBC peacock logo.
        2) Content:
What is this site for? Why should a user pause on this site, and not take off somewhere else? The content. MSN is offering free information to people, in this case, news and personal development features. Most of the content on MSN is in the center portion of the screen, in bullet points and small digestible bits of articles called "kickers."
        3) Navigation:
How do I find the content I want? The best site content in the world is useless if users can't find it. On the right-hand side, find a list of topics; in the middle portion of the page, find kickers with links and clickable bullet-points; on the top, the first thing you're offered is access to a search; just under this, is user-customizable sub-site.
        4) Advertising:
Now you have your stuff, what can you do for us? No business, least of all a well-oiled machine like Microsoft, does stuff out of the goodness of their hearts. MSN makes some bucks back by placing ads on their pages. The balance of ad space to content is crucial: too many ads or those in bad taste can turn users away. Look how discreet MSN is: only two real ads in the first viewable portion of the home page and no blinking allowed; but look under that ad -- those are ads disguised as features, with the same clickable links as in the "free" content portion. Look up in the top bar, two more little, itsy-bitsy advertising links. Tricky, unobtrusive, and in relatively good taste.

 

PROFESSIONAL SITE STRUCTURE

Here in the West, we read from left to right, and from the top down: that's our visual hierarchy. Bring up a couple of movie posters:
        Mystic River Poster
Look at the position of the cast names. Who is the star of "Mystic River"? How do you know?
        Pirates of the Caribbean Poster
Look at the placement of the pictures. Who is the star of "Pirates of the Caribbean"? How do you know?
The truth is that the placement of an actor's name and image on movie posters are the subject of torturous legal negotions, just because of our visual hierarchy (Visual hierarchy---Johnny Depp: top billing; Geoffrey Rush: second billing; Orlando Bloom and Keira Knightly, equal third billing). So given the hierchy of Web site importance, where are things usually found?
        1) Corporate branding: Upper Left-Hand Corner
Whose site is it? The upper left-hand corner is the visual king-spot for a site. 99.99% of the time, you'll find the company logo here for that reason.
        2) Content: Middle Panel & Colorful
What is the site for? Like the Johnny Depp photo in the "Pirates of the Caribbean" poster, far left is not best; best is left center and higher. Since sites are in tables, usually higher is not likely, so there is more color in the content than in the navigation.
        3) Navigation: Left or Top & Bland
How do I find the stuff I want? Navigation has GOT to be handy to take users around the site, so it usually on an "L" shape around the content cells, left and top.
        4)Advertising: To the Right
Who's paying the bills?Ads are usually colorful, like content, but off to the right, where they are lower in the visual hierarchy.