DD2 - Typowebsite

Typografie-Website zur Schriftart „Source Code Pro“ von Paul D. Hunt.

Workshop Interaktion / Module Web

Florian und ich haben in dieser Übung die verschiedenen Module der Maserati-Website in die Kategorien Navigation, Call-to-Action, Text- und Bildelemente, Filter-Elemente, Formular-Elemente, Animations-Elemente und Teaser-Elemente eingeteilt. Dabei haben wir uns neben der Startseite auch verschiedene Unterseiten angeschaut. Im nächsten Schritt haben wir zugeordnet, welche der wichtigen Kriterien für Interaktionsdesign in den einzelnen Modulen vorkommen. Als Zielgruppe haben wir uns auf Menschen mit einem großen Budget festgelegt, da Maserati Luxusautos sind.

Maserati Website!

Zuordnung!

Website-Raster: Analyse Websites allgemein

Florian und ich haben uns die Website „Back Market“ (https://www.backmarket.de/de-de ) mit ihren Unterseiten angesehen. Wir haben dann versucht das verwendete Raster dieser Webseite abzuleiten. Dabei sind wir relativ schnell auf ein 12-Spalten-Raster mit 240 Margin und 27 Gutter gekommen. Einige Elemente, wie der Footer, passten sehr gut hinein. Viele Elemente fielen jedoch auch aus dem Raster heraus.

Recherche zur Schriftart "Source Code Pro"

PDF

PDF

Raster und Rhythmus

Rasterableitung

Wir haben uns zwei Typografie Webseiten angesehen.

„Exat“ (https://exat.hottype.co/)
„Roboto-Serif“ (https://fonts.withgoogle.com/roboto-serif))

Von diesen haben wir dann die Raster und die einzelnen Module abgeleitet. Leider konnten wir für die „Roboto-Serif“-Webseite kein passendes Raster finden, weshalb wir zunächst das Raster der „Exat“-Webseite verwendet haben.

Webseite Exat!

Module Webseite Exat!

Webseite Roboto-Serif!

Module Webseite Roboto-Serif!

Raster zusammenfügen

Danach haben wir beide Module und Raster zusammengefügt. Als Raster haben wir das von der „Exat“-Webseite verwendet. Es handelt sich um ein 12-Spalten-Raster mit 80 Margin und 20 Gutter. Anschließend haben wir die Module der „Roboto-Serif“-Webseite an das Raster angepasst.

Den Modulbaukasten haben wir so reduziert, dass sich keine Module wiederholten. Einige fehlende Elemente Module haben wir dann noch ergänzt.

Varianten

Anschließend haben wir den Modulbaukasten ausgedruckt und alle einzelnen Module ausgeschnitten. So konnten wir verschiedene Varianten legen und ein Gespür für einen guten Rhythmus entwickeln. Anschließend haben wir diese Varianten in Figma übertragen.

Reinzeichnung

Danach habe ich ein Mockup nach der vorgegebenen Gliederung erstellt. Dabei habe ich die Module aus dem Modulbaukasten verwendet und mich von der Rhythmusübung inspirieren lassen.

Typo-Website

Moodboards

Entwurf

Auf Basis des Mockups und der Gliederung habe ich für jedes Moodboard zunächst die ersten drei Abschnitte gestaltet. Anschließend habe ich mich für einen Stil entschieden und die Sektionen zur vollständigen Website ergänzt und ständig überarbeitet.