In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
Hobbywebsite: Eiskunstlaufkufen
Dokumentation der Erstellung einer Website über mein Hobby Eiskunstlauf. Im Mittelpunkt stehen die Kufen.
Umsetzung in Figma!
Handyanwendung in Figma umgesetzt!
Umsetzung in Webflow!
Verschiedene Designs von Eiskunstlaufkufen und Kufenschonern. Die Skizze soll verdeutlichen, dass es viele verschiedene Designs gibt, um das Gewicht der Kufe zu reduzieren.
Die Stickereien sollen die Spuren sichtbar machen, die bestimmte Elemente auf dem Eis hinterlassen. Die Skizze zeigt eines dieser Elemente, die Spirale.
Die Skizze soll den richtigen Gebrauch von Kufenschonern verdeutlichen.
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.
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
©Laura Beier
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.
Ausarbeitung der Bildexperimente.
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.
Schlussendlich habe ich mich für die Schriftart Montserrat und Crimson Text für die Überschriften entschieden.
Bildsequenzen verschiedener Sprünge!
©Laura Beier
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.
©Laura Beier
©Laura Beier
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.
©Laura Beier
Im zweiten Semester habe ich die Website in Webflow umgesetzt!
Ein Projekt von
Laura Beier
Fachgruppe
KommunikationsdesignArt des Projekts
Keine Angabe
Zugehöriger Workspace
Digital Design (KD1)Entstehungszeitraum
Wintersemester 2024 / 2025