Der Warum von Feitio

Vor jeder Farbe oder Komponente eine Idee: Schnittstellen, die zeigen, wie sehr jemand sich um sie kümmert und den Willen hat, voranzugehen.

Woher es kommt

Feitio ist ein altes portugiesisches Wort für die Art und Weise, wie etwas von Hand gemacht wird. Eine maßgeschneiderte Jacke hat Feitio; ein Möbelstück hat Feitio. Es geht um die Hand, die es gemacht hat, nicht nur um das Ergebnis.

Das System wurde von Grund auf neu entschieden, eine Wahl nach der anderen, indem man betrachtete: sechzehn Entwürfe, jeder beantwortet eine Frage, vom ersten bis zum letzten erhalten. Der Weg selbst wurde Teil des Systems.

Idee: ein lebender Werkstatt

Feitio befindet sich zwischen zwei Bildern: der Bank einesjenigen, der Dinge von Hand mit Sorgfalt und den Spuren der Arbeit macht, und eine Werkstatt voller Menschen und Bewegung, die eifrig ist, Dinge in Gang zu setzen. Menschlich, nie technisch. Warm, nie feierlich.

Daraus entstehen drei Werte, die sagen, was zu tun ist, und drei "Nevers", die sagen, wohin nicht zu gehen ist. Jede Regel im System stammt aus einer davon; wenn eine Regel einen Fall nicht abdeckt, entscheiden sie.

Drei Werte

Verfeinerung

Sorgfalt für Details, die niemand verlangt hat. Wenige Elemente, jedes gut ausgeführt. Wenn es nicht hilft, wird es entfernt.

Warum: ein Bildschirm mit weniger Dingen, alle richtig platziert, ist ermüdender und schneller zu verstehen. Verfeinerung liegt nicht darin, was Sie hinzufügen, sondern darin, was Sie wegnahmen.

Wo es zeigt: eine einzige Typenfamilie (Alegreya); eine Skala von sieben Abständen; wenige Farbrollen; die 1px Tintenstrichstrecke; kein verschwommener Schatten.

Prozess

Die Spuren der Arbeit bleiben sichtbar, wenn sie das Verständnis fördern: was geändert wurde, warum und was als Nächstes kommt.

Warum: eine Schnittstelle, die verbirgt, wie sie zustande kam, verlangt blinden Vertrauen. Zeigen Sie den Prozess, in Maßen, behandeln Sie Menschen als fähig zu verstehen.

Wo es zeigt: die leicht ungleichen Ecken, wie Papier von Hand geschnitten; die gezeichneten Icons, wo jede Verbindung zwei sich kreuzende Striche ist; die Geschichte der Entwürfe, bewahrt.

Energie

Orange ist Bewegung. Es zeigt, wo etwas passiert: die Hauptaktion, was gerade geändert wurde, was Aufmerksamkeit benötigt.

Warum: Energie ist kein Lärm. Eine starke Farbe ist nur stark, wenn sie selten ist; Orange für die Aktion bewahrt macht den Bildschirm selbst den Weg weisen.

Wo es zeigt: ein orange Button pro Bildschirm; Papier, das wie ein ausgeschnittenes Stück auf dem Tisch landet; keine Zustandsänderung, die in einem Sprung passiert.

Drei "Nevers"

Die Werte sagen, wohin zu gehen; die "Nevers" markieren den Rand des Weges. Jeder ist eine gemeinsame Versuchung, die Feitio von der Idee abziehen würde.

Tech Vibes

Kein Neon, keine leuchtenden Dark-Screens, keine Terminal-Gitter oder dekorative Monospace-Typografie. Das Gefühl ist ein Werkstatt, nicht ein Serverraum: Der "Tech"-Look sagt "das ist kompliziert" vor jedem Wort.

Kompliziert

Eine Spalte, eine Idee pro Block, wenige Arten von Komponenten. Wenn etwas erklärt werden muss, um genutzt zu werden, ist es falsch: Jedes zusätzliche Element ist eine weitere Entscheidung für jeden, der hinschaut.

Laut

Orange erscheint selten und zählt. Bewegung beantwortet nur eine Aktion und höchstens ein Moment pro Seite kommt von selbst. Wenn alles schreit, wird nichts gehört.

Humanist

Humanist bedeutet für Menschen gemacht und mit einem menschlichen Markenzeichen: Schrift, die aus Kalligrafie geboren wurde, warmes Papier und Tintenfarben, Zeichnen mit einer leicht zitternden Hand, Text geschrieben für die Person.

In Feitio wird dies zu wählbaren Elementen, die man sehen kann: ein lebhaftes Orange; leicht unebene Ecken; Icons, die von Hand gezeichnet wurden; der harte Schatten von geklebtem Papier.

Mobile first

Heute erreichen die meisten Menschen das Internet über ein Smartphone. Jedes Feitio-Screen wird also auf Mobile (Handy und Tablet) geboren und wächst zum Computer – niemals umgekehrt.

• Mobile wird zuerst entworfen. Der breite Bildschirm gewinnt Spalten und Seitennavigation; der Wechsel folgt der Breite des Containers, in dem das Element sitzt, nicht dem Fenster.
• Die Hauptaufgabe kommt zuerst, ohne Scrollen.
• 40px-Ziele, mit Abstand dazwischen: ein Finger ist kein Zeiger.
• Nichts hängt von Hover ab.
• Bis auf 4K: Inhalt hat eine Maßstab und bleibt zentriert, und die Rückmeldung einer Aktion erscheint dort, wo sie passiert ist.
• Das Screen gehört zum Inhalt: Was nicht ständig genutzt wird, bleibt ausgedrückt.

Nur so viel JavaScript

Feitio verwendet JavaScript nur dort, wo es das Screen besser macht: das Menü-Drawer, die animierte Öffnung, eine Antwort ohne Neuladen. Es muss nicht ohne funktionieren. Was rausgeht, ist Überschuss: eine große Bibliothek für einen kleinen Effekt, ein Skript auf jeder Seite aus Gewohnheit, der ganze Screen im Browser gebaut, während der Server ihn bereit liefern würde. Bevor man ein Skript schreibt, prüfe, ob der Browser es bereits tut.

Wenn die Regel schweigt

Keine Dokumentation deckt alles ab. Wenn ein Fall nicht niedergeschrieben ist, brechen diese Sätze den Knoten:

Bei Zweifel rausnehmen.

Lässt man nicht sagen, was ein Element für die Person tut, dann geht es raus.

Das Wort schlägt dem Icon vor.

Die Zeichnung hilft beim Erkennen; der Text erklärt.

Klarheit schlägt Persönlichkeit.

Feitios Stil kann das Verständnis nie kosten.

Nur dann arbeiten, wenn es hilft.

Den Weg zeigen dient dem Verständnis, nicht der Dekoration.

Der Daumen entscheidet.

Kann es mit einer Hand nicht gemacht werden, ist es noch nicht bereit.

Zugänglich ist keine Option.

Lässt eine schöne Idee jemanden aus, ändert sie sich.

Das Zuhause und die Fassaden

Feitio hat ein Zuhause: das Creme- und Orange-Thema, tagsüber und nachts. Für Außenarbeit, wie eine Shop-Seite, bietet es seine Struktur mit einer anderen Fassade an: nur die Farben ändern sich. Schriftart, Form, Raum und Bewegung bleiben Feitios. Wenn eine Aufgabe mehr als andere Farben verlangt, wird sie außerhalb des Systems erstellt.