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