Wireframes

Ein Bild sagt mehr als tausend Worte. In der Softwareentwicklung ist dies natürlich nicht anders. Es lohnt sich, Ideen möglichst früh zu visualisieren. Hier kommen die Wireframes ins Spiel.

Was sind Wireframes?

Wireframes (dt. Drahtmodell) sind Skizzen, die zur Konzeption von Software und Websites erstellt werden. Sie bestehen aus einfachen Strichzeichnungen und verwenden standardisierte Symbole z.B. für Buttons, Texte und Bilder. Beim Wireframe geht es um die grundlegende Architektur der Software.

Typische Fragen sind:

  • Was passiert wo?
  • Wo kommt welcher Button hin?
  • Welche Menüpunkte brauchen wir?
  • Braucht der User diese Funktion wirklich?

Wireframes zeichnen sich dadurch aus, dass sie einfach geändert werden können und nur minimale Gestaltungselemente verwenden.

Warum lohnen sich Wireframes?

Das Ziel von Wireframes ist es, schnell eine Gesprächsgrundlage für die geplante Software zu schaffen. Alle Beteiligten können so einfach Funktionen diskutieren und ihre Vorstellungen abstimmen. Außerdem wird durch die Visualisierung der einzelnen Ansichten schnell klar, was wohin gehört und welche Priorisierung die einzelnen Elemente haben sollten.

Wie werden Wireframes erstellt?

Traditionell werden Wireframes einfach mit Stift und Papier angefertigt und es gibt viele UX-Designer*innen die darauf schwören. Man spricht dann von einem Papier-Prototypen.

Wir arbeiten in den meisten Fällen aber mit einer Wireframe-Software wie z.B. Miro oder Adobe XD, da wir so Elemente einfach kopieren können, einfach schneller sind und die Ergebnisse direkt teilen können.

Wer erstellt Wireframes?

Jeder kann Wireframes erstellen. In den meisten Fällen werden sie zwar in Workshops von den Teilnehmenden gemeinsam erstellt, aber die Methode ist universell. Wenn du also gerade an deinem Schreibtisch sitzt und über eine Idee nach grübelst, sind Wireframes eine tolle Möglichkeit.

Was kommt nach dem Wireframe?

Steht das Konzept, geht das Wireframe üblicherweise in die grafische Ausarbeitung. Hier verwandeln UI-Designer*innen den ersten Entwurf in einen gestalteten Prototypen, der meistens als Mockup oder als Clickdummy bezeichnet wird.

Low-Fidelity vs. High-Fidelity

Unter Fachleuten gibt es immer wieder die Diskussion, wie detailliert Wireframes bzw. Prototypen generell sein sollen. Wir orientieren uns hier meistens am Grundsatz “So viel wie nötig und so wenig wie möglich”. Oder mit anderen Worten: Wenn du als Kunde die Skizzen nicht nachvollziehen kannst, war es zu wenig. Wenn wir umgekehrt beim Wireframing schon über Text- und Bildinhalte sprechen, war es eher zu viel.

Fazit

Wireframes sind ein großartiges Kommunikationswerkzeug. Wenn du also eine Idee hast, schnapp dir einen Stift und ein Blatt Papier. Jede*r kann Wireframes erstellen.

Artikel teilen

Mehr aus unserem Blog

5 Jahre Lean Ocean – Das Interview

Vor 5 Jahren ist Lean Ocean in einem WG-Zimmer gestartet. Und heute hat das Unternehmen nichts von seinem Startup Flair verloren – nur die Büros sind schicker geworden.
Im Video-Interview werfen unsere Geschäftsführer Oliver und Stephan zusammen einen Blick auf die Entwicklung von Lean Ocean, gemeinsame Meilensteine und was die Arbeit bei Lean Ocean prägt.

Ein Tag als Softwareentwickler bei Lean Ocean

Was macht eigentlich ein Softwareentwickler bei Lean Ocean und wie sieht ein üblicher Arbeitstag aus? Das erzählt dir Norbert im folgenden Blogartikel! Wir haben Norbert, einen unserer Developer, einen Tag lang begleitet und über die Schulter geschaut. Vom ersten Kaffee zum wohlverdienten Feierabend– hier erhältst du spannende Einblicke in einen abwechslungsreichen Arbeitstag.

Von der Idee zum Feature

Wie sieht es eigentlich bei Lean Ocean hinter dem Code aus? Wie läuft so ein Projekt ab und wie wird aus einer Idee dann ein richtiges Feature? In diesem Artikel beantworten dir Oliver und Tom die wichtigsten Fragen zu unserem brandneuen Format #behindthecode. Als erstes geht Oliver als CTO von Lean Ocean auf den Entwicklungsprozess von Features ein und dann gibt uns unser Projektmanager Tom noch ein paar Antworten.

Picture of Oliver Holz

Oliver Holz

holz@lean-ocean.com