Web- und Oberflächendesign

Webdesign und Gestaltung von Oberflächen durch ein Team mit Erfahrung im Design ebenso wie in der produktiven Umsetzung solcher Produkte. Deshalb lässt sich das Entworfene ohne Überraschungen in Code umsetzen, ganz gleich, wer es baut. Wir prüfen Design an den Szenarien echter Menschen und nicht am Geschmack des Auftraggebers oder am eigenen.

Produktdesign ist mehr als Gestaltung. Es ist die Art, wie ein Mensch das Produkt beim ersten Kontakt wahrnimmt und daraufhin entscheidet, ob es sich lohnt, weiterzugehen und bis zu einer Handlung zu kommen. Der Ansatz richtet sich nach der Aufgabe: Soll das Produkt Eindruck machen, ist das die eine Art von Design; wird ein Mensch täglich darin arbeiten, eine andere; besteht die Aufgabe darin, ihn Schritt für Schritt zu einem Ergebnis zu führen, eine dritte. Ein schöner Entwurf, der nicht an Menschen geprüft ist oder die Feinheiten des konkreten Produkts übergeht, bleibt ein teures Bild: Er sieht gut aus und bringt kein Geld.

Deshalb beginnen wir mit Fragen. Weshalb ist der Mensch gekommen. Was tut er bereitwillig umsonst und wofür zahlt er. Was hält ihn auf. Bei Silent Notary entstanden aus einer solchen Analyse die Beglaubigung ohne Registrierung und ein erneuerbares kostenloses Kontingent: Beides stand nicht in der ursprünglichen Aufgabe und hat das Produkt bestimmt.

Der praktische Unterschied liegt darin, dass wir das Produkt im Ganzen durcharbeiten: alle Bildschirme, alle Zustände, alle Benachrichtigungen und alle Texte in der Oberfläche. Raum für spätere Optimierung wird von Anfang an vorgesehen, damit eine Marketingfachkraft Formulierungen und Schwerpunkte ändern kann, ohne den Entwurf neu zu bauen. Selbst wenn Sie bei uns nur das Design beauftragen, erhalten Sie deshalb keine Bilder, sondern ein Paket: Entwürfe, ein Designsystem und eine Dokumentation, mit der jedes Entwicklungsteam das Produkt bauen kann, Ihres oder ein fremdes.

Eine Geschichte für sich sind Oberflächen, in denen Menschen über Geld verfügen. Im Ökosystem Ubix.Network haben wir das Wallet, die Börse, die Staking-Plattform und den Netzwerk-Explorer gestaltet. Der Preis eines unverständlichen Bildschirms ist hier keine verlorene Anfrage, sondern falsch gesendetes Geld, das niemand zurückholt. Deshalb wird eine solche Oberfläche von den unumkehrbaren Handlungen her entworfen: was jemand vor der Signatur eines Vorgangs sieht, woran er erkennt, dass der Vorgang durchging, und was geschieht, wenn er es nicht tat. Zugleich mussten diese Produkte auf eine gemeinsame Sprache gebracht werden: Sie waren zu verschiedenen Zeiten entstanden und wirkten wie vier verschiedene Dienste.

Design hat auch andere Ausprägungen. Bei Battle of the Bees war von uns keine Oberfläche gefragt, sondern eine Welt: Figuren, eine Ökonomie, das Gefühl des Spiels. Die Analyse begann dort nicht mit Bildschirmen, sondern mit der Frage, weshalb jemand morgen zurückkehren sollte.

Design läuft neben der Webentwicklung, den mobilen Anwendungen und dem Frontend, und sinnvoll beginnt man mit einem Prototyp oder einem MVP. Beispiele aus der Arbeit: ein Kundenkonto für einen Tabakhandel, eine Ladenoberfläche für Spiele, die Startseite eines Überwachungssystems sowie SignItNow und Battle of the Bees.

01

Was die Leistung umfasst

Jede Auswahl aus dem Folgenden lässt sich einzeln beauftragen.

Design für Websites und Landingpages

Struktur, Bildschirme für alle Größen, Zustände und die Kleinigkeiten, die den Eindruck bestimmen: leere Listen, Fehler, lange Bezeichnungen, Formulare auf dem Telefon.

Oberflächen für Webanwendungen

Kundenkonten, Verwaltungsoberflächen, interne Systeme. Hier hilft das Design den Mitarbeitenden, über den ganzen Tag leistungsfähig zu bleiben: Je weniger sie ermüden, desto seltener unterlaufen ihnen Fehler und desto mehr schaffen sie.

Mobile Oberflächen

Bildschirme für iOS und Android nach den Regeln beider Plattformen, mit Blick darauf, wie Menschen das Telefon halten und wohin der Daumen reicht.

Prototypen und Prüfung von Annahmen

Eine klickbare Fassung vor der Entwicklung, damit strittige Entscheidungen am Prototyp fallen, wo eine Änderung wenig kostet.

Designsystem und Dokumentation

Komponenten, Zustände, Abstände und Regeln sowie die Beschreibung der Logik der Bildschirme. Danach wächst das Produkt gleichmäßig, und neue Bildschirme wirken als Teil des Ganzen.

Grafik und Gestaltung

Illustrationen, Symbole, die Darstellung des Produkts in Präsentationen und in den App-Stores. Auch Erscheinungsbild und Logos gestalten wir, und zwar gut, unsere Spezialisierung liegt jedoch darin, wie ein Mensch über das Produkt mit einem Unternehmen umgeht.

02

Wie wir arbeiten

01
Analyse der Aufgabe

Wir gehen Zielgruppe und Szenarien durch und sehen uns an, was heute geschieht und an welchen Schritten Menschen stehen bleiben. Das Ergebnis ist eine Liste von Bildschirmen und Entscheidungen und kein Moodboard.

3-5 Tage
02
Prototyp und Struktur

Schematische, miteinander verbundene Bildschirme: An ihnen ist bereits zu sehen, wie das Gedachte funktioniert, und das verbilligt jede spätere Änderung deutlich. Die Dauer hängt von der Zahl der Bildschirme und der Komplexität der Prozesse ab.

2-4 Wochen
03
Visuelles Design

Gestaltung, Typografie, Zustände, helles und dunkles Thema, Anpassung an Bildschirmgrößen. Wir zeigen in Iterationen, damit sich die Richtung unterwegs bestätigt.

ab 2 Wochen
04
Designsystem und Dokumentation

Wir stellen Komponenten, Regeln und die Beschreibung der Logik zusammen, damit die Entwicklung schnell und vorhersehbar läuft.

parallel
05
Beratung und Designbegleitung

Wir sehen uns das Gebaute im Browser und auf dem Telefon an, unterstützen das Entwicklungsteam beim Start und arbeiten nach, was sich an echten Daten zeigt.

laufend
03

Stack und Werkzeuge

FigmaFigJamAdobe IllustratorAdobe PhotoshopLottieStorybookTailwind
04

Fallstudien zu dieser Leistung

05

Häufige Fragen

Der Preis hängt von der Zahl der Bildschirme ab und davon, ob ein Designsystem gebraucht wird. Nach der Analyse der Aufgabe kalkulieren wir nach Etappen, damit Sie sehen, wofür Sie zahlen.

Ja, das ist ein üblicher Fall. Sie erhalten die Entwürfe, das Designsystem und die Dokumentation, mit der Ihr Team oder ein beliebiges anderes Team das Produkt bauen kann. Zugleich sagen wir Ihnen, welche Entscheidungen in Ihrem Stack teuer umzusetzen sind, damit das vor Arbeitsbeginn klar ist.

Wir prüfen es am Prototyp vor der Entwicklung, und nach dem Start sehen wir uns das Verhalten an: wo Menschen verweilen, was sie antippen, welche Schritte länger dauern als die übrigen. Das ist verlässlicher als ein Streit über Geschmack.

Ja. Zuerst klären wir, was tatsächlich im Weg steht, denn häufiger liegt es an der Struktur und an der Reihenfolge der Schritte, und die Gestaltung folgt daraus.

Das regelt der Vertrag, und wir halten es in der Phase des Pflichtenhefts fest, noch vor Arbeitsbeginn. Jede abgenommene Etappe wird auf Ihre Seite übertragen, die Arbeit sammelt sich also bei Ihnen und nicht bei uns. Nach Abschluss des Projekts gehen die Quelldateien des Designs, die Entwürfe und die Dokumentation samt den Rechten daran an Sie über.

Ja, in einer gesonderten Vereinbarung: Designbegleitung, neue Bildschirme und die Weiterentwicklung des Designsystems.

06

Verwandte Leistungen

Besprechen wir Ihre Aufgabe?

Sagen Sie uns, was zu tun ist - wir melden uns mit einer Einschätzung, der Teamzusammensetzung und einem Plan für die ersten zwei Wochen.