Fertige Website
Umsetzung in Figma!
Handyanwendung in Figma umgesetzt!
Umsetzung in Webflow!
Moodboard 1 - Zeichnungen
Verschiedene Designs von Eiskunstlaufkufen und Kufenschonern. Die Skizze soll verdeutlichen, dass es viele verschiedene Designs gibt, um das Gewicht der Kufe zu reduzieren.
Moodboard 2 - Sticken
Die Stickereien sollen die Spuren sichtbar machen, die bestimmte Elemente auf dem Eis hinterlassen. Die Skizze zeigt eines dieser Elemente, die Spirale.
Moodboard 3 - Mixed Media
Die Skizze soll den richtigen Gebrauch von Kufenschonern verdeutlichen.
Ausarbeitung Moodboards
Die Grafik der Spirale (letztes Bild) wurde schließlich verworfen, da sie nicht zum übrigen Stil passte.
Bildexperimente!
Ich habe den Kontrast erhöht, um die Bilder kühler erscheinen zu lassen, da dies zu der Sportart passt. Dann habe ich mehrere Bilder übereinander gelegt, um einen Bewegungseffekt zu erzielen.
Mockups
Inhaltliches Raster
1. Einführung / Grundlagen (allgemeine Einführung für Neueinsteiger)
- zum Eiskunstlaufen benötigt man eine Eisfläche & Schlittschuhe
--> neben den passenden Schlittschuh, ist mit das wichtigste, die Kufen
2. Benötigte Ausrüstung (Material / Werkzeuge, die man fürs Hobby braucht)
- verschiedene Leistungskategorien erklären, in denen Kufen einsortiert werden können
3. Essentials (1 bis 2 Grundlagen, die erklärt werden)
- verschiedene Kufennarten erklären
--> in Leistungskategorie einordnen & Besonderheiten erklären
4. Tipps & Tricks (praktische Tipps, häufig auftretende Fehler, Optimierungshinweise)
- Kufenpflege --> Kufenschoner, Schleifen
- verschiedene Kufenlänge, je nach Schuhgröße
- Montage
5. Fachbegriffe (Glossar von speziellen Begriffen & Erklärungen)
- Radius, Zacken, Kanten
6. Konkrete Sache Erklären (zb. einen bestimmten Sprung)
- Element Spirale --> Flieger
Mockups in Figma!
https://www.figma.com/design/dSIQWWfLP2Z49mqcxhZdtg/Digital-Design---Website-Hobby?node-id=0-1&t=3Mv5GuND6V2ZuWRk-1
Erster Entwurf mit Bildern in Figma. Dabei fiel auf, dass die Farben der Grafik der Leistungskategorien nicht passten. Außerdem wirkte das Design insgesamt zu einheitlich und langweilig. Die Idee war, die Bildexperimente zu erweitern und einzufügen.
Bildexperimente
Ausarbeitung der Bildexperimente.
Ausarbeitung Mockups
Experimente zum Startbild der Website!
Das letzte Bild mit der Grafik des Schoners und der Typo wurde erstmal eingefügt. Die Position der Typo habe ich noch angepasst.
Überarbeitung & Ergänzung von Grafiken!
Mockups!
Bei diesen Mockups habe ich dann die Bildexperimente eingefügt. Eine Variante viel raus da zu viel Text untereinander Stand. Eine weitere Variante viel raus, da ich ein Element nicht in die andere Richtung weiterführen konnte, da der Inhalt fehlte. Die war dann die Erstellung von Bildsequenzen, die man anstelle einiger Bilder einfügt.
Schriftarten!
Schlussendlich habe ich mich für die Schriftart Montserrat und Crimson Text für die Überschriften entschieden.
Zwischenpräsentation
Bildsequenzen
Bildsequenzen verschiedener Sprünge!
Anfangssequenz!
Verschiedene Varianten einer Sequenz für das Titelbild der Website. Da unten Bildsequenzen eingefügt wurden, war das Titelbild zu langweilig. Schließlich habe ich die letzte Variante in die Website eingefügt.
Prototyping
Variante mit statischem Text in Figma!
Variante mit dynamischen Text in Figma!
Handyanwendung
Figma!
Das Menü habe ich aus Platzgründen in ein Burger-Menü geändert. Die meisten Elemente habe ich einfach untereinander angeordnet. Den Slider zum Klicken habe ich in einen Slider zum Swipen umgewandelt. Außerdem habe ich einen weiteren Slider eingebaut, da die Seite sonst viel zu lang geworden wäre. Zusätzlich habe ich die Hover-Effekte entfernt, da sie auf dem Handy nicht funktionieren.
Abschlusspräsentation
Umsetzung in Webflow
Im zweiten Semester habe ich die Website in Webflow umgesetzt!
