Articles

Web Page Layout

The one subject that I have found missing from all the Web design classes I've taken has been Page Layout. How do you arrange the elements of a Web page so that it is not only usable, put also visually pleasing? Not until I started taking courses in graphic design did the answers start coming.

Visual design teaches you how to arrange elements on a canvas and balance a composition so that the viewers eyes move where you want them to. Taking the skills I learned in art and design classes, I came up with these guidelines for composing a Web page layout.

1. Information grouping.

By the time you start laying out the page, the information architecture of the site should be nailed down. Hopefully you haven't decided on more than 3 or 4 major information groupings. The information within these groupings should be visually related into descrete regions on the page. This can be done by using similar font, color, size or proximity to make the groupings obvious.

2. Balance

The information groupings on the page should be visually balanced. No one grouping should draw attention much more than the others. Eye movement should be controlled so that user's eye naturally moves from one grouping to the next, then back to the first and so on. Any element that creates too strong a visual focus will cause many visitors to miss some of the other content. It can also cause tension or discomfort if their eyes are drawn to one part of the page, and the content they need is on another part of the page. This is the reason flashing banners and animated gifs are so annoying. In my opinion, cycling movement should never be used on a Web page unless it is the only item of interest on the page.

3. Manageble content

Each information grouping in the page layout should contain no more than 7 discrete pieces of information. Any more than that and the user will have trouble processing information.With less than 7 pieces, the user usually has no problem comprehending the choices and making a decision about which, if any, navigation path they want to follow.

You learn by doing, so I suggest that if you design Web sites, but haven't taken a good, challenging art or design class, you do so immediately. Good luck, have fun and keep learning!

Designing Websites for 1024x768 Screen Resolution

January 25, 2007

The very first thing you need to do when beginning the graphic design of a Website is to make two related decisions:

  • Will the Website be a fixed size, or will it stretch (or shrink) to fit the visitor's screen resolution and
  • What screen resolution will you optimize for?

For a while, 800 x 600 at fixed resolution has been very popular. And for a while, 1024 x 768 has been the most common screen resolution used by Web surfers 'round these parts. Take a look at my stats from last week:

 

Screen Resolution

Percent

1

1024x768

63.81%

2

800x600

10.81%

3

1280x1024

10.30%

4

1280x800

2.70%

5

1152x864

2.67%

6

1440x900

1.57%

7

1680x1050

1.17%

8

1280x768

1.17%

9

1600x1200

1.06%

10

1280x960

0.95%

So, if that is anywhere near typical, most of the visitors to those 800x600 fixed width Websites are seeing a lot of unused real estate on their screen. That probably accounts for the recent comeback of fancy page background patterns I've noticed over the past couple of years.

Just as 640x480 bit the dust, it looks like 800x600 could be nearing it's demise in the next couple of years. Not yet though. Ten percent of potential customers is a lot of people to give the finger to by placing crucial content outside of their 800x600 comfort zone. Here are my recommendations:

  1. Use a page design that fills the screen at 1024x768, but has no crucial content outside of the 800x600 box.
  2. Look at the page design at the different screen resolutions listed above that have a visitor percentage of 2.5 or more.
  3. Optimize the page for 1024x768, but make sure it still looks good, and displays crucial content at 800x600 and 1280x1024.
  4. Make sure the page design doesn't fall apart at 1280x800 or 1152x864.

I expect that all those people surfing with 1024x768 screen resolution are getting pretty bored of seeing that 800x600 stripe down the middle of their screen, no matter how pretty the background pattern is. Designing for 1024x768 will make your Websites stand out, and give at least the appearance of better use of screen real estate.

Information Design Made Easy

The task of information design aims to break down and organize the information that is to be presented on the Web site in a way that facilitates easy retrieval by the target user group or groups. You generally start with a large volume of information that is not necessarily organized in a Web-friendly manner if it is organized at all. Your job as a information designer is to break down, organize and present that information on the Web site you will be designing.

The main tools at your disposal to create a great information architecture are as follows:

  1. Discovery
  2. Content Outline
  3. Site Map
  4. Wireframes

Discovery means finding out everything you can about how the Web site will be used. Who will the users be? What will they be looking for? What tasks will they perform? What content will be provided and what is the hierarchy of importance? To learn this you need to go beyond what the client hands you, and find out as much as you can about their industry, their position in that industry, and their target audience.

Identifying all the information to be included in the site upfront is very important. Finding out in the middle of a project that you have a whole category of information that you hadn't counted on can send you back to the drawing board and waste a lot of everyones time. Of course clients will often think of something they want to add after you have started or even completed the design. A good discovery phase in which the client is closely involved will make that less likely.

Now that you have that big pile of information, it is time to break it down. The Content Outline should indicate every bit of information that will be found on the web site and determine the hierarchy of that information given the goals of the Web site. I recommend no more than 7 categories on any level of the outline. More than that will be difficult of the user to comprehend in a glance, thus making your design unintuitive. Too few categories per level will hide the structure from the user in the depth of the site.

Site Maps are basically web versions of flow charts. They are visual representations of the site structure and hierarchy and should include everything you have in the outline. It is helpful to number them in a way that corresponds to your content outline. The site map will allow you to work out the basic navigation of the site and show the way in which pages link to one another.

Now that you have a basic feel for the navigation of the site you can create Wireframes. Wireframes are schematic versions of the finished web pages. They will include specific information about navigation and content of each page, but not necessarily the page layout. That comes later, in the graphic design phase. Wireframes can even be done as HTML pages with working links to give the client a feel for the navigation. This will also allow you to perform usability testing if you desire.

Once you have your wireframes completed, you are ready to move on to the graphic design phase.

User-Centered Website Design

Carrot and Stick

From the standpoint of a web designer there are two perspectives you can take on how the website will be used:

  • The Sales and Marketing Perspective
  • The User-Centered Perspective

The sales and marketing perspective is usually the most obvious to website buyers. You want a website to sell products. You would like to lead the customer down the click path of your choosing, with the final step being the purchase. You also want to create certain associations with your “brand” in the customer’s mind, such as “our brand is stylish, ” or “our brand is valuable.” You want to condition the user to have certain reactions when seeing your brand. In short, you want to make the visitor do something, or do something to the visitor. You want to lead, or push them into action. When designing from this perspective you start with what you, as the Website owner, want the user to do, and design the Website to that end.

The other perspective you can take in designing is the user-centered perspective. The user will come to your Website for a reason. They may want to compare the price of your product to another product, or their budget. They may want to view product or service specifications, download a white paper, or make a purchase. When designing from this perspective, you start with what the user, or users, wants to do and design the Website to that end.

So you may guess at this point that if you were to design your website based on what the user wants to do, they would have an easier time doing that, and therefore have a better experience. They would see the Website as being more usable (easier to use) and feel that they had a better experience after using it. With the Website designed based on the needs of the sales or marketing department, the opposite can be true. Users may feel the site is difficult to use, especially if what they want to do does not match what the sales marketing people want them to do (or think they should be doing) on the Website.

In reality Websites are designed with a mix of sales/marketing perspective and user-centered perspective. Because of company politics, it is usually the case the sales and marketing department has more political power than the Web team, so it’s often difficult for the Web designer to shift the focus on to the user and away from making the Website an online brochure, or an exercise in operant conditioning. It is important that the user’s voice is heard. In the end, the best thing a Website can do for your business is to give the user a good experience by allowing them to do what they want to do. That won’t happen unless you design for it.

How to Plan a Website

Whether you are a Web designer, or the buyer of Web design services, the planning phase of the Web design process is the most important phase. Planning requires a significant amount of effort before there is a visable product, so it is sometimes a hard-sell to business people, especially those who are used to "flying by the seat of their pants." I often find, however, that once involved in the process, the client gains valuable insights into their business, their market, their clients, and their competitors. Taking time to really plan a Website project, which requires stepping back and thinking, in a systematic way, about how they are approaching their business, gives the Website buyer an unexpected added value, especially if they are in start-up mode.

The first step in planning a Website is define the project. You want to make sure that you, as Web designer, and the client are on the same page, and remain on the same page throughout the project. The following are questions that need answers:

  • Project Scope - What will be included in the project and what will not be included?
  • Audience - Who are the main types of people who will be visiting the Website, what are their characteristics, and why will they be visiting the Website. What will the want to do?
  • Competition - Who are the competitors and what do their Websites do and look like?
  • Niche - Specifically what market niche does the business occupy or want to occupy?
  • Positioning - What is the company's positioning strategy for their niche? Why buy their product or service over the competition?
  • Overall Goals - What does the business want to acheive through the Website? Sell products? Provide online resources? Present a professional image?
  • Business processes - How will the Website fit into the company's business processes? How will it integrate into those off-line processes?
  • Marketing and branding strategies - What existing marketing or branding stategies can be leveraged for use on the Website?
  • Workflows - What processes will need to be completed on the Website, described in a step by step fashion?
  • Goals for Web site - What specific, numerically defined goals exist for the Website. What are the expectations?
  • Keywords/Search Terms - What words will people searching for products/services/information use to find the client's Website, using the major search engines?
  • Message - What message should the Website communicate to the user, either explicitly or implicitly?
  • Perception - How should the user percieve the business, based on visiting the Website?
  • Action - What action or actions should the visitor take while on the Website?
  • Technology - What technology should be used in designing and building the Website?
  • Marketing - How will the Website be marketed? How will the business get visitors there?
  • Administrative - How will the Website be administered and maintained after it is launched?
  • Schedule - When does the Website need to be complete? When will decision makers be available or unavailable to approve deliverables throught the process?
  • Budget - What is the budget for the project? What is the ongoing budget for maintenance and updates? What is the budget for promotion?

The answers to these questions should be put into a "creative brief" or "project definition" document that will be used as a touchstone throughout the design process. The information in the planning documents should be as detailed as possible, and based on as much empiricle evidence as possible. Having someone fill the a questionnaire off the top of their head will be useful, but to the extent it rely's on guesses or false assumptions, it will provide flaws in the planning and therefore flaws in the finished Website.

Three Reasons to Have your Website Professionally Designed

The temptation to do a Website on the cheap can be overwhelming. The casual, non-technical Internet user may find it hard to see why they should pay hundreds of dollars for a website, when they get one for free with their Internet service. They have people on staff that are good with computers and can handle putting the Website together. Those employees know the company, so should be better for the job than somebody from the outside. These may seem like valid reasons for not choosing to have an outside company design and maintain your Website, but consider the following:

Ease of use is not easy to design. Nothing is more frustrating than going to a Website and not being able to find what you are looking for. Chances are that a person not educated in information and interface design is going to make some serious errors in designing a Website, which will lead to negative user experience. Studies have shown that a negative experience such as this does reflect negatively on the company or brand associated with the Website. You can be seen as the best in the field at your core business, but a poorly designed Website can undo this reputation, or at least prompt your customers to question it.

Websites made for free look it. Unless you have someone on staff that is experienced in graphic design, your Website, created in-house, is going to look cheap. Like it or not, appearance does effect the way current and potential customers evaluate your organization. An unprofessional looking Website can affect your credibility in the eyes of your customers, and influence the overall feeling they have about your company.

Web Design is an inexpensive professional service. Thanks to the Dot Com crash a few years ago, the Bay Area is awash with unemployed Web Designers. It has never been less expensive to have a professionally designed and maintained Website than it is now. If you don’t have plans to upgrade your Website, chances are a number of your competitors do. Have you looked at your competitors’ Websites lately? How do they compare with yours? Are you willing to give them that edge?

Conclusion – It’s better not to have a Website at all than to have one reflecting less quality, expertise and effort than you put into your core business.

Subscribe

Enter your email address:

Delivered by FeedBurner