Analyse
In einem ersten Schritt habe ich mir die Webseite grosser Brockenstuben in der Schweiz angesehen um zu analysieren, welche Informationen von Bedeutung sind. Gleichzeitig habe ich auch in meinem Bekanntenkreis eine kleine Umfragte gemacht, um zu sehen, worauf sie beim Besuch einer Webseite achten oder welche Informationen am wichtigsten sind. Dann habe ich auch einige Angebote für ein Hosting gesammelt, bei der Domäne war es zum Glück sehr einfach ein gutes Angebot zu finden. Mit diesen Informationen machte ich mich auf den Weg zum Auftaktmeeting mit dem Auftraggeber. Glückerlicherweise waren wir auf einer Wellenlänge was den Aufbau anging und auch beim Hostingangebot konnten wir uns sehr schnell entscheiden. Somit konnte ich sogleich mit der Gestaltung beginnen.
Gestaltung
Bei der Gestaltung war ich ziemlich frei, die einzigen Vorgaben waren das Logo, die Farbe, welche bereits beim Streichen der Wände verwendet werden und die Bildwelt. Das Foto des Besitzers konnte ich zum Glück noch vor dem Lockdown machen. Mit den ersten Wireframes konnte ich noch genauere Eindrücke gewinnen, wie die Webseite aufgebaut werden soll. Dann erstellte ich mehrere Varianten eines Mockups. Unklar war auch lange, ob wir nun mit einem Onepager arbeiten oder doch mit verschiedenen Unterseiten. Ich plädierte auf einen Onepager, nicht nur der Einfachheit halber, auch weil nahezu leere "Seiten" von Google bei der Suche abgestraft werden und auf den hinteren Google Suchergebnisseiten landen. Am Schluss konnten wir uns darauf einigen die Menüpunkte "Home"/"Angebot" und "Über uns"/Kontakt auf je einer Unterseite einzurichten. Der kleinen Newsbanner kann auch weggelassen werden, falls es keine Neuigkeiten zu kommunizieren gibt. Das Headerbild orientiert sich dabei an den Visitenkarten, um eine einheitliche Gestaltung zu haben. Zuoberst findest du die Öffnungszeiten, aus meiner Sicht die wichtige Information über eine Brockenstube. Nach mehreren Überarbeitungsrunden und Vorschlägen für die mobile Version ging es also an die Umsetzung.
Umsetzung
Die Webseite wurde nur mittels HTML/CSS und Javascript aufgebaut. Dabei konnte ich gerade alles was wir im ersten und zweiten Semster anwenden und vertiefen, für mich war es soweit sehr praktisch. Die Mobile Umsetzung lief relativ gut, da ich jedes Element jeweils direkt nach dem Grundsatz Mobile First einbaute. Beim Menü musste ich relativ viel Zeit investieren, um ein schönes Dropdown Menü zu kreieren. Die Javascript Animation des "Hamburgermenüs" habe ich auf Github entdeckt, ich musste sie aber noch deutlich umbauen, dass sie auch bei meiner Navigation funktionierte. Zu guter letzt, konnte ich die ganze Datei auf den Server laden und die Weiterleitung der Domain einrichten, sodass die Webseite erreichbar ist.
Fazit
Das Projekt war für mich sehr lehrreich, ich konnte wieder eine Arbeit umsetzten, die nun auch einen Zweck erfüllt. Meine IM-Skills konnte ich sehr gut vertiefen und auch meine gestalterischen Fähigkeiten konnten von diesem Projekt profitieren. Ausserdem habe ich zum ersten Mal ein SSL Zertifikat eingebaut, was gar nicht so einfach ist. In einer zweiten Überarbeitungsrunde wollen wir nun die Texte überarbeiten, mehr Bilder von der Brockenstube schiessen und dann am Schluss die Webseite in ein Wordpress integrieren.