Foundations of Web Design

Embracing the Technology

The heart of design is communication: defining a problem and creating a solution that balances pure information with an aesthetic that gives the message voice. The tension between form and function is the starting point for the exploration of Web design.

HTML (Hypertext Markup Language) was designed in 1992 specifically as a semantic markup language, with few layout capabilities. The underlying philosophy was that you could mark your content with descriptions - this is a headline, this is a quoted passage, etc. Then any machine in the world could interpret those tags in an appropriate way, leading to the universality of the Web as a way to distribute content.

As soon as HTML began to enter the mainstream, people (notably browser companies) began to extend the language in proprietary ways to accommodate designers accustomed to having control over design and layout. The wanted control of colour, fonts, and images.

Some designers shook up the early Web by encoding entire pages into large graphics, sidestepping HTML, and making a valid point; the Web will not be an effective medium until it has the graphic power of other media.

Other designers and technologists have taken different approaches. Notably, those who have developed emerging technologies like Cascading Stylesheets, dynamic HTML, embedded fonts, and XML. These technologies are offering a future that doesn't depend on traditional approaches to design, but rather translates centuries of design heritage into the native language of the Web.

* One way to formulate a design philosophy is to think of Web sites as lining up on a continuum between a library and gallery. A library's sole intent is to take inquisitive people to the information they are seeking with as little effort as possible. A gallery offers similar amounts of information, but through a much more experimental path. But for both the point remains that presentation of information must adhere to its structure -m must follow function - for a Web design to be considered successful.

* In this new medium, a bond exists between content, design, and interactivity. Words, pictures, and codes are inseparable; ignore any one and you fail to exploit the unique nature of the Web. Understanding the essence of the technology behind the Web lets you use the medium appropriately and avoid surprises, which results in intelligent content that adapts to its method of display.

Good design is much more than decoration, just as well-written code will take a confusing hierarchy of data and guide an audience through layers of information to the nuggets it needs. The coordination of the two is invisible to the user when done well and very obvious when not.

* Degradable Web pages - meaning pages that look good viewed in any browser on any computer - are crucial to success online. If recent history of CD_ROMs has taught us anything, it is that making multiple versions of a single piece of content. for different kinds of computers - with modes for different levels of colour and resolution, installed fonts and, and digital video standards - is not good for the bottom line

For example, cutting-edge browser features can give your pages the look you're after, but at what cost? Does it matter that only 70 percent of your audience can see the version you intended? How can you even tell who can see what?Begin by matching features with information, design must always match content.

The Essence of Good Web design

Three fundamentals for aesthetics for the Web are: Speed, Simplicity, and Clarity.

* Speed is a fundamental aesthetic in Web design. One of the biggest Web myths is that you can't design well without high bandwidth.

It is much more interesting to look at the emerging design solutions of the problem of extreme bandwidth limitations. With the emergence of technologies like Cascading Stylesheets (CSS), which offer advanced typographic and layout control as a layer on top of HTML, we see designers being able to do far more with less.

* Simplicity is, of course, the essence of good Web design. As our networked world grows increasingly complex, layers and streams of information constantly bombard us. If you want to successfully design for the Web, you will take control of your content and boil it down to its very essence.

* Simple, bright, playful - the Web has a different aesthetic than most other media does, but it is similar, surprisingly, to that of children's toys. Both design aesthetics come from forms of limited bandwidth: Children are in an early stage of mechanical and mental development, so effectively their own bandwidth - the amount of information they can process - is low; Web surfers can mentally process lots of information, but the bandwidth of the Web itself is low. Thus, simplicity is key to the enterprises of both Web designers and toy makers.

Getting people to your pages is hard enough. But once a new reader has made it through the morass of the Web to your page, you have roughly 3-5 seconds to make an impression, to spark interest, and to keep the reader's curser away from the Back button. Avoid confusion. Orient your readers with clear navigation, and they will be drawn into your site.

The secret to clarity in Web design is to rigorously anticipate a user's process of discovery while eloquently and succinctly placing clues to your content across your site. Show them what you've got and how to get there, then get out of the way.

Hypertext

One true breakthrough in this new medium is the linking together of content through hypertext - that is, the simple link.

But hypertext creates a contradiction: Links to other sources add depth to your Web site, but you don't want to send your readers away mid-sentence and mid-thought by encouraging them to click to somewhere else.

Consider the very act of reading - how your mind processes letters into word patterns and then conceptually into sentences and paragraphs. Designing a page, whether on the Web or in print, often revolves around the manipulation of these patterns. Headlines, for example, break out of the paragraph mould by altering typographic variables like font, size and colour. By separating headlines and pull quotes from the vast grey blocks of body copy, designers alert their audience to these elements, swiftly communicating their overall message.

Then think about hypertext. In order to add a layer of interactivity to a page (which, of course, is entirely appropriate), designers add links by inserting harsh blue underlined scars into the patterns of the paragraphs. The result? An overbearing distraction to the reader's subconscious. Suddenly, that reader must decide: Do I stop here and click on to this link? Do I finish the sentence and come back? Do I finish the story and scroll back to the navigation element?

HTML (Hypertext Markup Language)

HTML, Hypertext Markup Language is just a series of tags that are integrated into a text document. They are a lot like stage directions - silently telling the browser what to do, and what props to use. If you have any pictures or animations or sounds or whatever that you want to include, the HTML file will tell the browser where to find them and where to put them on your page. HTML does this by using things called tags.

Tags are letters or words between tow brackets, like this: <tag>. There are a whole bunch of these tags, and learning HTML pretty much means learning all the various tags.

HTML tags are usually English words (such as blockquote) or abbreviations (such as "p" for paragraph), but they Are distinguished from the regular text because they are placed in small angle brackets. So the paragraph tag is <p>, and the blockquote tag is <blockquote>. Some tags dictate how the page will be formatted (for instance, <p> begins a new paragraph), and others dictate how the words appear (<b> makes text bold). Still others provide information - such as the title - that doesn't appear on the page itself.

The first thing to remember about tags is that they travel in pairs. Every time you use a tag - say <blockquote> - you must also close it off with another tag - in this case,</blockquote>. Note the slash -/- before word "blockquote"; that's what distinguishes closing tag from an opening tag.

The basic HTML page begins with the tag <html> and ends with </html>. In between, the file has two sections - the header and the body.

The header - enclosed by the <head> and </head> tags - contains information about a page that won't appear on the page itself, such as the title. The body - enclosed by <body> and </body> - where the action is. Everything that appears on the page is contained within these tags.

A simple sample page is created as follows: The first step requires a new text document to be created. This document should be saved as "Text Only" or "Plain Text".

This basic document will look some thing like this:

<html>

<head>

<title>Summer</title>

</head>

<body>

<h1>Summer Vacation</h1>

<p>My summer vacation was sunny, silly, and far too short.

<p>How many days till Christmas?

</body>

</html>

So within the <head> tags, we have the title -"Summer" - which will appear in the bar across the top of your browser. Within the the body tags, we have everything that will appear on the page. In this case it would look something like this:

Summer Vacation

My summer vacation was sunny, silly, and far too short.

How many days till Christmas?

As illustrated in the sample above, <h1> is the tag for a headline (the largest headline, in fact) and <p> marks the beginning of a new paragraph. A <p> tag is one of the few tags that doesn't need to be closed off by a corresponding </p>, because the paragraph's end is implied with the next formatting tag.

When designing a Web page the first step is to sit down and sketch what you want your page to look like. Plot out where the various elements are to appear. Where should the illustrations be place? Where should the text and headings be? What size should they be? And what about links?

If the various elements look too crowded on the page, think about having a second page and then linking them together. Also plan out what colour you want everything to be. Don't worry about how you are going to produce the page but instead concentrate on planning and designing.

Web Page Design Assignment

Part A TO 10, CO 10

Research a variety of Web pages. Find at least five that you like. List their URL and briefly write down some of the design qualities that you like the most about the page. Discuss aspects of design only, ie. colour, layout, etc., do not let the subject matter dominate your review.

Part B KO 5, AO 20

a. Based on your research, create a Web page for your self. Begin by writing a personal profile of yourself by expressing your likes and dislikes, your interests, and hobbies. Once you have completed your profile, collect support information that you wish to include in your page, ie. photographs and illustrations.

b. Combine all the information in creating your Web page design. Your initial design should be on paper and should illustrate precisely what the final design will look like. Draw, plan and illustrate exactly what your page and any linked pages will look like.

c. You will require the following for your web page design:

1. A logo, your name, designed using Adobe Illustrator and saved as logo_(your

name).gif

2. A button image designed on Adobe Illustrator that reads Photo Album and saved as btn_sample 1 _up.gif, and a colour swatch that corresponds to the image button and saved as btn_sample 2_up.gif.

3. Several images created on Photoshop and saved as sample 2 jpeg_.gif, sample 3_.gif, etc.

4. Text that has been written in AppleWorks and saved as DW3_copy.txt.

d. Using a Web publishing programme, Dreamweaver, construct your personal Web page as outlined in your plan. Include all the information and images as required by your plan.