Part 1 Web Design

Web Design
Part 1

BY MELODY REED

11.2003
Issue No.13

Brief Evolution of Web design
The net had been around for decades, but it wasn't until Tim Berners-Lee developed the Web that the internet had its graphical start. 1993 Mosaic browser, the precursor to Netscape, took the world by storm, and until that happened even Microsoft lacked the foresight to involve itself with this phenomenon. In fact, by the time it did introduce Internet Explorer it was at a big disadvantage and had to use it’s ample muscle to compete. We all know that it eventually surpassed all other players.

What was web design/development like then? There were no powerful WYSIWYG (What You See Is What You Get) programs to help design and layout pages. It was, in fact, similar to typesetting before the use of desktop publishing programs became widespread. Every line, every word and graphic positioning had to be described through a programming language called HTML (Hypertext Markup Language.

This approach attracted technical programmers; academics whose interest lay in posting for content without concern for design, and, because of this, very simple pages sufficed. Web pages of that time reflected the author’s background. They were not taken seriously as a professional aesthetic.

With the invention of powerful and easy to use WYSIWIG web design programs and the proliferation of broadband connections (DSL, cable modem, T1), designers are now drawn to the Web as a mature art form. More sophisticated pages are appearing. The designer no longer has to struggle with an arcane code and HTML limitations and can go directly to a layout environment.

Teamwork comes into play at this point. Although the technical novice can create a good-looking page, he might find it to his advantage to consult a more technically apt person in order to achieve something unique, or perhaps make use of special effects. Software such as Macromedia Dreamweaver MX, (which we will be discussing in future articles) allows for that cooperation. It provides both a layout mode and a code. I find that designers who work with Dreamweaver end up having a basic, intuitive sense of HTML if they choose to keep the code window open as well. This is the reason I encourage using this method with these programs. (I also strongly recommend to programmers and other technically proficient types that they seek the help of good designers and not just leave the design window open while they work on code.)

Why Create A Web site?
Having a web site has become the de facto way to do business. It's now more important than the business card or phone number (someone can look that up on your web site), and certainly more current than sending someone a brochure. It is a dynamic way to communicate because, unlike any other medium, its content can be instantly updated. These days, we are aware that as soon as you buy a book about the Web its information is outdated. More people are, therefore, turning to the web for information that is current.

The Web gives us an immediate, global audience of untold numbers of viewers. For example, in the past an artist or photographer often had to play at business and politics for the chance to exhibit work and share profits with the gallery owners. Today, thousands of artists are creating their own galleries on line-and doing very well!

I believe that web site addresses are much easier to remember than phone numbers and street addresses and that makes the site a sort of business card extension as well as a backup to other forms of business promotion. (If you tell this story to a potential client, there is a strong likelihood its virtue will be recognized right away.) Everyone wants a web site now, so in terms of employment viability, Web site design is a great skill to have.

Getting started on your web site design

Consider the goals:
Recognition?
An updatable reference for customers
to use at will?
Earning supplemental income?
Competing with similiar businesses?
Bringing a business into the 21st century?
Providing a display/sales vehicle for an art/craft/product?
Creating a community?
Consider the audience:
Is it specialized, technically sophisticated, the general public?
What is the visual attitude that will help you achieve your purpose: corporate, arty, technical, etc.?
How will the site be viewed?
What is the monitor size, resolution, bandwidth?
Why is browsing the competition before beginning to design your site important?

It can save you time by helping to avoid making the same design or technical mistakes. It is an excellent way to get ideas for your site.

Getting a Domain name and
registering it.
Once you've answered all of the questions above, you are ready to take your first step toward what we call branding, i.e. your domain name. You'll need one that reinforces the purpose of the site. Be aware that there is no guarantee that the first name you think of will be available as there are a billion people on line, and at least one or two of them might have thought of the same name. Just go back, think up another one and try again.

GoDaddy.com is one of the sites available for checking the availability of a name before attempting to register it. If it is available, register quickly. Some people have created a business out of buying up domain names in order to resell them for profit. For example, I heard that business.com was sold for $50, 000!

Create an appropriate logo for the Site.

Choose a color scheme.

Choose a font or fonts and the style.

Wireframing
This is a simple, non-technical process that saves a lot of time and money. It takes its name from the skeletal structure that underlies any type of sculpture. It is a skeletal rendering of every link-possibility on your site. Ideally, wireframe pages contain answers to the three questions every persuasive Web site addresses: visitor type to be considered, actions neccessary for visitor to take, information necessary for taking that action.

The entire Web site, and all its interactions, can and should be designed and evaluated before costly graphic design or programming takes place. The evaluation can be accomplished by clicking hyperlinks to see if they go to the places you had in mind. This does not involve programming and can easily be achieved in Dreamweaver by pointing and clicking to the pages that are to be hyperlinked. The process will give you a "feeling" for what it will be like to use the Site and will provide critical feedback early in the developmental process. It is easy to make alterations at this phase, and they can even be tested at a very low cost with end users.

Once the entire process is mapped out, and everybody agrees that it serves the business as intended it can passed on to the designer for the look of the site and programmers for technical implementation.

Bear in mind a gem from Albert Einstein: "If I were given one hour to save the planet, I would spend fifty-nine minutes defining the problem and one minute resolving it."

Storyboarding
The distinction between a wireframe and a storyboard is critical. Wireframing defines the what of the creative process and storyboarding tackles the how. The wireframe is more structural design than visual.

Storyboarding is a concept borrowed from filmmaking in which each scene and individual camera shot is sketched out in the order in which it will occur. Storyboarding provides an overall plan for the film as well as a distinct idea of just where each shot fits into it.

In just the same way as it does for film, the storyboarding concept works well for developing a Web site by providing the same, clear outline. A good storyboard will have each topic on each page broken down to its lowest level including detailing the primary links between the pages and to pages outside the Site. It provides the visual organization (site-structure) for all pages within the entire Site. In other words, It clearly details each page's content and provides a map showing how individual pages fit into the whole.

The actual storyboard can be as simple as a sheet of paper that represents each page. Each sheet has a detailed list of topics, or content descriptions, a menu of sorts. If it's possible, include the graphics that will be used on each topic page, include the color palette, graphic metaphor that best complements your message. For example, if the Site is being designed for kids a childlike font might be chosen, or a hip one with contemporary colors and graphic detailing for teenagers. A photographer might choose to have a filmstrip which opens to a full scale image when clicked.

Web Site Content
It is a good idea, before we meet again next month, to create all of your content. Use plain, separate text or html files, with titles relevant to the subject. Doing this first guides the structure of the Site and creates a smoother path to the design.

Next month we will start creating a layout and design for our web page, as well as establishing a local site root. Our main tool will be Dreamweaver MX. If you don't have Dreamweaver and want to try it first, go to Macromedia.com and download a free copy for thirty days. Remember to wait until next month before doing it, though, so we can work together on the program.

Have fun brainstorming! See you then.

Future Segments
Part 2, will introduce the actual setup, layout and design of the homepage.
Part 3, will be about Graphics for the web.
Part 4, will introduce the designers to Javascript behaviors (with no coding of course).

Melody Reed is a native of Manhattan and has been an instructor at Pratt Institute for 17 years. She is the chairperson for the Macromedia MX web design sig of NYPC, and is also a computer consultant, web designer, and tutor.