ELVIRA Dashboard
Dashboard
Überblick
Hinter der Website von ELVIRA liegt ein Werkzeug für das Haus. Damit pflegt das Restaurant, was sich ändert, ohne in den Code zu gehen und ohne mich anzurufen, wenn um halb sechs die Küche eine Stunde später öffnet.
Ich habe es in derselben Nacht gebaut wie die Seite, und mit demselben Küchenrot. Wer aus dem Gastraum in dieses Werkzeug geht, soll das Haus wiedererkennen. Schwarze Flächen, rote Zeichen, eine Leiste links, und in der Mitte nur die Dinge, die jemand im Betrieb wirklich anfasst.
Speisekarte, Drinks, kalter Start, ein Banner für Hinweise, Öffnungszeiten, Events, Nachrichten, Einstellungen. Die Übersicht zählt, was gerade liegt: Nachrichten, Reservierungen, aktive Events, gespeicherte Texte, Seiten. Das ist kein Baukasten. Das ist die Küche nach der Schicht, aufgeräumt nach den Griffen, die man wirklich braucht.
- Kunde
- ELVIRA
- Kategorie
- Web-App
- Ort
- Krefeld
- Schrift
- Inter und Cormorant Garamond
Problemstellung
Am Abend ist niemand vom Studio in der Küche
Ob offen ist, muss das Haus selbst setzen können. Eine Seite, deren Wahrheit nur ich ändern kann, ist um sieben Uhr nutzlos. Der Gast auf der Neusser Straße sieht einen Stand, und dieser Stand muss aus der Küche kommen, in einer Minute, von jemandem, der gerade andere Dinge in der Hand hat.
Ein großes System mit fünfzig Modulen hätte diese Minute gefressen. Ich habe die Oberfläche auf die Griffe reduziert, die ELVIRA wirklich benutzt, und sie so benannt, wie man in der Küche spricht. Speisekarte, Drinks, Öffnungszeiten. Die Übersicht ist ein Brett mit Zahlen und Symbolen, rot auf dunkel, damit der Blick in einem scan die Lage erfasst.
Dieselbe Farbe wie auf der Website ist hier eine praktische Entscheidung. Das Rot, das draußen Heimatküche schreibt, schreibt drinnen die aktiven Punkte. Man verwechselt das Werkzeug so nicht mit einem fremden Konto. Es ist dasselbe Haus, hinter der Tür.
Lösung
Nur die Felder, die das Haus anfasst
Links die Leiste, ELVIRA oben, dann die Wege, der aktive in einem dunklen Rot unterlegt. In der Mitte die Übersicht: kleine Karten mit einer Zahl und einem roten Symbol, darunter die Sprungpunkte in die Bereiche. Auf dem Telefon wird die Leiste zur Erreichbarkeit, die Karten stapeln sich, die Symbole bleiben groß genug für einen Daumen zwischen zwei Gängen.
Inter trägt die Oberfläche, weil ein Werkzeug bei kleinen Graden eindeutig bleiben muss, auch in einem Wort wie Öffnungszeiten. Cormorant Garamond steht als Display bereit, wo eine Zeile mehr Ruhe und eine Serife verträgt. Die Arbeitsschrift bleibt die Grotesk. Das Haus soll tippen, nicht setzen.
Status
Öffnungszeiten sind ein eigenes Feld, erreichbar von der Übersicht. Offen oder zu, und wann es wieder losgeht, setzt das Haus selbst. Die Website liest diesen Stand. Eine geänderte Zeile ist eine Speicherung, kein Deployment und kein Anruf am Abend.
Karte und Abend
Speisekarte, Drinks, kalter Start, Events, ein Banner für den Hinweis, den man heute braucht. Jeder Griff ist ein eigener Weg, mit einem roten Symbol, das man wiedererkennt. Die Übersicht zählt mit: wie viele Nachrichten liegen, wie viele Events aktiv sind, wie viele Texte gespeichert sind. Man sieht die Lage, bevor man in ein Formular geht.
Nachrichten und Einstellungen
Was von außen kommt, hat einen Platz. Was das Haus einmal setzt und selten ändert, auch. Beides ist da, beides ist benannt, beides liegt unterhalb der Dinge, die sich am Abend bewegen. Die Reihenfolge ist die Reihenfolge der Schicht, die häufige Handlung weiter oben.
Gestaltung
Dieselbe Nacht, dasselbe Rot
Der Grund ist #0C0A09, eine Spur wärmer und dichter als ein technisches Schwarz, verwandt mit der Nacht der Website. Die Flächen der Karten sind #1C1917, eine Stufe heller, damit eine Karte eine Karte ist und der Grund der Raum bleibt. Der Text ist #FAF7F2, ein warmes Weiß, wie Papier im Dunkeln. Die zweite Zeile, leiser, ist #E7E0D6. Was noch weiter zurücktritt, ist #A8A29E, ein warmes Grau, das auf diesem Grund noch gelesen wird.
Das Rot ist wieder #B01B1C, das Küchenrot der öffentlichen Seite. Symbole, aktive Zustände, der unterlegte Punkt in der Leiste. Im Hover geht es nach #961617, einen Ton tiefer, damit ein Finger auf einem Knopf eine Antwort sieht, ohne die Farbe zu verlassen. Die Kanten der Flächen sind warmes Weiß in geringer Deckkraft, kein grauer Strich aus einem Baukasten. Die Karten atmen in der Farbe des Hauses.
Drei Farben gehören nur dem Werkzeug, weil sie Zustände sind und keine Speisen. Offen und gespeichert ist #4ADE80, ein klares Grün. Achtung ist #FBBF24, ein Amber. Alarm ist #F87171, ein helles Rot, bewusst verschieden vom Küchenrot, damit ein Fehler die Marke verlässt und als Fehler dasteht. Die Oliven auf der Website sind grün, weil sie Essen sind. Dieses Grün ist grün, weil etwas in Ordnung ist. Ich habe die beiden Grüns getrennt, damit niemand eine Olive mit einer Speicherbestätigung verwechselt.
Palette
Grund
#0C0A09
Die Nacht des Werkzeugs, warm, dicht, verwandt mit dem ersten Bild der Website. Wer aus dem Gastraum hierher kommt, bleibt im selben Dunkel. Ein kaltes Grau hätte einen anderen Arbeitgeber bedeutet.
Fläche
#1C1917
Die Karten und die Leiste, eine Stufe über dem Grund. Inhalt bekommt Halt, der Raum bleibt dunkel. Die Kante dazu ist warmes Weiß, nur angehaucht, kein grauer Rahmen.
Text
#FAF7F2
Das warme Weiß der lesbaren Zeilen. Es liegt auf der Nacht wie die helle Schrift auf dem Foto der Website. Dieselbe Stimme, andere Aufgabe.
Zweite Zeile
#E7E0D6
Für das, was den Titel erklärt, leiser als die Hauptzeile und immer noch warm. Eine Hierarchie ohne eine neue Farbe. Man scannt die Zahl, dann die Bezeichnung.
Leise
#A8A29E
Das warme Grau für Nebeninformation. Auf diesem Grund noch lesbar, deutlich hinter dem Rot und hinter dem warmen Weiß. Es führt, es ruft nicht.
Küchenrot
#B01B1C
Dieselbe Farbe wie Heimatküche auf der Website. Symbole, aktiver Menüpunkt, die Punkte, die man suchen soll. Das Haus bleibt erkennbar, auch um halb sechs.
Druck
#961617
Das Rot im Hover, einen Ton tiefer. Ein Finger bekommt eine Antwort, die Farbe bleibt in der Küche. Kein Wechsel in ein fremdes Blau, nur weil ein System das so kennt.
In Ordnung
#4ADE80
Das Grün der Zustände, offen, gespeichert, ruhig. Es ist ein Werkzeuggrün, getrennt vom Grün der Speisen auf der Website. Eine Olive und eine Bestätigung dürfen nicht dieselbe Farbe meinen.
Achtung
#FBBF24
Amber, wenn etwas Aufmerksamkeit will und noch kein Fehler ist. Warm, lesbar auf der Nacht, selten eingesetzt. Es soll auffallen, weil es selten ist.
Alarm
#F87171
Ein helles Rot, bewusst neben dem Küchenrot. Ein Fehler muss die Marke verlassen, sonst liest man ihn als Schmuck. Dieses Rot heißt: hier stimmt etwas nicht, und es heißt das sofort.
Ergebnis
Die Seite bleibt wahr, weil das Haus sie führt
Die Website bleibt aktuell, weil das Restaurant sie selbst pflegt. Gäste sehen den Status. Für eine geänderte Zeile muss niemand aus dem Studio kommen. Die Griffe sind die Griffe der Schicht: Karte, Drinks, Zeiten, Events, Nachrichten.
Nacht und Küchenrot halten Gastraum und Werkzeug zusammen. Grün, Amber und das helle Alarmrot gehören nur den Zuständen. So bleibt ELVIRA auch hinter der Tür ELVIRA, und die Wahrheit auf der öffentlichen Seite kommt aus der Küche, in der sie entsteht.
