Webdesign

 Was bedeutet Webdesign?

  • wörtliche Bedeutung Design für das Web
  • mit Web ist das World Wide Web gemeint
  • durch den Internetdienst lassen sich Multimedial Inhalte veröffentlichen
  • keine geschützte Berufsbezeichnung, Design lässt sich nicht eindeutig definieren
  • Unter Webdesign verstehen wir die Konzeption und Gestaltung von Webapplikationen

 

Voraussetzungen an den Webdesigner

  • Durch den Wandel der Technologie ist die Kommunikation mit den Programmieren essentiell
  • muss auf den neuesten Stand sein
  • muss die Grenzen des digitalen Raums kennen

 

 

Web im Wandel

  • Mobiles Web
  • Responsives Web
  • Semantic Web
  • (Web-)Apps
  • Webentwicklung
  • Social Web

 

 

Mobiles Web

  • wurde 2007 erstmals verwendet (durch die Einführung des iPhones bzw. Smartphone)
  • Touchscreen und Sprachbedienung vorhanden (keine Tastatur notwendig)
  • Geräte: Smartphones, Tablets, Smartglasses, Smartwatch
  • Zusatztastatur mit Maus für Tablets erwerbbar
  • Zukünftig wird versucht auf Hardware zu verzichten

 

Responsive Web

  • Webseiten passen sich dem Display an und sind überall gut lesbar
  • Bedeutung: Reaktion auf das jeweilige Endgerät (Response=Reaktion/Antwort)

 

Semantic Web

  • Maschinen werden intelligent
  • Webanwendungen verstehen Inhalt und Bedeutung
  • Suchmaschinen werden zunehmend genauer, wenn nicht gleich direkt

 

(Web-)Apps

  • Apps (Applications = Anwendungen)
  • Erhältlich im Appstore
  • Native- und Web-Apps
    • Native-Apps (Am Betriebssystem gebunden, sind in der Programmiersprache des Smartphones erstellt)
    • Web-Apps (Benötigt Browser mit Internetverbindung, ist erstellt mit HTML5, CSS3 und JavaScript)

 

Webentwicklung

  • Vorgefertigte Baukasten zur Webentwicklung
  • Zum Einsatz kommen Frameworks und Content-Managment-Systeme
    • Frameworks wie Bootstrap unterstützen das responsive Design
    • CMS wie Typo3 stellen (responsive) Vorlagen bereit, die man anpassen kann
  • Grundkenntnisse dennoch notwendig

 

Social Web

  • Entwicklung zur Interaktivität (Posten, Bilder versenden etc.)
  • Beispiele: Facebook, Twitter, Instagram
  • Esentiell wichtig für den Internetauftritt

 

 

 

  • Interface= Schnittstelle

 

  • Benutzerschnittstelle so gestalten das sich der Nutzer intuitiv zurecht findet

 

  • Usability (Benutzerfreundlichkeit)

 

 

 

 

 

 

Screendesign

  • Grundlage der visuellen Kommunikation und Gestaltung
  • Entwurf responsiver Layouts
  • Auswahl von Schriften
  • Entwurf von Schaltflächen oder Menüs
  • Gestaltung von Bilder, Grafiken und Icons
  • Verwendung von Sounds zu akustischer Unterstützung(Vorlesefunktion)
  • Videoclips(2D,3D)

 

Interaktionsdesign

  • Der Nutzer tritt mit dem Anbieter über ein digitales Produkt in Kontakt
  • Formular: Die häufigste verwendete Interaktionsform
  • kann auch in direkter Form erfolgen z.B. via Spracheingabe
  • für behinderte Menschen ein wesentlicher Vorteil
  • Gesten, Blicken und sogar Gedanken können zukünftig weitere Möglichkeiten anbieten

 

 

Informationsdesign

  • Navigationsmöglichkeiten sind deutlich komplexer
  • Beschäftigt sich mit der Frage nach einer möglichst intuitiven Informationsstruktur
  • Dem Nutzer müssen Hilfen angeboten werden, damit er sich zurecht findet

 

 

Unterschiede Webdesign/Printdesign

 

Kriterium Webdesign Printdesign
Schriftauswahl Schriftauswahl eingeschränkt Schriftwahl beliebig
Typografie

nur Makrotypografie,

Umbruch passt sich an

Makro-und Mikrotypografie,

Umbruch bleibt im Druck erhalten
Farbgestaltung additive Farbmischung(RGB),
keine Farbverbindlichkeit		 subtraktive Farbmischung(CMYK),
Farbverbindlichkeit über CM möglich
Datenmenge

sollte möglichst niedrig sein,

damit Ladezeit gering ist

 spielt (fast) keine Rolle
Auflösung der Bilder

niedrig bis mittel,

z.B. 100-200 dpi (Auflösung von Display)

 hoch, z.B. 300 dpi
(Auflösung hängt von Druckausgabe ab)
Interaktion

zahlreiche Möglichkeiten

z.B. Text(Formulare), Sprache, Gesten

 nicht möglich
Navigation über Hyperlinks beliebige (nicht lineare) Verknüpfung der Inhalte nur linear durch Blättern (Seitenzahlen, Inhalts-,Stichwortverzeichnis)
Multimedia Sound. Video, 2D-Animation, 3D-Animation nicht möglich
Aktualisierung einfach und kostengünstig über Datenbank

aufwendig und kostspielig,

da Nachdruck notwendig ist
Verfügbarkeit global auf jedem Internetfähigen Gerät regional, national, Seiten international(Bücher)
Voraussetzung

Umgang mit Engerät,

Kenntnis der verwendeten Sprache

 Kenntnis der verwendeten Sprache
Kosten Kosten für Webdesign, -entwicklung und Pflege der Anwendung Kosten für Satz, Druck, Vertrieb, Lager, abhängig von Anlage
     

 

 

. . .weitere Unterschiede zum Printdesign

  • Printmedien werden trotz der Entwicklung weiterhin eine große Rolle spielen
  • Große Internetfirmen präsentieren sich auf Messen und werben in Printmedien
  • Kein Unternehmen kann sich mangelhafte Internetpräsenz erlauben
  • Print und Web hängen eng miteinander zusammen
  • Bestandteile des Corporate Designs

 

Corporate Design

  • Gestaltungsgrundlagen sind in beiden Bereichen identisch
  • Auswahl des  Formats, die Farben und der Schrift sind verschieden

 

Vor-/Nachteile von digitalen Medien

 

Vorteile:

  • Weltweite Verfügbarkeit
  • Hohe Aktualität
  • Vielfältige, interaktive und multimediale Möglichkeiten

 

Nachteile

  • Geringe Auflösung
  • Fehlende Farbverbindlichkeit
  • Eingeschränkte Schritauswahl
  • Internetverbindung notwendig

 

HTML/CSS . . .

  • Als Webdesigner müssen Sie noch mehr als im Printbereich kennen
  • Freies Gestalten in Photoshop oder Illustrator, macht nur Sinn wenn Sie umsetzbar ist
  • Die Technologischen Möglichkeiten und Grenzen muss man kennen
  • für das Funktionieren einer Website sind eine ganze Reihe von Auszeichnungs-, Programmier- und Skriptsprachen wie HTML5, CSS,JS,PHP,SQL und Ajax zuständig
  • Eine Webseite muss unter Windows, MacOS, iOS, Android usw. funktionieren
  • Keine festen Formate für Webseiten
  • Technische Besonderheiten wirken sich auf Konzept und Gestaltung