Web design · Web History · Design · Core standards · Web designer · Building a Web site · 10 Golden Rules of Web design · Example · Homework · Links

Introduction

What does www stand for?
Which language would you prefer to work with?
What websites inspired you to start an own webspace
What is your intention?
What online accounts (yahoo, msn…) do you already have?
Do you already know websites, you like…?
Which media, beside text entries (pix, videos.. → prepare media for the web)

1. What is Web design? | Was ist Webdesign?¶

combination of “web” and “design”

2. History of the Web | Geschichte des Webs¶

• created by Tim Berners-Lee in 1989 on CERN in Switzerland
• hypertext system, creating a “web” of linked documents by “links” (picture)
• first well-known web browser (program for using the web) was “Mosaic” in 1993
  (could display images)
• Netscape Navigator born in 1994

3. Why design? | Warum Design?¶

• construction of a web site
• technical and creative process
• making an idea visible, making a process usable, …
• goals: publication, communication

4. Core Standards | Grundlagen¶

• webserver → transport media → browser
• HTTP (HyperText Transfer Protocol): transport protocol for HTML pages
• HTML (HyperText Markup Language): documents written in a special language marked with “tags”
• URL (Uniform Resource Locator): generic way of expressing a location of a resource on the Internet
  construction example: protocol://host/directory/filename
• HTML Tag: syntax element of the HTML language indicating the structure of the page
• Site: collection of linked HTML pages forming a web presence

5. What does a Web designer do? | Was macht ein Webdesigner?¶

• technical skills: HTML, CSS, graphics, structure, files, programs (browser, FTP client, …)
• creative skills: graphics, design, fonts, colors, …
• structural / interface skills: documents, link structure, interface design

6. Building a Web site¶

What? Why? How?

• structure
• content
• style

7. 10 Golden Rules of Web design¶

• avoid long latency for loading the website and long text (scroll bars)
• short text with meaningful heading
• just set links to websites which are closely in content
• carefully set links in text/ not to many (irritates while reading)
• site map
• navigation system, which tells the reader where he is
• possibility for feedback
• contact

8. Example:¶

http://http://www.edition1.net/dangerous//

looking at the site and drawing the structure on paper

Homework:¶

Draw the structure of your own future website on a sheet of paper and bring it to next lesson.

Links:¶

WWW: http://http://en.wikipedia.org/wiki/World_Wide_Web
Design: http://http://en.wikipedia.org/wiki/Design
h2. HTML: http://http://en.wikipedia.org/wiki/HTML

level up: webdesign