Fuck, ich brauche eine Fallstudie
Und wie habe ich Schlaumeier das jetzt gemacht?
Stimmung
Dieses Projekt hat wie jedes gute Projekt angefangen: mit Prokrastination. Wusstest du, dass Cosmos ein richtig gutes Moodboardtool ist? Ich auch nicht.
Bevor ich mir irgendetwas angeschaut habe, habe ich mir überlegt, wie das Portfolio sein soll: Ich wollte, dass es provokant und laut ist.
Layout
Texte und Typografie gehören für mich zusammen. Wenn ich schreibe, will ich, dass es gelesen wird. Das erreiche ich mit leserlich formatierten und gut geschriebenen Texten.
Der Swiss- oder International-Style passt dabei wie die Faust aufs Auge. Auf das Wesentliche reduziert und die Typografie fokussiert.
Farben
Provokant und laut lebt von Kontrasten. Ich habe verschiedene Farbschemas von Bildern gesampelt, die mir gefallen haben. So richtig gepasst haben sie aber nicht. Erst das letzte Schema, das ich gesampelt habe, passte richtig gut.
Meine Wahl war schnell gefällt. Ich habe dennoch einige Testpersonen gefragt und das Feedback war deutlich: Es reichte von Weinhandlung bis Buffalo Soldier. Ruhe in Frieden, Bob.
Du findest nie heraus, welches Farbschema das Rennen gemacht hat.
Von Spiegeleiern und Halloween
Um die richtigen Farbpaare zu finden, habe ich alle 25 möglichen Paare visualisiert. 2 haben was von einem Spiegelei. Findest du nicht auch?
Orange und Schwarz hatten es mir anfangs sehr angetan. Es hat mich allerdings zu sehr an Halloween erinnert und deshalb habe ich diese Variante beerdigt.
Barrierefreiheit benötigt ironischerweise genauso gute Kontraste wie mein Motto provokant und laut. Das hat mir die meisten Entscheidungen abgenommen. Ich habe 7 Farbpaare ausgesucht.
Kontrast
6 Farbpaare haben einen Kontrast, der mindestens 5,49:1 ist. 1 Kombination fällt mit einem Kontrast von 3,8:1 etwas ab. Damit ist sie nur für grosse Elemente oder als Akzent geeignet.
Mit dem Bodytext erreiche ich einen Kontrast von ungefähr 10:1. Ungefähr, weil mein Hintergrund einen leichten Farbverlauf hat. Hast du es bemerkt?
Farbverteilung
Bei der Farbverteilung habe ich mich bei der 60-30-10-Regel aus der Innenarchitektur bedient. Bei mir ist es eher 60, 15, 10, 10 und 5 %. Die Grundidee ist aber dieselbe.
Oh, und wo sind meine Manieren? Darf ich vorstellen: Giraffengrün, Geckogelb, Walweiss, Schlangenschwarz und Otterorange.
Typografie
Ich habe mich verliebt. In die Schriftart Stick No Bills. Erst später habe ich herausgefunden, dass sie sehr schwierig zu lesen ist. Deshalb musste ich mich nach einer neuen Schriftart für Überschriften umsehen.
Für Bodytexte fiel meine Wahl schnell auf Noto Sans. Wieso? Grössenwahn. Sie kann in fast allen Sprachen verwendet werden.
Noto Sans hat eine Displayschrift und im Schriftschnitt Black ist sie wenigstens etwas auffällig. Der Lesbarkeit zuliebe habe ich mich für die Displayschrift von Noto Sans für Überschriften entschieden.
Stick No Bills
Noto Sans
Noto Sans Display
ExtraCondensed
Skala
Für eine Typografieskala für Schriftgrössen mit dem Motto «provokant und laut» kommt nur das Verhältnis des Goldenen Schnitts infrage. 1,618, komm in meine Arme.
Das ist nur ein Auszug der ganzen Skala. Ich habe es möglicherweise übertrieben, als ich Schriftgrössen von XS bis 8 XL definiert habe. Von diesen zwölf Schriftgrössen habe ich schlussendlich fünf benötigt.
Noto Sans
Noto Sans
Noto Sans
Noto Sans
Noto Sans
Zeilenhöhe
Hast du schon mal einen Text gelesen und dir haben die Augen wehgetan? Dann war die Zeilenhöhe vermutlich scheisse. Oder die Zeilenlänge oder die Farbe oder dein Bildschirm oder deine Augen. Oder alles zusammen.
Aber ich schweife ab. Ich habe neun Zeilenhöhen getestet, bis ich mich auf eine festgelegt habe. Nur, um sie nach dem ersten Design-Review wieder zu ändern. Iterationen – wer liebt und hasst sie nicht?
Findest du die Zeilenhöhe, die ich verwendet habe?
Der Schrecken eines jeden UXers: Das Portfolio. Wieso brauchen wir es überhaupt? Genügt es nicht, wie bei jedem anderen Job einfach eine Bewerbung zu senden? Der Schrecken eines jeden UXers: Das Portfolio. Wieso brauchen wir es überhaupt? Genügt es nicht, wie bei jedem anderen Job einfach eine Bewerbung zu senden? Der Schrecken eines jeden UXers: Das Portfolio. Wieso brauchen wir es überhaupt? Genügt es nicht, wie bei jedem anderen Job einfach eine Bewerbung zu senden? Der Schrecken eines jeden UXers: Das Portfolio. Wieso brauchen wir es überhaupt? Genügt es nicht, wie bei jedem anderen Job einfach eine Bewerbung zu senden?
Der Schrecken eines jeden UXers: Das Portfolio. Wieso brauchen wir es überhaupt? Genügt es nicht, wie bei jedem anderen Job einfach eine Bewerbung zu senden? Der Schrecken eines jeden UXers: Das Portfolio. Wieso brauchen wir es überhaupt? Genügt es nicht, wie bei jedem anderen Job einfach eine Bewerbung zu senden? Der Schrecken eines jeden UXers: Das Portfolio. Wieso brauchen wir es überhaupt? Genügt es nicht, wie bei jedem anderen Job einfach eine Bewerbung zu senden?
Der Schrecken eines jeden UXers: Das Portfolio. Wieso brauchen wir es überhaupt? Genügt es nicht, wie bei jedem anderen Job einfach eine Bewerbung zu senden? Der Schrecken eines jeden UXers: Das Portfolio. Wieso brauchen wir es überhaupt? Genügt es nicht, wie bei jedem anderen Job einfach eine Bewerbung zu senden?
Der Schrecken eines jeden UXers: Das Portfolio. Wieso brauchen wir es überhaupt? Genügt es nicht, wie bei jedem anderen Job einfach eine Bewerbung zu senden? Der Schrecken eines jeden UXers: Das Portfolio. Wieso brauchen wir es überhaupt? Genügt es nicht, wie bei jedem anderen Job einfach eine Bewerbung zu senden?
Zeilenlänge
Habe ich versucht, die ideale Zeilenlänge zwischen 45 und 75 Zeichen zu erreichen? Ja. Habe ich es geschafft? Ja, tatsächlich. Die wichtigste Zeilenlänge ist die des Bodytextes und die ist mit ungefähr 67 Zeichen pro Zeile 1A.
Schrecken eines jeden UXers: Das Portfolio. Wieso brauchen wir es überhaupt? Genügt es nicht, wie bei jedem anderen Job einfach eine
67
Der Schrecken eines jeden UXers: Das Portfolio. Wieso brauchen wir
33
UXers: Das Portfolio. Wieso brauchen wir es überhaupt?
27
eines jeden UXers:
18
Portfolio. Wieso
16
Vertikaler Rhythmus
Ich erspare dir hier die Details. Ich habe mir den Schmerz aufgebürdet, alle Texte auf dem 4-Pixel-Baseline-Grid auszurichten. Mit «Auto layout»? Ja, mit «Auto layout». Wieso? Zwangsneurose.
Die Kurzfassung: Alle Zeilenhöhen sind Vielfache von 4. Danach habe ich für jede Schriftgrösse Komponenten erstellt und mit Padding den Text ausgerichtet, damit alle Zeilen auf dem Baseline-Grid liegen.
Edit aus der Umsetzung mit Framer: Rate mal, was in Figma funktioniert, aber nicht in Framer. Ja, genau, Texte verschachteln. Weil meine Zeilenhöhen Vielfache von 4 sind, funktioniert es immerhin so halb.
Schrecken eines jeden UXers: Das Portfolio. Wieso brauchen wir es überhaupt? Genügt es nicht, wie bei jedem anderen Job einfach eine
Der Schrecken eines jeden UXers: Das Portfolio. Wieso brauchen wir
UXers: Das Portfolio. Wieso brauchen wir es überhaupt?
eines jeden UXers:
Portfolio. Wieso
Fazit
Herzlichen Glückwunsch, du bist am Ende angelangt. Das Resultat dieser Arbeit hast du bereits angeschaut. Gibt es jetzt die Versöhnung? Finde ich Portfolios doch nicht mehr so schlimm? Ich gebe zu: Ich hatte Spass daran. Aber nein, ich finde Portfolios immer noch echt scheisse. Der Zeitaufwand für ein Portfolio steht in keinem Verhältnis zum Nutzen.