Die Umfrage wurde durchgeführt, um Feedback zur Website der Ausstellung „Oh, Shift!“ zu sammeln. Ziel war es, die Meinungen der Nutzer hinsichtlich des visuellen Designs, der Navigation und der allgemeinen Benutzererfahrung zu verstehen. Insgesamt nahmen 16 Personen an der Umfrage teil.
Demografie der Teilnehmer
Alter:
18-25 Jahre: 10 Teilnehmer:innen
26-35 Jahre: 4 Teilnehmer:innen
55-60 Jahre: 1 Teilnehmer:in
61-70 Jahre: 1 Teilnehmer:in
Tätigkeit in der Designbranche:
Ja: 8 Teilnehmer:innen
Nein: 8 Teilnehmer:innen
Visuelles Design der Website
Zielgruppe
Navigation der Website
Unterstützung durch Animationen und Scroll-Effekte (5= Sehr gut, 1= Schlecht)
Lieblingspart der Website – Top 3
Das unendliche Scrollen
Die automatisch abspielenden Videos
Cusom Cursor
Animationen
Verbesserungsvorschläge
Größere Darstellung der Poster auf der Website.
Einige technische Probleme beim Zurückkommen auf die vorherige Seite, speziell auf Mac-Geräten.
Fazit
Die Umfrage zeigt, dass die Mehrheit der Teilnehmer sehr zufrieden mit dem visuellen Design und der Navigation der Website der Ausstellung „Oh, Shift!“ ist. Die Animationen und Scroll-Effekte wurden ebenfalls positiv bewertet. Die wichtigsten Verbesserungsvorschläge betreffen technische Aspekte und die Darstellung von Inhalten. Insgesamt scheint die Website bei den Nutzern gut anzukommen. Ich habe gelernt, bei der Umfrage auf die Reihenfolge zu achten, in welcher mit gut bis schlecht bewertet wird. Diese sollte immer gleich sein und sich so wenig wie möglich ändern.
Um die Wahrnehmung meiner Website durch verschiedene Zielgruppen besser zu verstehen und gezielte Verbesserungen vornehmen zu können, habe ich eine Umfrage entwickelt. Die Ergebnisse dieser Umfrage sollen aufzeigen, wie unterschiedliche Nutzergruppen die Website wahrnehmen, welche Bereiche besonders gut ankommen und wo Optimierungspotenzial besteht. Insbesondere interessiere ich mich dafür, wie die interaktiven Elemente und Scroll-Effekte auf die Teilnehmenden wirken.
Ziele der Umfrage
Die Hauptziele der Umfrage sind:
Zielgruppenanalyse: Ermitteln, wie verschiedene demografische Gruppen die Website wahrnehmen.
Visuelles Design: Feedback zum ästhetischen Erscheinungsbild der Website sammeln.
Usability: Verstehen, wie intuitiv die Navigation und Benutzerführung ist.
Funktionalität: Bewerten, wie gut die Animationen und Scroll-Effekte die Benutzererfahrung unterstützen.
Verbesserungspotenzial: Konkrete Vorschläge für Optimierungen identifizieren.
Fragen
Alter
Bist/warst du in der Designbranche tätig?
Wie ansprechend findest du das visuelle Design der Website?
Wie intuitiv war die Navigation auf der Website?
Wie gut passt das Design der Website zu ihrem Zweck und ihrer Zielgruppe?
Wie gut unterstützen die Animationen und Scroll-Effekte die Benutzererfahrung?
Was ist dein liebster Part der Website?
Was könnte man verbessern?
Durchführung und Auswertung der Umfrage
Die Umfrage wird online durchgeführt, um eine breite und diverse Teilnehmerbasis zu erreichen. Nach der Datenerhebung erfolgt die Auswertung, um Muster und Trends in den Antworten zu identifizieren. Besonderes Augenmerk liegt dabei auf den Unterschieden zwischen verschiedenen Altersgruppen und zwischen Fachleuten und Laien.
Ergebnisse und Maßnahmen
Die Ergebnisse der Umfrage werden zeigen, welche Aspekte der Website besonders gut ankommen und welche Bereiche Verbesserungspotenzial haben. Auf Basis dieser Erkenntnisse können gezielte Maßnahmen ergriffen werden, um die Website weiter zu optimieren. Insbesondere die Bewertung der interaktiven Elemente und Scroll-Effekte wird wertvolle Hinweise liefern, wie diese Elemente die Benutzererfahrung verbessern oder stören.
Ich besitze ein iPhone 14 pro, meine Mutter ein iPhone SE. Nachdem ich sie die Website testen lies, hatte sie, sowie andere Menschen mit einem iPhone mit Homebutton ein paar Dinge zu kritisieren, welche ich wie folgt der Usability wegen veränderte.
Vorher – Nachher iPhone SE
Screenshot
Vorher – Nachher iPhone 14 Pro
Screenshot
Durch die Anordnung von Logo und Buttons (ich habe mich aufgrund der limitierten Inhalte der Seite bewusst gegen ein Burger Menu entschieden) war es vor allem auf kleineren Displays nicht so einfach zu scrollen. Auch die Plakate wurden am kleineren Display immer teilweise verdeckt, sowie die Informationen oben im Eck, sodass die Seite sehr überladen und unangenehm zu bedienen war. Mit dem kleineren Logo und den Buttons können diese trotzdem noch ausreichend gut bedient werden und die Section nimmt weniger Platz am Display ein. Außerdem habe ich die Abstände der Poster angepasst, sodass sie nun mehr Platz für die Infos freigeben und auf allen Displaygrößen gut zu sehen sind.
Die Gestaltung einer Website ist eine komplexe Aufgabe, die weit über visuelles Design und Benutzerfreundlichkeit hinausgeht. Ein zentrales Element, das oft übersehen wird, ist die technische Machbarkeit. Meine Arbeit an diesem Thema hat mir verdeutlicht, wie wichtig es ist, die Grenzen und Möglichkeiten der Webentwicklung zu verstehen und zu berücksichtigen.
Grenzen des Webdesigns
Die technischen Grenzen des Webdesigns werden durch verschiedene Faktoren bestimmt:
Browser-Kompatibilität: Nicht alle Browser unterstützen die neuesten Webtechnologien, was Einschränkungen bei der Umsetzung moderner Designs mit sich bringen kann.
Performance: Aufwändige Animationen und Grafiken können die Ladezeiten einer Website negativ beeinflussen, was die Benutzererfahrung verschlechtert.
Sicherheit: Komplexe Funktionalitäten erfordern zusätzliche Sicherheitsmaßnahmen, die den Entwicklungsaufwand erhöhen.
Möglichkeiten des Webdesigns
Trotz dieser Grenzen bietet die moderne Webentwicklung zahlreiche Möglichkeiten:
Responsive Design: Websites können so gestaltet werden, dass sie auf allen Geräten gut aussehen und funktionieren.
Interaktive Elemente: Animationen, Übergänge und dynamische Inhalte können die Benutzererfahrung verbessern und die Website ansprechender gestalten.
Personalisierung: Mithilfe von Datenanalyse und KI können Inhalte individuell auf die Nutzer zugeschnitten werden.
Herausforderungen und Lösungsansätze
Technische Umsetzung: Einige Designideen erwiesen sich als schwer umsetzbar, was zu Anpassungen und Kompromissen führt Um diese Herausforderungen zu meistern, ist es für zukünftige Projekte mit diesem Thema sinnvoll, zunächst auf Prototypenbasis zu arbeiten. Tools wie Figma ermöglichen es, Designs zu erstellen und zu testen, bevor sie in die Entwicklung gehen. So habe ich trotzdem die Möglichkeit zu testen, stoße jedoch nicht an meine Grenzen in Webflow o.Ä.
Zusammenarbeit mit technischen Experten
Ich könnte eventuell auch mit einer studierenden Person mit dem richtigen Hintergrund zusammenarbeiten und so die technische Komponente miteinbeziehen. “Ist die Umsetzung realistisch”
Fazit
Die Gestaltung einer Website erfordert eine ganzheitliche Betrachtung, die Design, Usability und technische Machbarkeit gleichermaßen berücksichtigt. Die Zusammenarbeit mit technischen Experten und die Nutzung von Prototyping-Tools wie Figma können den Entwicklungsprozess erheblich verbessern. Diese Erfahrungen haben meine Sichtweise auf Webdesign erweitert und gezeigt, dass die besten Ergebnisse durch interdisziplinäre Zusammenarbeit und gegenseitiges Verständnis erzielt werden.
Grober Prototyp in FigmaDie Zeit drängt, also habe ich damit angefangen, mir einen Crashkurs in Webflow auf Youtube anzusehen. So empfand ich die Gestaltung eines groben Prototypen in Figma als die geeignete Variante mit dem Projekt zu starten. Ich möchte hier jedoch nur das Layout verstehen, um dieses dann gut in Webflow umsetzen zu können.
Aufbau der Page in WebflowWie beim programmieren, muss man in Webflow anfangen, die Seite grob zu strukturieren. Hierfür habe ich einen Prototypen in Figma gebaut, welcher am Ende nicht mehr so aussah wie die finale Website.
Figma PrototypFinale Website
Nach dem Bauen des Prototypen fielen mir Dinge auf, die so nicht funktionierten.
Der horizontale Scroll war sehr unangenehm anzusehen, da sich die Poster alle gleichzeitig bewegten, so sah die Seite überladen aus
Der horizontale “Gallery” look funktioniert nicht so wie ich es mir gewünscht hätte, er wirkt wie ein billiges gallery-template auf mich.
Die Anordnung fand ich gut, jedoch wirkte das Logo zu groß und die Buttons im Verhältnis zu klein
Mir entstand zu wenig tiefe, da ich viele überlappende Elemente verwenden wollte, um diesen “cool-but-trashy” Effekt zu unterstreichen.
Die fertige Seite, welche Punkte habe ich abgearbeitet?
✓ Klare Gestaltung → Nur die wichtigsten Elemente befinden sich auf der Website, hierarchisch funktioniert sie für mich gut.
✓ Minimalistisch → Wenige Elemente: Die Poster stehen im Fokus
✓ Micro-Interactions → Ich habe hover Effekte, sowie einen custom Cursor, welche diese Unterstreicht eingefügt.
✓ Schwarz/Weiß → Poster sind sehr verschieden, sie sollen der Main Focus sein
Außerdem habe ich einen infinite Scroll Effekt hinzugefügt, welcher auf meinen Inspo-Seiten im Vordergrund stand und einen sehr schönen und außergewöhnlichen Effekt auf der Website erzeugt.
(Ich wollte Bildschirmaufnahmen hochladen, aber WordPress lässt mich nicht, also bitte selbst ausprobieren! 🙂 )
Am 28.06.2024 findet die Poster Ausstellung “Oh, Shift!” des Communication Design Majors statt. Hierfür wird eine Website benötigt, welche ich für meine Forschung verwenden werde. Ich werde eine Website gestalten, welche im Anschluss von Benutzer:innen getestet wird.
Schwarz/Weiß → Poster sind sehr verschieden, sie sollen der Main Focus sein
Things I’ve learned
Die Startseite fokussiert sich sehr auf experimentelles Design, Buchungsseiten, bzw. Seiten bei denen es mehr um die Inhalte geht fokussiert sich das Design mehr auf die Usability und Übersichtlichkeit.
Inspirationsquellen sind wichtig für meine Recherche. Aus diesem Grund will ich noch einmal tiefer in das Thema eintauchen, um keine Möglichkeit zu verpassen, ein paar der besten Websites gesehen zu haben.
1. Innovative Design-Websites und Galerien
Awwwards: Diese Plattform zeichnet nicht nur die besten Webdesigns aus, sondern bietet auch eine spezielle Kategorie für experimentelle Websites. Die vorgestellten Designs sind oft avantgardistisch und setzen neue Maßstäbe in der Branche.
CSS Design Awards: Neben der Auszeichnung herausragender Webdesigns bietet CSS Design Awards auch eine Sammlung von experimentellen Websites, die durch ihre Kreativität und Innovation hervorstechen.
SiteInspire: Diese Galerie kuratiert eine Vielzahl von Designs, darunter viele experimentelle und unkonventionelle Ansätze, die als Inspirationsquelle dienen können.
2. Design-Blogs und Online-Magazine
Codrops: Codrops bietet eine Fülle von Tutorials und Artikeln zu innovativen Webtechniken und experimentellen Designs. Die „Playground“-Sektion ist besonders nützlich, um neue Ideen und Techniken zu entdecken.
Smashing Magazine: Neben umfassenden Ressourcen zu allgemeinen Webdesign-Praktiken bietet Smashing Magazine auch Artikel und Fallstudien zu experimentellem Design und fortschrittlichen Webtechniken.
Creative Bloq: Creative Bloq veröffentlicht regelmäßig Artikel über die neuesten Trends im Webdesign, einschließlich experimenteller Ansätze und innovativer Projekte.
3. Konferenzen und Workshops
OFFF: Durch die OFFF konnte ich viele Eindrücke und Inspiration gewinnen.
4. Soziale Medien und Online-Communities
Dribbble und Behance: Beide Plattformen haben Kategorien und Sammlungen, die sich speziell auf experimentelles Webdesign konzentrieren.
Reddit: Subreddits wie r/web_design, r/webdev und r/Frontend bieten eine Plattform für Diskussionen und den Austausch von experimentellen Webdesign-Projekten und -Techniken.
Entwicklungen passieren im UI/UX Design rasant. Um dies zusammenzufassen, wird eine umfassendere Recherche notwendig sein. Um jedoch auf ein paar Trends und Entwicklungen einzugehen, habe ich mir drei, meiner Meinung nach, besonders relevante und auffällige Elemente herausgesucht, auf welche ich näher eingehen möchte. Zu der Erklärung, habe ich außerdem jeweils ein Best Practice Beispiel beigefügt.
Neumorphismus/Flat Design 2.0:
Dieser Stil kombiniert Skeuomorphismus* und Flat Design, um weiche, realistische Elemente mit minimalistischem Touch zu schaffen. Es verwendet subtile Schatten und Highlights, um Tiefe zu erzeugen.
Ein moderner Ansatz, der reale Materialien und Texturen verwendet, um digitale Elemente natürlicher und greifbarer zu machen, jedoch mit einer saubereren und weniger überladenen Ästhetik als der traditionelle Skeuomorphismus*.
Kleine Animationen oder visuelle Effekte, die auftreten, wenn ein Nutzer eine bestimmte Aktion ausführt. Diese verbessern das Nutzererlebnis, indem sie visuelles Feedback und Freude an der Interaktion bieten.
Meiner Meinung nach ist die gesamte Website ein Best-Practice-Beispiel für Mikrointeraktionen. Man findet keinen Teil, der nicht in irgendeiner Weise animiert und damit für den Benutzer:in viel spannender gemacht wurde. Besonders die Buttons sind mir hier ins Auge gesprungen.
3D Elements and Immersive Experiences:
Die Verwendung von 3D-Grafiken und -Elementen wird häufiger, insbesondere in E-Commerce-Websites und -Apps, um Produkte realistischer und ansprechender darzustellen.
AR- und VR-Technologien bieten immersive Erlebnisse und werden zunehmend in Bereichen wie E-Commerce, Bildung und Unterhaltung eingesetzt. UI/UX-Designer experimentieren mit 3D-Elementen und räumlicher Interaktion
*Skeuomorphismus ist ein Designkonzept, bei dem digitale oder virtuelle Objekte so gestaltet werden, dass sie reale, physische Gegenstände nachahmen. Das Ziel des Skeuomorphismus ist es, Benutzerfreundlichkeit und Vertrautheit zu schaffen, indem bekannte visuelle und haptische Elemente in das digitale Design integriert werden.
Während Skeuomorphismus in den letzten Jahren weniger populär geworden ist, erlebt er in abgewandelter Form ein Comeback. Der sogenannte Neumorphismus kombiniert Elemente von Skeuomorphismus und Flat Design, um moderne, minimalistische, aber dennoch realistisch wirkende Benutzeroberflächen zu schaffen. Dies zeigt, dass der Einfluss des Skeuomorphismus weiterhin spürbar ist, auch wenn er sich weiterentwickelt hat.
Beispiel: Apple iPhone Taschenrechner inspiriert von Taschenrechner Braun ET66 gestaltet von Dieter Rams
iPhone Taschenrechner heuteUrsprünglicher iPhone Taschenrechner vs. Braun ET66
Erkenntnisse
Ich habe mir alle Best Practice Beispiele am Desktop, sowie in der Mobilen Variante angesehen. Während am Desktop sehr viel Wert auf Mikrointeraktionen, sowie Animationen gesetzt wurde, sieht dies auf Mobile sehr viel anders aus. Hier steht nämlich die klare Informationsvermittlung im Vordergrund. Auch wenn es einige animierte Elemente gibt, sind die Websites hier viel simpler aufgebaut und machen auf mich den Eindruck einer “abgespeckten” Version der Desktop Versionen.
Außerdem spielt musikalische Untermalung bzw. Sounddesign im allgemeinen eine sehr große Rolle. Bei fast allen Best Practice Websites, welche ich gefunden habe ist es möglich, Sound zuzuschalten.
Wie können experimentelle Ansätze im UI/UX Design genutzt werden, um digitale Produkte zu revolutionieren?
Definition des Themas
Experimentelles UI/UX Design bezieht sich auf innovative und oft unkonventionelle Ansätze zur Gestaltung von Benutzeroberflächen (UI) und Nutzererfahrungen (UX). Während traditionelles Design auf bewährten Prinzipien und Methoden basiert, die auf Konsistenz und Benutzerfreundlichkeit abzielen, geht experimentelles Design darüber hinaus und erkundet neue Wege, um Nutzer zu überraschen, zu erfreuen und zu engagieren. Es nutzt kreative Techniken, modernste Technologien und mutige Ideen, um einzigartige und oft unerwartete Benutzererlebnisse zu schaffen.
Abgrenzung zu traditionellem UI/UX Design
Traditionelles UI/UX Design konzentriert sich darauf, bewährte Designprinzipien anzuwenden, um eine intuitive und benutzerfreundliche Erfahrung zu gewährleisten. Dies umfasst klare Navigation, konsistente Layouts und die Einhaltung von Designstandards, die über Jahre hinweg entwickelt und verfeinert wurden. Ziel ist es, eine reibungslose und effiziente Interaktion zu ermöglichen.
Experimentelles UI/UX Design hingegen strebt danach, diese Normen zu hinterfragen und zu erweitern. Es stellt den Status quo in Frage und sucht nach neuen Wegen, um Benutzer zu inspirieren und zu begeistern. Dies kann durch den Einsatz von:
Interaktive Animationen: Bewegungen und Übergänge, sowie interaktive Elemente innerhalb der Gestaltung
Unkonventionelle Navigation: Innovative Möglichkeiten, wie Benutzer durch Inhalte navigieren
Personalisierte Erlebnisse: Anpassung der Benutzeroberfläche basierend auf individuellen Präferenzen und Verhaltensweisen
Neue Technologien: Einsatz von Augmented Reality (AR), Virtual Reality (VR) und künstlicher Intelligenz (KI) zur Schaffung immersiver Erlebnisse
Ziel
Mein Ziel ist es, die Welt des experimentellen UI/UX Designs zu erkunden und dessen Potenzial aufzuzeigen. Ich werde untersuchen, welche kreativen Ansätze, innovativen Techniken und Methoden zur Verfügung stehen. Durch die Analyse bestehender Projekte, die Entwicklung eines eigenen experimentellen Designs und die Auswertung von Nutzerfeedback möchte ich ein tieferes Verständnis dafür gewinnen, wie experimentelles UI/UX Design die Zukunft der digitalen Interaktion prägen kann.
Die visuelle Gestaltung von Marken für die Zielgruppe Generation Z zeichnet sich durch einen kreativen und auffälligen Einsatz von Typografie aus. In meiner Recherche bin ich auf verschiedene Aspekte gestoßen, die die Schriftwahl und -gestaltung von Gen Z-Marken charakterisieren. So setzen viele Marken in ihrer Typografie auf eine Kombination aus klaren Linien und organischen Formen. Diese Mischung schafft einen visuellen Kontrast, der das Bedürfnis nach Ordnung und Struktur unterstreicht, gleichzeitig aber auch Freiheit und Authentizität ausdrückt. Ein weiteres auffälliges Merkmal ist die Verwendung dreidimensionaler Elemente in der Typografie. Dies könnte darauf hindeuten, dass die Generation Z eine visuelle Ästhetik schätzt, die Tiefe und Dynamik vermittelt.
Im Fließtext bleibt die Schriftwahl einfach und funktional. Dieser Ansatz gewährleistet eine gute Lesbarkeit auf verschiedenen Medien und unterstreicht den Fokus auf klare Kommunikation.
Typografie in Schriftmarken wird oft durch spielerische Elemente aufgelockert. Dies kann durch verspielte Buchstabenformen, Farben oder kreative Anordnungen erreicht werden, um eine positive und einprägsame Markenidentität zu schaffen.
Die Diskussion darüber, ob Typografie den Geschmack der Generation Z trifft oder ob Authentizität und Wertevermittlung im Vordergrund stehen sollten, unterstreicht die Notwendigkeit einer ausgewogenen Herangehensweise an das visuelle Design. Die Bedeutung von Einfachheit, Farbwahl und Schriftart in Logodesigns für die Generation Z unterstreicht die Notwendigkeit, dass visuelle Elemente nicht nur ansprechend, sondern auch aussagekräftig sein müssen. Die kritische Rolle der Typografie in der digitalen Medienlandschaft und ihre Auswirkungen auf die Lesbarkeit und das Verständnis von Inhalten, insbesondere für eine junge, digital affine Zielgruppe, werden hervorgehoben.
Abschließend wird die Bedeutung kreativer Typografie hervorgehoben, um Aufmerksamkeit zu erregen und sich in einem überfluteten digitalen Raum von der Masse abzuheben. Typografie für Marken der Generation Z ist nicht nur ein Kommunikationsmittel, sondern auch eine Möglichkeit, visuelle Identitäten zu schaffen, die den Werten und Vorlieben dieser Zielgruppe entsprechen.
