Konzeption

Bei der Konzeption meiner Webseite entschloss ich mich dazu, ein möglichst schlichtes und modernes Design zu wählen, das von meinen späteren Portfolio Projekten möglichst wenig ablenken soll. Nach einer ersten Bleistift Skizzierung des Home Screens, begann ich auch schon sofort mit der Prototyperstellung der Seite in Adobe XD. Bei der Farbwahl und dem generellen Layout orientierte ich mich hierbei stark an mein quasi eigenes Corporate Design, welches ich bereits seit einiger Zeit in meinem Lebenslauf und Bewerbungsanschreiben verwendete.

Mir war es dabei besonders wichtig, dass meine Seite sowohl auf Desktop Monitoren als auch auf kleineren Endgeräten wir Tablets und Smartphones gut aussieht, weshalb ich mich beim Design für einen mobile-first Ansatz entschied - was in heutiger Zeit sowieso schon längst Standard ist. Die beiden fertigen Prototypen, welche bei der späteren Realisierung der Webseite eine norme Hilfe waren, zeigen deutlich deren teilweise haargenaue Übereinstimmung und lassen sich anhand folgender Click-Dummys genauer betrachten:

-> Meine Webseite Click-Dummy (Web)
-> Meine Webseite Click-Dummy (Mobile)

---

Umsetzung

Dieses Projekt war mein erster richtiger Einstieg in die Welt des Webentwickelns und ich habe im Laufe der Umsetzung meiner Webseite einiges gelernt. Dabei habe ich mir von Anfang an die Herausforderung gestellt, die Seite von Grund auf selbstständig und ohne die Hilfe von Website-Baukästen wie Jimdo oder auch Wordpress zu coden, um mir dadurch möglichst viele Design-Freiheiten offen zu lassen.

Gearbeitet habe ich hierbei mit Visual Studio Code und neben HTML und CSS habe ich mir auch erste Grundkenntnisse in Javascript und Php angeeignet. Der Onlinekurs Die komplette Web-Entwickler Masterclass von Denis Panjuta und Jannis Seemann auf Udemy hat mir dabei extrem viel geholfen und kann ich wirklich jedem weiterempfehlen, der einen Einstieg in die Webentwicklung wagen möchte. Besonders stolz bin ich auf einige besondere Website Features wie das Kontakt Formular oder die Social-Media Hover Animationen, welche mir als Coding Anfänger einiges an Kopfzerbrechen abverlangten.

Klicke auf das zweite Bild, um ein GIF der unterschiedlichen Website Features zu sehen

Zu guter Letzt lassen sich hier noch drei Mockups meiner fertigen Portfolio Webseite begutachten (klicke auf das Bild um die restlichen zwei zu sehen), welche vor allem den responsiven Ansatz meiner Seite hervorheben.

Mockup PSDs erstellt von freepik