Jerom Häfliger – ein selbständiger Künstler

Idee und Motivation

Als Jerom zu mir kam und mir seinen Bedarf an einem fehlenden Portfolio schilderte, bot ich ihm an, eine Website für ihn zu gestalten und zu programmieren. Auf diese Weise konnte ich zwei Fliegen mit einer Klappe schlagen. Er bekam eine Website, und ich hatte mein Digezz-Projekt. Ausserdem wollte ich schon seit dem ersten Semester ein eigenes Programmierprojekt durchführen.

Neben dem Portfolio wollte er auch ein Logo als Wiedererkennungseffekt und neue Fotos von seinen Produkten.

Konzeption und Umsetzung

Bevor ich mit der Umsetzung beginnen konnte, besprach ich mit Jerom, was er sich genau vorstellte. Wie sollte die Website aussehen? Was für Ansprüche hat er? Hat er bereits Ideen für das Design?

Schon beim ersten Treffen mit Jerom gab er mir die kreative und technische Freiheit für die Umsetzung. Die einzigen Punkte, die er hatte, waren ein Bereich mit seinen Kontaktdaten und dass das Logo auf seinen Brennstempel basiert sein soll.

Mit diesen Anhaltspunkten begann ich, viele Ideen niederzuschreiben und die verschiedenen Aspekte zu konzipieren.

Logo Design

Zunächst habe ich mit der Gestaltung des Logos begonnen, um dann bei der Gestaltung der Website darauf aufbauen zu können. Für das Logo habe ich mich von Jerom selbst inspirieren lassen. Wie im Briefing besprochen, habe ich das Logo an seine Initialen angelehnt, die er bereits auf einem Brandeisen hatte. Mit Adobe Capture konnte ich aus einem Foto eine Vektorgrafik der Initialen erstellen. Mit Illustrator habe ich die Kanten und Hügel verschönert, damit die Ränder schön glatt sind. Damit es nicht zu steif aussieht, sondern eher wie «handgeschnitzt», habe ich ein paar «Unreinheiten» gelassen.

Bei der Suche nach geeigneten Schriftarten für den vollständigen Namen, den ich unter den Initialen haben wollte, habe ich viel Zeit gebraucht. Ich wollte eine handschriftliche Schrift, die trotzdem professionell aussieht. Mit Hilfe von Google Font und Adobe Fonts fand ich einige Schriftarten, die diesen Kriterien entsprachen, und erstellte mir ihnen einige Logo-Vorschläge.

Beim Ausprobieren der verschiedenen Schriftarten fiel mir auf, dass die Initialen in ihrer ursprünglichen Form (schwarz auf weiss) in Kombination mit dem Namen verloren gingen. Um sie besser hervorzuheben, wollte ich ihnen eine Form geben. Einen Kreis fand ich zu langweilig. Ich entschied mich für einen formlosen Kreis, inspiriert von einem Siegel. Das Siegel erinnerte mich sehr an ein Brandeisen und passt auch zum Thema «handgemacht».

Für die Unternehmensfarben habe ich ein dunkles und ein helleres Grün in Kombination mit Beige gewählt. Da diese Farben in der Natur vorkommen, vermittelt das Branding auch das Gefühl von Natur und Natürlichkeit, was die Produkte von Jerom sind.

Nachdem ich mehrere Varianten für das Logo entworfen hatte, gab ich es an Jerom weiter, damit er sich für eine entschied. Nach seiner Entscheidung habe ich seine Auswahl verfeinert und eine passende Laufschrift ausgewählt. Das Kriterium für diese Schriftart war, dass es sich um eine gute Schrift für das Web handelt. Mit anderen Worten: Sie musste leicht zu lesen sein. Mit Hilfe von Google fand ich schnell eine, die auch zum Logo passte.

Visitenkarten

Nachdem ich das Logo entworfen hatte, entwarf ich Visitenkarten. Jerom brauchte sie, um sie an Interessenten zu verteilen. Der Entwurf war schnell fertig. Aber Jerom war mit der ersten Runde von Vorschlägen nicht zufrieden, was dann zu einer zweiten Runde von Vorschlägen führte. Der Grund war das Fehlen eines QR-Codes. Er wollte, dass die Leute schnell auf die Website zugreifen können, ohne den ganzen Namen der Website eintippen zu müssen. Nach der zweiten Runde von Vorschlägen entschied er sich für einen und ich konnte sie zum Drucken geben.

Webseite

Beim Briefing in den Auftrag sagte Jerom mir, dass er nur einen Onepager als Website haben wollte. Er möchte, dass man alles sofort sehen kann. Das kam mir auch entgegen, da ich nicht viel Erfahrung im Programmieren hatte. Ausserdem beschlossen wir, den Onepager ohne CMS und nur mit HTML, CSS und JS zu programmieren. Zum einen sind meine Kenntnisse für ein CMS zu gering und ich wollte kein WordPress verwenden. Zum anderen wollte Jerom die Anpassungen nicht selbst vornehmen, sondern mir überlassen und somit wird kein CMS benötigt.

Bevor ich mit der Programmierung begann, musste ich ein Layout für die Website entwerfen. Zuerst zeichnete ich meine Ideen auf ein Blatt Papier, damit ich das Layout anpassen konnte, wenn mir etwas nicht gefiel. Nachdem mir zwei/drei meiner Varianten gefielen, begann ich, sie in XD zu entwerfen. Nachdem ich die Auswahl von Jerom erhalten hatte, begann ich mit der Programmierung.

Mit dem Design hatte ich im Nachhinein eine Schwierigkeit: Ich habe zuerst Desktop First entworfen. Beim nächsten Mal werde ich zuerst mit Mobile First anfangen, weil es einfacher ist, von dort aus zu starten und die Komplexität des Desktops hinzuzufügen.

Ich habe lange für die Programmierung gebraucht. HTML war einfach, ich wusste noch viel von dem, was ich im ersten Semester gelernt hatte. Aber mit CSS und JS hatte ich eine Menge Probleme. Oft musste ich mir Tutorials ansehen oder Googlen, um alles so hinzubekommen, wie ich es wollte. Vor allem die responsive Gestaltung der Website hat mich viel Zeit und Nerven gekostet. Ich musste den Code mehrmals umschreiben, damit er funktionierte. Das grösste Problem war jedoch der Slider, den ich bei den Projekten verwendet habe. Nach mehreren gescheiterten Versuchen bekam ich von einem Mitstudenten, Remo Flury, den Tipp, dass ich die Swiper JS API brauchen solle. Damit ging es schon einfacher, aber ich hatte immer noch eine Menge Probleme. Schliesslich habe ich das Design angepasst. Statt mehrerer Bilder nebeneinander kann man sich nun ein Bild nach dem anderen anschauen. Das war der einfachere Weg, den ich einschlagen konnte.

Aber am Ende war ich sehr stolz auf mich und Jerom war auch sehr zufrieden.

 

Content

Für den Textinhalt der Website erhielt ich von Jerom einige Anregungen, die er in den Text einbringen wollte. Es war nicht einfach, einen Text über jemand anderen in der ersten Person zu schreiben. Mit Hilfe dessen, was ich im Unterricht gelernt hatte, hat es dann auch ganz gut geklappt.

Für die Fotos der Produkte habe ich Jerom mit meiner Kameraausrüstung in seinem Studio getroffen. Das Fotografieren selbst funktionierte sehr gut, sogar Jerom nahm die Kamera ein- oder zweimal in die Hand, da er in Zukunft die Fotos für neue Produkte selbst machen wird. Deshalb haben wir auch mit Sonnenlicht als Lichtquelle gearbeitet. Was ich nicht bedacht hatte, war, dass die Sonne im Winter schnell untergeht. Deshalb mussten wir gegen Ende den ISO-Wert der Kamera hochdrehen, was zu Rauschen im Bild führte. Mit Hilfe von Lightroom und Photoshop konnte ich es so weit reduzieren, dass es nicht mehr sichtbar war.

Selbstkritik & Learnings

Alles in allem bin ich sehr zufrieden damit, wie das Projekt geworden ist. Zumal es meine erste selbst programmierte Website ist. Der Gesamtauftritt von Jerom Häfliger als Marke ist meiner Meinung nach sehr gelungen.

Ein paar Dinge werde ich aber für zukünftige Projekte mitnehmen. Zum einen habe ich gelernt, wie es ist, für einen echten Kunden zu arbeiten. Man braucht viel Geduld und Verständnis und man muss immer daran denken, dass es das Produkt des Kunden ist und nicht das eigene. Ausserdem würde ich mir vor dem Programmieren genau überlegen, wie ich vorgehen will, anstatt einfach drauflos zu programmieren. Denn ohne Struktur wird der Code schnell chaotisch und verwirrend. Eine meiner wichtigsten Learnings ist es, die Weblayouts zuerst Mobile First zu gestalten. Diesen Schritt werde ich bei zukünftigen Projekten nicht auslassen.