Design ist ein Plan, um Elemente so anzuordnen, dass ein bestimmter Zweck am besten erreicht wird. - Charles Eames
Mit Werkzeugen wie Photoshop oder PowerPoint kann man Elemente an beliebiger Stelle in einem bestimmten Dokument positionieren. Diese Dokumente sind nicht responsive - der Inhalt wird nur für eine bestimmte Auflösung erstellt.
Webinhalt ist damit nicht vergleichbar, es verhält sich eher wie ein Word-Dokument. Der Inhalt fliesst ganz natürlich von oben links nach unten rechts und wird am Rand umgebrochen, es ist responsiv. Um den Inhalt zu strukturieren, teilt man die Webseite in Elemente auf, die mit dem Layout und der Position angeordnet werden. Mit Typographie, Rahmen und Effekte designt man das Ganze.
Das Kastenmodell beleuchtet, wie die Elemente auf einer Seite angeordnet werden. Jedes Element hat einen Elternteil und potenziell auch Kinder. Die meisten dieser Elemente haben eine Rolle mit vordefinierten Styles, die man ergänzen kann. Der Block "section" teilt die Seite in verschiedene Kapitel ein und benutzt die gesamte Breite der Seite. Der Block "container" zentriert den Inhalt, das Element "heading" definiert einen Titel, ein "paragraph" ermöglicht Textblöcke, etc. Nur das Element "div" hat keine vordefinierten Styles und kann für alles eingesetzt werden.
Ich teile die Seite in Sections und Container ein. Für Aufteilungen unter dieser Stufe benutze ich das Element "div".
Mit den Eigenschaften des Layouts (Block, Grid, Flex, Inline, None) definiert man das Aussehen des Elements und somit die Anordnung der darunterliegenden Elemente. Wenn Sie etwa einem Container ein Element hinzufügen, wird es relativ zu dessen Geschwister-Elementen positioniert. Hat der Container die Einstellung "Block", erscheinen die darunterliegenden Elemente wie bei einem Word-Dokument nacheinander und werden am Ende umgebrochen. Möchte man die Elemente nebeneinander anordnen, so wählt man für das Layout des Containers entweder "flex" oder "grid".
Mit den Eigenschaften für die Position (Static, Relative, Absolute, Sticky, Fixed) definiert man die Anordnung des entsprechenden Elements. Die Standardeinstellung "static" lässt das Element im Dokumentenfluss unberührt. Will man das Element relativ zum Dokumentenfluss verändern, so benutzt man den Wert "relativ". Die Eigenschaften "sticky" oder "fixed" löst man das Element aus der Elementen-Hierarchie heraus und positioniert es relativ zum Bildschirm.
Standardmässig vergrössert sich die Grösse des Elements automatisch mit dem Inhalt. Das bedeutet, dass es in der Regel nicht notwendig ist, die Höhe der Elemente festzulegen. Am besten man lässt die Höhe des Elements durch den Inhalt definieren. Die Breite hingegen benutze ich oft. Etwa um den "Container" auf eine maximale Grösse zu beschränken oder Elemente in einer Flexbox auf eine prozentuale Breite zu beschränken.
Die Eleganz und Übersichtlichkeit der Elemente erreicht man mit der Definition des Raums dazwischen. Hier kommen Margin und Padding ins Spiel. Margin schafft Platz ausserhalb eines Elements und verdrängt andere Elemente. Padding schafft Platz innerhalb des Elements. Mit den Einheiten (px, em, rem, %, vh, vw,ch), definiert man die Grösse und Anordnung des Inhalts innerhalb des Elements. Die Pixeleinheit ist ein absoluter Wert, die restlichen sind relative Werte.
Eine Webseite ist ein Stück Software, das eine Geschichte erzählt. Benutzen Sie Rahmen und Effekte, um dem Leser beim Benutzen Ihrer Webseite auch das Gefühl der Interaktivität zu vermitteln. In meinem Fall zeigt die Veränderung eines Textes (link) oder einer Box (linkbox) während dem Mouseover, dass beim Drücken etwas passieren wird.
Typografie ist eine Wissenschaft für sich. Es gibt aber Regeln, die nichts mit persönlichem Geschmack zu tun haben. Kontrast, Klarheit und Konsistenz sind die halbe Miete. Benutzen Sie nicht mehr als zwei verschiedene Schriften. Eine für Titel und eine für Text. Eine Webseite ist kein Gesetzbuch, definieren Sie nicht zu viele Hierarchien von Überschriften. Speichern Sie die Überschriften als Klasse ab und verwenden Sie für jede gleiche Überschrift dieselbe Klasse.
Ein Container, der den Inhalt zentriert und eine fix definierte maximale Grösse hat, sollte wiederverwendet werden. Dasselbe gilt für einen Titel mit einer bestimmten Grösse und einem definierten Space unterhalb wie auch für alle anderen Elementen. So schafft man über alle Seiten hinweg Konsistenz und eine gestalterische Ruhe beim Benutzen der Seite. Dies erreicht man, indem man einem gestyltem Element eine "Klasse" zuordnet. Für den Stil gilt: eine Änderung = eine Klasse. Benenne die Stiländerungen, die du auf ein Element anwendest, sodass du sie später wiederverwenden kannst.
Für das Responsive Design ist die Regel einfach. Der Style des Desktops wird auf alle anderen Breakpoints kaskadierend übertragen, sowohl nach unten (Tablet, Mobile) wie auch nach oben (z.B. Monitor mit 1920px). Wird der Style auf dem Tablet Breakpoint geändert, gilt dieser auch für das Mobile. Style deine Seite auf dem Desktop, gehe runter zum Tablet-Format, validiere deine Seite und gehe dann runter zum Mobile-Format.
