Webdesign R&L
01 / 03 Leistung — Design

Webdesign

Gestaltung ist die Entscheidung, was zuerst gesehen wird.

Werkzeug Figma
Typischer Rahmen 2 – 5 Wochen
Ergebnis Designsystem + Screens

Die meisten Unternehmenswebsites sehen aus wie ihre Konkurrenz. Gleiche Raster, gleiche Kacheln, gleiche Stockbilder. Das ist bequem — und genau der Grund, warum niemand sie sich merkt.

Wir entwerfen den digitalen Auftritt von der Hierarchie her: Was muss jemand in drei Sekunden verstehen, was in dreißig, was erst beim zweiten Besuch? Daraus entstehen Layout, Typografie und Bildsprache — nicht umgekehrt.

iMac mit einem geöffneten Designsystem: Farbpalette, Textstile, Widget-Vorlagen und Komponentenbibliothek nebeneinander, davor Zimmerpflanzen und ein Smartphone
01 Umfang

Sechs Dinge, die wir | unter *Webdesign* verstehen.

  • 01

    UX & Struktur

    Nutzerführung, Informationsarchitektur, Wireframes. Erst der Weg, dann die Oberfläche.

  • 02

    UI Design

    Screens für Desktop, Tablet und Mobile — als zusammenhängendes System, nicht als drei Zufälle.

  • 03

    Designsystem

    Farben, Typo-Skala, Spacing, Komponenten und States. Dokumentiert, damit es auch in zwei Jahren noch stimmt.

  • 04

    Typografie

    Schriftauswahl, Skala und Rhythmus. Typografie trägt bei uns die Gestaltung, nicht die Dekoration.

  • 05

    Prototyping

    Klickbare Prototypen inklusive Motion-Verhalten. Entscheidungen fallen am Objekt, nicht im Meeting.

  • 06

    Redesign

    Bestehende Auftritte analysieren, entkernen, neu aufbauen — mit dem, was funktioniert.

02 Designsystem

Das System, das ihr | *gerade anschaut*.

Statt Beispielbilder von Designsystemen zu zeigen, zeigen wir unser eigenes. Alles auf dieser Website — jede Überschrift, jeder Abstand, jede Farbe — kommt aus den folgenden Werten.

Farbe
  • Tinte #111013
  • Papier #f0ece4
  • Signal #ff4a1c
  • Ton #8a8279
Typografische Skala
  • Ag Display 1 clamp(2.85rem, 9vw, 8.5rem)
  • Ag Display 2 clamp(2.1rem, 5.6vw, 5rem)
  • Ag Display 3 clamp(1.6rem, 3.4vw, 3rem)
  • Ag Fließtext clamp(1rem, 1.05vw, 1.125rem)
  • Ag Label 0.6875rem
Abstände
  • s-4 · 1rem
  • s-6 · 2rem
  • s-7 · 3rem
  • s-8 · 4rem
  • s-9 · 6rem
03 Responsive

Mobil ist keine | *verkleinerte* Desktop-Version.

Zieh am rechten unteren Rand des Kastens. Das Layout darin rechnet nicht die Schrift klein — es ordnet sich neu, so wie es ein echtes Layout tun muss.

Leistung Websites, die man sich merkt. Projekt starten

Ziehbar — rechte untere Ecke

Großer Bildschirm mit einem Bildbearbeitungsprogramm, darin zwei Entwürfe derselben Website nebeneinander
Design-Check

Zeigt uns | eure *alte* Seite.

Wir sagen euch in einem Gespräch, was daran funktioniert, was weg kann und was ein Redesign realistisch kostet.