Nathalie Nongploi – ein digitales Portfolio
Nathalie Plüss ist seit diesem Sommer ausgebildete Bühnendarstellerin. Nicht gerade die beste Zeit, um im Kulturbusiness durchzustarten. Wo sonst schon hartes Brot geschluckt wird, ist es aktuell noch härter. Trotzdem gibt es einige Jobs, die ausgeschrieben sind, wo sich alle nun wie Adler auf ihre Beute stürzen. Was nebst Talent und Können jetzt besonders gefragt ist, ist gutes Material, um aufzufallen und professionell aufzutreten.
Und wer hätte es gedacht, hier komme ich ins Spiel. Das Ziel ist es, eine Portfolio-Webseite zu erstellen, welche bei Bewerbungen und Social Media verlinkt, angehängt und geteilt werden kann.
Meine Webtechnologien-Fähigkeiten und Begeisterung hielten sich bis zu Beginn dieses Semester ziemlich in Grenzen. Doch wovor ich mich bis zu diesem Zeitpunkt immer gedrückt habe, wurde nun zu meinem Digezz Projekt und ich stellte mich dieser Herausforderung – meine allererste Webseite, die ich von Grund auf neu aufbaue.
Die Webseite erstellte ich mithilfe des Divi Themes, um die komplette Freiheit in der Gestaltung zu haben. Zu diesem Zeitpunkt war mir das Divi Theme noch fremd und ich musste mich zuerst damit auseinandersetzen. Von ewigen Tutorials schauen, über wirres Googeln, bis hin zu kleinen Freudesprüngen war bei diesem Projekt alles mit dabei. Da meine Schwester noch am Anfang ihrer Karriere steht, gibt es zu Beginn auch noch nicht mächtig viel Content auf der Seite. Doch das was jetzt steht, ist schon mal ein Anfang und mithilfe dieser Seite soll sich ihr Portfolio hoffentlich möglichst schnell füllen.
Hier geht’s zum Ergebnis: https://nathalienongploi.ch/
Das Stylesheet
Über Divi
Divi ist ein Produkt von elegantthemes und ein Theme für WordPress, welches auf dem WYSIWYG-Prinzip basiert. WYSIWYG heisst nichts anderes als «What you see is what you get» – kurz gesagt, es lässt sich damit komplett visuell arbeiten. Doch das Essentielle an Divi ist der integrierte Page-Builder. Dieser ermöglicht es, direkt auf dem Frontend zu arbeiten und Veränderungen in Echtzeit zu sehen. Divi lässt sich entweder als Jahrespaket oder als Lifetime-Access kaufen. Der Lifetime-Acess wird einmal angeschafft und bietet lebenslänglichen Zugriff zum Divi Theme. Der Preis ist meiner Meinung nach völlig gerechtfertigt, wenn man bedenkt, unendlich viele Webseiten damit erstellen zu können. Divi bietet zahlreiche Features und Werkzeuge an, um eine Webseite from scratch zu erstellen. Elegantthemes stellt viele hilfreiche Tutorials zum Theme zur Verfügung, womit auch etliche Probleme meinerseits gelöst wurden. Die vorgefertigen WordPress Themes werden es bei mir in Zukunft schwer haben, denn Divi oder andere Page Builder ermöglichen ganz neue Dimension in der Gestaltung einer Webseite.
(hil)
Planung und Ziel
Das Ziel dieses Projektes war es, mich meiner Angst vor Webseiten endlich zu stellen und meine erste selbst aufgebaute Webseite zu erstellen. Da die Auftraggeberin meine eigene Schwester ist, war hier natürlich eine gewisse Kulanz da und die Webseite musste nicht bis zu einem strikten Zeitpunkt fehlerfrei stehen. Doch ich versuchte das Ganze trotzdem als «Kundenauftrag» zu sehen und das Projekt so professionell wie möglich anzugehen.
Zuerst wurden folgende Punkte abgeklärt:
- Ziel und Zweck der Webseite?
( -> Portfolioseite, welche angehängt / verschickt werden kann) - Welche Inhalte sollen auf der Webseite zu sehen sein?
(-> Texte, Bilder, kurze Vita…) - Wie lautet der Domainname?
(-> nathalienongploi.ch) - Aufbau?
(-> Onepager) - Gesetaltungswünsche?
(Ideen für Design anhand von Pinterest Inspirationen)
Mit diesen Informationen machte ich mich an erste Skizzen, erstellte ein Moodboard auf Pinterest und machte ein grobes Stylesheet zur Übersicht.
Aufsetzen der Webseite
Ich war zwar an den berühmten Webserver Präsentationen von IM dabei und damals erschien mir auch alles logisch, doch wie beginne ich jetzt, wenn ich eine Webseite selber hosten will und nicht alles über den fhgr-Server laufen wird?
Hosttech war mir aus dem Umfeld bekannt, deshalb entschied ich mich alles über Hosttech einzurichten. Als allererstes kaufte ich die zusammen mit Nathalie festgelegte Domain und bezog auch gerade das Webhosting über Hosttech, wobei ich hier vom FHGR x Hosttech Angebot profitieren konnte. Im beliebten World Wide Web fand ich glücklicherweise eine gute Anleitung, wie ich das Ganze nun einrichten kann. Also widmete ich mich gleich den Sicherheitseinstellungen und installierte das SSL Zertifikat.
Damit ich flexibel in der Anpassung der Webseite bin und auch meine Schwester die Seite zukünftig aktualisieren kann, entschied ich mich für WordPress als CMS. Dieses installierte ich anschliessend im Hosttech Panel. Darauf folgte das Verbinden von WordPress mit dem Server. Die Domain war nun abrufbar, doch egal was für Veränderungen ich machte, als Startseite wurde mir immer nur die standardmässige Willkommenseite von Hosttech angezeigt. Nach ausgiebigem Googeln, wurde mir klar, dass ich noch gar keinen DNS Server hatte. Also kaufte ich auch noch einen DNS Server über Hosttech und verbindete diesen mit der Domain.
WordPress und der Themejungle
Die vorgefertigten WordPress Themes bereiten mir schon beim Aufsetzen des Blogs nicht viel Freude und auch dieses Mal verlor ich viel Zeit, ein ansprechendes Theme mit Individualisierungsmöglichkeiten zu finden. Keines sprach mich wirklich an und deshalb machte ich mich schlau, wie ich die Webseite möglichst individuell gestalten kann. Von den beiden Page Builder Plug-ins Elementor und Divi, entschied ich mich schliesslich für Divi, weil mir da die Möglichkeiten und der Preis besser entsprachen. Vor mir war nun ein weisses Blatt, welches ich von Grund auf neu bemalen konnte. Weil ich Divi gar nicht kannte, musste ich mich zuerst durch den Divibuilder forsten und verbrachte etliche Stunden mit Funktionen ausprobieren und Tutorials schauen. Divi bietet viele Funktionen, doch nicht alles ist intuitiv und einige Funktionen mussten mit Custom CSS etwas umgeschrieben werden. Beispielsweise einfache Funktionen wie einen Bildslider haben es ganz schön in sich und schnell geht eine Stunde rum, alleine mit dem Einstellen des Sliders, so dass er am Ende doch nicht so animiert wie gewünscht.
Design
Da es sich bei der Webseite um ein Portfolio handelt, sollte sie für jeden einfach zu bedienen, gut leserlich sein und trotzdem einen Hauch von Personality reinbringen. Ich entschied mich deshalb für einen Onepager. Inspirationen sammelte ich in einem Pinterest-Moodboard zusammen. Farblich legte ich mit meiner Schwester vier Farben fest, die ich für die Seite verwende. Auch die Icons und die Timeline-Grafik gestaltete ich in diesen Farben. Die Wahl der Fonts wurde gänzlich mir überlassen und ich entschied mich für zwei verschiedene Schriften. Die «Personality» versuchte ich nebst mit Farben und Grafiken, mit den Lieblingszitaten meiner Schwester einzubringen.
SEO
Mit SEO habe ich mich bis jetzt so gut wie nie beschäftigt. Auch hier musste ich mich ins Thema einlesen und verlor mich regelrecht in der Informationsflut. Schliesslich installierte ich das Yoast-Plugin, welches zahlreiche Möglichkeiten bietet SEO zu betreiben. Des Weiteren verwendete ich ein Plugin, welches Bilder optimiert und so die Ladezeiten der Seite verringert. Zusätzlich verifizierte ich die Webseite bei Google Search Console, ein Tool um die Präsenz der Webseite bei den Google-Suchergebnissen zu beobachten. Leider funktioniert das mit dem Finden bei Google immer noch nicht so ganz. Das ganze SEO Thema ist komplexer als gedacht und ich muss mich damit noch deutlich vertiefter auseinandersetzen und das SEO für diese Webseite ausbauen.
Learnings
Ich erstellte also meine erste Webseite für jemanden externs und die Learnings fallen ziemlich hoch aus. So ziemlich alles vom Aufsetzen des Servers, über das Einrichten der Sicherheitseinstellungen bis hin zum eigentlichen Aufbauen der Webseite zähle ich zu meinen Learnings. Die Seite wird mit den zunehmenden Jobs meiner Schwester sicherlich an Content gewinnen und ich werde sie weiterhin optimieren und ausbauen. Wovor ich mich bis jetzt so sehr gesträubt habe, macht mir jetzt sogar Spass und ich möchte mich noch weiter ins «Webseitengame» vertiefen und vielleicht habe ich schon eine nächste Webseite in der Startrampe.