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
7

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

Spacing

Die unsichtbaren Helden.
7.1

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)

Display Settings

Die Box kontrollieren
8

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
9

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.

Umgang im Design

Variables Gestaltungssystem
11

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

Systemisches Design

Richtig eingesetzt
12

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.

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
13

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.

Webdesign Fundamentals

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.