Home

Chefkoch - Digitale Typografie - Redesign

Details

Zeitraum: April 2019 - Juni 2019
Involviert: Jens Drößiger
Betreut: Frank Rausch
Werkzeug: Sketch

Aufgabenbereich

  • UI Design
  • Typografie

Chefkoch Redesign Titelbild

Projekt Beschreibung

Im Abschlussprojekt zum Kurs »Digitale Typografie« bei Frank Rausch im Sommersemester 2019 war die Aufgabe die Ansicht einer Webseite oder App typografisch zu verbessern und diese neu zu gestalten.

Chefkoch, wer?

»Chefkoch.de« ist ein deutsches Webportal zum Thema Kochen. Im Fokus dabei steht die große Rezeptdatenbank und ein Forum in der sich Koch- und Backbegeisterte austauschen können. Jeder Nutzer kann die Rezepte abrufen und Rezepte veröffentlichen. An Bekanntheit gewann die Webplatform 2018/19 durch die EU Politikerin Julia Reda, die »Chefkoch« in der Debatte zu der Urheberrechtsreform.

Arbeitsprozess

Der Status Quo

Zum Überblick notierte ich alle UI Elemente der alten Rezeptansicht. Mein Plan dahinter war überflüssige Elemente zu identifizieren und zu reduzieren. Die original Seite ist sehr überladen mit Informationen und Werbung und das eigentliche Rezept geht darin verlohren. Es sollte nur das drinnen bleiben das dem Anwender beim kochen auch weiterhilft. Die ganze Werbung hätte ich gerne im neuen Design komplett rausgenommen, aber war in der Aufgabe nicht erlaubt.

Meine Farbpalette und Schriftwahl

Von Chefkoch habe ich die Farben und die Schrift »Helvetica Neue« mit übernommen. Auffällig war das es auf Chefkoch ein gesättigtes grün in unterschiedlichen abstufungen gab.

Anpassungen

Der »Zubereitungstext« und »Zutatenliste« sind die wichtigsten Elemente bei der Rezeptansicht von Chefkoch, darum gestaltete ich diese zuerst um. Danach folgte das Rezeptfoto, der Bereich mit weiteren Rezeptideen und die Schlagwortliste.

Die Texte der »Zutatenliste« wurden größer mit etwas mehr Zeilenabstand.
In der ersten Variante waren die Zeilen optisch getrennt mit einem abwechselnden hell/ dunkel Hintergrund. Diese Idee wurde aber verworfen weil durch Frank Rausch klar wurde, dass dies eine leichte Optische Gewichtung auf die Elemente überträgt und damit die Information nicht neutral ist.

Der Button „Umrechnen“ wurde entfernt, da die Portionen und Zahlen auch direkt berechnet werden können ohne eine zusätzliche Interaktion.

Hinzu kam noch ein spielerisches Element mit Icons in Form von Schüsseln. Diese geben an für wie viele Portionen die aktuelle Menge an Zutaten Ausreicht.

Der »Zubereitungstext« wurde lesbarer da er auf ca. 80 Zeichen begrenzt wurde. Die Schrriftgröße erhöht und mehr Zeilenabstand hinzugegeben.

Das Rezept bekam kleine Überschriften für die Abschnitte zum besseren orientieren.

Beim Feedback von Frank Rausch kam noch der Tipp, dass ein Digitaler Text dynamisch sein kann und somit neben den Zutaten die Menge dynamisch aus der Zutatenliste sich anpassen könnte.

Ein kleines Extra war der Abschnitt »weitere Rezeptideen«. Auf der Original Seite war dies nur in Form von Text-links zu finden. Das konnte so nicht bleiben. Darum kam noch ein Foto von dem zugehörigen Rezept dazu. Damit ist jetzt besser zu verstehen was sich hinter »Omas’s Pizza Suppe« versteckt.

Altes und Neues Layout

Finaler Entwurf

Was ich aus diesem Projekt mitnehme

Bei Frank Rausch konnte ich viele Interface Fragen für mich klären.
Wo ich auf der Tastatur die korrekten Zeichen finde und worin die Werkzeuge »Sketch« und »Figma« sich im Anspruch eines Digitalen Typografen unterscheiden. Ganz viel Makrotypografie war auch dabei.

„Ein Link kann jede Beschriftung haben, aber Buttons brauchen Kommandobeschriftung, was sie tuen.“
und
„mehr Betohnung auf die Daten!“

Hinzu kamen die wichtigen Learnings woran man ein gutes Interface erkennt oder worauf bei dem gestalten von guten UI Designs zu achten ist:

  • Orientierung schaffen (Wo bin ich? Woher komm ich? Wohin geh ich?)
  • Selbstbeschreibungs Qualität (Räumlichkeit, Materialität, Animation)
    „sagt mit seiner Form schon die Gebrauchseigenschaft.“
  • Dialog mit der Maschine („Nur ‚OK‘ reicht nicht aus!“)
Mich hat der Kurs in meinen Typografie-fertigkeiten weitergebracht und auch die vielen Übungen waren angemessen.