Responsive Webdesign Basics

ZIELGRUPPE

Webdesigner, Konzepter, Entwickler

VORAUSSETZUNGEN

Grundkenntnisse in der Konzeption, Gestaltung oder Umsetzung von Webseiten bzw. in digitaler Medienproduktion

DAS ZIEL

Verschiedene Geräte stellen unterschiedliche Anforderungen an die Bedienbarkeit einer responsiven Webseite; Sie lernen sie bei diesem Workshop kennen. Außerdem alle wesentlichen Aspekte, die im responsive Webdesign zu beachten sind: konzeptionelle, technische, typografische und allgemeine gestalterische Aspekte. Erste Skizzen für Ihre eigenen Projekte nehmen Sie direkt mit nach Hause!

ZUORDNUNG

Responsive Webseiten passen sich den unterschiedlichen Bildschirmbreiten an. Wer bereits erste Schritte in diese Richtung unternommen hat, wird festgestellt haben, dass es nicht damit getan ist, Inhalte zusammenzuschieben. Dieses Seminar bietet einen umfassenden Blick auf die verschiedenen Aspekte, die zusammenspielen müssen, damit eine responsive Seite auf Smartphones, Tablets und Desktop-Rechnern optimal gelesen und bedient werden kann.

VORTEILE UND SCHWÄCHEN VON RESPONSIVEM WEBDESIGN
  • Wie funktioniert responsive Webdesign?
  • Was sind die Vorteile, was die Nachteile?
  • Warum ist die Zukunft responsive?
HERANGEHENSWEISE UND WORKFLOW
  • Mobile first, Tablet first, Desktop first, Concept first?
  • Iteratives Arbeiten vs. Wasserfallmodell
SMARTPHONES, TABLETS, DESKTOP – BESONDERHEITEN DER ZIELGERÄTE
  • Besonderheiten für Konzept, Design und Umsetzung
  • Gestaltungsregeln für Smartphones und Tablets
CONTENT CHOREOGRAPHY & LAYOUT-TYPEN IM RWD
  • Inhalte gliedern
  • Wie sollen sich unterschiedliche Seitenelemente auf den Bildschirmbreiten verhalten?
SCHRIFT, SATZ UND TYPOGRAPHIE IM RESPONSIVEN WEBDESIGN
  • Die Wahl der Schrift: Systemschrift vs. Webfont
  • Dateiformate und Fallbackschriften
  • Ladezeit und Rendering
  • Schriftgrößen optimal angeben
TOOLS FÜR KONZEPT, GESTALTUNG UND UMSETZUNG
  • Photoshop (arbeiten mit Smartobjekten und Asset-Generatoren)
  • InDesign (unterschiedliche Seitengrößen)
DIE WICHTIGEN CODESCHNIPSEL FÜR DIE GELUNGENE UMSETZUNG
BREAKPOINTS, VIEWPORT, MASSEINHEITEN
  • Festlegen der Breakpoints
  • Den Viewport verstehen und optimal einsetzen
  • Welche Angaben, welche Maßeinheiten?
ICONS, GRAFIKEN, FOTOS: VON PIXELN, ADAPTIVE IMAGES UND VEKTOREN
  • Bildgrößen bestimmen
  • Das richtige Dateiformat und optimale Kompression
  • Bitmap- und Vektor-Sprites erstellen
DISKUSSION: BEST PRACTICE UND WORST CASE EINZELNER MODULE
  • Beispielseiten besprechen und bewerten
PRAXISARBEIT: PAPER PROTOTYPING FÜR EIN EIGENES PROJEKT
  • Seitenstruktur eines eigenen Projektes für verschiedene Gerätearten erstellen

ECKDATEN

Keine Gesprächsbeiträge

Hierzu ist es noch ruhig, wenn Sie möchten, starten Sie jetzt ein Gespräch.

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Nachoben