Bijoux - Hobbywebsite
Ich habe den Auftrag bekommen eine Hobbywebsite zu entwefen. Alles war sehr frei ich konnte das Thema selbst wählen, ein Logo designen und ich war gestalterisch auch komplett frei. Schlussendlich habe ich mich dazu entschieden einen online Shop für Schmuck zu machen. Natürlich nicht ein funktionierender Shop das wäre etwas zu kompliziert gewesen.
Vorbereitung
Zuerst habeich mir viele Themen überlegt und dazu einiges aufgeschrieben. Die Drei am besten geeigneten Ideen habe ich dann genommen und mir ein Konzept dazu aufgeschrieben. Da ich mich noch nicht entscheiden konnte habe ich zu jeder Idee Logos entworfen. Schlisslich habe ich mich dann für einen Schmuck onlineshop mit dem Namen "bijoux" entschieden.
Layout
Danach habe ich begonnen ein Layout zu skizzieren. Da mein Logo eine dreieckige Optik hatte wollte ich alles zentrieren da dies sehr schön aussehen kann. Ich habe mehrere Versionen der Verschiedenen Unterseiten gezeichnet da ich nicht sicher war ob das zentrierte villeicht etwas zu viel wäre. Zudem habe ich ein responsive Design skizziert.
Logodesign
Ich habe sehr viele verschiedene Logos zum Thema Schmuck designt und mich auch im Internet informiert und nach Beispielen oder Schmuck Icons gesuch. Ich habe den Fokus auf einen Diamant oder etwas edles gesetzt da der Name "bijoux" für mich sehr vornehm klingt. Ich hatte dann sehr viele Versionen einige etwas besser und einige eher weniger aber am besten fand ich die Diamantversion. Diese habe ich dann im Illustrator designt und einige Versionen mit dem Diamant im Fokus gemacht.
Am besten fand ich dann die ersten zwei. Nach der Besprechung mit MF habe ich mich dann für das mit der dickeren Schrift entschieden (das erste) da der Diamant so besser wirkt.
Startseite
Wie in der Skizze gezeichnet wollte ich drei Newsboxen auf der Startseite machen die direkt zum Shop führen wenn man sie anklikt. Das habe ich dann auch genau so umgesetzt ohne grosse Schwierigkeiten.
Schmuck
Die Shopseite habe ich etwas anders gestaltet als geplant. Heisst wenn man in der Navigation auf Schmuck klickt kommt man erstmal auf die Schmuckstartseite stat einer Unternavigation. Von dort aus kann man dann auf die verschiedenen Bereiche des Shops zugreiffen. Ich fand es optisch so besser und ansprechender.
Der Shop war ein Knackpunkt der Website da es schwirig war die bilder mit dem Text darunter in Reihen zu unterteilen. Die Lösung war dann um jedes Bild + Text eine class zu machen und dann darum nochmal eine class zu machen. Um alle Bilder zusammen ist dann nocheinmal eine class. Danach habe ich with: 33% gemacht damit die Bilder in einer Dreierreihe sind.
Das sieht dann so aus:
Unterhalb der Artikel im Shop habe ich überall noch die Startseite des Shops hinzugefügt damit man direkt weiter schauen kann und nicht zuerst zur Navigation klicken muss. Das habe ich auch bei der Warenkorbseite und der Über Uns seite gemacht.
Die Bilder habe ich alle von Unsplash und ich bin sehr überrascht das sie so gut zusammen passen. Ich finde die Optik wirklich sehr schön und ich bin sehr zufrieden mit dem Ergebnis des Shops. Natürlich funktioniert er nicht wirklich aber alle Artikel die im Warenkorb (dekoration) sind, sind zum Warenkorb verlinkt und umgekehrt.
Über Uns
Diese Seite habe ich eher nach Gefühl als nach Plan gemacht und hatte auch praktisch keine Schwierigkeiten. Am Anfang sah sie noch anders aus aber als ich zum responsive kam musste ich die Seite etwas verändern so dass das responsive Design einfacher zu gestalten war.
Warenkorb
Der Warenkorb war ebenfalls ein richtiger Knackpunkt bei der Hobbywebite und ich habe auch ziemlich viel Zeit dafür aufgewendet. Ich habe mich am Zalandowarenkorb orientiert. Die Schwirigkeit bei der Umsetzung war, den Text neben die Bilder zu bekommen und auch der Teil mit der Gesamt Summe war nicht ganz so einfach. Zudem war das "entfernen" ziemlich schwierig im responsive da es die position: absolut; hatte. Daher musste ich es umändern. Ich bin nicht ganz zufrieden aber es ist okey. Natürlich ist der Warenkorb genau wie der Shop ebenfalls nur Dekoration. Die Bilder sind mit dem passenden Shop-Bereich verlinkt und das Entfernen mit der Startseite.
Responsive
Startseite
Die Startseite responsive zu machen war relativ einfach. Ich habe die Newsboxen einfach mit flex-direction: column; in eine Reihe geordnet und den Text kleiner gemacht. Im Allgemeinen habe ich noch das Logo kleiner gemacht und auch den Slider und Footer.
Navigation
Die responsive Navigation war ziemlich schwierig für mich da ich auch noch mit Javascript arbeiten musste. Ich bin nicht ganz zufrieden mit dem Aussehen aber es ist in Ordnung. Ich habe das Kreuz und den Burger von einem Video abgeschrieben und habe viel neues dazu gelernt dabei.
Shop
Die Website responsive zu machen war ein sehr grosser knackpunkt für mich. Im Shop und auf der Schmuckseite hatte ich ja zwei Klassen um Text & Bild gemacht und dann noch eine cass um alles. Zuerst hatte ich aber nur um Text & Bild eine class und dann um alle drei eine class gemacht damit es immer nach drei Bildern einen umbruch ergitbt. Im responsive funktionierte das jedoch nicht und ich musste es ändern. Schluussendlich konnte ich dann dur die vielen Klassen width: 50% und schliesslich width: 100% anwenden.
Weiterstöbern
Das Weiterstöbern war ziemlich einfach. Ich konnte dort ebenfalls mit flex-direction: column; arbeiten.
Über uns
Die Über uns Seite war ebenfalls ziemich einfach. Das einzige Problem war der Text unter dem Bild denn bei einem mittel grossen Bildschirm ist der Text entweder zu lang oder zu kurz. (ragt über den Bild rand oder ist zu weit innen.)
Warenkorb
Der Warenkorb war ziemlich knifflig im responsive. Ich habe mit vielen Klassen gearbeitet und einige Elemente irgendwie zusammengewürfelt damit es eine schöne Optik ergab. Das war jedoch ziemlich blöd da dadurch das responsive verkompliziert wurde. Am schwierigsten war das "entfernen" denn ich hatte es mit position: absolute; platziert. Über 620px ist das entfernen einfach links in der Ecke des Bildes aber sobald es unterhalb von 620px ist, ist das "entfernen" ziemlich wirr irgendwo platziert da ich keine Lösung dafür gedfunden habe. Ansonsten bin ich ziemlich zufrieden.
Feedback
Überarbeitung?
Selbstreflexion
Methodenkompetenz
Ich konnte bei diesem Auftrag sehr motiviert und produktiv arbeiten da es mir viel Spass gemacht hat. Jedoch habe ich sehr viel Zeit dafür gebrauch da ich zwischendurch noch krank war. Zudem waren einige Dinge wie der Warenkorb ziemlich aufwändig.
Fachkompetenz
Mit meinem Wissen das ich bereits hatte konnte ich ein gutes Grundgerüst aufbauen. Meine Grundkentnisse wurden gefestigt und ich habe viele neue tags/codes etc. kennengelernt.
Sozialkompetenz
Ich konnte das erste Mal mit dem Grafiker zusammenarbeiten. Durch MF und MK konnte ich viel dazu lernen und das hat mich weiter gebracht.
Selbstkompetenz
Ich habe versucht möglichst selbstständig zu arbeiten und habe mir wenn nötig Unterstützung geholt. Ich denke hätte ich bei manchen Dingen früher um Hilfe gebeten dann wäre ich viel schneller gewesen. Trozdem bin ich sehr zufrieden und stolz da bijoux für mich ein Herzensprojekt war. Ich hätte noch Stunden lang daran weiter arbeiten können und alles perfektionieren. Diese Übung hat mich sehr motiviert.