Design Log

Wie wir digitale Oberflächen besser machen

Ein kurzer Design-Log über Raster, Typografie, Moodboards, Referenzen und die Art, wie Livecristen Studios digitale Produkte gestaltet.

Design Log

Gute Oberflächen entstehen aus Entscheidungen.

Wir arbeiten fast immer im 4- oder 8-pt-Raster. Abstände, Karten, Buttons und Layout-Blöcke sollen einem klaren Rhythmus folgen.

Die Basis bleibt schwarz, grau und weiß. Farbe wird selten eingesetzt, damit ein Akzent wirklich Bedeutung hat. Layout, Kontrast und Typografie kommen vor Effekten.

01

Raster zuerst

12 Spalten geben Orientierung. Nicht jede Kante muss perfekt daran kleben, aber das System hält die Seite ruhig.

02

Typografie entscheidet

Headlines enger, Absätze mit mehr Luft. Kerning leicht reduzieren, aber immer am jeweiligen Font prüfen.

03

Referenzen lesen

Mobbin für App-Screens, starke Websites direkt im Browser prüfen, WhatFont und CSS-Viewer nutzen.

04

Selektiv bleiben

Vercel, Framer, Linear, Radix, Swiss Design und Editorial Layout sind Lehrer. Nicht alles auf einmal.

Arbeitsweise

Design ist kein Dekorationslayer.

Moodboards

Nur starke Referenzen sammeln. Cosmos für Richtung, Mobbin für reale Screens, Fonts in Use für Typografie im Einsatz.

Figma

Ideen, Bilder, Icons, Styles und Auto Layout sauber halten. Das macht spätere Änderungen leichter.

Motion

Interaktionen sollen Zustände erklären. Hover, Fokus, Dialoge und Übergänge dürfen hochwertig sein, aber nicht nerven.

Ehrlichkeit

Website, App, Poster und Pitch Deck funktionieren unterschiedlich. Jede Oberfläche hat ihre Lernkurve.

Assets

Fotos, Icons, Illustrationen und UI-Vorschauen müssen zum Produkt passen. Lieber weniger Material, dafür besseres.

Kontext

Nicht jede Oberfläche braucht viel Stil. Ein Dashboard darf sauber, klar und zurückhaltend sein.

Gute digitale Oberflächen entstehen nicht aus Dekoration. Sie entstehen aus Entscheidungen.

Bei Livecristen Studios arbeiten wir fast immer mit einem 4- oder 8-pt-Raster. Abstände, Karten, Buttons und Layout-Blöcke sollen einem klaren Rhythmus folgen. Typgrößen bleiben möglichst in 2er-, 4er- oder 8er-Schritten. Das wirkt kontrollierter und verhindert zufällige Größen.

Das 12-Spalten-Grid ist unsere Basis für Websites. Es muss nicht jede Kante starr bestimmen, aber es hilft, Proportionen sauber zu halten. Besonders bei Produktseiten macht es Layouts ruhiger und besser lesbar.

Farbe setzen wir sparsam ein. Schwarz, Grau und Weiß bilden die Grundlage. Eine Akzentfarbe reicht meistens. Wenn alles leuchtet, ist nichts wichtig.

Typografie ist oft wichtiger als Effekte. Headlines dürfen eng stehen und ungefähr bei 100 Prozent Zeilenhöhe bleiben. Absätze brauchen mehr Luft, meistens um 130 Prozent oder etwas mehr. Kerning kann leicht enger sein, aber jeder Font reagiert anders. Deshalb muss man Schrift immer im echten Layout prüfen.

Für Referenzen schauen wir uns funktionierende Produkte an. Mobbin hilft bei App-Screens. Gute Websites kann man direkt im Browser mit CSS-Viewer und WhatFont lesen. Für visuelle Richtung sind kuratierte Moodboards nützlich, aber nur, wenn die Qualität hoch bleibt.

Starke Referenzen sind zum Beispiel Vercel, Framer, Linear, Radix, Untitled UI, Designcode, 4pt-Systeme, Swiss Design, Editorial Layout und gut gemachte Pitch-Decks. Man soll nicht alles kopieren. Man soll verstehen, warum etwas funktioniert.

In Figma sammeln wir Ideen, Bilder, Icons, Typografie und UI-Patterns. Styles und Auto Layout sind wichtig, weil sie spätere Änderungen einfacher machen.

Motion soll Zustände erklären. Hover, Fokus, Dialoge und kleine Übergänge können hochwertig wirken, dürfen aber nie die Bedienung verlangsamen.

Assets müssen zur Oberfläche passen. Fotos, Icons, Illustrationen und UI-Vorschauen sollten art-directed wirken. Lieber wenige gute Inhalte als viele durchschnittliche.

Man muss ehrlich mit der eigenen Arbeit sein. Eine Website, eine App, ein Poster und ein Pitch Deck sehen ähnlich aus, funktionieren aber unterschiedlich. Jede neue Art von Screen hat eine Lernkurve.

Nicht jede Oberfläche braucht viel Styling. Ein Finanzdashboard braucht oft keine große visuelle Show. Ein klares, minimalistisches Layout mit guten Tabellen und Charts reicht meistens.

Die wichtigste Regel bleibt: selektiv sein. Nicht alles einbauen, nur weil es gerade modern aussieht.

Zurück zum Blog