Just another Travelblog

Idee

Als ich im 2017 die Pläne für meine erste Weltreise fixte und als Freizeitlektüre nur noch auf Reiseblogs im Internet rumschwirrte, kam mir die Idee, einen eigenen Blog zu erstellen. Ich wollte keinen Blog mit Reichweite, Reisetipps zu den Destinationen oder Beiträgen wie “die 10 besten blabliblu”. Davon gibt es schon unzählige und auch sehr gute, gegen die ich nicht konkurrieren möchte. Vielmehr wünschte ich mir ein virtuelles Tagebuch, auf dem ich meine Erlebnisse und Bilder festhalten und diese jederzeit wieder selbst abrufen oder Familie und Freunde daran teilhaben kann. Ein Blog schien mir dafür auch viel persönlicher und ausführlicher als Beispielsweise ein Instagramprofil. Auf den Namen “Travelina” kam ich ganz uninnovativ aus einer Kombination des Wortes “Travel” mit meinem Vornamen. Dieser hat sich schon so eingebürgert, dass er mir richtig ans Herz gewachsen ist und ich mich gegen einen Namenswechsel entschieden habe. Anfangs schrieb ich nur sporadisch Blogbeiträge. Bis schliesslich meine 5-monatige Weltreise im 2018 kam, bei der ich tatsächlich alle Erlebnisse dokumentiert habe. Es war wohl auch das Wendejahr, in dem sich meine Präferenzen nochmals so stark herauskristallisiert haben, dass ich schliesslich auf den Berufsweg Multimedia Production gekommen bin. Umso mehr freut es mich, das Rebranding meines digitalen Babys nun auf die Digezz-Plattform hochladen zu können. Nach der grossen Reise fehlte mir das Bloggen so sehr, dass ich begann, auch kleine Ausflüge in der Schweiz festzuhalten und jede weitere Auslandsreise weiterhin zu bloggen. Dann nahm ich bereits das erste Rebranding vor und versuchte die Webseite mit einem gekauften Template nach meinen Vorstellungen zu gestalten. Allerdings kam ich immer wieder an die Grenzen der Umsetzbarkeit meiner Vorstellung. Ich wollte mehr Dynamik und Interaktivität. Durch eine Freundin, die die Webseite für ihre Selbständigkeit mittels Webseiten Baukasten erstellt hat, kam ich schliesslich auf den Anbieter Wix.

Wechsel von WordPress auf Wix

Nach 3 Jahren mit WordPress probierte ich schliesslich das Probeabo bei Wix aus. Da mein Fokus auf der Gestaltung, Design und natürlich dem Inhalt des Blogs liegt und nicht auf dem Programmieren, überzeugte mich das sehr simple Baukastensystem schnell. Trotz der selbsterklärenden Bedienung, an die man sich schnell gewöhnt, wurde mein geschätzter Zeitaufwand schnell gesprengt. Mitschuld daran waren auch immer wieder neue Gestaltungsideen und neu entdeckte Tools, die ich unbedingt einbauen wollte.

Schliesslich begann die manuelle Übertragung der mittlerweile 87 Beiträge von WordPress auf Wix. Es gibt zwar eine WordPress-Integrieren Funktion, doch über die Jahre hinweg hat sich ein solches Chaos auf meinem Blog angesammelt, dass ich quasi einen kompletten Frühlingsputz vornahm und jeden Beitrag einzeln übertrug und gleichzeitig kleine Optimierungen vornahm. Dadurch konnte ich von Beginn an eine Ordnung der Medien mittels vordefinierter Ordnerstruktur sicherstellen. Den Stundenaufwand dafür habe ich irgendwann aufgehört zu tracken und meine Multitasking Fähigkeiten mit nebenbei laufenden Netflix Serien trainiert.

Das Hosting löste ich bei cyon.ch und übertrug schliesslich die Domain auf den neuen Anbieter. Dies war etwas mühsam und zog sich in die Länge, da die DNS-Einträge angepasst werden mussten und dies zu Beginn nicht funktionierte. Zum Glück gibt es dafür einen Support, der einem behilflich ist. Zusäzlich richtete ich eine separate Mailadresse für den Blog ein, falls sich doch mal jemand per Kontaktformular bei mir melden möchte.

Zum Schluss fehlte nur noch die Abokündigung bei WordPress und das Premium Abo lösen bei Wix. Naja beinahe, denn nun kam der eigentliche Teil: Die Neugestaltung der Webseite.

Design

Schriftarten

• Schnörkelschrift: About love
• Überschriften in Grossbuchstaben: DIN Neuzeit Grotesk
• kleinere Überschriften: Proxima Nova
• Lauftext: Avenir Light

Farbkonzept

• Türkis als Akzentfarbe #45B4B6
• Grauabstufungen sowie weiss/schwarz

Lebendigkeit

• Einfügen von Animationen und Effekten von Objekten beim Scrollen
• Erstellen von Mouseover Effekten einzelner Elemente (mittels Boxen)

Planung

Bevor ich mit dem Aufbau der Webseite startete, recherchierte ich auf Pinterest und verschiedenen Reiseblogs und machte mir ein ungefähres Bild, wie ich meinen eigenen Blog aufbauen wollte. Anschliessend skizzierte ich den Aufbau auf dem iPad. Während dem Erstellen der Webseite verwarf ich immer wieder einige ursprüngliche Ideen und ergänzte die Seite mit neuen Elementen bis schliesslich die jetzige Webseite entstand.

Startseite

Möglichst zuoberst an einen Blog gehören die neusten Beiträge. Ich entschied mich bei der Gestaltung dafür, den allerneusten gross hervorzuheben und die 6 nachfolgenden als quadratische Bilder mit einem Sticker Gestaltungseffekt einzubinden. Die Tipps Beiträge verlinkte ich fix mit eigens dafür erstellten Icons ebenfalls zu Beginn der Startseite. Um das Farbkonzept wieder aufzunehmen, baute ich in den Mouseover Effekt einen erscheinenden türkisfarbenen Balken ein, sowie einen Wechsel der Iconfarbe zu Türkis. Die Blogbeiträge ordnete ich nach Destinationen und Kontinenten.

Ursprünglich wollte ich eine interaktive Weltkarte, bei der man mit der Maus über die besuchten Länder fahren kann und anschliessend die dazugehörigen Beiträge aufpoppen. Ich entschied mich dann doch für ein statisches Bild meiner bereits besuchten Länder coloriert auf der Weltkarte und listete die Länder im Mouseover bei den jeweiligen Kontinenten auf. Hier bin ich noch etwas skeptisch, ob die Klickbarkeit erkennbar ist. Deswegen besteht hier noch Optimierungspotenzial.

Ich wünschte mir einen “Hier bin ich gerade” Teil auf meiner Webseite. Dafür nutzte ich einen Gestaltungseffekt aus dem Wix-Template, der aus meinem Bild ein kleines Polaroid erstellt. Nebst dem «Hier bin ich gerade» Bild und Ort, fügte ich auch einen «last Trip» und «next Trip» Teil hinzu, den ich immer aktuell halten möchte.

Da die Blogbeiträge der Weltreise 2018 einen grossen Teil des Bloginhalts abdecken, wollte ich diesen einen Abschnitt auf der Startseite widmen. Dafür lebte ich mich kreativ in Photoshop aus und erstellte eine Weltkarte im Aquarell Stil in Photoshop, auf der ich die komplette Route als Gesamtüberblick einzeichnete. Zudem baute ich einige Zahlenfacts in Kreisen ein, sowie eine Auflistung der Destinationen. Die Zahlen hätte ich noch schön mit eingebautem hochzählenden Effekt gefunden. Aufgrund der komplexen Umsetzbarkeit entschied ich mich dagegen und für einen schlichten Erscheinen-Effekt. Schliesslich noch einen Button, durch den man auf die Kategorieseite der entsprechenden Beiträge gelangt.

Der kleine Abschnitt «Über mich» erhielt einen fixen Platz im unteren Bereich der Startseite. Hier nahm ich das Gestaltungselement der Klebstreifen wieder auf.

Der Schweiz Teil stellte sich als einer der anspruchsvolleren Bereiche der Webseite heraus. Schliesslich konnte ich meine Vorstellung mit einer Box erstellen, wodurch beim Mouseover ein Pin des jeweiligen Kantons auf der Schweizer Karte, sowie die schönsten Blogbeitragsbilder in Minivorschaubild erscheinen. Bei meinem alten Blog habe ich lediglich mit einem Dropdown Menu gearbeitet und die zunehmende Anzahl an Schweiz-Beiträgen führte schnell zu einer Unübersichtlichkeit. Von Beginn an war also das Bedürfnis da, diese Kategorie interaktiver und übersichtlicher zu gestalten. In diesem Bereich sehe ich allerdings nach wie vor Optimierungsbedarf bzgl. der Übersichtlichkeit. Zudem befürchte ich, dass der Mouseover-Effekt mit dem erscheinenden Pin auf dem jeweiligen Kanton bei unterschiedlichen Bildschirmgrössen verschieben könnte. Auch hier habe ich einen Button mit Weiterleitung zu den Schweiz Beiträgen eingefügt.

Die Startseite endet mit dem Kontaktformular, welches sich praktischerweise mit einem verfügbaren Formular einfügen und individualisieren liess. Zusätzlich fotografierte ich ein neues passendes Bild als Gestaltungselement. Für den Blog habe ich eine eigene Mailadresse über Cyon gelöst und diese mit dem Kontaktformular verlinkt. Zusätzlich habe ich die automatischen Antwortmails aktiviert und gestaltet, sodass der Absender weiss, dass seine Mitteilung eingegangen ist.

Header

In den Kopfteil der Webseite baute ich das Logo ein, durch welches man per Mausklick wieder auf die Startseite gelangt. Das Menu passte ich individuell an und fügte ein Video Icon hinzu zur Verlinkung auf die entsprechende Seite. Da die Startseite wie ein Onepager aufgebaut ist, führt z.B. der Kontakt Link im Header auf den Inhalt weiter unten. Dies habe ich mit Anker erstellt. Zusätzlich baute ich eine Suchleiste ein, die meines Erachtens auf einem Blog nicht fehlen darf. Die Suchseite liess sich ebenfalls individuell nach meinen Designvorstellungen und auf das bestehende Farbkonzept anpassen.

Footer

Den Abschluss der Webseite bildet die Fusszeile mit einem Copyright Vermerk, sowie die Verlinkung auf das Impressum und die Datenschutz Seiten.

Nach oben Button

Fix auf der kompletten Webseite habe ich einen nach oben Button platziert. Ursprünglich wollte ich diesen nur mit einem nach oben Pfeil kennzeichnen, doch im UX Unterricht haben wir gelernt, dass solche Buttons immer noch mit einem Text gekennzeichnet werden sollten. Leider habe ich es nicht hingekriegt, dass der Button erst ab einem gewissen nach-unten-scroll Abschnitt erscheint und am obersten Punkt der Webseite ausgeblendet wäre. Dies ist noch optimierbar.

individuelle Seiten

Für eine bessere Übersicht und Navigation auf dem Blog erstellte ich pro Kontinent eine Seite mit eigenem Blogfeed. Auf diesem liessen sich durch die zugeteilten Kategorien die jeweiligen Blogbeiträge anzeigen. Die Kontinenticons packte ich erneut in Boxen um den Mouseover Wechsel von Schwarz zu Türkis zu erstellen. Bei Ländern mit mehr als 1 Blogbeitrag erstellte ich ebenfalls eigene Seiten, um mehr Ordnung zu schaffen. Bei Indonesien und der Schweiz z.B individualisierte ich diese Seite nochmals und ordnete die Beiträge nach Inseln bzw. Kantonen und erstellte zudem ein kleines Inhaltsverzeichnis, welches mit Anker direkt zur richtigen Stelle auf der Seite scrollt. Ebenfalls individuelle Seiten erhielten die Weltreise 2018 Beiträge, sowie die Spartipps und das virtuelle Reisebücher- & Filmregal. Um meine Reisevideos dem Blog nicht vorzuenthalten, erstellte ich eine eigene Videoseite und bettete die Videos aus meinem YouTube Kanal auf dem dafür geeigneten Wix Videokanal Plugin ein.

Impressum & Datenschutz

Trotz recherchieren war ich unsicher, ob nun ein Impressum und eine Datenschutzerklärung für meinen Blog nötig ist. Sicherheitshalber habe ich also beides einfach erstellt. Den Text für die Datenschutzerklärung generierte ich durch die Seite SwissAnwalt.

Blogbeiträge

Damit die Feeds auf den individuellen Seiten verknüpft werden konnten, ordnete ich die Blogbeiträge entsprechenden Kategorien zu. Im Gegensatz zu der sonst eher weissen Webseite, hob ich die Beitragsseiten mit einem türkisfarbenen Hintergrund vom Rest der Page ab. In die Beitragstitel wollte ich eine gewisse Einheit bringen und entschied mich für «Land/Ort • Titel». Zudem starten alle Beiträge mit dem Beitragstitelbild im Format 16:9. Insgesamt habe ich im Rahmen dieses Digezz 22 neue Beiträge für das Jahr 2020 nachträglich niedergeschrieben. Besonders aufwändig dabei war das Sortieren der angesammelten Fotos und auswählen der besten für die Beiträge. Ausserdem habe ich die Fotos mit Lightroom bearbeitet, was ich bei meinen anfänglichen Blogbeiträgen nie gemacht habe, zukünftig jedoch immer machen werde, da ich mittlerweile meist mit einer Kamera fotografiere und nicht mehr mit dem Handy und die Bilder bearbeitet viel mehr hergeben. Zusätzlich musste ich für die Beiträge die Erlebnisse rekonstruieren und teils recherchieren um Textinhalte niederzuschreiben.

Signatur

Für den kleinen persönlichen Touch wollte ich als Einheit unter jeden Blogbeitrag eine Signatur setzen. Die Unterschrift ähnliche Schnürchenschrift mit kleinem Herz bereitete ich als Balken in Photoshop auf, wodurch die Grösse nicht in jedem Blogbeitrag angepasst werden muss, sondern gleich passend zugeschnitten ist.

Grafiken

Logo

Das bisherige Logo hatte ich dazumal ziemlich unschön in Photoshop zusammengebastelt. Für das Rebranding bereitete ich die Grafik also erstmal sauber in Illustrator auf und definierte die neue Schriftart, welche sich auch sonst durch die Webseite zieht. Die neue Vektordatei baute ich auch gleich als Logo in die Wix Einstellungen ein, sowie als Favicon.

Icons

Für die gesamte Webseite erstellte ich eigene Icons, die ich teilweise mit Sketchbook zeichnete oder in Illustrator erstellte und abschliessend mit Photoshop finalisierte. Auch die Karten und Kontinent/Länder/Kantons- Silhouetten kreierte ich auf diese Weise.

Mobile Version

Eine grosse Baustelle war die Mobile Version des Blogs. Wix bietet hier einen sehr praktischen Wechsel von der Desktop auf die Mobile Ansicht an. Bereits bei der ersten Seite wurde jedoch schnell klar, dass die Elemente zwar für die kleinere Webseitenansicht übernommen werden, jedoch alles völlig deformiert ist. So musste ich jede einzelne Seite auch für die Mobile Version anpassen und gewisse Elemente verkleinern oder sogar komplett weglassen. Auch beim Burgermenu war eine Optimierung notwendig. Gewisse Bereiche der Webseite wie der Schweiz Teil auf der Startseite, der eigentlich vom eingebauten Mouseover Effekt abhängt, welcher auf dem Handy nicht möglich ist, liess ich komplett weg.

Fazit

Mit dem neuen Webauftritt meines Blogs bin ich sehr glücklich. Die Zeit für das Rebranding habe ich jedoch völlig unterschätzt. Im Gegensatz zum ersten Rebranding, bei der einige Elemente durch die Templateinstallation direkt übertragen wurden, war aufgrund des Wechsels zu Wix ein kompletter Neuaufbau nötig. Allerdings konnte ich so von Grund auf meine Wünsche und Gestaltungsideen umsetzen. Mit der Zeit habe ich immer mehr Möglichkeiten entdeckt und neue Ideen eingebracht. Doch die schier endlos scheinende Anzahl an Anpassungsmöglichkeiten machte die To-Do Liste zeitweise eher länger als kürzer. Nun da das Grundgerüst steht und meinen Vorstellungen entspricht, ist es jederzeit optimierbar. Negativ zu verzeichnen gibt es, dass die Kommentarfunktion auf Wix nicht optimal ist. Um Kommentare zu hinterlassen muss man sich nämlich anmelden. Jedoch erhalte ich diese sowieso meistens per Kontaktformular oder Whatsapp direkt von Freunden und Verwandten, was ich auch mehr schätze. Der grösste Schwachpunkt ist wohl die Performance – die Seite lädt sehr langsam. Liegt auch daran, dass ich unglaubliche viele Fotos auf dem Blog habe und mittlerweile einfach sehr viele Beiträge. Da der Schreibaufwand jedoch nicht gering ist, müssen sich halt auch die Besucher etwas mehr gedulden, was bei meiner Zielgruppe von Freunden und Familie kein Problem ist =).

Obschon WordPress als Spitzenreiter für Blogs steht, bereue ich den Wechsel nicht, da mir die Umsetzung beim neuen Anbieter viel besser lag und ich mich auf die Gestaltung und nicht das Programmieren konzentrieren konnte. Doch schlussendlich lebt ein Blog von seinen Beiträgen und dem Inhalt und nach dem zeitfressenden Rebranding, nutze ich meine Zeit nun wieder fürs Reisen, Ausflüge und Niederschreiben der Erlebnisse.