Zeitraum: 02/2020 - heute

- Kurzfassung -

Als erstes großes Website-Projekt habe ich mir vorgenommen, eine individuelle Seite für Interessierte an meinen Ideen und Projekten zu erstellen. Dieses Projekt umfasst die Konzeptionierung, erste Wireframes und die endgültige Seite.

- Dokumentation -

Die aktuelle Homepage wurde vollständig von mir erstellt. Abgesehen von der jQuery- und typetype-Bibliothek ist sowohl der Code, als auch das Design von mir selbst entworfen und erstellt. Ziel bei der Konzeptionierung war es, eine alternative Herangehensweise an eine Website zu versuchen. So sollten Design & Funktion miteinander verschmelzen und dem Benutzer allerlei direkte Interaktionsmöglichkeiten ermöglichen. Diese Interaktivität wird beispielsweise auf der Startseite durch scrolling-basierte Animationen verwirklicht. Zusätzlich versuchte ich, die Funktionalität und Übersicht der Seite nicht in den Hintergrund zu rücken. So sollten eine direkte Navigation, beispielsweise über den Header, dem Benutzer dabei helfen sich schnell zurecht zu finden. Jedes Projekt im Portfolio trägt einen charakteristischen Farbverlauf mit sich, der sich in der Vorschau und der Projektseite widerspiegelt. Alle Projekte lassen sich zudem nach Datum und Kategorie filtern. Bei dem nach und nach wachsenden Portfolio geht so die Übersicht nicht verloren.

Um den modernen Standards entgegenzukommen ist die Seite zusätzlich vollständig responsiv erstellt und lässt sich somit auf allen Geräten (und Formaten) im gleichen Umfang nutzen. Der klassische Desktop-Benutzer hat hierbei jedoch eine unterschiedliche Erfahrung, wie der Smartphone-Benutzer. Dies liegt überwiegend daran, dass diese Website nach dem „mobile-first“-Konzept entworfen wurde. So werden Smartphone-Benutzer bevorzugt und nur die nötigsten Funktionen für andere Formate bereitgestellt.

Die Startseite nutzt zudem einige Tricks, um langsame Ladezeiten zu umgehen. So wird auf der Startseite der Himmel und Pfeil nicht etwa durch ein Bild, sondern durch einen Farbverlauf und eine SVG-Datei dargestellt. Diese können schnell von jeglichen Endgeräten gerendert werden. Größere Bilddateien werden hingegen erst nach dem Scrollen nach unten angezeigt, können also „in Ruhe“ laden. Andere Optimierungsschritte sind so nicht mehr zwingend nötig.

- Referenzen -

larsm_mobile

Mobile Version

larsm_desktop

Desktop-Version