Webdesign Essentials

Beta Version

Webdesign Grundlagen für Designer*innen

Lerne die wichtigsten Aspekte von UX/UI-Design bis hin zum FrontEnd-Design kennen.

Vorwort
Buy me a Coffee

Kein Tracking, dafür ein Kaffee?

Unterstütze dieses ehrenamtliche Projekt mit einer kleinen Spende. Danke.

Suche direkt nach einem Thema.

Neuste Änderungen

16.4.2022

Semantik des Layouts

21.2.2023

R/EM Fonts

21.2.2023

Standard Schriftstile

Webdesign Fundamentals

Responsive Design heisst nicht ein Webdesign für Desktop, Tablet und Mobile zu erstellen, sondern den Umgang mit der Formatlosigkeit zu lernen.

Eine anspruchsvolle Reise durch eine sich ständig wandelnde Welt mit vielen Herausforderungen, die es zu meistern gilt. Die Veränderungen betreffen nicht nur die Technik, sondern auch die Art und Weise, wie Inhalte erstellt und organisiert werden. Lass uns eintauchen.

Work in Progress
14

HTML & CSS Einführung für Designer:innen

Die Web-Grundprinzipien erfordern die Gestaltung neu zu denken. Dabei gilt es die Grundregeln von HTML & CSS, als modulares Baukasten-System kennenzulernen.
Work in Progress
15

Variable Gestaltung

Das modulare Baukastensystem aus HTML und CSS gilt es, in eine systemische Designsprache umzuwandeln. Schauen wir uns erste Layout-Schritte mit HTML & CSS an.
Work in Progress
16

Responsive Design

Gestalten mit der Logik des Codes. Vergiss die Device-Grössen. Vergiss das Format. Es ist nicht relevant. Es existiert nicht. Nur das Design ist da.
Work in Progress
17

Variabler Inhalt

Nicht nur die Form ist im Web responsive, sondern auch der Inhalt. Ein Kapitel über die Herausforderung für alle Fälle eine gute Lösung bereitzuhalten.

Design Vertiefungen

Es gibt viele verschiedene Aspekte die neben dem responsive Design relevant sind.

In verschiedenen Kapiteln gehe ich diesen Aspekten auf den Grund.

Work in Progress
13

Ästhetische Prinzipien

Ein kurzer Überblick, was ein:e Grafiker:in lernt. Im Grunde ist dieses Kapitel eine kurze Video-Zusammenstellung von GCFLearnFree.org
Work in Progress
18

Web-Typografie

Eine Einführung in die Web-Typografie, Webfonts und ihre Möglichkeiten. Dieses Kapitel geht nicht auf die Schriftästhetik oder die richtige Schriftwahl ein.
Work in Progress
19

Usability

Wie schafft man eine Gestaltung, welche immer den Nutzen im Zentrum hat? Weder aufdringlich noch unauffällig, sondern einfach immer adäquat.
Work in Progress
20

Accessibility

Eine barrierefreie Webseite ermöglicht es allen User:innen mit oder ohne Behinderungen, die Webseite zu verstehen und zu bedienen. Wir schauen uns die gestalterischen Aspekte an.
Work in Progress
21

User Interaction Visualization

Die Bedienung digitaler Oberflächen bedingt ein adäquates Feedback. Eine visuelle Brücke zwischen physischer Interaktion und virtuellem Raum.
Work in Progress
22

Datenvisualisierung & AI

Big Data & AI verändert die Art wie wir arbeiten. Von Infografiken zu Datenvisualisierungen mittels Machine-Learning-Tools die unsere Daten interpretieren und uns neue Werkzeuge und Interaktionsarten liefern.

Design Approaches

Eine Zusammenstellung zeitgemässer Herangehensweisen für die Webdesign-Entwicklung.

Viele Design-Begriffe sind von temporärer Natur und werden unterschiedlich ausgelegt.

Work in Progress
6

Cyberspace

Webdesign befasst sich mit der Gestaltung des virtuellen Raumes und der Interaktion darin. Es hat viel mit Produktdesign, Signaletik, Szenografie und Architektur zu tun und ist nicht mit digitaler Print-Grafik zu verwechseln. Eine Einführung.
Work in Progress
23

Evidenzbasierte Gestaltung

Die heutigen Vorgaben des Marktes verändert das altbekannte Grundverständnis der Gestaltung.
Work in Progress
24

Design System

Modular. Responsive. Kollaborativ. Die logische Konsequenz der digitalen Transformation. Ein Design System hilft, der Komplexität des Digitalisierungsprozesses besser zu begegnen.
Work in Progress
25

Human Centered Design

Das Gestaltungsprinzip, welches die Brücke zwischen virtuellem Raum und menschlicher Interaktion schlägt. Eine nachhaltige Design-Thinking-Strategie.

Inhaltsstrategien

Die Dominanz guter Geschichten

Es ist egal wie technisch herausragend oder wie schön deine Webseite gestaltet ist. Passt der Inhalt nicht zum gewünschten Zielpublikum und kann die Geschichte nicht transportieren, ist alles umsonst. Die Kunst ist es, die richtige Tonalität zu finden. Webdesigner:innen sind zwar keine Texter oder Markt-Analyst:innen, aber ohne ein Interesse an der inhaltlichen Materie verspielt man viel.

Work in Progress
10

Storytelling & Kreation

Von der Kunst die Aufmerksamkeit zu erhalten. Geschichten zu erzählen, bei denen die Zuhörer nicht mehr weghören wollen. Aber, was haben Geschichten mit Webseiten zu tun?
Work in Progress
11

Zielgruppen Strategien

Eindenken in die User:innen ist ein fundamentaler Designprozess. Dieses Kapitel gibt einen Überblick über die Analyse der Kund:innen deiner Kund:innen.
Work in Progress
12

Informations-Architektur

Wir kennen die Zielgruppe, wir wissen ihnen eine packende Geschichte zu erzählen. Nun gilt es dieses Drehbuch in eine Webseite umzuwandeln.

Technik und Struktur

Ein Einblick woraus Webseiten gemacht sind.

Nebst den physischen Elementen wie Pixel und Bildschirme sind Webseiten aus Code in Programmier- und Auszeichnungssprachen geschrieben. Diese Codezeilen sind die Bausteine der Webseiten-Anatomie. Die Anatomien von Webseiten sind oft fast identisch. Die Begriffe rund um Webdesign und der Welt, die es zu gestalten gilt, werden im Kapitel Cyberspace eingeführt.

Work in Progress
7

Devices & Displays

Von der physischen Beschaffenheit von Pixel über die Farbdarstellung bis zu den Interaktionsmöglichkeiten von Mensch zur Maschine.
Work in Progress
8

Programmiersprachen

Code bildet die Brücke zwischen Mensch und Maschine. Dies ist eine kurze Übersicht über die verschiedenen Arten von Code und ihre Einsatzgebiete.
Work in Progress
9

Anatomie einer Webseite

Wie setzt sich eine Webseite zusammen? Eine Übersicht über die Struktur und die Namenskonventionen von Elementen.

Web-Industrie

Eine explodierende Vielfalt an Berufen und Arbeitsprozesse und -Formen treffen aufeinander.

Als Webdesigner:in ist man eingebettet in ein sich stetig änderndes System. Die Berufsbezeichnungen wandeln genauso wie die Team-Prozesse oder Unternehmensstrukturen. Ganz zu schweigen von der Grafikbranche die total umgekrempelt wird.

In Bearbeitung
26

Berufe

Die Digitalisierung der Kommunikationsbranche brachte eine Unzahl an Berufsbezeichnungen hervor. Ein Versuch, etwas Klarheit in den Bezeichnung-Dschungel zu bringen.
In Bearbeitung
27

Teamwork

Komplexe Projekte stehen limitierten Ressourcen (Menschen, Zeit, Geld und Wissen) gegenüber. Techniken und Ideen, welche agile und nachhaltige Projektumsetzungen ermöglichen.
In Bearbeitung
28

Grafikbranche

Die Grafikbranche ändert sich. Welche Dynamiken gilt es zu beobachten.

Geschichte

Eine kurze Einführung in die Art unserer Kommunikation.

Wir Menschen sind Kommunikationsexperten. Unsere Sprachentwicklung und die daraus resultierenden intersubjektiven Realitäten prägen unser Dasein. Diese zwei Kapitel zeigen einen Abriss dieser Kommunikationsentwicklung.

Work in Progress
1

Geschichte der Kommunikation

Kommunikation ist alles in der kooperativen und kollektiven Welt der Homo Sapiens. Unsere Kultur, unser Wissen und unsere Vorstellung entwickelte sich über die Sprache.
Work in Progress
2

Geschichte des Internets

Eine kurze Einführung in die Entstehung des Internets. Wie die Digitalisierung unserer Gesellschaft, das Leben aller veränderte.

Internet Setup

Wie funktioniert ein dezentrales, globales Kommunikationssystem?

Mit Regeln, Logik und Glasfasern. Jedes Gerät braucht eine einzigartige Adresse um identifiziert zu werden. Jede Online Abfrage wird in Datenpakete aufgeteilt und verschlüsselt über diverse Routen vom Absender zum Empfänger geschickt.
Hier gehen wir diesen Grundbausteinen auf den Grund.

Work in Progress
3

Adressverwaltung

Jedes Gerät muss einmalig identifiziert werden. Für Maschinen wie für Menschen.
Work in Progress
4

Verbindungsmanagement

Um ein dezentrales Netzwerk zu unterhalten, braucht es Standards und Kontrollen in der Datenübertragung.
Work in Progress
5

Verbindungstechnologien

Jedes Signal wird durch physische Geräte gesendet.