Neues aus dem Maschinenraum

Allem Anschein nach hat sich hier in jüngerer Vergangenheit nicht allzu viel getan. Und dem ist leider auch so, denn ehrlich gesagt hatte ich in den letzten beiden Monaten nicht die Zeit zur Verfügung, die Avo’s Kitchen eigentlich verdient hätte. Und nach einem langen Tag hatte ich oft nicht mehr die notwendige Energie, um lange Foto-Sessions zu machen, Rezepte auszuformulieren oder für sonstige Küchenexperimente. Letzteres war zu später Stunde eh raus, weil es einfach zu laut gewesen wäre. ;-) Aber das heißt nicht, dass ich untätig geblieben wäre …

Zunächst habe ich mich schon vor einiger Zeit darum gekümmert, die Metadaten besser aufzubereiten, damit Thumbnails, Titel und Texte der Seiten schicker aussehen, wenn die Artikel in sozialen Netzwerken/Messenger-Apps geteilt oder von Suchmaschinen durchforstet werden (noch Work-in-Progress). In dem Zug hatte ich bereits einige kleinere Fehlerbehebungen und Optimierungen vorgenommen.

Vor ca. zwei Wochen hatte ich die Idee, einen einfachen Reis-Wasser-Rechner beim Reiskocher-Artikel einzubauen, u.a. weil ich den auch selber gut gebrauchen konnte. Dafür musste ich mal wieder am Code der Website etwas ändern und mir wurde mal wieder klar, dass Avo’s Kitchen über einen längeren Zeitraum entstanden ist und inzwischen deutlich komplexer geworden ist, als ursprünglich geplant. Ich habe die Tage seitdem genutzt, um noch einmal die CSS-Architektur so zu überarbeiten, dass sie modularer und damit besser erweiterbar ist, ohne das sog. „Side-Effects“ auftreten (also dass eine Änderung im Code eine unerwartete Änderung an anderer Stelle verursacht). Das war zwar nicht exakt das, was ich eigentlich gerne für das Projekt getan hätte, aber es stand schon viel zu lange auf der To-do-Liste und musste jetzt einfach mal erledigt werden.

Die offensichtlichste Änderung ist aber wahrscheinlich die Überarbeitung der grafischen Elemente, vor allem von Formularen, Tabellen und Buttons. Ich wollte von Anfang an, dass Avo’s Kitchen einen sehr persönlichen Touch hat, schließlich war das Ganze ursprünglich nur für mich selbst als Notizbuch gedacht und spiegelt auch heute noch meine persönliche Art zu kochen wider. Die erste Version war sehr gestalterisch einfach gehalten, verwendete keine besonderen Schriftarten, Texturen oder ausgefeilte grafische Elemente und war insgesamt doch eher als brutalistisch zu beschreiben. Mit dem Entschluss, das ganze öffentlich zu machen kamen dann aber auch immer mehr Design-Elemente hinzu. Darunter Formularfelder u.a. für die Such- und Kommentar-Funktion, und dann natürlich noch Buttons, diverse Icons und auch schließlich auch Webfonts.

Was übrigens blieb war die Schriftart Courier, bzw. die Variante Courier Prime Sans. Hauptgrund dafür war, dass es auf neueren Windows-Version die Courier nicht mehr gibt, sondern nur noch die Courier New, welche meiner Ansicht nach am Bildschirm aber viel zu dünn rendert und damit vergleichsweise schwer lesbar ist. Und unter Linux und Android gibt es standardmäßig gar keine Courier – also würde dort irgendeine Ersatzschrift dargestellt werden, die unter Umständen komplett anders aussehen könnte. So kam ich schließlich zur Courier Prime Sans. Auch wenn Monospace-Schriftarten deutlich mehr Platz auf dem Bildschirm benötigen, als eine übliche proportionale Textschrift, so habe ich die Courier (Prime Sans) doch inzwischen sehr ins Herz geschlossen und deshalb darf sie auch bleiben.

Ein neuer Look

Übersicht der überarbeiteten Elemente.

Als ich jetzt sowieso schonmal den Code überarbeitete, überkam mich auf einmal auch eine große Unzufriedenheit mit dem Aussehen vieler Elemente. Wenn Avo’s Kitchen als Website eine eigene Persönlichkeit haben soll, dann sollten Buttons nicht nur eine plumpe schwarze Schaltfläche sein! Ich war und bin der Meinung, das sollten im Idealfall handgezeichnete Elemente sein, die auch eine Kritzelei in einem Notizbuch sein könnten. Also habe ich Zier-Elemente und Icons noch einmal komplett überarbeitet und jetzt nahezu alle „super-clean“ digital gezeichneten Icons durch handgezeichnete ersetzt. Ja, wirklich auf echtem Papier mit einem echten Fineliner, dann digitalisiert und vektorisiert. Auch Zettel, wie sie in der Rezepte-Übersicht und beim „Küchenlexikon“ und als Formular-Hintergrund haben nun eine überarbeitete Textur, die deutlich klarer hervorsticht.

Erstellung der handgezeichneten Grafiken

Zunächst habe ich alle Icons und Schriftzüge auf Raster-Papier gezeichnet. (Pro Tipp: Die Punkte sollten am besten farbig sein, damit sie sich nach dem Einscannen leicht rausfiltern lassen. Meine Punkte waren dunkelgrau, deswegen musste ich sie nach dem Einscannen alle von Hand rauslöschen, anstatt das über einen Farbfilter tun zu können.)

Anschließend habe ich die Bögen eingescannt und in krita den Hintergrund entfernt.

Dann habe ich die Grafiken exportiert und in Inkscape mit der Bitmap nachzeichnen-Funktion in Vektorgrafiken umgewandelt, danach jeweils einmal den Filter Pfad → Vereinfachen ausgeführt, um die Komplexität der Vektoren auf ein gesundes Maß herunterzubrechen. Dies ist wichtig, damit die Grafiken vom Browser schnell geladen und gerendert werden können. In Inkscape lässt sich die Stärke der „Vereinfachen“-Funktion leider nur global einstellen, von daher war etwas Herumprobieren angesagt, um den richtigen Wert zu finden.

Die fertig vektorisierten Grafiken habe ich als SVG exportiert und in eine Sketch-Datei importiert, die alle grafischen Elemente auf Avo’s Kitchen enthält und von der aus die fertigen Dateien exportiere. Dort habe ich vor dem Export noch zahlreiche kleinere Bearbeitungen u.a. zur Angleichung der Strichstärken vorgenommen. Letzteres hätte ich auch in Inkscape machen können, allerdings ist die Mac-Portierung nicht besonders gut an das Betriebssystem angepasst, geschweige denn für hochauflösende Bildschirme optimiert und hat eine dementsprechend schlechte Performance (Version 1.0.2). Von daher verwende ich das Programm meist nur dann, wenn es wirklich sein muss.

Im letzten Schritt wurden die exportierten Vektor-Icons nun noch mit SVGOMG gesäubert und bei allen Icons mit Hover-Effekt noch einige entsprechende Attribute ergänzt, damit sich diese dynamisch umfärben lassen, wenn du z.B. mit der Maus darüber fährst.

Fazit

Insgesamt bin ich schon ganz zufrieden mit den Änderungen – vor allem, weil sie Avo’s Kitchen noch mehr den Anstrich eines persönlichen Notizbuches geben. Denn das ist ein wichtiger Teil dieses Projekts, da ich es auch nach wie vor nutze, um mein eigenes Küchenwissen zu strukturieren und zu sammeln. Fluch und Segen an einer Website ist immer, dass sie nicht irgendwann fertig ist, sondern sich immer wieder erweitern und verbessern lässt. Wenn die Zeit nicht wäre, dann hätte ich durchaus noch einige andere Ideen. Am liebsten würde ich an der Courier Prime Sans noch einige Dinge überarbeiten, die mich aktuell noch stören und einige fehlende Zeichen ergänzen (z.B. Pfeile). Da die Schrift unter Open-Source-Lizenz steht, wäre das zumindest rechtlich kein Problem. Das hebe ich mir allerdings für später auf, da es doch recht aufwändig wäre.

Als Nächstes gibt es dann auch mal wieder neue Rezepte, Zeichnungen und Küchenwissen, versprochen! ;-)