Spezialisierung auf die Erstellung von Websites ohne Code

Kurszusammenfassung

• E1: Sich inspirieren lassen

  • Einführung

  • Inspirationen | Juan Mora

  • Einflüsse | Filip Felbar

  • Einflüsse | Jan Losert

  • Einflüsse | Mónica Durán

  • Inspirationen | Isa Macías

• E2: UX UI Design für Landingpages: Originalität und Storytelling

  • Arten von Zielseiten

  • Was ist eine gute Landingpage?

  • Was ist inhaltliche Hierarchie?

  • Kontrast, visuelle Balance und die 3-Sekunden-Regel

  • Das Briefing und wie man recherchiert

  • Inhaltsstruktur für eine Zielseite

  • Wie erstelle ich ein Moodboard?

  • Die richtige Typografie

  • Geschichtenerstellung

  • Legen Sie das gesamte Material auf die Leinwand!

  • Erstellen Sie die Assets, die Sie für Ihre Zielseite benötigen

  • Designdefinition

  • Polieren Sie Ihr Design auf: Feedback

  • Präsentation beim Auftraggeber

• E3: Systeme für Websites mit Figma

  • Einführung in Designsysteme

  • Wie Designsysteme Ihnen helfen können, Ihren Arbeitsablauf zu beschleunigen

  • Einführung in das Projekt und den Ansatz

  • Einrichten der Figma-Datei und Beginn der ersten Erkundungen 1

  • Einrichten der Figma-Datei und Beginn der ersten Erkundungen 2

  • Erweiterung des Explorations- und Designsystems 1

  • Erweiterung des Explorations- und Designsystems 2

  • Organisieren der Design System-Seiten 1

  • Organisieren der Design System-Seiten 2

  • Varianten beim Erstellen von Komponenten erkunden

  • Verfeinern des Designsystems mit einer zusammengesetzten Seite 1

  • Verfeinern des Designsystems mit einer zusammengesetzten Seite 2

  • Verfeinern des Designsystems mit einer zusammengesetzten Seite 3

  • Einrichten neuer Seiten mit dem kompleten Designsystem 1

  • Einrichten neuer Seiten mit dem kompleten Designsystem 2

  • Einrichten neuer Seiten mit dem kompleten Designsystem 3

  • Vorgehensweise bei der Erstellung der Dokumentation für das Designsystem

  • Bereinigen und Verwenden eines automatischen Layouts

  • Nutzung des Designs für weitere Markenelemente

  • Abschließende Gedanken

• E4: Webflow: Erstelle eine Website, ohne zu programmieren

  • Einführung in No-Code

  • Webflow-Kernfunktionen

  • Design

  • Gestaltungsrichtlinie

  • Styleguide-Erstellung 1

  • Styleguide-Erstellung 2

  • Helden-Sektion

  • Navigation

  • Fallstudienabschnitte 1

  • Fallstudienabschnitte 2

  • Collagenabschnitt 1

  • Collagenabschnitt 2

  • Kundenbereich und einfaches Newsletter-Formular

  • Fusszeile

  • Tablet-Ansichtsfenster

  • Mobiles Quer- und Hochformat-Ansichtsfenster

  • Formulare testen

  • Interaktionen

  • SEO-Optimierung und Hosting

  • Wartungs-, Editor- und Assets-Panel

  • Entdecken Sie CMS

• E5: Schöpfung einer Webseite in Squarespace

  • Definition des Ziels und der Struktur unserer Website P1

  • Definition des Ziels und der Struktur unserer P2-Website

  • Der allgemeine Stil unserer Website

  • Erstellung, Organisation und Vorbereitung von Grafikdateien

  • Änderungen an der Benutzeroberfläche des Squarespace-Inhaltsblocks

  • So wählen Sie die Vorlage für Ihre Website aus

  • Grundeinstellungen in Squarespace

  • Erstellen von Seiten in Squarespace: ihre Eigenschaften und Einstellungen

  • Der Inhalt wird in Squarespace blockiert

  • Die Seitenabschnitte in Squarespace

  • Design und Konfiguration der Seiten „Home“, „Services“, „Über mich“ und „Kontakt“ P1

  • Design und Konfiguration der Seiten Home, Services, About me und Contact P1

  • Design und Konfiguration der Seiten Home, Services, About me und Contact P2

  • Portfolio P1-Seiteneinstellungen

  • Portfolio P2-Seiteneinstellungen

  • P1 Blog-Einstellungen

  • P2 Blog-Einstellungen

  • P3 Blog-Einstellungen

  • Fußzeilenerstellung und Hauptnavigationsanpassungen

  • Festlegen der Schriftarten und Farben der Site P1

  • Festlegen der Schriftarten und Farben der P2-Site

  • Bildeinstellungen und andere Einstellungen

  • Bonus: Webstyles in Squarespace 7.0

  • Marketingeinstellungen

  • Allgemeine Datenschutzeinstellungen

  • Lassen Sie uns die P1-Site öffentlich machen

  • Machen wir die P2-Site öffentlich

  • Site Analytics Tracking

• E6: No-Code-Webdesign mit Elementor und Wordpress

  • Visuelle Referenzen: Wo Sie nach Inspiration suchen können

  • Sitemap und Styleguide

  • Erstellung des Designvorschlags 1

  • Erstellung des Designvorschlags 2

  • Erste Schritte in WordPress

  • Elementor installieren

  • Elementor 1 kennen

  • Elementor 2 kennen

  • Kopf- und Fußzeile 1

  • Kopf- und Fußzeile 2

  • Startseite

  • Vorlage für Projekte 1

  • Vorlage für Projekte 2

  • Projektarchiv

  • „Über“ und „Kontakt“

  • Sekundärseiten: Datenschutz, 404 und Wartung

  • Testen und starten Sie die Website

  • Website-Update

• Abschlussprojekt

  • Spezialisierung auf die Erstellung von Webseiten ohne Programmierung

Neue Projekte