Incom ist die Kommunikations-Plattform der Hochschule Hof Kommunikationsdesign

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Hochschule Hof Kommunikationsdesign mehr erfahren

Typo-Website Roboto Dokumentation

Typo-Website Roboto Dokumentation

Eine Website, die die Schriftart Roboto vorstellt.

1. Titelbild

RobotoTitelbild.pngRobotoTitelbild.png

2. Workshop Interaktion/Module Web

In dieser Übung haben Maxi und ich die verschiedenen Module der Website Drops in die verschiedenen Kategorien (Navigation, Call-to-Action, Text- und Bildelemente, Filter-Elemente, Formular-Elemente, Animations-Elemente und Teaser-Elemente) eingeteilt.

Anschließend haben wir zugeordnet, welche der wichtigen Kriterien für Interaktionsdesign in den einzelnen Modulen vorkommen.

Als Zielgruppe legten wir uns auf jüngere Personen fest, die eine Sprache lernen wollen. Die Website ist modern gestaltet, mit vielen Illustrationen, Animationen und einem starken Kontrast zwischen gelb und violett.

Website:

image.pngimage.png
image Kopie.pngimage Kopie.png
image2.pngimage2.png
image3.pngimage3.png
image4.pngimage4.png
image5 Kopie.pngimage5 Kopie.png
image5.pngimage5.png
image6.pngimage6.png
image6 Kopie.pngimage6 Kopie.png

Zuordnung:

kriterien.pngkriterien.png
navigation.pngnavigation.png
call-to-action.pngcall-to-action.png
textundbild.pngtextundbild.png
textundbild2.pngtextundbild2.png
filter.pngfilter.png
animation.pnganimation.png
formular.pngformular.png
teaser.pngteaser.png
code.pngcode.png
code1.pngcode1.png
code2.pngcode2.png

3. Website-Raster: allgemeine Analyse

Bildschirmfoto 2025-04-13 um 17.04.00.pngBildschirmfoto 2025-04-13 um 17.04.00.png
Bildschirmfoto 2025-04-13 um 17.04.17.pngBildschirmfoto 2025-04-13 um 17.04.17.png
Bildschirmfoto 2025-04-13 um 17.04.36.pngBildschirmfoto 2025-04-13 um 17.04.36.png
Bildschirmfoto 2025-04-13 um 17.05.01.pngBildschirmfoto 2025-04-13 um 17.05.01.png
Bildschirmfoto 2025-04-13 um 17.05.13.pngBildschirmfoto 2025-04-13 um 17.05.13.png

Bei der Übung Raster ableiten, haben Maxi und ich uns für die Website DROPS entschieden und sind zu dem Schluss gekommen, dass es sich um ein 12-Spalten Raster handelt.

4. Raster und Rhythmus

Ich habe für die Modulableitung die Webseiten

https://fonts.ninja/font/Blaze-Type-Khalos-Display-558854

https://forum-typografie.de/schriftwechsel/nn-konrad/

https://f37foundry.com/fonts/f37-bergman

herausgesucht.

Schlussendlich habe ich mich für F37 foundry entschieden. Es war nicht möglich, ein normales Raster herauszufinden, weshalb ich die Elemente in ein 12-Spalten-Raster eingepasst habe, um die Module später besser verwenden zu können.

Maxi hat die Website fontwerk (https://fontwerk.com/de/fonts/nice-collection)) abgeleitet, zusammen hatten wir dann folgende Module:

https://www.figma.com/design/ixoP7rV4A0zKfx6mMiLADH/Untitled?node-id=73-505&t=63JZm8DqgqOcgJza-1

Ableitung F37 foundry:

1.png1.png
2.png2.png
3.png3.png
4.png4.png
5.png5.png
6.png6.png
7.png7.png

Ableitung fontwerk (Maxi):

m1.pngm1.png
m2.pngm2.png
m3.pngm3.png
m4.pngm4.png
m5.pngm5.png

Zusammengefügte Version:

i1.pngi1.png
i2.pngi2.png
i3.pngi3.png
i4.pngi4.png
i5.pngi5.png
i6.pngi6.png
i7.pngi7.png
i8.pngi8.png
i9.pngi9.png

Varianten:

Wir haben mit der ausgedruckten Version der Module verschiedene Anordnungen ausprobiert und angepasst und diese anschließend in figma nachgebaut.

Nach den ersten drei Varianten ist uns aufgefallen, dass wir keine Textfelder in unseren Modulen haben, und haben diese in Version 4 hinzugefügt.

https://www.figma.com/design/ixoP7rV4A0zKfx6mMiLADH/Untitled?node-id=123-2

v1_1.pngv1_1.png
v1_2.pngv1_2.png
v1_3.pngv1_3.png
v1_4.pngv1_4.png
v1_5.pngv1_5.png
v1 Kopie.jpegv1 Kopie.jpeg
v1.jpegv1.jpeg

v2_1.pngv2_1.png
v2_2.pngv2_2.png
v2_3.pngv2_3.png
v2_4.pngv2_4.png
v2_5.pngv2_5.png
v2 Kopie.jpegv2 Kopie.jpeg
v2.jpegv2.jpeg

v3_1.pngv3_1.png
v3_2.pngv3_2.png
v3_3.pngv3_3.png
v3_4.pngv3_4.png
v3 Kopie.jpegv3 Kopie.jpeg
v3.jpegv3.jpeg

v4_1.pngv4_1.png
v4_2.pngv4_2.png
v4_3.pngv4_3.png
v4_4.pngv4_4.png
v4_5.pngv4_5.png
v4 Kopie.jpegv4 Kopie.jpeg
v4.jpegv4.jpeg

Gliederung:

aus den Modulen habe ich dann eine Website gebaut, die der vorgegebenen Gliederung entspricht.

Bildschirmfoto 2025-04-21 um 16.51.00.pngBildschirmfoto 2025-04-21 um 16.51.00.png
Bildschirmfoto 2025-04-21 um 16.51.14.pngBildschirmfoto 2025-04-21 um 16.51.14.png
Bildschirmfoto 2025-04-21 um 16.51.25.pngBildschirmfoto 2025-04-21 um 16.51.25.png
Bildschirmfoto 2025-04-21 um 16.51.41.pngBildschirmfoto 2025-04-21 um 16.51.41.png
Bildschirmfoto 2025-04-21 um 16.51.50.pngBildschirmfoto 2025-04-21 um 16.51.50.png

5. Typo-Website

Moodboards:

Bildschirmfoto 2025-04-22 um 17.51.58.pngBildschirmfoto 2025-04-22 um 17.51.58.png
Bildschirmfoto 2025-04-22 um 17.54.18.pngBildschirmfoto 2025-04-22 um 17.54.18.png
Bildschirmfoto 2025-04-22 um 17.54.34.pngBildschirmfoto 2025-04-22 um 17.54.34.png
Bildschirmfoto 2025-04-22 um 17.54.46.pngBildschirmfoto 2025-04-22 um 17.54.46.png

die ersten drei Sections:

Beim Gestalten der ersten drei Sections meiner Website nach den unterschiedlichen Mooboards sind mir folgende Dinge aufgefallen.

- die linke Variante gefällt mir ganz gut, allerdings weiß ich noch nicht, ob  es nicht zu langweilig wird, und wie ich die gelben Akzente setzen soll.

- bei der mittleren Variante kann ich mir gut vorstellen, dass interessante Animationen und andere Eye-Catcher möglich sind, allerdings wirkt es mir so noch zu aufgeräumt.

- die rechte Variante, die vor allem aus Linien bestehen soll, ist schwierig umzusetzen, da die Linien sehr dünn und dadurch schwierig zu erkennen sind. Außerdem bin ich hier noch nicht zufrieden mit der Farbkombination.

Bildschirmfoto 2025-04-23 um 15.49.39.pngBildschirmfoto 2025-04-23 um 15.49.39.png

erste Überarbeitung

Ich habe das erste Moodboard gewählt und mein Mockup weiter erstellt. Die ersten drei Sections habe ich nochmal überarbeitet, sodass es besser zum Moodboard passt und spannender aussieht.

Bildschirmfoto 2025-05-07 um 09.44.46.pngBildschirmfoto 2025-05-07 um 09.44.46.png
Bildschirmfoto 2025-05-07 um 09.45.25.pngBildschirmfoto 2025-05-07 um 09.45.25.png
Bildschirmfoto 2025-05-07 um 09.44.59.pngBildschirmfoto 2025-05-07 um 09.44.59.png
Bildschirmfoto 2025-05-07 um 09.45.15.pngBildschirmfoto 2025-05-07 um 09.45.15.png

zweite Überarbeitung:

Ich habe die Linien-Idee durch Auflockerung anhand von großer Typographie ersetzt und mein Mockup bis zum Kapitel Geschichte erstellt. In den Textfeldern steht jetzt sinnvoller Inhalt und ich habe bereits einige Ideen für Animationen.

Das Glyphenraster muss ich noch einmal überarbeiten und in mehrere Teile unterteilen, wahrscheinlich als Dropdown Elemente.

Bildschirmfoto 2025-05-13 um 23.16.51.pngBildschirmfoto 2025-05-13 um 23.16.51.png
Bildschirmfoto 2025-05-13 um 23.17.22.pngBildschirmfoto 2025-05-13 um 23.17.22.png
Bildschirmfoto 2025-05-13 um 23.17.34.pngBildschirmfoto 2025-05-13 um 23.17.34.png

Zwischenpräsentation

Bis zur Zwischenpräsentation habe ich verschiedene Dinge überarbeitet und noch fehlende Inhalte eingefügt.

Das Element zum Einblick in die verschiedenen Schriftschnitte ist jetzt keine Interaktion mehr, sondern wird eine Animation, die automatisch zwischen den verschiedenen Schnitten wechselt.

Die zentrierten Texte sind jetzt linksbündig.

Das Glyphenraster habe ich in mehrere Dropdowns unterteilt und die Rahmenlinien habe ich gelöscht.

Bildschirmfoto 2025-07-17 um 13.01.17.pngBildschirmfoto 2025-07-17 um 13.01.17.png
Bildschirmfoto 2025-07-17 um 13.01.30.pngBildschirmfoto 2025-07-17 um 13.01.30.png
Bildschirmfoto 2025-07-17 um 13.01.57.pngBildschirmfoto 2025-07-17 um 13.01.57.png

zwischenpräs.pdf PDF zwischenpräs.pdf

Abschlusspräsentation

Bis zur Abschlusspräsentation habe ich vor allem Animationen und Interaktionen, sowie die noch fehlenden Inhalte der Gliederung eingebaut und die Abstände versucht anzupassen.

Außerdem ist die Interaktion zu den Merkmalen rausgefallen.

Alle Textfelder sind am linken Rand linksbündig angeordnet.

Ich habe einen Darkmode/invertierten Modus eingefügt und eine Handyversion erstellt.

Das Type-Tester Modul ist jetzt funktionstüchtig und nochmal in der Anordnung angepasst.

Das Menü habe ich überarbeitet, sodass die Schrift noch größer ist.

Beim Portrait des Designers hatte ich Schwierigkeiten, es an die Website anzupassen, nach einigen Versuchen habe ich dann jedoch eine Version erstellt, die gut gepasst hat.

Zudem habe ich ein Logo erstellt.

Bei den Merkmalen habe ich mich dazu entschlossen, die Felder so klein zu lassen und dafür ein Overlay einzubauen, mit dem man sie auch in groß anschauen kann.

texte.pngtexte.png
blau.pngblau.png
type.pngtype.png
menü.pngmenü.png
portraitEntw.pngportraitEntw.png
logo.pnglogo.png
merkmale.pngmerkmale.png

digital design abschlusspräsi.pdf PDF digital design abschlusspräsi.pdf

Nach der Abschlusspräsentation habe ich noch mein Logo und die Handyversion überarbeitet.

ogoNEU.pngogoNEU.png

Animationen:

6. Reinzeichnung

1.png1.png
2.png2.png
3.png3.png
4.png4.png
5.png5.png
6.png6.png

7. Styleguide

Bildschirmfoto 2025-07-17 um 14.14.44.pngBildschirmfoto 2025-07-17 um 14.14.44.png
Bildschirmfoto 2025-07-17 um 14.15.06.pngBildschirmfoto 2025-07-17 um 14.15.06.png

8. Screencast

9. Figma-Link Prototyp

Ein Projekt von

Fachgruppe

Kommunikationsdesign

Art des Projekts

Keine Angabe

Zugehöriger Workspace

Digital Design II

Entstehungszeitraum

Sommersemester 2025