Subscribe To This Site
Designing For The Web
Designing For The Web :
While there is more to effective design on the Web than can be explained here, we suggest a few basic principles that can help you create Web sites and pages that are both attractive and effective. Even if you do not create Web pages, knowing these principles will help you understand and explain to other people why some Web sites and pages work better than others.
Effective design on the Web is a design that responds to the real information needs of the people who visit the site. Your first decision must be about the purpose of the Web site: for example, entertainment, advertising or advocacy on research writing. Beyond that, many of the principles of good Web design are the same as those for print publications - movement, white space, chunking and placement of graphic elements. The following sections build on those principles with specific attention to the interaction between Web site Structure and Web page design.
People do not read Web sites in the usual sense of the word - rather, they scan or browse them. Thus designing for the Web calls upon you to adjust traditional print publication practices accordingly. Visualize how you yourself use the Web - one hand holding a cup of coffee, the other on the mouse, scanning, scrolling and clicking (forward and back). This is the situation effective design on the Web must respond to.
When you write for the Web, you need to meet the needs of readers who browse or scan. In general, this means using more lists, headings and open spacing than might be the case in a paper document, highlighting keywords and writing shorter paragraphs whose main thought almost always falls in the first sentence and which stick closely to just one idea each.
Here are some specific tips for writing for the Web:
• Keep your screens simple. Crowded or jumbled screens drive users away fast.
• Rely more on bulleted or numbered lists than on paragraphs.
• If you must use paragraphs, keep them short (five lines or so) and make sure you put the main point of every paragraph in the first line (that's all most readers will look at).
• Try to use fewer words. Cut out the deadwood in your prose.
• Write headings and subheadings carefully and leave enough space around them so that a scanning reader will see your key points easily and quickly.
• Highlight keywords. Bold italics work well on the Web. Remember that combining boldface or underlining with color will make readers confuse your highlighted keywords with hypertext links.
• Try to write anything longer than two or three screens as a series of linked pages, each with its own heading(s). At this point, Web page design becomes Web site structure. The first page needs to be a summary of the whole site with links to the other pages.
• Make each of your pages reasonably self-contained and self-explanatory. One good test is to print out each page by itself and look at it carefully. Does it make sense without the context of the first page? If not, you need to work on the site some more.
It's hard to generalize about how to use visuals on the Web. As with print publications, keeping the visuals as close as possible to the corresponding text is critical. Be careful with color graphics - the ones that are too big or complicated are slow to load. These need to be simplified or rendered in black and white. If you're writing an academic report that relies on words more than graphics, you might use a layout like that of the introduction page from the NASA Website. On the other hand, if your document is advertising a new product, people need to see the product as well as read about it.
If a Web site is more than one page long, both the structure of the site and the design of each page need to accommodate its length. Thus on the Web, page design flows into site structure.
The following sections briefly explain two popular structures.
One easy way to structure a site is to set it up as just one page, but a page that can be very long. You can see a good, simple examples. There are three columns and readers have to keep scrolling down to see all that is in the page or in any of the columns. The site's creators must judge carefully what readers should see on the first screen to open and what they will have to scroll down to get to. Notice also the way small graphics are incorporated into the design. In each case, clicking on the graphic takes users to other sites. The endlessly scrolling site is a very simple but effective structure. Students (and others) often use this design for newsletters, for schedules of events or for putting resumes on the Web.
A more complicated structure is the hierarchical site, a structure that would be more appropriate for a long resume, a student organization's Web site, a long report or a corporate Web site. In the abstract, such a site's design looks like a home page connected by hypertext links to major subpages. The first page of this site is a classical example for this type of site. The first page gives a hypertext link to one of the pages on level two. The second level of the site would then consist of separate pages linked to each of the headings introduced on the first page. Graphics can easily be worked in as separate subdocuments linked to the main page. Thus the effect is hierarchical. The reader starts at the top and then navigates down through the levels to find the desired information.
A student's report for an academic class or a complete multi page resume or a student organization's Web site could be set up in either the endlessly scrolling or the hierarchical structure.
Some people who specialize in Web page design and site structure belittle the endlessly scrolling site as too simple, but when designing your page you cannot allow your choice to be dictated by the highest technical level available to you - your Web site design needs to be governed by the purpose of the site, the needs of users and the nature of the site's content. If a simpler design will do the job, the simpler design is better.
There are those who argue that for academic, corporate or government reports, the typical HTML (Hyper Text Markup Language) Web page with its emphasis on graphics, color, short paragraphs and the like may not in fact be the best choice. An alternative is to convert the files for your print document into PDF (Portable Document Format) files using Adobe Acrobat. What you will get on the Web are pages that look much like print pages, but offer you much of the flexibility of HTML - hyperlinks, color, searching and so on. The Adobe Acrobat Reader is needed for viewing PDF pages, but the reader can be downloaded for free.
A number of sites on the Web offer templates for typical Web sites and pages. Use your favorite search engine and look for Web site templates to find more. The endlessly scrolling site can be all one column or multiple columns.
To continue the section on Considering Design,
1. A Few Uses of Document Designs
2. Planning A Design
3. Considering Type
4. Considering Layout
Effective design on the Web is a design that responds to the real information needs of the people who visit the site. Your first decision must be about the purpose of the Web site: for example, entertainment, advertising or advocacy on research writing. Beyond that, many of the principles of good Web design are the same as those for print publications - movement, white space, chunking and placement of graphic elements. The following sections build on those principles with specific attention to the interaction between Web site Structure and Web page design.
How The Web Is Read? :
People do not read Web sites in the usual sense of the word - rather, they scan or browse them. Thus designing for the Web calls upon you to adjust traditional print publication practices accordingly. Visualize how you yourself use the Web - one hand holding a cup of coffee, the other on the mouse, scanning, scrolling and clicking (forward and back). This is the situation effective design on the Web must respond to.
Writing For The Web :
When you write for the Web, you need to meet the needs of readers who browse or scan. In general, this means using more lists, headings and open spacing than might be the case in a paper document, highlighting keywords and writing shorter paragraphs whose main thought almost always falls in the first sentence and which stick closely to just one idea each.
Here are some specific tips for writing for the Web:
• Keep your screens simple. Crowded or jumbled screens drive users away fast.
• Rely more on bulleted or numbered lists than on paragraphs.
• If you must use paragraphs, keep them short (five lines or so) and make sure you put the main point of every paragraph in the first line (that's all most readers will look at).
• Try to use fewer words. Cut out the deadwood in your prose.
• Write headings and subheadings carefully and leave enough space around them so that a scanning reader will see your key points easily and quickly.
• Highlight keywords. Bold italics work well on the Web. Remember that combining boldface or underlining with color will make readers confuse your highlighted keywords with hypertext links.
• Try to write anything longer than two or three screens as a series of linked pages, each with its own heading(s). At this point, Web page design becomes Web site structure. The first page needs to be a summary of the whole site with links to the other pages.
• Make each of your pages reasonably self-contained and self-explanatory. One good test is to print out each page by itself and look at it carefully. Does it make sense without the context of the first page? If not, you need to work on the site some more.
Visuals On The Web :
It's hard to generalize about how to use visuals on the Web. As with print publications, keeping the visuals as close as possible to the corresponding text is critical. Be careful with color graphics - the ones that are too big or complicated are slow to load. These need to be simplified or rendered in black and white. If you're writing an academic report that relies on words more than graphics, you might use a layout like that of the introduction page from the NASA Website. On the other hand, if your document is advertising a new product, people need to see the product as well as read about it.
Web Site Structure And Web Page Design :
If a Web site is more than one page long, both the structure of the site and the design of each page need to accommodate its length. Thus on the Web, page design flows into site structure.
The following sections briefly explain two popular structures.
The Endlessly Scrolling Site :
One easy way to structure a site is to set it up as just one page, but a page that can be very long. You can see a good, simple examples. There are three columns and readers have to keep scrolling down to see all that is in the page or in any of the columns. The site's creators must judge carefully what readers should see on the first screen to open and what they will have to scroll down to get to. Notice also the way small graphics are incorporated into the design. In each case, clicking on the graphic takes users to other sites. The endlessly scrolling site is a very simple but effective structure. Students (and others) often use this design for newsletters, for schedules of events or for putting resumes on the Web.
The Hierarchical Site :
A more complicated structure is the hierarchical site, a structure that would be more appropriate for a long resume, a student organization's Web site, a long report or a corporate Web site. In the abstract, such a site's design looks like a home page connected by hypertext links to major subpages. The first page of this site is a classical example for this type of site. The first page gives a hypertext link to one of the pages on level two. The second level of the site would then consist of separate pages linked to each of the headings introduced on the first page. Graphics can easily be worked in as separate subdocuments linked to the main page. Thus the effect is hierarchical. The reader starts at the top and then navigates down through the levels to find the desired information.
A student's report for an academic class or a complete multi page resume or a student organization's Web site could be set up in either the endlessly scrolling or the hierarchical structure.
Some people who specialize in Web page design and site structure belittle the endlessly scrolling site as too simple, but when designing your page you cannot allow your choice to be dictated by the highest technical level available to you - your Web site design needs to be governed by the purpose of the site, the needs of users and the nature of the site's content. If a simpler design will do the job, the simpler design is better.
There are those who argue that for academic, corporate or government reports, the typical HTML (Hyper Text Markup Language) Web page with its emphasis on graphics, color, short paragraphs and the like may not in fact be the best choice. An alternative is to convert the files for your print document into PDF (Portable Document Format) files using Adobe Acrobat. What you will get on the Web are pages that look much like print pages, but offer you much of the flexibility of HTML - hyperlinks, color, searching and so on. The Adobe Acrobat Reader is needed for viewing PDF pages, but the reader can be downloaded for free.
Model Templates For Web Pages :
A number of sites on the Web offer templates for typical Web sites and pages. Use your favorite search engine and look for Web site templates to find more. The endlessly scrolling site can be all one column or multiple columns.
To continue the section on Considering Design,
1. A Few Uses of Document Designs
2. Planning A Design
3. Considering Type
4. Considering Layout
