LEARNING WEB DESIGNBeginner’s Guide to HTML, Graphics and Beyond

Getting Started

Where Do I Start? Understand the fundamentals of how the

Web works Learn

working knowledge of HTML Role of the Web server Importance of the browser

What Do I Need to Learn? Graphic design Information design Interface design HTML production Programming and scripting Multimedia

Getting Started

Do I Need to Learn Java? NO Only requirements are HTML and style

sheets

Getting Started

HTML Hyper Text Markup Language

Language used to write web page documents Not programming – word processing in longhand

Style Sheets Official and standard mechanism for text and

page formatting Great tool for automating production, because

you can make a change to a single style sheet document and have it affect all the documents in your site.

Getting Started

What Do I Need to Buy? Equipment

A solid up-to-date computer. Extra memory A large monitor A second computer A scanner and/or digital camera

Getting Started

What Do I Need to Buy? Software

Web-authoring WYSIWYG (What You See Is What You Get) Dreamweaver Adobe GoLive Microsoft FrontPage

HTML Editors Macromedia HomeSite (Windows only). BBEdit by Bare Bones Software (Macintosh only).

Getting Started

What Do I Need to Buy? Software

Graphics Software Image-editing program

Adobe Photoshop Adobe ImageReady Macromedia Fireworks Adobe Illustrator JASC Paint Shop Pro (Windows only)

Getting Started

What Do I Need to Buy? Software

Multimedia Tools Macromedia Flash Adobe LiveMotion Apple Quicktime Apple Final Cut Pro Macromedia Director

Internet Tools A variety of web browsers A file-transfer program Telnet

How The Web Works

The Internet vs. The Web Internet – a network of connected computers World Wide Web – One of the ways information can

be shared. Subset of information on the Internet, and it has its own

protocol Serving Up Your Information

Because they “serve” up documents upon request, these computers are known as servers

More accurately, the server is the software (not the computer itself) that allows the computer to communicate with other computers.

HTTP – Hypertext Transfer Protocol Web server software that allows it to “speak” the

language

How The Web Works

Web Page Addresses (URLs) Uniform Resource Locator Made up of four components

http:// Define protocol that will be used for that particular transaction

www.jendesign.com Indicates what the server is suppose to connect to

/2003/samples Indicates a path through directory levels to a specific file

First.html Name of the file itself. It must end in .htm or .html in order to be recognized as an HTML

document Our example URL is saying it would like to use the HTTP

protocol to connect to a web server on the Internet called jendesign.com and request the document first.html (located in the samples directory, which is in the 2003 directory).

How The Web Works

URL Shortcuts http://

Sometimes omitted because it is implied because all web pages use the Hypertext Transfer Protocol

Index files Another implied part of a URL is any reference

to a document called index.html

Getting Your Pages on the Web Publishing on the Web requires that you

transfer your web documents from your desktop computer to your web server computer. Files are transferred between computers on the

Internet via a protocol called FTP (File Transfer Protocol).

Step-by-Step1. Start with a web page2. Connect to the server with an FTP program3. Upload the file4. Check the page in a browser

Why Web Design Isn’t Like Print Design

Designing for the “unknown” Unknown browsers

Different browsers will display the same page differently

Internet Explorer Mozilla Fire Fox

Unknown platforms Operating system of the computer

Each operating system has its own characteristics and quirks that affect how your page will look and perform

There are slight discrepancies between the functionality of browsers across different platforms

Why Web Design Isn’t Like Print Design

Designing for the “unknown” Unknown user preferences

Browsers are built with features that enable users to set the default appearance of the pages they view

Might opt to turn off graphics, change colors, etc.

Unknown window size or monitor resolution Available space is determined by the size of the

browser window when the page is opened Web pages are more fluid than print; they

reflow to fill the available space

Why Web Design Isn’t Like Print Design

Designing for the “unknown” Unknown connection speed

Larger amounts of data will require more time to arrive

High speed Internet vs. dial up Keep files as small as possible!

Unknown colors Computers handle varying colors different ways

Example: some greens show up as black

Unknown fonts The way text appears is a result of browser

settings, platform, and user preferences

The Web Design Process

Web Design Process1. Conceptualize and research2. Create and organize content3. Develop the “look and feel”4. Produce graphics and HTML documents5. Create a working prototype6. Test, Test, Test !!!!7. Upload and test again8. Maintain

The Web Design Process

1. Conceptualize and Research Start with a core idea Brainstorm how it’s going to manifest as a

web page Sketches Asking questions Identify clients needs Conduct case studies, interviews and market

research Define budget

The Web Design Process

2. Create and Organize Content Content creation

Clients are usually responsible for supplying content of the web site

Take into account copyright laws and patents Information design

Design a diagram (site map) that reveals the overall “shape” of the site

Site maps give designers a sense of the scale of the site and how sections are related Aids in navigation design

The Web Design Process

3. Develop the “Look and Feel” Sketch it

Can be sketched or designed in Photoshop, Word, or Publisher

4. Produce Graphics and HTML Documents Use graphic tools to create the graphics

needed Format content into HTML documents Produce multimedia elements

The Web Design Process

5. Create a Working Prototype Create “alpha”

First prototype Made available only to people within the web

team for review and revisions Create “beta”

Second release Version that is sent to client for approval

The Web Design Process

6. Test, Test, Test!!!! Test your page under as many conditions as

possible View using Fire Fox, Internet Explorer, Safari, etc. View on different computers with different

monitor resolutions and sizes

7. Upload and Test Again Once all kinks are worked out upload to final

server and make available to the world

8. Maintain Keep content current Determine life span

Questions

1. What is the difference between a web authoring program and an HTML-editing tool?

2. What is HTML?3. What is HTTP?4. What is an URL?5. What is FTP?

Questions

6. Describe how each of these factors affects your role as a web designer:

The variety of browsers in use Different operating systems Each user’s browsers preferences Resizable browser windows The fonts installed on a user’s computer

Questions

7. What is a wire frame for? At what point in the process would you make one?

8. What is the “look and feel?”9. What pieces go into a working

prototype?10. Name at least three ways to test your

web pages.