Zu Beginn eine kleine Vorwarnung: In diesem Blogbeitrag geht es um Webdesign und Programmierung. Er richtet sich also eher an die Nerds und Geeks da draußen, die selbst auch ein ähnliches Projekt machen wollen.

Unser Logo

Ein Logo zu gestalten ist keine leichte Aufgabe. In unserem Fall war das ein Prozess, der über mehrere Monate ging. Vor allem die Namensfindung war ein relativ schwieriger und zeitaufwendiger Schritt. Ein kleiner Auszug aus den Kandidaten, die es – zum Teil Gott sei Dank 🙈 – nicht geworden sind:

• Travelcouple (zu kitschig)
• Ticket to the sun (zu ähnlich zu einer gewissen Hängematten-Marke)
• Aventura (Obsession)

Die Schrift

Als wir dann endlich mit „Solmates“ als Namen zufrieden waren, ging es darum eine passende Schriftart für das Logo zu finden. Zufällig hatte ich da gerade in meiner Arbeit mit den Schriftgestaltern von Facetype zu tun. Und weil mir deren Schriften sehr gut gefallen, hab ich kurzerhand die Schrift „Supernett“ gekauft und für unser Logo verwendet. Diese handgeschriebene Schrift hat alle möglichen Varianten von Buchstaben und Zeichen, da kann man schon einige Zeit damit verbringen das richtige „S“ auszuwählen. Außerdem gibt es sehr viele Binde-, Schräg-, Unter- und sonstigen Striche, was mich zum nächsten Punkt bringt.

Die Sonne als Symbol

Ein Schriftzug alleine mag für viele Logos reichen und auch das Richtige sein, aber ich wollte unbedingt ein passendes Symbol dazu. Und was hätte da besser gepasst als ein Sonnenuntergang? Zuerst habe ich Skizzen mit Stift und Papier gemacht, danach in einem vektorbasierten Bildprogramm sauber gezeichnet. Dabei kamen die oben erwähnten Striche der Schriftart zum Einsatz, damit das Symbol den selben handschriftlichen Charakter hat.

Das fertige Logo

Screendesign

Ich hatte schon eine ziemlich genaue Vorstellung davon, wie unser Blog aufgebaut sein soll und wie die gängigen Elemente (Header, Navigation, Blog-Artikel, Teaser, Footer, etc.) funktionieren können. Deswegen habe ich relativ wenig Zeit mit klassischem Screendesign, sprich Pixel herumschieben, vergeudet. Ich musste ja niemanden (außer Miriam 😉) davon überzeugen, dass die Website in der Form umgesetzt werden kann. Deshalb habe ich eigentlich nur einen groben Entwurf der Startseite in Adobe XD gezeichnet. Mit den richtigen Tools kann man auch sehr gut und effizient im Browser designen.

Programmierung

Ich bin ein großer Fan davon, neue Dinge kennen zu lernen, und so war es auch als es um den Technologie-Stack dieses Blogs ging. Es gibt meiner Meinung nach einfach viel zu viele Wordpress-Blogs da draußen, die für alles Mögliche zweckentfremdet werden. Da ich selbst auch schon zu viele dieser Webseiten gemacht habe, war es Zeit für etwas für mich (fast) völlig Unbekanntes – eine Single Page Webanwendung mit JavaScript. Da die Umsetzung davon eine sehr positive Erfahrung war bzw. immer noch ist, möchte ich ein bisschen davon erzählen.

Storyblok

Ich beginne dort wo ich mich jetzt gerade befinde, nämlich beim Schreiben dieses Beitrags. Ich erledige das in Storyblok, einem sogenannten Headless CMS. Storyblok heißt außerdem die Firma aus Linz, die diese großartige Software entwickelt hat. In dem Content Management System kann man, ähnlich wie in einem Wordpress-Backend, Texte schreiben und Bilder hochladen. Ein „kopfloses“ CMS besteht jedoch quasi nur aus dem Backend, das Frontend ist davon strikt getrennt. Man hat bei der Entscheidung eines Frontends also die Qual der Wahl, was mich zum nächsten Punkt bringt...

Vue & Nuxt

Vue.js ist ein JavaScript-Framework mit dem man User Interfaces bauen kann, das sich vereinfacht ausgedrückt nur auf den View Layer (daher der Name) konzentriert. Vue funktioniert ähnlich wie React oder Angular und zeichnet sich nicht zuletzt durch seine Kompaktheit und Einfachheit aus. Oft führen wenige Zeilen Code schon zum Ziel. Die Vue-Templates sind Komponenten, bestehend aus HTML, CSS und JavaScript in einer einzigen Datei. Nuxt.js ist quasi das Framework für das Framework Vue, was im ersten Moment zugegebenermaßen etwas unsinnig klingt. Nuxt vereinfacht aber die Entwicklung einer Universal Application enorm, indem es dem Entwickler viele Dinge abnimmt, z.B. das Routing oder die Generierung der statischen Webseiten.

npx create-nuxt-app mywebsite
cd mywebsite && npm build
npm run dev
npm install storyblok-nuxt --save

Die halbe Miete – ganz ehrlich 🤞

Github & Netlify

Der komplette Code von Solmates.at mit allen Vue-Templates, Stylesheets und Konfigurationsdateien ist in einem Github-Repository gespeichert. Dieses Repository ist mit Netlify verbunden, das sich um das serverlose Hosting kümmert. Wenn sich etwas an dem Frontend-Code im Repository ändert, wird automatisch ein Deployment in Netlify angestoßen und die Änderung ist in wenigen Sekunden online. Ich kann mich also theoretisch, und auch praktisch, mit meinem Smartphone auf Github einloggen, Änderungen an der Code-Basis machen und den Commit in den Master-Branch pushen. Das reicht schon um einen Deploy zu starten, und das ohne eine „richtige“ Tastatur benutzt zu haben. So ein Deploy wird außerdem getriggert sobald ich auf Storyblok einen Artikel veröffentliche. Das funktioniert über einen sogenannten Webhook. Somit ist sichergestellt, dass neue Artikel gleich nach der Veröffentlichung als statische HTML-Seiten generiert werden und in der Sitemap auftauchen.

Getting shit done

Was mich bei allen oben beschriebenen Technologien beeindruckt hat, war wie einfach es ist schnell zu brauchbaren Ergebnissen zu kommen. Für alle, die etwas ähnliches vorhaben kann ich die Docs von Storyblok und speziell diesen Artikel als Ausgangspunkt empfehlen.