Loading...
Variable Gestaltung
Work in Progress

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.

Das wichtigste Layout-Konzept und seinen Layout-Einstellungen ist das Boxmodell.

Boxmodel

Elemente für sich

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

Der Inhalt nimmt sich grundsätzlich den Platz, den es braucht.

Die Boxmodell-Logik ermöglicht es, den Textfluss* des Dokuments ihn in die gewünschte Form und im gewünschten Raum zu bringen.

*Alles im Fluss - HTML & CSS Einführung

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

Spacing

Die unsichtbaren Helden.

Die Box Eigenschaften sind wichtig.

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)

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

Display Settings

Die Box kontrollieren

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.

Positionierung

Elemente zu einander

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

Variablen setzen

Die Macht nutzen

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.

Umgang im Design

Variables GestaltungsSystem

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

Mozilla Developer
11

Systemisches Design

Richtig eingesetzt

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

FrontEnd vs. Design

Vorprogrammierte KOMPLIKATIONEN

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.

Scroll Snap
On
Off