Balanced Page Design

Web page design is largely a matter of balancing the power of hypermedia Internet linkages against the ability to imbed graphics and motion media within networked Web pages. Some home or menu pages function more like the covers of books or magazines. The idea is to draw the user into the material with a combination of text descriptions and interesting graphics related to the subjects:

image 1
Graphic has been reduced from the original size. www.apple.com

The most efficient designs for general (mostly modem-based) Internet audiences tend to use careful layouts of text and links with relatively small graphics. These pages load into viewers quickly, even when accessed from 28.8 kbps modems over SLIP or PPP lines, yet these pages still achieve a substantial graphic impact. This is razorfish's elegant but minimal layout design for the Pace-Wildenstein Gallery:

image 2
Graphic has been reduced from the original size. http://www.pacewildenstein.com

The screen is smaller than a printed page
While Web pages and conventional documents share many graphic, functional, and editorial similarities, the computer screen is the primary delivery site for web-based information, and the computer screen is very unlike the printed page. Graphic designers often create page grids that look great on their extra-large monitors, forgetting that most users cannot display more than about half of the typical Web page at any one time, and only 10% of Web surfers ever scroll the page.

Width of page graphics
Computer screens are typically smaller than most books or magazines. A very common mistake in Web design is spreading the horizontal width of your page graphics beyond the area most viewers can fit on their 14-15 inches display screens.

image 3

Graphic dimensions for web pages
Web page graphics should not be more than 535 pixels wide or more than about 320 pixels high, or the graphic will be too wide to print on letter size or A4 paper. Even when your readers have large display screens, the typical Netscape or Internet Explorer window still defaults to a window width designed for smaller monitors. Microsoft's otherwise excellent home page is too wide for many standard office monitors:

image 4
Graphic has been reduced from the original size. www.microsoft.com

The following size recommendations are based on the typical dimension of a Web browser on a 14 inch or 15 inch Macintosh or Windows 95 screen:

image 5

Design grids for HTML pages
A Web page can be almost any length, but you've only got about 30 square inches at the top of your Web pages to capture the average reader, because that is all they will see as your page loads. If all you offer is a big, slow-to-load graphic, many casual readers will leave before they ever see the rest of your Web site.

Consistency and predictability are essential attributes of any well-designed information system, aiding users in identifying the origin and relationships of World Wide Web pages, providing consistent and predictable access to interface and page elements, and a consistent graphic design scheme. The design grids that underlie most well-designed paper publications are no less necessary in designing electronic documents and on-line publications, where the spatial relationships between on-screen elements is constantly shifting in response to user input and system activity.

Clown's pants
Current implementations of the Hypertext Markup Language (HTML) do not allow the flexibility or control that graphic designers routinely expect from page layout software or conventional multimedia authoring tools. However, the HTML markup language can be used to create complex and highly functional information systems if it is used carefully. When used inappropriately or inconsistently the typographic controls and inlined graphics of World Wide Web (Web) pages may result in a patchy, confusing jumble, without any apparent visual hierarchy of importance. This unfortunate "clown's pants" effect of haphazardly mixed graphics and text results in decreased usability and legibility, just as it does in paper pages. A carefully organized design grid that is consistently implemented across a range of pages will aid your users in quickly finding the information they want, and will increase the reader's confidence that they are using a thoughtfully organized collection of information:

image 6

Related Articles

  • Use Feng Shui Techniques To Design A Harmonic Website For Your Business
    By following feng shui guidelines and techniques, you can build and design a business website that is not only visually attractive but also attractive to wealth and prosperity...
  • Designing for Clarity
    Once you have your content, arranged it into a likely architecture, and worked out where it will sit on the page, youre ready to design the display layer. The goal is to arrange various elements on screen to maximise the users chance of using the site successfully...
  • Basic Graphic Design
    Whether you design your business brochures, flyers, web page, or ads there are some things that you need to know. There are some basic graphic design principles that those of us trained in the commercial art/graphic design field dont always share. Heres a short list of elements of graphic design.....
  • General Design Tips
    Photo editing, or illustration may be practiced for fun, but no one can pretend being a designer without knowing the rules of graphic design. Many people think that being original, and thinking out of the box is a good thing, but it actually isnt if you dont follow the rules...
  • The Worst Web Site Design Advice I've Ever Seen
    Reading a recent article on the things you shouldnt do as you build web sites, the author stated, Dont link out unless you *want* your visitors to leave! That might apply if youre building a one-trick pony, that is, a mini web site only designed to sell one product. For everyone el...
  • Is Dmoz Listing A Test Of Patience?
    Dmoz is always viewed as the key to get higher traffic and increased PageRank for your website. Webmasters and online business owners aim for a Dmoz listing with the faith that it can help their sites rank well on the search engines especially in Google - since Google uses the information contained ...
  • Guidelines for Using Colour
    Colour is one of the designers best tools. There are lots of ways to use it to help communicate a message. Colour can carry meaning, express personality, differentiate, frame, and highlight content...
  • Balanced Page Design
    Web page design is largely a matter of balancing the power of hypermedia Internet linkages against the ability to imbed graphics and motion media within networked Web pages. Some home or menu pages function more like the covers of books or magazines.
  • SEO Tip: How Do Search Engines Choose Page-One Sites?
    You may be wondering how search engines arrange the top pages from millions of others. There are calculations involved and you have to work with these to put your site in page one.
  • A Web Hosting Guide for Beginners
    Besides a qualitative web design and unique content your hosting choice might be decisive, so read these tips to be able make a wholistic approach to a site building process.

Contact Web Design Outsource and get started today

Need Website Designing, Development, Redesigning, Maintenance and SEO services or help growing your company's web presence? Request a free Quote Now.