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 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 standardmässig den Platz, den es braucht.

Die Boxmodell-Logik ermöglicht es, den Textfluss* des Dokuments ihn in die gewünschte Form und in den 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: Befreit 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

Child-Styling

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

block: Element nimmt sich die ganze Breite ein.

Die meisten HTML-Tags sind standardmässig entweder Inline oder Bock Elemente.

none: Element wird nicht dargestellt.

Parent-Styling

flex: Die Flexbox eignet sich besonders um mehrere Child-Elemente innerhalb eines Parent-Elements zu platzieren.

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

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 seinem «Parent-Element»

Absolute: Element ist fix im Fluss (oder innerhalb des Parent) platziert.

Fixed: Element ist ausserhalb des Flusses positioniert. Und bleibt fix im Viewport sichtbar.

Sticky: Element ist innerhalb seines Parents positioniert. Aber reagiert auf den Viewport und bleibt «fixed» platziert, solange der Parent sich im Viewport befindet.

© Webdesign Essentials
9

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 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

Es gibt verschiedene Aspekte auf das Gleiche. Bei der Design-Umsetzung in Code kommen teilweise ganz andere Aspekte zum Tragen, als die Logik des Designs selbst.

FrontEnd vs. Design

Vorprogrammierte Komplikationen

Die FrontEnd Entwicklung kümmert sich nicht nur um die Gestaltung, dies trübt den rein visuellen Fokus.

Performance, Skalierbarkeit, Server-Abhängigkeiten oder die Logik von HTML und CSS aus Entwicklungssicht ändert die Konzeption und Planung einer FrontEnd-Umsetzung eines Designs.

CSS-Frameworks als Beispiel

Beispielsweise haben sich lange Zeit (noch immer?) CSS-Frameworks breit gemacht. Zum einen, um den die FrontEnd Umsetzung schneller und robuster zu machen, zum anderen, um statische Referenzdesigns umzusetzen.

Dabei wird der Design-Prototyp mit der Bootstrap-Brille analysiert und in dessen Logik umgesetzt.

Es gilt daher abzuklären, wie eine Design-Spezifikation erarbeitet wird, sodass die Essenz bestehen bleibt.

Wenn du vermeintlich viel über FrontEnd weisst, so hilfst dir dies in gewisser Hinsicht enorm bei der Gestaltung einer Webseite, aber gleichzeitig entstehen neue Gefahrenzonen.

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. Der Umgang mit der Verschachtelung und den Layout-Möglichkeiten des Box-Modells gilt es zu lernen. Es hilft uns präzisere Anweisungen an Entwickler*innen zu geben oder selbst mit Webseiten zu arbeiten.

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