Seite auswählen

Offene Schulungen in Nürnberg und Inhouse-Trainings & Kurse auch in München und Münster.

RWD Grundlagen, Konzeption und UI-Design moderner Website-Layouts inkl. Einblick in HTML5 & CSS3 und Erstellung eines exemplarischen, klickbaren Prototypen.
Responsive WebDesign – Schulung für Grafiker + Einsteiger

Internetseiten werden heute auf einer Vielzahl von Endgeräten betrachtet, deren Größe und Auflösung sehr stark variieren. Von Desktop-Computern über Tablet-PCs, bis hin zu den Smartphones (iPhone, Android,…) sollte eine moderne Website gut darstellbar und anwenderfreundlich entwickelt werden.

Responsive WebDesignDie Entwicklung eigenständiger und jeweils zum Endgerät optimierter Webseiten ist zeitaufwändig und zu kostenintensiv. Oftmals sogar unmöglich!

Daher sollten Internetseiten heutzutage im „Responsive Design“ Verfahren bereits in der Layoutphase optimal geplant und umgesetzt werden. Dabei werden konzeptionelle Web-Designs entwickelt, die sich selbstständig an das jeweilige Endgerät anpassen. Mit dieser Technik wird sichergestellt, dass jeder Besucher eine optimale Darstellung Ihrer Internetseiten erhält.

Schulungsziel:

WebDesignSie lernen anhand von Praxisbeispielen die theoretischen Grundlagen des Responsive Designs kennen, um zukünftig moderne HTML5/CSS3 basierende Internetseiten zu gestalten. Dazu gehören u.a. die Layouterstellung mit flüssigen Rastern, die optimale Planung Ihrer Website-Navigation für unterschiedliche Endgeräte und Bildschirmgrößen, sowie die Einbindung flexibler Bilder.

In diesem Training lernen Sie die neuen zeitsparenden Funktionen von Photoshop CC und Illustrator CC kennen, um diese für das responsive Webdesign optimal anzuwenden. Außerdem erhalten Sie eine Kurzeinführung in die Programme Mobirise und Adobe XD.

Mit Mobirise können Sie ohne Programmierkenntnisse kleine responsive Internetseiten auf Basis anpassbarer Templates erstellen. Adobe XD ermöglicht es Ihnen klickbare Prototypen von Apps und Webseiten zu gestalten und diese für Ihre Kundenpräsentationen und die Zusammenarbeit mit Programmierern zu nutzen.

Schulungsinhalte – Tag 1:

Theoretische Grundlagen

  • Grundlagen Responsive Webdesign
    • Adaptive Webdesign
    • Responsive Webdesign
    • Warum Responsive Webdesign?
    • So sollte man es lieber nicht machen…
    • Rückbesinnung auf Flexibilität
    • Konzeptionelle Ansätze
    • Bestandteile von Responsive Webdesign
    • Raster mit flexiblen Maßeinheiten
    • Relative Einheiten für Schriftgrößen
  • Unterscheidung von UI- und UX-Design
  • Reaktionsfähige Gridsysteme im Überblick
    • Vorteile eines Rasters
    • Gridsetapp
    • Gridpak
  • Media Queries
    • Geräteeigenschaften abfragen
    • Media Queries und JavaScript
    • Wahl der richtigen Maßeinheit
    • Media Queries einbinden
    • Media Queries kombinieren
    • Media Queries verschachteln
    • Viewport-Tag einbinden
    • Gängige Bildschirmauflösungen
    • Vertikale Mediaqueries
    • Media Queries am Design orientieren
  • Konzeption, Design & Entwicklung
    • Progressive Enhancement (Mobile First)
    • Graceful Degradation
    • Mobile First = Content First
    • Mobile First: Einsatz und Gefahren
    • Geräteübergreifendes Design
    • Layoutphasen
    • Styletiles
    • Designsystem
    • Zusammenarbeit Design & Entwicklung
  • Layout-Typen
    • Überwiegend flüssiges Layout
    • Spalten verschieben
    • Layout umschalten
  • Möglichkeiten der Inhaltsanpassung
    • Inhalte Inhalte ausblenden
    • Inhalte nach Klick anzeigen
    • Inhalte neu anordnen
    • HTML neu anordnen: AppendAround
    • Zukunftsmusik: Flex Layout mit CSS
    • Einfacher Zweispalter
    • Verschachtelter Zweispalter
    • Einfacher Dreispalter
    • Dreispalter mit Zwischenschritt
    • Mehrere Zwischenschritte
    • Visuelle Hierarchie wahren
    • Mobile Navigationskonzepte: Eine
    • Navigationsebene
    • Navigation im mobilen Kontext
    • Kopf-Navigation
    • Fußanker-Navigation
    • Auswahlmenü
    • Aufklappmenü
    • Aufklappmenü-Varianten
    • Schiebenavigation (Off-Canvas-Menü)
    • Teilweises Ausblenden
    • Icon-basierte Navigation
  • Mobile Navigationskonzepte: Mehrere Navigationsebenen
    • Mehrfaches Aufklappmenü
    • Rechts-nach-links Navigation
    • Unternavigation im Inhalt
    • Karussell-Navigation
    • Komplexe Off-Canvas-Navigation
  • Anpassungsfähige Bilder
    • Bilder flexibel einbauen
    • Probleme
    • Bilder für hochauflösende Displays
    • Picturefill/picture-Tag
    • Hintergrundbilder verwenden
    • CSS Eigenschaft: background-size
    • Seitenverhältnis flexibler Elemente steuern
    • Sprite-Grafiken
    • Iconfonts
    • SVG Vektorgrafiken
    • Flex Slider 2
    • Favoriten-Icons
    • Touch-Icons
  • Inhalte reaktionsfähig aufbereiten
    • Flexible iFrame Videos
    • Flexible ImageMaps
    • Reaktionfähige Tabellen
    • Infografiken und Schaubilder
  • Reaktionsfähige Webtypografie
    • Webfonts
    • em/rem/vw als Maßeinheit verwenden
    • Headlines skalieren
    • Schriftarten/-größen testen
    • Lesbarkeit optimieren
  • Performance-Optimierung
    • Langsame Seiten verlieren Besucher
    • Dateien zusammenführen
    • JavaScript & Stylesheets optimieren
    • Bilder optimieren
    • Gestalten mit CSS 
    • GZIP: komprimierte Übertragung
    • Caching
    • Lazy Loading
  • Internet-Trends
    • Bilder im Fokus
    • Animierte Inhalte
    • Single-Page-Layouts
    • Bildschirmfüllende Hintergrundbilder

Schulungsinhalte – Tag 2:

Workshop mit vielen Praxisübungen

  • Adobe XD: Kurzeinführung „UX/UI Screen-Design“ und in die Gestaltung klickbarer Prototypen
  • Mobirise: Erstellung einfacher Webseiten ohne Programmierkenntnisse
  • Adobe Photoshop: Nützliche Funktionen für die Erstellung responsiver Webseiten
    • Bilddateien aus Ebenen automatisch generieren
    • Regeln für die korrekte Ebenenbenennung
    • Mehrere Bilddateien aus einer Ebene erzeugen
    • Bilddateien in unterschiedlichen Größen erzeugen lassen
    • CSS Stile extrahieren
    • Hilfslinien-Raster erzeugen
    • Zeichenflächen anlegen & bearbeiten
    • Elemente und Zeichenflächen exportieren
    • Ebenen und Ebenengruppen exportieren
    • Arbeitsfläche und Bildgröße beim Export anpassen
  • Adobe Illustrator: Nützliche Funktionen für die Erstellung responsiver Webseiten
    • SVG-Grafiken exportieren
    • Schnellexport mehrerer Grafiken in untersch. Größen und Dateiformaten
    • CSS Stile extrahieren
  • Hilfreiche Tipps, Tricks & Links

Verfügbare Plattformen:

Microsoft Windows und Apple OS-X

Dauer:

2 Tage á 8 Unterrichtsstunden.(1) 
Die Buchung eines Einzeltages ist auch möglich. Kontaktieren Sie uns hierzu gerne.
(9:30 Uhr bis ca. 16:30 Uhr)

Weiter zu den Details…