Typografie bildet die Basis meiner User Interfaces. Denn kein Medium vermittelt so zuverlässig Inhalte wie Schrift. Alles was keine Inhalte vermittelt gehört in kein UI. Ich bin absolut allergisch gegen unnötige (Stock)-Bilder, auch wenn sie noch so hübsch aussehen. Davon wird die Seite leider auch nicht interessanter. Von was wird die Seite interessanter? Packende Inhalte, zeitlose Typografie, spannende Animationen und spannendes Storytelling
Ich möchte deine Brand bzw. dein Unternehmen verstehen, damit ich das Konzept bestmöglich daran ausrichten kann.
Anschließend erarbeiten wir das Konzept und die Kernziele der Website, damit klar definiert ist was deine neue Website bewirken soll.
Während der Zielgruppenanalyse erstelle ich Personas, an denen wir die Seite aurichten werden.
Die Konkurrenzanalyse hilft mir dein Unternehmen einzuordnen sowie Stärken und Schwächen deiner Mitbewerber herauszufinden.
Schritt 2
Wireframe
Das Skizzieren von Wireframes ist ein integraler Bestandteil der Umsetzung von Ideen und Konzepten in richtiges, erlebbares Design.
Schon ab diesem Schritt muss jede Entscheidung an dem zuvor definierten Konzept und der Zielgruppe definiert werden.
Schritt 3
Design
Mein Design wird deine einzigartige Brand Identität wiederspiegeln und gleichzeitig die maximale ästhetische Wirkung erzielen. Die User Experience steht an erster Stelle. Neben der Ästhetik orientiere ich mich an Barrierefreien Design.
Designentscheidungen müssen sich an der Zielgruppe orientieren. Im Zweifel müssen Designentscheidungen mit der Zielgruppe validiert werden. Hierfür werden User Tests durchgeführt.
Schritt 4
Development
Ich setze auf Responsive Design, das den heutigen technischen Standards enspricht und sicherstellt, dass Benutzer von Smartphones, Tablets und Laptops die Website gleichermaßen benutzen können.
Performance ist heutzutage von großer Bedeutung, daher muss auf
Schritt 5
Test
Damit bein Launch der Seite nichts schief geht, werden gründliche und strenge Tests auf allen gängigen Browsern und Betriebssystemen durchgeführt.
Schritt 6
Follow-up
Ich zeige dir, wie du deine Website über das backend steuern kannst. Meine Unterstützung nach dem Start ist dir garantiert!
Bewegung und Animationen lassen deine Seite von der breiten Masse herausstechen.
Motion (= Bewegung) sieht natürlich aus. Mikroanimationen helfen dem Nutzer auf der Verständnisebene. Mit anderen Worten: Sie sind essentiell. Alle anderen Animationen zielen dagegen auf den „Joy of Use“ ab (= Freude an der Nutzung). Alle Animationen müssen benutzerfreundlich und barrierefrei gestaltet werden.
Jede Website braucht Mikroanimationen. Es hilft Nutzern nachzuvollziehen, was gerade passiert. Sie sind essentiell für ein gutes Nutzererlebnis.
Beispiele für Mikroanimationen: Mouseover Effekte, Smooth Scrolling, Overlay Effekte, Bewegungen.
Diese Effekte haben einen pragmatischen Sinn und Zweck. Meiner Ansicht nach sind sie Grundlage für jedes interaktive System. Anders gesagt: Jede Website benötigt Mikroanimationen
Wieso sind Mikroanimationen so wichtig? Beispiel Sprungmarken (auch Anker genannt): Links, die auf Sektionen innerhalb Seite verweisen, nennt man Sprungmarken. Wenn nun Nutzer auf diese Sprungmarke klicken, kommen sie zur jeweiligen Sektion.
Wenn dies ohne ein Scroll Effekt geschieht, dann kann das Verwirrung auslösen. Besonders unerfahrene User haben Probleme sich zu orientieren, da sie plötzlich ganz woanders sind. Eine Scroll Animation impliziert dagegen, dass der Nutzer sich noch immer auf der selben Seite befindet.
Animationen erhöhen die Freude an der Nutzung. Sie können ein Alleinstellungsmerkmal darstellen. Animationen müssen barrierefrei gestaltet sein.
Klar ist: Animationen und Bewegugen dürfen nicht nerven. Ab einem bestimmten Punkt wird es zu viel. Aber eine vernünftige Anzahl an Animationen erhöhen den Wiedererkennungswert und den Spaß an der Nutzung.
Hier gilt das oberste Gebot, dass Animationen kosmetischer Art auf keinen Fall die Barrierefreiheit der Seite verletzen dürfen. Sie sollten den WCAG (= Web Content Accessibility Guidelines) und den Barrierefreien Informationstechnik Verordnung (Bitv) entsprechen. Sie müssen daher korrekt umgesetzt werden.
Richtig umgesetzt können sinnvolle Animationen begeistern und die Bedienung zu einem digitalen Erlebnis reifen lassen. Nichts wird deine Seite so herausheben wie hochwertige Animationen. Warum? Weil die meisten Webseiten im Web nichts dergelichen implementiert haben.
Interaktionen bilden die Basis für ein nachhaltiges Nutzererlebnis.
Print ist ein wunderbares Medium, um Inhalte zu vermitteln, Werbung zu machen und Produkte zu verkaufen. Aber ein entscheidenden Nachteil hat es: Es ist nicht interaktiv!
Erst die Interaktivität eines Mediums bietet die Grundlage um Erlebnisse zu erschaffen. Und wir wollen schließlich die digitalen Erlebnissen.
Es gibt Grafische- und Touch Benutzeroberflächen. Beide unterscheiden sich grundlegend. Beide benötigen unterschiedliche Interaktionen.
Ich beschäftige mich mit zwei Arten von User Interfaces (= Benutzeroberflächen): Das Graphical User Interface und Touch User Interface. Für beide sind unterschiedliche Interaktionen zu designen!
Desktop Computer, Macs und Notebooks besitzen ein Graphical User Inteface. Hier wird das Interaktionskonzept W.I.M.P. angewandt: Windows, Icons, Menus und Pointer (dt. Fenster, Icons, Menüstruktur und Zeigegerät).
Touch User Interfaces sind eine Weiter- entwicklung der Graphical User Interfaces. Ein wichtiger Meilenstein war die Einführung des ersten iPhones im Jahr 2007. Beim Touch User Interface verschmelzen Anzeige- und Bediensystem miteinander.
Beide Arten der Benutzeroberflächen basieren somit auf völlig anderen Interaktionskontepten; wieso sollte man dann die selben Interaktionen verwenden? Die Antwort: Man sollte es nicht!
Ich gestalte explizit für beide Benutzeroberflächen
Interaktionen für Desktop PC oder Notebook sind auf Touch Geräte nicht übertragbar. Anders herum gilt das selbe. Wenn keine speziellen Interaktionskonzepte für das jeweilige Endgerät entworfen wurden, fühlen sie sich im besten Fall klobig an.
Meistens leidet jedoch die Benutzerfreundlichkeit (= Usability) darunter. Um dies zu vermeiden, gestalte ich Interaktionen explizit für Computer und Smartphone. Ich sehe beide Geräte getrennt voneinander und behandle sie dementsprechend auch so.
Das Ziel: ein gutes Nutzererlebnis; Alles andere muss sich daran anpassen.
User Experience heißt zu dt. Nutzererlebnis und ist mit Abstand das wichigste bei interaktiven Systemen. Alle getroffenen Maßnahmen zielen auf eine gute User Experience ab. Heißt: Design, Interaktion, Animationen und Inhalte werden so gewählt, dass die bestmögliche User Experience herauskommt.
User Experience besteht aus 4 Ebenen: Nützlichkeit, Nutzerfreundlichkeit, Attraktivität und Markenwahrnehmung
UX steht für User Experience; übersetzt heißt das Nutzererlebnis. Beim UX Design soll also die Erfahrung des Nutzers beim Verwenden des Produktes so positiv wie möglich ausfallen. Das Produkt ist beispielsweise eine App oder Website. Der Benutzer steht im also im Vordergrund und die gesamte Interaktion soll an ihm ausgerichtet werden.
Dem UX Design liegen 4 verschiedene Teildisziplinen zugrunde:
Utility: Wie nützlich ist die Website?
Usability: Ist die Website einfach und intuituiv zu benutzen?
Desirability: Sieht die Website gut aus? Fühlt es sich gut an?
Brand Experience: Ist der Gesamteindruck der Marke / der Website gut und stimmig?
Im Gegensatz zum Webdesign hat das UX Design also einen ganzheitlichen Ansatz. UX Designer schauen auf Inhalt, Funktionen, Anwendung, Optik und den insgesamten Markeneindruck einer Seite und finden Wege diese Aspekte zu optimieren.
Usability wird oftmals mit der User Experience verwechselt oder als Synonym verwendet. Usability ist jedoch nur eine Teildisziplin der User Experience, welche sich mit der Nutzerfreundlichkeit des User Interface auseinandersetzt.
Was macht den Content deiner Seite attraktiv? Packendes Storytelling!
Die aller meisten Websites sind auf dem Medium Text aufgebaut. Und das aus gutem Grund: Kein anderes Medium vermittelt so viele Informationen wie Text! Die Voraussetzung hierfür ist natürlich, dass der Text gelesen wird. Dafür müssen die Inhalte spannend verpackt werden. Wie macht man das? Durch Storytelling!
Gute Geschichten bestehen aus 3 Akten: 1. Akt: Beschreibung des Status quo 2. Akt: Konfrontation mit dem Unerwarteten 3: Akt: Auflösung der Problematik
Aus Ideen und Bildern kann man Geschichten machen, um seine Argumentation daran orientiert aufzubauen. Gerade die fesselndsten Geschichten folgen bekannten Mustern, die sich vereinfacht wie folgt darstellen lassen:
1. Akt: Hier beschreibe ich den Status quo, den Ist-Zustand. Am besten so, dass damit Interesse geweckt wird und die Zuhörer „an den Angelhaken“ genommen werden. Auch eine provokante Frage oder eine verblüffende Statistik kann wirkungsvoll sein. Im Märchen ist es das berühmte „Es war einmal …“, mit dem die Protagonisten und ihre Lebensumstände vorgestellt werden.
2. Akt: Hier schildere ich das Problem, die Schwierigkeit, die Konfrontation mit dem Unerwarteten. Im Märchen beginnt dieser Teil häufig mit: „Eines Tages …“. Danach nimmt die Geschichte ihren Lauf: Ein Weg ist zu gehen, Gefahren sind zu meistern; Veränderungen passieren und müssen bewältigt werden.
3. Akt: Am Ende stelle ich die Lösung vor. Die Problematik wird aufgelöst. Im Märchen wird dies oft eingeleitet mit: „… bis endlich“. Zum Abschluss kann man eine Schlussfolgerung ziehen: Die „Moral von der Geschichte“, mit der die Botschaft verankert wird.
Visuelle Basis für Storytelling: Typografie Optimierungen durch Motion & Interaktionen Typografie, Animation und Interaktion
Hier schließt sich der Kreis – Design, Animationen und Interaktionen unterstützen das Storytelling. Der ohnehin schon spannende Inhalt wird nun durch Gestaltung noch interessater gemacht.
Ein wesentlicher Punkt ist lesbare und ausdrucksstarke Schrift. Für eine verständliche Kommunikation unabdinglich. Daher ist es auch die absolute Basis für das Storytelling. Gute Typografie ist für Gliederung und Ordnung zuständig und leitet den Blick des Lesers.
Zusätzliche visuelle Stimulanzien durch Motion und Animationen sind der nächste Schritt. Während Typographie die Grundmauern darstellen, sind Animationen die Inneneinrichtung. Sie verbessern das Design und erhöhen die Nutzungsfreude.
Interaktive Geschichten sind natürlich das I-Tüpfelchen. Jedoch sind Interaktionen beim Storytelling natürlich nicht immer sinnvoll. Der Einsatz muss in jedem Fall überlegt sein.
