Loading...
Variable Gestaltung
Work in Progress

Variable Gestaltung

Die Web-Grundprinzipien erfordern die Gestaltung neu zu denken. Dabei gilt es, eine systemische Designsprache zu entwickeln, die auf die Grundregeln von HTML & CSS eingeht.
DIE Grundstruktur

Einstieg

HTML ist das Textformat einer Webseite. Vom Inhalt wird alles abgeleitet. Die HTML-Tags strukturieren und definieren diesen Inhalt. Alles was wir im FrontEnd sehen ist HTML, welches mit CSS, Javascript sowie Inhalten aus einem CMS angereichert werden kann.

Gehen wir nun der Logik von HTML und CSS anhand verschiedenen Aspekten auf den Grund.

1. Inhalt

2. Grundlogiken

3. Layoutaufbau

4. Umgang

Screenshot von HTML Zeilen.
© Adobe CC Learn to Code Series
Screenshot von HTML Zeilen.
HTML ist Text

Inhalt

HTML baut auf der Struktur von wissenschaftliche Arbeiten auf. Das World Wide Web diente zu aller erst dem globalen Austausch solcher Arbeiten unter Fachkollegen.

Um zu verstehen, wie Webdesign gedacht werden muss, beginnt man am besten beim Inhalt selbst.

Also mit einem sauber strukturierten Text. Haupttitel, verschiedene Untertitel, Absätzen, Referenzlinks und ab und an ein Bild.

Schreibt man einen Text. Reihen sich Buchstaben an Buchstaben. Alles in einer Linie (inline). Titel jedoch, verdrängen auf der ganzen Linie den Rest des Inhaltes nach unten. Sie sind als Block dargestellt und haben eine klare Hierarchie.

Was banal tönt, ist ein fundamentaler Unterschied zu Layoutprogrammen, welche wir nutzen, um Designs zu erstellen.

Webdesign baut auf einem normalen Textfile auf. Man tut sich gut, sich diesem Textfluss bewusst zu werden.
2
Grundlogiken

HTML Kurzübersicht

Es gibt zwei grundsätzliche Teile eines HTML-Dokumentes. Den Head sowie den Body. Beide haben ihre klare Funktion.

Head

Alle Elemente im Head sind nicht direkt sichtbar. Sie dienen der Webseiten-Logik, dem Browser sowie den Suchmaschinen. Zudem werden dort File-Verknüpfungen abgespeichert.

Body

Alles was im Body steht, ist sichtbar. Es ist der visuelle Inhalt. Die ästhetische Arbeit fliesst fast ausschliesslich in den Body.

Syntax

Ein Browser liest das HTML-File von oben links nach unten rechts. Kann er etwas nicht lesen, blockiert dies den Ladeprozess. Tippfehler im Code (ein Syntax-Error) verunmöglichen das Laden einer Webseite.

HTML Grundbausatz. Body und Head.
©Webdesign Essentials
HTML Grundbausatz. Body und Head.
3

Links

W3 Schools Head Element

W3 Schools Body Tag

Es ist essenziell, dass wir Gestalter*innen die variable Logik des Zusammenspiels von HTML und CSS verstehen und nutzen.

wo HTML auf CSS trifft

Selektoren

HTML und CSS werden durch verschiedene Selektoren verbunden. Es gibt verschiedene Selektoren, die zu unterschiedlichen Momenten oder Kombinationen die Gestaltung beeinflussen. Das CSS stylt die Selektoren.

Hier die wichtigsten.

HTML-Tag

Ein HTML-File strukturiert den Inhalt über HTML-Tags. Diese Tags können Gestaltungs-Deklarationen beinhalten. Sie sind dominant, da sie die «Parent» der Selektoren sind. HTML-Tags sind klar definiert.

HTML-Class

HTML-Klassen können zu einem HTML-Tag hinzugefügt werden, um mehr Logik & Verständnis in die Struktur zu bringen. Meistens werden HTML-Klassen für die Gestaltung genommen. HTML-Klassen können frei benannt werden. Im CSS durch einen Punkt (.class) vorne dran spezifiziert.

HTML-ID

Eine ID wird benutzt, um ein einziges Element eines HTML Files zu definieren. Es kommt nur 1x vor. z. B. gut für einen Ankerlink. Im CSS mit einer Raute (#Id-name) vorne dran spezifiziert.

States

Ob Links oder andere Interaktionen, alle States eines Elementes können separat im CSS gestaltet werden. Hover, Pressed, Focus, Visited, etc.

Der richtige Mix aus Tags, Klassen und Kombo-Klassen, ermöglicht ein raffinierter Umgang mit dem Design.
Darstellung eines HTML Textes sowie dem visuellen Pendant. Dabei wird unten erklärt, wie die unterschiedliche Vererbung funktioniert.
© Webdesign Essentials
Darstellung eines HTML Textes sowie dem visuellen Pendant. Dabei wird unten erklärt, wie die unterschiedliche Vererbung funktioniert.
4

Es gibt viele Selektoren

W3 School: Selektoren

Einzüge im Code

Verschachteln

Einzelne HTML-Tags werden zu Komponenten von Modulen verschachtelt. Diese Verschachtelung wird auch mit Parent- und Child-Element bezeichnet und steht in einer hierarchischen Abhängigkeit zueinander.

Um die Verschachtelung sowie Abhängigkeiten von Elementen während des Programmierens rasch zu erfassen, werden diese Verschachtelungen im Text jeweils eingerückt.

Dabei gibt es HTML-Tags, welche sich bevorzugt um das Layout kümmern. Der Div-Tag oder semantische HTML-Tags.

Verschachtelter HTML-Code neben der visuellen Darstellung des gleichen um die Verschachtelung verständlich zu erklären.
© Webdesign Essentials
Verschachtelter HTML-Code neben der visuellen Darstellung des gleichen um die Verschachtelung verständlich zu erklären.
5

Rückblende

Anatomie einer Webseite von den Atomen zu dem Organen.

HTML: Semantic Elements: Definiere deine Divs

Kaskade & Vererbung: Einführung

Semantik des Layouts

Semantisch & Non-Semantische Elemente

Zum anderen muss man schauen, dass die jeweiligen HTML-Tags sowie CSS-Klassen richtig eingesetzt und gestylt werden.

Dazu hilft es, mit den Layout-HTML-Tags zu arbeiten. Am häufigsten trifft man den «div» an. Div steht für Division, also Einheit. Er ist aber wie der «span» ein Non-Semantisches Layout Element. Das heisst soviel, dass mit ihm keine Inhaltsdefinition gemacht wird.

Mit HTML 5 kamen aber semantische HTML Layout-Elemente. Semantische Layout-Elemente ermöglichen eine bessere Indexierung sowie Accessibility, weil Screen-Reader und Spiders/Crawlers die Inhaltsbereiche verstehen.

Beispiele von semantischen HTML-Elementen

nav - Definiert Navigationslinks

header - Definiert einen Header innerhalb des Dokumentes oder Section. (nicht zu verwechseln mit dem head)

main - Definiert den Hauptinhalt

section - Definiert eine Section (Innerhalb des Dokumentes)

article - Definiert einen eigenständigen Artikel innerhalb des Dokumentes (z. B. Blog-Teaser)

footer - Definiert den Footer-Bereich innerhalb des Dokumentes oder Section.

Dies so zu definieren ist sinnvoller, als immer ein Inhalt unwissendes Div-Element zu verwenden.

Vielseitig anwendbar

Vererbung

Die Verschachtelung von Elementen macht nicht nur die Gruppierung von Elementen ersichtlich, sondern definiert vor allem auch dessen Style-Vererbung.

Das Vererbungsprinzip

Alles was im Parent definiert wird, erbt das Child-Element. Dies geschieht über mehrere Generationen hinweg. Ausser ein Child-Element überschreibt diese Definition. 

Das sichtbare Design ist im Body-Tag eines HTML-File. Alles was im Body definiert wird, wird auf alle Elemente vererbt.

Die HTML-Struktur einer Seite definiert durch seine Verschachtelung der Elemente dessen Vererbungslogik.

Wenn nun die Parent- und Child-Logik einer HTML-Struktur kombiniert wird mit der Hierarchie der Selektoren (Tags, Klassen, etc.), kann man sehr viele Abhängigkeiten definieren, welche richtig eingesetzt, den Code schlank und das Design sauber machen.

Eine elegante HTML/CSS-Logik ist kurz und hat wenig Wiederholungen.
asd
© Webdesign Essentials
asd
6

Bilderklärung

1. Im Body-Tag wurde die Schrift-Familie, Schrift-Farbe und Laufrichtung definiert.

2. Die Klasse «Box» definiert die Schrift-Farbe sowie die Ausrichtung (zentriert) neu. Diese neue Definition überschreibt die Vererbung.

3. Die Klasse «Heading 2» definiert nur noch die Schriftgrösse und den Zeilenabstand.

4. Durch das Vererbungsprinzip kann nun der «Heading 2» unterschiedlich Farbig sowie positioniert werden, Die Schriftgrösse wie auch Zeilenabstand bleiben gleich.

Design Stütze

Diese Logiken sind sehr rational und ist aus Designperspektive mehr als sinnvoll. Sie zwingen uns, das Design konsistent zu halten und sich der Hierarchie bewusst zu werden.

Ein Weg ist, sich diese Verschachtelung und Vererbung spielerisch vorzustellen. Als Dialog beispielsweise.

«Alle meine Kinder sind in der Schrift-Familie Avenir-Next, weiss und Linksbündig», sagt der Body.

«Ok, aber alle Schriften in meiner News-Box sind pink, weil ich einen weissen Hintergrund habe! Und zudem zentriert», sagt die News-Box Klasse.

«Ich will aber eine Headline Schrift sein und ab sofort Thirsty-Rough!», schreit der H1.

Stimmt die Vererbungslogik, können diese Elemente sich wie gewünscht präsentieren.

Wenden wir uns nun dem wichtigsten Layout-Konzept und seinen Layout-Einstellungen zu. Dem Boxmodell.

Elemente für sich

Boxmodel

Jedes Element ob Parent oder Child, hat verschiedene Möglichkeiten sich Platz zu verschaffen und sich zu stylen.

Der Inhalt nimmt sich den Platz, den es braucht (ausser man definiert es anders). Die Boxmodel-Logik ermöglicht es, ihn in die gewünschte Form und im gewünschten Raum zu bringen.

Dies wird durch Grössenangaben sowie den Spacing-Properties ermöglicht.

Gif-Animation welche die Boxmodel Spacing Properties zeigt. (Margin, Padding, Content und Border)
© Webdesign Essentials
Gif-Animation welche die Boxmodel Spacing Properties zeigt. (Margin, Padding, Content und Border)
7
Die Spacing-Properties anschauen

Margin & Padding sind zwei Begriffe mit viel Gewicht. Sie definieren den Umraum innerhalb und ausserhalb einer Box und ihrem Content.

Margin: Befreit die Zone ausserhalb des Elements (ist transparent). Treffen sich zwei Margins wird nur der grössere Wert genommen, der andere Wert wird verschluckt.

Padding: Bereit die Zone innerhalb des Elements (ist transparent)

Border: Kann eingefärbt und in seiner Dicke verändert werden.

Content: Bilder, Text, etc. erscheinen hier. Kann eingefärbt oder eine definierte Höhe und Breite haben. (Grösse = Border + Padding + Content)

Die Box kontrollieren

Display Settings

Jedes Element kann seine eigene Darstellung haben und seine Child- und Sibling-Elemente beeinflussen.

Die häufigsten Display-Settings

(Combos sind möglich)

inline: Element nimmt nur seinen benötigten Platz ein.

block: Element nimmt sich die ganze Breite ein.

Die meisten HTML-Tags sind entweder Inline oder Bock Elemente per Default. (z. B. Headings sind Block und Links sind Inline-Elemente)

flex: Die Flexbox eignet sich besonders um viele Child und Sibling-Elemente innerhalb eines Parent Element zu platzieren.

none: Element wird nicht dargestellt. (z. B. auf Mobile)

Grid: Elemente können in einem Raster dargestellt werden. Grid ist eine massive Optimierung für responsive Webdesign.

Gif-Animation von verschiedenen Display Settings.
© Webdesign Essentials
Gif-Animation von verschiedenen Display Settings.
Elemente zu einander

Positionierung

Jedes Element wird im HTML-Textfluss aneinander gereiht. Ohne Einstellungen wird alles schön der Reihe nach dargestellt.

Um gewisse Elemente spezifisch zu platzieren, können vier Möglichkeiten mit ihren jeweiligen Justierungen gewählt werden.

Die wichtigsten Positionen

Auto/Statisch: Element bleibt im Fluss. Fliesst mit.

Relative: Element ist abhängig von ihrem «Parent-Element»

Absolute: Element ist fix im Fluss platziert.

Fixed: Element ist ausserhalb des Flusses positioniert. Fix auf dem Viewport. Man nennt diese Elemente auch «Sticky».

© Webdesign Essentials
9
Die Macht nutzen

Variablen setzen

Viele Werte können als Variablen gesetzt werden. Dies ermöglicht einen noch schlankeren und sauberen Umgang mit der Gestaltung.

Design Variablen sind Container für einen Wert. Die Variablen können frei formuliert werden. Mit den Variablen öffnet sich das Tor zu Javascript und der «richtigen» Programmierung.

Variablen sind semantisch besser lesbar und intuitiver in der Designerklärung.

Für Designer sind diese beiden Beispiele spannend.

Farben

Die Variable «Rot» beinhaltet den HEX-Wert #ff0000. Im Code wird an einer Stelle die Variabel definiert und auf die verschiedenen Selektoren angewandt. Ändert man so den HEX-Wert der Variabel in z. B. einen HSL Wert, muss dies nur 1x geschehen.

Grössen & Abstände

Statt 50px Abstand kann man auch die Variabel «Spacing-Medium» nehmen. So kann man eine Anzahl verschiedener Abstände als Variablen definieren. Dies erlaubt ein rasches justieren des Codes.

Aufzeichnung von Variablen Namen für Abstände und Farben.
© Webdesign Essentials
Aufzeichnung von Variablen Namen für Abstände und Farben.
Variables GestaltungsSystem

Umgang im Design

Hat man während der Gestaltung die Grundprinzipien von HTML und CSS im Kopf, kann man seine Designarbeit um ein vielfaches raffinierter angehen.

Vererbung & Verschachtelung

Deklariert man die Abhängigkeiten. Zuerst grob, dann fein. Schafft man bereits mehr Klarheit.

Variablen einsetzen

Farben und Abstände als Variablen setzen und dies so kommunizieren.

Elemente klar benennen

Während der Gestaltung bereits die verschiedenen Komponenten benennen und wieder verwenden. So manifestiert sich bereits während der Designphase die Begrifflichkeiten.

Aufbauend auf der Atomic Design Theorie. Mehr dazu unter Anatomie einer Webseite

asd
asd
asd
11
Richtig eingesetzt

Systemisches Design

Beginnt man die Bedingungen von HTML und CSS in seine Designarbeit einzuplanen, schafft man eine gute Grundlage für ein solides Design.

Kreationsphase

Während der Kreationsphase (Entwurfsphase) gilt es diese Logiken nur in den Hauptzügen mitzunehmen. Man definiert Farben als Variablen, definiert Schriftabhängigkeiten und zentrale Designregeln.

Reinzeichnung

In der Reinzeichnung kann man dann die Spezifikation aller Elemente genauer definieren. Die Werte werden definiert, die Abhängigkeiten aufgezeichnet und jeder relevante Aspekt für die FrontEnd Umsetzung formuliert.

Der grosse Unterschied

Ein fertiges Design, sauber im FrontEnd umzusetzen, ist die Aufgabe von Frontend-Entwickler*innen. Die unsrige Aufgabe ist es, aus der unendlichen Anzahl an Designmöglichkeiten das richtige Design System zu definieren.

asd
© Webdesign Essentials
asd
12
Vorprogrammierte KOMPLIKATIONEN

FrontEnd vs. Design

In der Praxis haben sich CSS-Frameworks breit gemacht. Zum einen, um den die FrontEnd Umsetzung schneller und robuster zu machen, zum anderen um statische Referenzdesigns umzusetzen.

Bootstrap und Foundation sind beliebte Frameworks. Aus Entwicklungssicht sinnvoll.

Baut man jedoch als Designer eine eigene Webdesign-Logik auf, wird sie so von einer*einem FrontEnd-Entwickler*in mit der Bootstrap-Brille analysiert und in dessen Logik übersetzt.

Es gilt daher abzuklären, wie Design-Spezifikation weiterbearbeitet werden, sodass die Essenz weiter bestehen bleibt.

Die Übergabe zwischen Design zum «FrontEnd» sollte sich in Zukunft irgendwo in der FrontEnd-Umsetzung zwischen Design & Funktion einpendeln.

Bis dahin müssen wir aber noch viele Mauern abreissen und Brücken bauen.

Basiswissen. Check. Weitergehts

Für die Designplanung ist die HTML/CSS Logik fundamental anders, als all die klassischen Layoutprogramme die wir nutzen.

Design Fundamentals

Eine Reise durch eine sich stetig veränderbare Welt. Unzählige Hürden gilt es zu meistern. Die stetigen Veränderungen betreffen nicht nur die technischen Voraussetzungen, sondern der allgemeine Umgang mit Inhalt und Inhaltskuration. Die Veränderung als Ausgangslage für die Gestaltung ist eine komplexe Angelegenheit. Tauchen wir ein.