Portfolio & visuelle Identität

I. Server & Co.

Mein Squarespace Abo würde im April 2021 enden, bis dahin wollte ich wechseln. Da ich bereits im Vorfeld eine Website für jemand anderes erstellt hatte, wusste ich in etwa, wie der Ablauf von Server bis zur fertigen Seite funktionierte. Nichtsdestotrotz las ich mich abermals in das Themenfeld «Server», «DNS-Records» & Co. ein. Ich entschied mich mein Hosting über den Schweizer Anbieter cyon.ch laufen zu lassen. Die Zügelei meiner bereits registrierten Domain dauerte seine Zeit, schlussendlich hatte ich aber vollen Zugriff auf die technischen Grundgegebenheiten meines Servers – was ich auch als grossen Vorteil erachtete, als ich mich entschied zu wechseln und die Squarespace Phase hinter mir zu lassen.

Mit der Registrierung meiner Domain bei cyon.ch erstellte ich eine persönliche Mailadresse und verband die Seite mit dem bekannte CMS WordPress.

II. WordPress

WordPress kannte ich bereits von diversen anderen Seiten, die ich in der Vergangenheit mit Inhalten bespeisen durfte. Insofern fiel mir die Navigation dementsprechend leichter. Nicht leicht war es, eine schöne Layout Idee umzusetzten. Von einem vorhergehenden Website-Design stand mir ein einfaches Theme zu Verfügung, welches auf dem Rastersystem beruhte und individuell gestaltet werden konnte.

Bevor ich jedoch mit der Layoutarbeit begann, machte ich einen ersten Sketch auf Adobe XD und später auf einem mir empfohlenen Tool namens Cargo. Dies erlaubte mir einen Realzustand einer Website zu gestalten, ohne es bereits in WordPress zu vermasseln. Zusätzlich suchte ich nach diversen Inspirationen, Websiten, die mir gefielen und sammelte diese als Moodboard.

Meine Website sollte schlicht sein. Wenige Menüpunkte. Übersichtlich. Das Bild bzw. die Multimedialen Inhalte sollten im Zentrum stehen. Gleichzeitig sollte man erkennen, dass es meine Website ist und nicht die 1000te Verwendung eines populären Themens (wie es auf Squarespace der Fall war).

Um unbesorgt im Hintergrund arbeiten zu können, erstellte ich eine «Diese Website wird derzeit überarbeitet» Folie als Pagelander. Anschliessend hinterlegte ich zuerst meine Font und erstellte einen einheitlichen Paragraphen, H1 und H2 Abschnitt. Dies auch im Hinblick darauf, dass das SEO die Seite gut durchforsten und strukturieren kann. Dann gings ans Layout.

Ich begann mit einer grob gestalteten Startseite, fügte einen Footer hinzu und lud anschliessend ein erstes Projekt hoch. Das Lay Theme gibt mir die Möglichkeit zwischen «Seiten» und «Projects» zu unterscheiden. Projekte kann man sammeln und als schön gegliederte Gallerie auf «Seiten» einfügen. Die Erstellung dieser Projekte dauert aber seine Zeit. Zum einen gibt es diverse fotografische Projekte, die ich gerne auf meinem Portfolio präsentieren möchte, jedoch noch neu abgespeichert und fürs Web komprimiert werden müssen. Stand jetzt sind nach wie vor nicht alle Projekte veröffentlicht.

Nach einigen Testprojekten mit Platzhaltern kam die Infoseite hinzu, sowie ein Datenschutzerklärung – Seiten, die ich immerhin schnell erstellt hatte. Das Theme gab mir die Möglichkeit eine individuelle Mobile Version sämtlicher Seiten und Projekte zu erstellen – wovon ich ebenfalls gebrauch machte.

Da ich meine alte Website auf Englisch geführt hatte, setzte ich auch diese Version im ersten Durchgang auf Englisch um. Nach einer Weile wechselte ich jedoch ins Deutsche, entschied aber, dass ich in Zukunft ein Plugin einfügen werde, bzw. eine Paralell-Website erstelle, um zwischen den beiden Sprachen zu wechseln. Dies aus dem Grund, dass ich allen Menschen Zugang zu meiner Seite ermöglichen möchte, hinzu kommt, dass ich eventuell in Zukunft im Ausland arbeiten möchte und sich eine Englische Website Version deshalb unabdingbar ist.

Ich verwendete einige weitere Plugins, wie bspw. ein Bildoptimierungstool, SEO Manager, LightSpeed Cache und Spam Filter, welche alle selbsterklärend ihre beschriebene Aufgabe erfüllten.

Letztend Endes arbeitete ich beinahe täglich min. 1-2 Stunden an meiner Website, nahm Änderungen vor, die ich manchmal auf allen Unterseiten anpassen musste (uff!), formulierte Projekt-Texte, setzte Links, und wandelte zig Bilder in das neue Format «WebP» um.

III. Identität

Wer bin ich? Die Website sollte erkennbar von mir sein. Die alte war es kaum. Deshalb musste ein neues Branding her. Wir hatten zwar im 1. Semester bereits ein Logo für uns erstellt – da sich dieses auf lange Sicht nicht bewähren würde, stellte sich meine Mutter (u.a. als Künstlerin tätig) zur Verfügung ein neues Logo für mich zu gestalten. Nach einigen Entwürfen stand das finale Logo fest, welches ich in Illustrator nachbearbeitete und ergänzte.

Hinzu kam dann noch die Wahl einiger Farben, die ich in Zukunft verwenden werde. Grundsätzlich ist meine visuelle Identität schwarz/weiss, den dunkelrote Farbtupfer verwende ich ausschliesslich für Links und Dinge, die ich herausheben möchte.

IV. Schwierigkeiten

• Plugins

Die Suche nach passenden Plugins stellte sich als Schwierigkeit heraus. Das Angebot für meine Wünsche ist riesig, weshalb ich zunächst einige Recherchen auf mich nahm, bevor ich ein Plugin installierte. Anschliessend funktionierten diese aber reibungslos.

• SEO

Wer eine Website hat, will gefunden werden. Da ich bereits 2 Jahre unter der Domain «janaleu.com» registriert war, kannte mich Google bereits. Trotzdem achtete ich beim Indexieren meiner Projektseiten und Subseiten auf eine saubere Darstellung und Formulierung. Ich las mich in das Thema «SEO» ein und versuchte zu verstehen, wie die grossen Metadatensuchmaschinen funktionieren. Einige Optimierungen werde ich hierbei noch vornehmen.

• Page Speed & viel zu grosse Bilder

Meine Fotos hab ich in der Vergangenheit jeweils mit 4000x abgespeichert – viel zu gröss fürs Web. Also musste ich diese zunächst kleiner machen, was einen grossen Aufwand mit sich brachte. Zukünftig werde ich Bilder einmal gross und einmal Weboptimiert exportieren. Mit dieser Thematik zusammenhängend ist auch die Page Speed. Google bietet eine Seite an, welche informiert wie «Gut» eine Website ist und welche Änderungen zu schnelleren Ladezeiten führen könnten. Meine schnitt ungemein schlecht ab (mit 47%). Das Problem: die Bilder sind zu gross und nicht richtig formatiert. Hier sehe ich eine grössere Baustelle, die ich im Laufe des Jahres langsam abarbeiten werde. Ein Plugin, welches Bilder ins WebP Format umwandelt hilft bereits, in Zukunft werde ich aber noch weitere Optimierungen vornehmen.

V. Doch noch was gelernt

Zum Thema Server, DNS-Records, E-Mail Installation und SEO hab ich sehr viel dazugelernt. Ebenso, wie eine Website optimiert werden kann, dementsprechend auch besser gefunden wird von Metasuchmaschinen. Hinzu kommt, dass ich mich aktiv mit meinen eigenen Arbeiten und Fähigkeiten auseinandergesetzt habe. Das half, um mich selbst in Branche zu platzieren und es zeigte mir, was ich bereits gemacht habe, geschafft (ein kleiner Motivationsboost!)

VI. Ausblick

Zukünftig werde ich weitere Projekte, ob alte oder neue, auf janaleu.com veröffentlichen. Ich werde versuchen die Seite weiterhin zu optimieren, wenn möglich auch eine gute Barrierefreiheit zu schaffen, sowie aktuelle und alte Bilder neu zu komprimieren.