Disclaimer
Inhalte auf dieser Seite, die mit einer ¹ gekennzeichnet sind, wurden mithilfe von Künstlicher Intelligenz erstellt. Diese wurde dabei als Recherche-Tool, zum Zusammenfassen oder als Korrekturhilfe für diese Texten genutzt.
[1] Analyse
Im Rahmen der Grundlagen zu User Interface (UI) und Interaction Design (IxD) sollen theoretische und praktische Aspekte wie Usability, User Centered Design sowie Begriffe wie Informationsarchitektur, Layout, Typografie etc. behandelt werden.
Als zentrale Übung dient die Analyse und einfache Skizze (Scribble) der Struktur und Inhalte der Website des Schwäbischen Albvereins.
Dabei sollen Aufbau, Elemente und Gestaltung verständlich beschrieben und benannt werden.
Die Ergebnisse dieser Analyse wurden in einer Präsentation zusammengefasst, die hier angeschaut oder heruntergeladen werden kann.¹
PDF Dokument
[2] Grundelemente: Kompositions-und Strukturübungen
Bei dieser Aufgabe soll man einfache grafische Elemente wie Punkte, Kreise oder Quadrate verwenden, um bestimmte Begriffspaare (z. B. groß – klein, geordnet – ungeordnet) als Skizzen darzustellen.
Wichtig ist dabei eine abstrakte Darstellung, also keine Bilder oder Symbole. Es soll erforscht werden, wie man durch Größe, Anzahl, Anordnung und Position eine bestimmte Wirkung oder Aussage erzeugen kann – zum Beispiel Tiefe, Ordnung oder Spannung.
GROß UND KLEIN
Hier zeigt sich dass man durch die Größe von Objekten auch eine gewisse Tiefe angeben kann.
OBEN UNTEN
Die vertikale Positionierung erzeugt eine visuelle Hierarchie und kann Assoziationen wie Leichtigkeit (oben) oder Schwere (unten) vermitteln.
NAH UND FERN
Durch unterschiedliche Abstände zum Bildrand oder zur Bildmitte lässt sich Nähe oder Distanz simulieren – ein einfaches Mittel zur Darstellung von Raum.
STABIL UND INSTABIL
Symmetrische oder mittig platzierte Formen wirken standhaft, während schräge oder ungleich verteilte Elemente Unsicherheit und Bewegung erzeugen.
STREUUNG
Viele gleichartige Elemente, die scheinbar zufällig im Raum verteilt sind, vermitteln den Eindruck von Weite, Offenheit oder Chaos.
GRUPPE
Durch Nähe und Gleichheit entsteht der Eindruck von Zusammengehörigkeit – das Auge fasst ähnliche oder nahe beieinanderliegende Elemente automatisch zur Gruppe.
GEORDNET UND UNGEORDNET
Eine regelmäßige Anordnung vermittelt Struktur und Ruhe, während eine freie Streuung Dynamik und Zufälligkeit ausdrückt.
STRUKTUR
Wiederholungen, Rastern und klare Anordnungen erzeugen eine lesbare Ordnung, die Orientierung und Systematik vermittelt.
SYMMETRIE
Spiegelungen oder Achsen erzeugen ein Gleichgewicht im Bild, das Harmonie, Stabilität und Ruhe ausstrahlt.
AUSGRENZUNG
Ein einzelnes, isoliertes Element hebt sich klar von einer Gruppe ab und erzeugt so ein Gefühl von Trennung oder Ausgeschlossensein.
[3] Vom Punkt zur Linie zur Fläche
Bei dieser Aufgabe werden Linien als grundlegendes Gestaltungsmittel in ihrer Wirkung auf einer quadratischen Fläche untersucht.
Durch verschiedene Anordnungen – von einer einzelnen Linie bis hin zu mehreren parallelen Linien – entsteht eine erste Auseinandersetzung mit Struktur und Rhythmus.
Anschließend werden Variationen in Stärke, Länge und Linienführung (gerade, gebogen, geknickt) erprobt, um die Ausdrucksmöglichkeiten der Linie weiter zu erforschen.
Ziel ist es, ein Gefühl für das Zusammenspiel von Form und Wirkung zu entwickeln.
Teilaufgabe 1
Eine einzelne Linie innerhalb der Fläche lenkt gezielt den Blick und kann je nach Position eine Richtung oder Spannung erzeugen.
Gleich lange, parallele Linien erzeugen Ruhe und Stabilität – sie strukturieren die Fläche und können als Rahmen oder Grenze wirken.
Unterschiedlich lange Linien brechen die Symmetrie und bringen eine leichte Unruhe oder Bewegung in die Komposition.
Viele parallele Linien bilden ein Raster, das Ordnung und Rhythmus schafft – die Fläche wirkt klar gegliedert und technisch.
Teilaufgabe 2
Eine einzelne Linie innerhalb der Fläche lenkt gezielt den Blick und kann je nach Position eine Richtung oder Spannung erzeugen.
Gleich lange, parallele Linien erzeugen Ruhe und Stabilität – sie strukturieren die Fläche und können als Rahmen oder Grenze wirken.
Unterschiedlich lange Linien brechen die Symmetrie und bringen eine leichte Unruhe oder Bewegung in die Komposition.
Viele parallele Linien bilden ein Raster, das Ordnung und Rhythmus schafft – die Fläche wirkt klar gegliedert und technisch.
[4] Basiskurs Typografie | Grundlagen
1. Schriftarten
Bei dieser Aufgabe geht es darum, unvollständige Buchstaben in vorgegebenen Schriftarten zu vervollständigen.
Dabei sollen Form, Stil und Gestaltungsprinzipien der jeweiligen Schrift genau beobachtet und übernommen werden.
Zusätzlich wurden die Schriftarten analysiert, ihre typischen Merkmale beschrieben und Informationen zum Schriftgestalter recherchiert.¹
Bei der Schriftart in der Knoblauch geschrieben wurde handelt es sich laut What the font um eine Schriftart aus der Rotis Familie.
Die Rotis wurde 1988 von Otl Aicher entwickelt und nach seinem Wohnort im Allgäu benannt. Die Schriftfamilie umfasst Serif-, Semi-Serif-, Semi-Sans- und Sans-Schnitte, die vielseitig kombinierbar sind und durch prägnante, offene Formen auffallen. Heute wird sie vor allem in Corporate Design, Logos und Leitsystemen genutzt, während sie im Fließtext teils als unruhig gilt.¹
Die Rotis wurde 1988 von Otl Aicher entwickelt und nach seinem Wohnort im Allgäu benannt. Die Schriftfamilie umfasst Serif-, Semi-Serif-, Semi-Sans- und Sans-Schnitte, die vielseitig kombinierbar sind und durch prägnante, offene Formen auffallen. Heute wird sie vor allem in Corporate Design, Logos und Leitsystemen genutzt, während sie im Fließtext teils als unruhig gilt.¹
Bei der Schriftart in der Putzeimer geschrieben wurde handelt es sich laut What the font um eine Schriftart aus der Courier Familie.
Courier ist eine monospaced Slab-Serif-Schrift, die 1955/56 von Howard "Bud" Kettler im Auftrag von IBM entworfen wurde. Sie zeichnet sich durch gleichbreite Buchstaben mit markanten Serifen aus und ist bis heute Standard in Screenwriting, technischem Satz und Programmierumgebungen, weil sie Format und Lesbarkeit in Monospaced-Darstellung zuverlässig gewährleistet.¹
Courier ist eine monospaced Slab-Serif-Schrift, die 1955/56 von Howard "Bud" Kettler im Auftrag von IBM entworfen wurde. Sie zeichnet sich durch gleichbreite Buchstaben mit markanten Serifen aus und ist bis heute Standard in Screenwriting, technischem Satz und Programmierumgebungen, weil sie Format und Lesbarkeit in Monospaced-Darstellung zuverlässig gewährleistet.¹
Bei der Schriftart in der Kaugummi geschrieben wurde handelt es sich laut What the font um eine Schriftart aus der Walbaum Familie.
Die klassizistische Antiqua Walbaum wurde um 1800 vom deutschen Schriftgießer Justus Erich Walbaum entwickelt und gilt als eine der „humansten“ Didone-Schriften – mit hoher Lesbarkeit, eleganten, offenen Formen und dezenter Germanität. Sie überzeugt heute mit zahlreichen optisch abgestimmten Schnitten, Ornament-Elementen und großer stilistischer Flexibilität.¹
Die klassizistische Antiqua Walbaum wurde um 1800 vom deutschen Schriftgießer Justus Erich Walbaum entwickelt und gilt als eine der „humansten“ Didone-Schriften – mit hoher Lesbarkeit, eleganten, offenen Formen und dezenter Germanität. Sie überzeugt heute mit zahlreichen optisch abgestimmten Schnitten, Ornament-Elementen und großer stilistischer Flexibilität.¹
Bei der Schriftart in der Unterhose geschrieben wurde handelt es sich laut What the font um eine Schriftart aus der Helvetica Familie.
Die Helvetica wurde 1957 vom Schweizer Typografen Max Miedinger mit Input von Eduard Hoffmann entwickelt und zählt heute zu den bekanntesten serifenlosen Schriften weltweit. Sie zeichnet sich durch ihre schlichte, neutrale Formensprache mit klaren Proportionen und hoher Lesbarkeit aus, was sie zu einer der meistgenutzten Schriften im Corporate Design, Branding und öffentlichen Leitsystemen.¹
Die Helvetica wurde 1957 vom Schweizer Typografen Max Miedinger mit Input von Eduard Hoffmann entwickelt und zählt heute zu den bekanntesten serifenlosen Schriften weltweit. Sie zeichnet sich durch ihre schlichte, neutrale Formensprache mit klaren Proportionen und hoher Lesbarkeit aus, was sie zu einer der meistgenutzten Schriften im Corporate Design, Branding und öffentlichen Leitsystemen.¹
2. Buchstaben als Zeichen. Marke aus Schriftzeichen
Buchstaben dienen nicht nur dem Schreiben von Texten, sondern können auch als eigenständige Gestaltungselemente in Zeichen und Logos eingesetzt werden.
In dieser Aufgabe wird untersucht, wie typografische Formen zur Entwicklung markanter Signets genutzt werden können.
Ein gespiegeltes D wird mit einem darübergelegten L kombiniert; gemeinsam erinnert nun die Form des D's an ein C.
Ein T liegt über einem N und erzeugt einen Zaun oder eine Mauer.
Eine 8 wird mit einem in der Mitte geteilten R kombiniert – die Form wirkt wie eine Figur mit Kopf und Beinen oder wie ein Stuhl von vorn.
Aus L und Z entsteht ein Blitz: Das Z ist mittig geteilt, der lange Schaft des L bildet das Ende der Blitzform.
3. Sinn durch Form
In dieser Aufgabe soll die Bedeutung einzelner Begriffe wie Schneiden, Ordnen oder Stapeln durch typografische Gestaltung sichtbar gemacht werden.
Das Wort „Fallen“ ist fallend dargestellt. Je weiter ein Buchstabe hinten im Wort steht, desto tiefer ist er bereits gefallen.
So entsteht die Illusion, als fiele das gesamte Wort gerade nach unten.
Hier dreht sich das Wort „Drehen“. Es ist wie ein Rad gestaltet: Entweder passt es als Rad zum Thema, oder es dreht bzw. rollt um einen imaginären Mittelpunkt.
4. Sinn durch Bewegung
In dieser Aufgabe wird eine Animationssequenz zum Thema Bewegung konzipiert.
Der Titel „Bewegung“ soll dabei eine sichtbare Entwicklung durchlaufen und verschiedene Bewegungsarten darstellen.
Meine Idee hierbei war die einzelenen Buchstaben wie bei einer La Ola nach einander "Aufspringen" zu lasen um druch die Bewegung in der höhe der einzelnen Buchstabe Bewegung in das Wort zu bringen.
[5] Farbe
1. Farbverlauf Farbton
Diese Aufgabe erfordert die Gestaltung von Farbverläufen mithilfe von quadratischen Farbflächen.
Dabei werden für jede der drei Kategorien mindestens zwei Verläufe erstellt, die jeweils aus sieben Schritten bestehen
2. Farbkontraste
Diese Aufgabe erfordert die Gestaltung von Farbverläufen mithilfe von quadratischen Farbflächen.
Dabei werden für jede der drei Kategorien mindestens zwei Verläufe erstellt, die jeweils aus sieben Schritten bestehen
Hell-Dunkel-Kontrast
ist eigentlich weniger ein Farbkontrast, sondern ein Helligkeitskontrast. Es stehen sich ein sehr heller und ein sehr dunkler Farbton gegenüber.
ist eigentlich weniger ein Farbkontrast, sondern ein Helligkeitskontrast. Es stehen sich ein sehr heller und ein sehr dunkler Farbton gegenüber.
Kalt-Warm-Kontrast
gilt als der emotionalste und ausdrucksstärkste Farbkontrast. Unser Kälteempfinden hat seinen Ursprung in ganz elementaren Erlebnissen wie kalt = Wasser/Eis = Blau und heiß = Feuer = Rot.
gilt als der emotionalste und ausdrucksstärkste Farbkontrast. Unser Kälteempfinden hat seinen Ursprung in ganz elementaren Erlebnissen wie kalt = Wasser/Eis = Blau und heiß = Feuer = Rot.
Farbe-an-sich-Kontrast
(manchmal auch Farbe-zu-Farbe-Kontrast, Buntkontrast oder Farbton-Kontrast genannt) entsteht, sobald mindestens zwei, drei reine, leuchtende Farben, die im Farbkreis relativ weit auseinander liegen, aufeinander treffen.
(manchmal auch Farbe-zu-Farbe-Kontrast, Buntkontrast oder Farbton-Kontrast genannt) entsteht, sobald mindestens zwei, drei reine, leuchtende Farben, die im Farbkreis relativ weit auseinander liegen, aufeinander treffen.
Qualitätskontrast
Eine Farbe kann sehr rein, aber auch sehr getrübt sein. Die Farbqualität bezieht sich auf die Intensität einer Farbe zwischen Reinheit und Trübung, also den Reinheits- bzw. Sättigungsgrad. Daher wird dieser Kontrast teilweise auch Sättigungskontrast genannt.
Eine Farbe kann sehr rein, aber auch sehr getrübt sein. Die Farbqualität bezieht sich auf die Intensität einer Farbe zwischen Reinheit und Trübung, also den Reinheits- bzw. Sättigungsgrad. Daher wird dieser Kontrast teilweise auch Sättigungskontrast genannt.
Quantitätskontrast
betrifft die Flächengröße von zwei oder mehreren Farbflächen neben- und zueinander als auch die Farbfläche in Bezug auf die gesamte Farbfläche der Gestaltung. Proportionskontrast wäre ebenfalls ein passender Name. „Viel“ und „wenig“ bzw. „groß“ und „klein“ wären passende Beschreibungen.
betrifft die Flächengröße von zwei oder mehreren Farbflächen neben- und zueinander als auch die Farbfläche in Bezug auf die gesamte Farbfläche der Gestaltung. Proportionskontrast wäre ebenfalls ein passender Name. „Viel“ und „wenig“ bzw. „groß“ und „klein“ wären passende Beschreibungen.
Komplementärkontrast
„Komplementär“ steht für gegensätzliche, aber sich ergänzende Eigenschaften. Komplementäre Farben liegen sich im Farbkreis als Gegensatz gegenüber. Man nennt sie auch Ergänzungsfarben. Sie ergeben den stärksten Kontrast und sind damit besonders aufmerksamkeitsstark.
„Komplementär“ steht für gegensätzliche, aber sich ergänzende Eigenschaften. Komplementäre Farben liegen sich im Farbkreis als Gegensatz gegenüber. Man nennt sie auch Ergänzungsfarben. Sie ergeben den stärksten Kontrast und sind damit besonders aufmerksamkeitsstark.
Simultankontrast
Wie bei den anderen Kontrasten schon gesehen, werden Farben grundsätzlich relativ zur Umgebung wahrgenommen. Die Umgebungsfarbe bzw. -farben beeinflussen den wahrgenommenen Farbton und die Helligkeit. Nebeneinanderliegende Farbflächen besitzen also eine Wechselwirkung bezüglich des Farbkontrastes zueinander.
Wie bei den anderen Kontrasten schon gesehen, werden Farben grundsätzlich relativ zur Umgebung wahrgenommen. Die Umgebungsfarbe bzw. -farben beeinflussen den wahrgenommenen Farbton und die Helligkeit. Nebeneinanderliegende Farbflächen besitzen also eine Wechselwirkung bezüglich des Farbkontrastes zueinander.
2. Farbverlauf / Farbklima
Diese Aufgabe erfordert die Gestaltung von Farbverläufen und Farbklimata mithilfe von quadratischen Farbflächen.
Dabei wurden die Farben dieses mal aus einem dazugehörigen Bild entnommen.
[6] Informationsarchitektur und Navigationsstruktur
Bei dieser Aufgabe geht es darum, die bestehende Website des Albvereins Ulm in ihrer Struktur zu überarbeiten.
Dazu wird eine neue Informationsarchitektur entwickelt und in Form einer Sitemap visualisiert.
Bestehende Menüpunkte werden kritisch überprüft, gegebenenfalls gestrichen oder durch neue ergänzt.
Die Auswahl und Anordnung der Menüpunkte wird begründet und nachvollziehbar dokumentiert.
Wie in der Abbildung zu sehen, habe ich die ursprüngliche Informationsarchitektur und Navigationsstruktur der Website umfassend überarbeitet und an die Hauspseite des Albvereines angepasst.
- Aktivitäten: Neue Kategorien eingeführt und bestehende zusammengeführt, um eine klarere Struktur zu schaffen. Unterkategorien wie „Wander-/Rad&MTB sind Beispiele und können vom Verein bei Bedarf erweitert oder angepasst werden.
- Aktuelles (Newsletter & Termine): Newsletter und Termine in die gemeinsame Kategorie Aktuelles verschoben, da beide inhaltlich zusammengehören. Häufig ergeben sich zu veröffentlichten Newslettern passende Termine – und umgekehrt.
- Bildergalerie: Ebenfalls unter Aktuelles einsortiert, da sie oft in direktem Bezug zu Terminen und Beiträgen steht.
- Kontakt: Neue Kategorie für rechtlich verpflichtende Informationen wie Impressum und Datenschutzerklärung. Die Ansprechpartner wurden von „Der Verein“ hierher verschoben.
Insgesamt ist die Informationsarchitektur durch die Überarbeitung übersichtlicher und einfacher zu navigieren.
- Weniger, klar benannte Kategorien
- Zusammengehörige Inhalte sind näher beieinander
- Kürzere Wege und bessere Orientierung
Dadurch finden Nutzer schneller, was sie suchen.¹
[7] Wireframe & Mock-Up
Bei dieser Aufgabe geht es darum, den groben Aufbau einer Website inklusive Navigation und Content zu entwerfen.
Dabei werden verschiedene Menüarten und -typen (z. B. Tabs, Accordion, Pulldown-Menü, »Fat Menu«) untersucht und ihre jeweiligen Zustände dargestellt.
Zusätzlich wird mit unterschiedlichen Layouts und Anordnungen des Menüs experimentiert. Um die Zustände hervorzuheben, kommen neben Bold- und Light-Darstellungen auch zusätzliche Farben zum Einsatz.
Abschließend werden Wireframes für Desktop- oder Mobile-Ansichten entwickelt.
In diesem Wireframe zeige ich meine Version der Startseite des Schwäbischen Albvereins.
- Navigation: Oben eine einfache Leiste mit den in der vorherigen Aufgabe definierten Oberkategorien.
- Hero-Bereich: Titel mit Subzeile und Call‑to‑Action‑Button. Ein Bergpanorama trennt den Bereich visuell vom restlichen Inhalt; darin ist auch die Suche integriert.
- Abschnittstitel: Jede Startseitenkategorie hat eine klare Zwischenüberschrift für bessere Orientierung.
- Über uns & Fakten: Rechts Kacheln mit kurzen Fakten zum Albverein, daneben ein Auszug aus dem „Über uns“-Text.
- Aktuelles: Vorschau der neuesten Artikel mit kurzem Teasertext und passendem Bild.
- Termine: Liste mit Datum, Titel, optionalem Zusatztext und einem Button zu weiteren Informationen.
- Footer: Links Logo, kurzer Infotext und ein „Nach oben“-Button. Rechts die Navigationskategorien wie oben, vollständig aufgeklappt mit sichtbaren Unterpunkten.
In diesem Wireframe zeige ich meine Version der Newsletter-Übersicht.
- Navigation: Oben eine einfache Leiste mit den zuvor definierten Oberkategorien.
- Hero-Bereich: Auf Unterseiten erscheint nur ein klarer Seitentitel.
- Liste der Beiträge: Darunter eine chronologisch sortierte Übersicht (neueste oben). Jeder Beitrag enthält ein Bild, den Titel, einen kurzen Teaser und einen Button, der direkt zum vollständigen Artikel führt.
- Seitennavigation: Unter der Liste ermöglicht eine Pagination den Wechsel zwischen den Beitragsseiten.
- Footer: Links Logo, kurzer Infotext und ein „Nach oben“-Button; rechts die Navigationskategorien wie oben, vollständig aufgeklappt mit sichtbaren Unterpunkten.
[8] Projekt
Bei dieser Aufgabe geht es darum, die eigenen digitalen Entwürfe der Albverein-Ulm-Website (http://www.albverein-ul-nu.telebus.de/sav/index.html)
mit den in den Vorlesungen und Übungen zu Visual Design gewonnenen Erkenntnissen zu überarbeiten.
Die Überarbeitung erfolgt in Adobe XD oder Figma und kann wahlweise für die Desktop- oder die Mobile-Ansicht umgesetzt werden.
In der Gestaltung wird ein Gestaltungsraster etabliert (z. B. 12-spaltig für Desktop oder 3-/4-spaltig für Mobile), das als Grundlage für eine klare Struktur und konsistente Ausrichtung dient.¹
Planung des Projektes
Für die Umsetzung des Projekts habe ich zunächst die wichtigsten Schritte geplant. Auf Basis meines Wireframes fiel die Entscheidung auf ein 12‑spaltiges Desktop‑Layout.
- Raster: 12‑Spalten‑Grid für klare Struktur und konsistente Ausrichtung.
- Typografie: Serifenlose, gut lesbare Schriftfamilie Inter (Google Fonts). Das typografische System wurde in Figma definiert und übernommen. Grundgröße: 16 px; Titel und Untertitel bilden eine klare Hierarchie über definierte Größenstufen.
- Farben: Originalfarben der Website des Schwäbischen Albvereins, um visuelle Konsistenz und Wiedererkennbarkeit zu sichern.
Erstellen der Komponenten
Im nächsten Schritt habe ich die einzelnen Komponenten der Website ausgearbeitet. Alle Elemente orientieren sich am 12‑Spalten‑Raster und sind maximal vier Spalten breit. Die Höhe passt sich jeweils dem Inhalt an.
Jede Komponente hat einen dezenten Hintergrund, der zusammengehörige Inhalte visuell bündelt und die Struktur klarer macht.
Erstellt wurden unter anderem:
- Header mit Navigation
- Zwischenüberschriften
- Statistiken
- Content‑Boxen
- Newsletter in mehreren Varianten
- Terminliste
- Testimonials
- Footer
Seiten erstellen
Nach der Erstellung der einzelnen Komponenten habe ich die Seiten zusammengesetzt und mit realen Inhalten ergänzt:
- Platzhaltertexte durch Inhalte der Startseite des Schwäbischen Albvereins ersetzt.
- Bildplatzhalter durch passende Fotos von Pexels ausgetauscht.
- In Figma einen kleinen Prototyp erstellt, um Navigation und Komponenten im Ablauf zu testen.
