Kursdetails
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.
Das Ziel muss immer ein positives Kundenerlebnis bei der Benutzung Ihrer screenbasierten Anwendungen sein. Die 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
Sie lernen anhand von Praxisbeispielen die theoretischen Grundlagen des Responsive Designs, von guter Usability und User Experience Design (UX) 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 mit dem Online-Programm Webflow eine echte responsive Webseite zu erstellen. 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. Mit dem Online-Programm Webflow können Sie vollfunktionsfähige, responsive Internetseiten per Drag & Drop gestalten und das Design nach Ihren eigenen Vorstellungen gestalten.
Zielgruppe
- Grafiker
- WebDesign Einsteiger
- allg. Anwender und Freelancer
Empfohlene Vorkenntnisse
- sicheres Arbeiten unter Windows oder Apple macOS
- Grundlagenkenntnisse in Adobe Illustrator und Photoshop von Vorteil
- Kenntnisse in HTML, CSS oder Javascript nicht erforderlich!
Inklusiv-Leistungen
- Schulungs- und Übungsdateien (vorab per Download-Link)
- Kursunterlagen und Handouts (PDF)
- Teilnahme-Zertifikat (PDF)
- Weiterführende Nachschlagewerke und Übungshefte können gesondert bestellt werden.
Schulungsinhalte – Tag 1
RWD – theoretische Grundlagen
- Grundlagen Responsive Webdesign
- Adaptive Webdesign
- Responsive Webdesign
- Warum Responsive Webdesign?
- So sollte man es lieber nicht machen...
- 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
- Media Queries
- Geräteeigenschaften abfragen
- Wahl der richtigen Maßeinheit
- Media Queries einbinden
- Media Queries kombinieren und 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 und Flex Layouts
- 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
- Darstellungsprobleme im responsiven Kontext
- 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
Schulungsinhalte – Tag 2
Workshop: Website-Erstellung
- Adobe XD: Kurzeinführung "UX/UI Screen-Design" und in die Gestaltung klickbarer Prototypen
- Zeichenflächen anlegen
- mit dem Wiederholungsraster gestalten
- wiederverwendbare Komponenten anlegen
- animierte und interaktive Prototypen erstellen
- Prototypoen für Endkunden zur Freigabe veröffentlichen
- Designspezifikationen für Entwickler veröffentlichen
- Webflow: Echte responsive Webseiten mit einem Online-Editor erstellen
- Einführung in das CSS Box-Modell
- Abstände definieren
- Webseiten strukturieren
- mehrspaltige Inhalte anlegen
- Elemente mit dem visuellen CSS-Editior formatieren und gestalten
- Bilder hinzufügen
- Arbeiten mit Breakpoints
- eine responsive Navigation einfügen
- Element-Hierarchie festlegen
- Text-Formatierung
- Größen definieren
- Arbeiten mit dem Navigator
- Sections, Container, Spalten und DIV-Blöcke einfügen
- Bildergalerien hinzufügen
- Symbole definieren und wiederverwenden
- globale Formatierungen anwenden
- Mobirise: Kurzvorstellung in die Erstellung einfacher Webseiten ohne Programmierkenntnisse
- einfache Seiten mit einem Baukastensystem zusammenstellen
- Webseiten exportieren und veröffentlichen
- Hilfreiche Tipps, Tricks & Links
Schulungsinhalte – Tag 3
Usability (UI) & User Experience (UX) theoretische Grundlagen.
- Usability und User Experience
- Unterschiede und Gemeinsamkeiten
- Zehn Regeln der Usability
- Aspekte der User Experience
- Wahrnehmung & Handeln
- Wahrnehmungsgesetze
- Seitenwahrnehmung
- Menschliches Handeln
- Knappheit erzeugt Dringlichkeit
- Halo-Effekt
- Gestaltgesetze
- Personas
- Vorteile von Personas
- Bestandteile von Personas
- Erstellung von Personas
- User Stories und Use Cases
- Customer Journey Maps
- Finden und Testen der Navigationsstruktur
- Entwurfsphasen
- Von Low-Fidelity zu High-Fidelity
- Scribbles und Wireframes
- Software für die Wireframe-Erstellung
- Prototyping mit User Scenarios
- Prototyping-Tools
- Usability-Tests
- Ablauf von Usability-Tests
- Ziele von Usability-Tests
- Guerilla-Usability-Tests
- A/B-Tests
- Kopf- und Fußleisten
- Mega-Menüs gestalten
- Kopfleiste und Sticky Header
- Sprachumschalter
- Footer
- Verwendung von Farben
- Farbwirkung
- Farbe und Usability
- Farbe und Barrierefreiheit
- Web-Typographie
- Nutzerfreundliche Bilder
- Vorteile und Nachteile von Bildern
- Authentische Bilder verwenden
- Bildgestaltung und Bildeinsatz
- Blickrichtung
- Bilder auf mobilen Endgeräten
- Slideshows
- Einsatz von Mikro-Animationen
- Link- und Button-Gestaltung
- Link-Platzierung und -Gestaltung
- Button-Design und -Anordnung
- Button-Zustände
- Akkordeon-Menüs
- Formular-Design
- Formulare aus Nutzersicht
- Formularfelder gestalten
- Formularfeld-Beschriftungen
- Intelligente Formulare
- Umgang mit Fehlermeldungen
- Formulare auf mobilen Endgeräten
- Listen und Tabellen
- Aufbau und Reihenfolge
- Kopfleiste und Sortierung
- Vergleichstabellen
- Suchfunktion & Ergebnislisten
- Nutzerfreundliche Suchfunktionen
- Technische Aspekte der Suche
- Suchergebnisse gestalten
- Umgang mit keinen Suchergebnissen
- Filter und Facetten
- Trefferanzahl reduzieren und erweitern
- Gruppen und Attribute
- Gestaltung von Filtern und Facetten
Verfügbare Plattformen
Microsoft Windows und Apple macOS
Dauer
3 Tage à 8 Unterrichtsstunden.(1)Die Buchung eines Einzeltages ist auch möglich. Kontaktieren Sie uns hierzu gerne.
(8:30 Uhr bis ca. 15:45 Uhr)
Erforderliche Software
Zur Durchführung benötigen Sie vorinstallierte Anwendungen. Bei Einsatz kostenloser Testversionen sollte die Testdauer über den Kurstermin hinweg gewährleistet sein.
- Internet-Browser: Google Chrome o. Apple Safari (IExplorer, Edge und Firefox nicht umfänglich unterstützt)
- Sourcecode Editor: Brackets (kostenlos) oder Adobe Dreamweaver*
- Mobirise (kostenlos)
- Adobe XD*
- Adobe Photoshop CC* (empfehlenswert)
- Adobe Illustrator CC* (empfehlenswert)
*) gültige Lizenz, Abonnement (bspw. Adobe CC) oder vollumfängliche Testversion. Zu den Live-Online-Schulungen benötigen Sie ZOOM oder nach Abstimmung eine alternative virtuelle Meeting-App.
Kurs-Konfigurator für Ihr Einzel- oder Firmentraining
Entdecken Sie die individuelle Kursgestaltung und setzen Sie Schwerpunkte nach Ihren Anforderungen und Wünschen.
Nutzen Sie für die individuelle Auswahl Ihrer Wunschthemen unseren webbasierten Themen-Auswahl-Katalog.
Unser Trainer-Team
Wir verpflichten ausnahmslos Dozenten unseres bestehenden Trainerteams. Unsere Kursleiter*innen gehen mit all ihrer Praxiserfahrung, ihrem Wissen und Können auf Ihr Fachgebiet ein und versetzen Sie in die Lage, Wissen optimal umzusetzen und die Programme maximal auszunutzen.
Schulungsdetails im PDF-Format
Schulungsorte
- Live-Online-Schulung
- Bei Ihnen vor Ort; Kunde hausintern
Durchführungsgarantie
Öffentliche Schulungstermine
Wählen Sie aus den geplanten offenen Live-Online-Kursterminen, die gewöhnlich für 6 Teilnehmerpersonen ausgelegt sind:Termine zu Einzel- und Firmentrainings
Individuelle Termine und Präsenz-Schulungen auch bei Ihnen vor Ort möglich. Wir freuen uns auf Ihre Anfrage!Buchen ohne Risiko
Sichern und buchen Sie Ihren Teilnehmerplatz. Sollte das offene Training mangels Teilnehmer oder Überschreitung der max. Teilnehmerzahl nicht stattfinden, so nennen wir Ihnen - mind. 10 Werktage vor Kursbeginn – einen Ersatztermin, bzw. sichern Ihnen eine kostenfreie Stornierung zu.
TIPP: Seminar-Versicherung für den unvorhersehbaren Fall eines kurzfristigen Rücktritts.
Wählen Sie Ihre weiteren Schritte…
Kursthema: "Responsive WebDesign - Grafiker"
Alternative Schulungen zum Thema 'Responsive WebDesign'
Allgemeinte Hinweise:
- Eine Unterrichtsstunde entspricht 45 Minuten.
- Wir mieten keine fremden Räumlichkeiten an und verpflichten ausnahmslos Trainer*innen unseres bestehenden Dozententeams.
- Genannte Preise verstehen sich als Nettopreise zzgl. der zum Zeitpunkt der Lieferung gültigen gesetzlichen Mehrwertsteuer.
- Aufgrund der besseren Lesbarkeit wird im Text das generische Maskulinum verwendet. Andere Geschlechter sind jedoch ausdrücklich mit gemeint.
- Es gelten unsere Allgemeinen Geschäftsbedingungen (http://agb.wildkolleg.de) - diese sind Vertragsbestandteil.
- Angebot freibleibend, Irrtümer vorbehalten.
Responsive WebDesign Webinare, Tittmoning, Responsive WebDesign Privatkurs, Responsive WebDesign Firmenschulung, Responsive WebDesign Inhouse-Training, Responsive WebDesign offenes Seminar, Mobile Web-Design, Responsive WebDesign Vor-Ort Schulung, Responsive WebDesign offener Kurs, Responsive WebDesign Hilfe & Support, Happurg, Responsive WebDesign Individualtraining, WebDesign, ResponsiveAham, Responsive WebDesign Inhouse-Lehrgang, Theilenhofen, Responsive WebDesign Seminar