Webdesign Grundlagen. Michael Kraft, M.A. WS 2012/2013

Größe: px

Ab Seite anzeigen:

Download "Webdesign Grundlagen. Michael Kraft, M.A. WS 2012/2013 hawk@herrkraft.de"

Hennie Bretz
vor 8 Jahren
Abrufe

1 Webdesign Grundlagen Michael Kraft, M.A. WS 2012/2013

2 Bürokratie Termine & Kursliste &

3 Wer bin ich? michael kraft ba ma hawk tutor interaction digital interface games new ways of computer human interaction books text concepts development mobile as3 html css jquery windows 8 android arduino processing multitouch web mobile design compra gmbh

4 Projekte

5 Projekte

6 Projekte [rossmannversand.de]

7 Projekte

8 Webdesign?

9 Webdesign?! Webdesign (auch Webgestaltung) umfasst die Gestaltung, den Aufbau und die Nutzerführung von Websites für das WWW und das Interface-Design in diesem Bereich. Der Webdesigner hat dabei die Aufgabe, die Kommunikationsziele des Auftraggebers mit Hilfe der technischen Gegebenheiten umzusetzen. [wikipedia.de]

Nutzerführung von Websites für das WWW und das Interface-Design in diesem

10 JA NEIN Beispiele Frage: Website?!

11 JA NEIN

12 JA NEIN

13 JA NEIN

14 JA NEIN

15 JA NEIN

16 JA NEIN

17 JA NEIN Die Grenzen verschwimmen zunehmend

18 Was ist was?

19 Website Mobile WebApp Webdesign?! Webdesign (auch Webgestaltung) umfasst die Gestaltung, den Aufbau und die Nutzerführung von Websites für das WWW und das Interface-Design in diesem Bereich. Der Webdesigner hat dabei die Aufgabe, die Kommunikationsziele des Auftraggebers mit Hilfe der technischen Gegebenheiten umzusetzen. [wikipedia.de] Offline/Online Mobile Website WebApp

Websites für das WWW und das Interface-Design in diesem Bereich.

20 Website Mobile WebApp Interface & Interaction Design Webdesign (auch Webgestaltung) umfasst die Gestaltung, den Aufbau und die Nutzerführung von Websites für das WWW und das Interface-Design in diesem Bereich. Der Webdesigner hat dabei die Aufgabe, die Kommunikationsziele des Auftraggebers mit Hilfe der technischen Gegebenheiten umzusetzen. [wikipedia.de] Offline/Online Mobile Website WebApp

21 Webdesign

22 ... for Devices? Ja, aber wie?

23 z.b. responsive webdesign & fluid grids

24 [mediaqueri.es]

25 responsive webdesign & fluid grids [foundation.zurb.com]

26 Frameworks helfen Erfinde das Rad nicht neu. Eine Reihe von Tools helfen. ABER: Ohne Grundlagen hilft das beste Tool nichts.

27 HTML Hypertext Markup Language CSS Cascading Stylesheets JS JavaScript Browser Photoshop Themen Konzeption Gestaltung Farbenlehre Typografie Wissen um Problematiken Kommunikation Designer vs. Entwickler

28 HTML Hypertext Markup Language CSS Cascading Stylesheets JS JavaScript Browser Photoshop Grundlagen! Konzeption Gestaltung Farbenlehre Typografie Wissen um Problematiken Kommunikation Designer vs. Entwickler

29 Buchstabensalat html tags css less id class name type attribute $( # ). %!#ARGH was?!

30 Meine erste HTML-Seite <html> </html>

31 Meine erste HTML-Seite <!DOCTYPE html> <html> <head> <title>hallo Welt!</title> </head> <body> <h1>hallo Welt</h1> <p>juchu, meine erstes HTML5-Dokument.</p> </body> </html>

32 Meine erste HTML-Seite <!DOCTYPE html>  <html> <head> <title>hallo Welt!</title> </head> <body> <h1>hallo Welt</h1> <p>juchu, meine erstes HTML5-Dokument.</p> </body> </html>

33 Meine erste HTML-Seite <!DOCTYPE html>  <html>  <head> <title>hallo Welt!</title> </head> <body> <h1>hallo Welt</h1> <p>juchu, meine erstes HTML5-Dokument.</p> </body> </html>

34 Meine erste HTML-Seite <!DOCTYPE html>  <html>  <head>  <title>hallo Welt!</title> </head> <body> <h1>hallo Welt</h1> <p>juchu, meine erstes HTML5-Dokument.</p> </body> </html>

35 Meine erste HTML-Seite <!DOCTYPE html>  <html>  <head>  <title>hallo Welt!</title>  </head> <body> <h1>hallo Welt</h1> <p>juchu, meine erstes HTML5-Dokument.</p> </body> </html>

36 Meine erste HTML-Seite <!DOCTYPE html>  <html>  <head>  <title>hallo Welt!</title>  </head> <body>  <h1>hallo Welt</h1> <p>juchu, meine erstes HTML5-Dokument.</p> </body> </html>

37 Meine erste HTML-Seite <!DOCTYPE html>  <html>  <head>  <title>hallo Welt!</title>  </head> <body>  <h1>hallo Welt</h1>  <p>juchu, meine erstes HTML5-Dokument.</p> </body> </html>

38 Meine erste HTML-Seite <!DOCTYPE html>  <html>  <head>  <title>hallo Welt!</title>  </head> <body>  <h1>hallo Welt</h1>  <p>juchu, meine erstes HTML5-Dokument.</p>  </body> </html>

39 Meine erste HTML-Seite <!DOCTYPE html>  <html>  <head>  <title>hallo Welt!</title>  </head> <body>  <h1>hallo Welt</h1>  <p>juchu, meine erstes HTML5-Dokument.</p>  </body> </html>

40 Meine erste HTML-Seite <!DOCTYPE html>  <html>  <head>  <title>hallo Welt!</title>  </head> <body>  <h1>hallo Welt</h1>  <p>juchu, meine erstes HTML5-Dokument.</p>  </body> </html>

41 Konventionen Tags werden immer klein geschrieben! Abschnitte Einrücken für eine bessere Lesbarkeit! Dies hat keine Auswirkungen auf die Darstellung im Browser.

42 Zum nächsten Mal

Ähnliche Dokumente

Webdesign-Multimedia HTML und CSS

Webdesign-Multimedia HTML und CSS Thomas Mohr HTML Definition ˆ HTML (Hypertext Markup Language) ist eine textbasierte Auszeichnungssprache (engl. markup language) zur Strukturierung digitaler Dokumente