Workshop Interaktion/Module Web

Wir haben uns die Kiko Milano Webseite angeschaut.

(Aktueller Link: https://www.kikocosmetics.com/de-de/)

Zuordnung

Dazu haben wir die Module der Startseite in die Kategorien Navigation, Call-to-Action, Text- und Bildelemente, Filter- und Formularelemente, Animation- und Teaserelemente zugeordnet. Des Weiteren haben wir die Kriterien des Interaktiondesigns zu den einzelnen Kategorien zugeordnet.

Zielgruppe: Personen mit mittleren bis höherem Budget, die sich für Kosmetik und Beauty-Produkte interessieren.

Website-Raster

Analyse der Mediamarkt Webseite

Wir haben uns die Webseite von Mediamarkt angeschaut und dabei haben wir nach kurzem Herumprobieren ein passendes Raster der Webseite zuweisen können, bestehend aus einem 12er Raster. Ein 6er Raster hat ebenso gut funktioniert, aber da ist der Footer dann aber aus dem Raster gefallen.

Raster und Rhythmus

Analyse und Rasterableitung der Typo-Website Editorial Sans von Pangram Pangram Foundry

(Analyse der vorherigen Version der Webseite; Link zur aktuellen Version der Website: https://pangrampangram.com/products/editorial-sans)

Reinzeichnung der Module

Analyse und Rasterableitung der Type-Website GT Ultra von Grilli Type

(Aktuelle Link zur Website: https://www.gt-ultra.com) )

Reinzeichnung der Module

Zusammengefügte Reinzeichnungen beider Webseiten

Typo-Website

Aus den analysierten und abgeleiteten Rastern und Varianten haben wir dann schlussendlich den Aufbau unserer Webseite erstellt.

Folglich ist unsere Gliederung:

• Einleitung

• Schriftschnitte

• Glyphen

• Geschichte

• Designer/Type Studio

• Anwendungsbeispiele

Moodboards

Mit unserem fertigen Aufbau ging es damit weiter, eine visuelle Richtung der Webseite festzulegen. Dazu habe ich Ideen gesammelt, die für die Typo gut funktionieren.

Dabei sind diese drei Konzepte entstanden:

1. Ein verspieltes, freundliches Konzept mit weichen Pastellfarben, Sticker-Elementen und Y2K-Ästhetik. Die Schrift Lato wirkt hier zugänglich und leicht, besonders in Kombination mit sanften Verläufen, runden UI-Elementen und illustrativen Details

2. Ein kontraststarkes, typografiebetontes Konzept, das mit Schwarz-Weiß-Layouts, kräftigen Headlines und einer reduzierten Farbpalette (z. B. Orange als Akzent) arbeitet. Hier steht die Typografie selbst im Vordergrund → klar, plakativ und strukturiert. Die Lato wird dabei als funktionale und moderne Serifenlose eingesetzt.

3. Ein atmosphärisches, weiches Konzept mit Farbverläufen und sanfter Typografie. Die Lato übernimmt hier eine ruhige, neutrale Rolle, während Farbe und Bildsprache Emotion und Wärme transportieren.

Probe der Moodboards in ersten Entwürfen

Um die Konzepte zu prüfen, ob sie auch so umsetzbar sind, und einen Favoriten zu finden, habe ich die ersten drei Sections der Webseite mit Hilfe meiner Ideensammlung ausgefüllt. Dabei habe ich versucht, die Farbkonzepte und grafische Elemente aus den Moodboards in erste Entwürfe zu übertragen.

Ausarbeitung zweier Entwürfe

Da ich anfangs noch nicht ganz entscheiden konnte, ob ich das Konzept der ersten oder der zweiten Moodboard mehr mag und dementsprechend diese als Konzept meiner Webseite auswähle, habe ich erstmals noch beide weiter ausgearbeitet.

Am Ende habe ich mich dafür entschieden, mit dem Konzept des zweiten Moodboards weiterzuarbeiten.

Prozess der Ausarbeitung der Webseite

Als erstes habe ich die Webseite mit grafischen Elementen wie Bildern ausgefüllt, die als Gestaltungsvorlage für die dann später eingefügten Animationen dienten. Dazu habe ich die ersten Änderungen am Rhythmus vorgenommen, wie beispielsweise bei den Einblicken in die Schriftschnitte, wo ich aus zwei Textmodulen einen großen Textmodul erstellt habe. Vor den allgemeinen Informationen der Glyphen habe ich zudem ein Bild als Referenz eine Animation eingefügt, damit sich auch da der Rhythmus bessert. Ebenso habe ich ab der Section der Geschichte bis zur Section des Designers den Hintergrund auf Orange geändert, um mehr Abwechslung und Spannung zu erzeugen. Im nächsten Schritt habe ich die einzelnen Texte geschrieben und ausgefüllt. Des Weiteren habe ich die Schriftgrößen angepasst, da das zuvor ein ziemliches Chaos war. Letztendlich habe ich auch noch angefangen, verschiedene Elemente der Interaktion zu Prototypen, wie Hover-Effekte oder On-Click Elemente.

Die letzten Sections, besonders Geschichte und Designer, wirkten zu statisch und boten kaum Abwechslung. Deswegen habe ich hier nochmal versucht den Rhythmus und die Module zu ändern bzw. anzupassen. Eine weitere größere Änderung war der Glyphen-Inspektor, der anfangs noch ziemlich langweilig war. Deswegen habe ich hier mehr Auswahlmöglichkeiten zwischen verschiedenen Sprachen und Arten der Glyphen hinzugefügt, damit da mehr Interaktion besteht.

Mit dem Rhythmus der zwei Sections der Geschichte und des Designers war ich aber immer noch nicht zufrieden. Aus diesem Grund habe ich hier noch mal mit der Anordnung und der Größer der Module experimentiert, bis ich das Ergebnis stimmig und zufriedenstellend fand.

Animationen

Während ich am Rhythmus der Webseite gefeilt und bereits mit dem Prototypen begonnen habe, habe ich gleichzeitig die Animationen mit Adobe AfterEffects erstellt.

Auf meiner Webseite befinden sich eigentlich drei Arten von Animationen:

• Echo-Effekt

• Morphing

• Morphing mit Vektoren

Hier sind meine Animationen:

Echo-Effekt

Morphing

Morphing mit Vektoren

Zum Schluss habe ich noch ein kleines Logo gestaltet, dass man oben in der Navigationsleiste der Webseite sehen kann.

Reinzeichnung der Desktop-Version

Styleguide

Screencast der Desktop-Version

Figma-Link zum Prototypen der Desktop-Version

https://www.figma.com/proto/jaaCkuUL0QCghM3pi9rW98/Typo-Website?page-id=588%3A909&node-id=597-910&viewport=-188%2C28%2C0.08&t=RTWlwZVMtOCmyEex-1&scaling=scale-down-width&content-scaling=fixed&starting-point-node-id=597%3A910&show-proto-sidebar=1

Reinzeichnung der Mobile-Version

Screencast der Mobile-Version

Figma-Link zum Prototypen der Mobile-Version

https://www.figma.com/proto/jaaCkuUL0QCghM3pi9rW98/Typo-Website?page-id=963%3A6836&node-id=963-6837&viewport=-74%2C-33%2C0.29&t=ienhlEdyMs52J53T-1&scaling=scale-down&content-scaling=fixed

Plakate

Zur diesjährigen Sommerwerkschau sollten wir drei verschiedene Plakate zu unserer Typo-Website entwerfen.