Web Design: An Introduction

Zulema Ortiz

zulema_ortiz@zoblue.com

zoblue.com/web-design/

What is web design?

• the art and process of creating a single web page or entire web sites
• may involve both the aesthetics and the mechanics of a web site’s operation
• primarily it focuses on the look and feel of the web site.

What is web design? (contd.)

• some of the aspects that may be included in web design or web production are:
  • graphics and animation creation,
  • color selection,
  • font selection,
  • navigation design,
  • content creation,
  • HTML/XML authoring,
  • JavaScript programming, and
  • ecommerce development.
• web design is a form of electronic publishing.

Jacci Howard Bear - About.com | Defining Web Design

Important points

• “abandon control... seek a new relationship with the page” *
• make pages accessible and viewable everywhere--not just your machine *
• divide your content and how you present it *
  • HTML file
  • CSS file
  • JS file
• fonts | layout | colors *
• valid code

* John Allsopp - A List Apart | The Dao of Web Design

First things first

XHTML : eXtensible HyperText Markup Language/HTML : HyperText Markup Language

a language for creating hypertext pages to be viewable on the web and which can be linked to each other.

CSS : Cascading Style Sheets

a stylesheet language that is attached to html pages and formates the content.

JS : JavaScript

a scripting language that adds special features to web sites and/or web pages.

Considerations

• usability:
  • A List Apart
  • Jakob Nielsen
  • Usable Web
  • Web Standards Group
• accessibility:
  • Accessiblity Checklist
  • A List Apart
  • Web Design Group
  • Any Browser
  • Web Standards Group
• multiple browsers/platforms:
  • A List Apart
  • Position is Everything
  • QuirksMode
  • BrowserCam
• SEO:
  • Search Engine Watch
  • SEO Tools

What’s possible?

• css Zen Garden
• Frozen Toast
• alan alborough
• Jaerhagen
• Airios Blog
• Visual Gui Design
• Swedezine
• HaSuNeo
• Joshua Ink
• Squidfingers

Get inspired

• Stylegala
• Web Standards Awards
• Netdiver
• FWA

Helpful links

• W3Schools
• A List Apart
• Web Page for Web Designers
• A webstandards checklist
• Interface Design Resources

Books

• HTML/XHTML and CSS: Visual QuickStart Guide
• HTML & XHTML: The Definitive Guide, 5^th Ed.
• Macromedia Dreamweaver MX 2004: Visual QuickStart Guide
• Dreamweaver MX: The Missing Manual
• Web Standards Solutions
• Designing with Web Standards

Getting your website up

1. buy your domain name
   • Go Daddy
2. now you need web host
   • TotalChoice Hosting
3. need a shopping cart?
   • OsCommerce
   • TotalChoice Hosting also offers their own shopping cart feature
4. maintaining and updating your website

In summary

• Know your stuff but never stop learning
• Don’t be afraid to jump right in
• Get (and give) plenty of feedback
• Have fun and be flexible!