UX Design / UI Design / Animatied Assets

Chemicalbox kreiert animierte Assets für innovative Interfaces. Webbasiert oder als interaktive Installation.

Animation ist ein zentrales Element im heutigen Interaction-Design!

Animierte Assets
SVG Animation
Realtime Animation

Bei großartigem UX-Design geht es darum, die Benutzerführung zu vereinfachen – und dies bedeutet, alle Elemente zu entfernen, die nicht unbedingt erforderlich sind. Und Sobald Du feststellst, dass ein Element Ihrer Benutzeroberfläche Anweisungen erfordert, musst Du es neu gestalten.
Wenn es um großartiges UX-Design geht, ist Animation ein zentraler Punkt.

Bei interaktiven Installationen muss der jeweilige Spezialist über seinen Tellerrand schauen können – genau das kann Mario Buholzer

Tino Niederberger, Creative Director, Bold AG
Tino Niederberger, Creative Director, Bold AG
  • Infobox UX / UI

    WAS BEDEUTET USER-EXPERIENCE (UX)

    Der Begriff User Experience (UX), bezeichnet die Erfahrung die ein Nutzer bei der Interaktion mit dem Produkt erlebt. Meistens ist dieses Produkt eine Maschine oder im IT-Bereich ist der Begriff User Experience meist im Zusammenhang mit der Gestaltung von Websites oder Apps zur Anwendung. Übersetzt bedeutet User Experience wörtlich: Nutzererfahrung / Nutzererlebnis.

    WAS BEDEUTET UI-DESIGN (UI)

    Das User Interface (UI) bezeichnet das Design, auf der die Interaktion zwischen Mensch und Maschine stattfindet. Das UI gehört dabei weder zum Menschen noch zur Maschine. Ziel ist es, die Benutzerschnittstelle für den User nutzbar und sinnvoll zu gestalten, damit dieser leichter operative Entscheidungen ausführen kann.

  • 2019 - Trends im UI Design - Part 1
  • 2019 - Trends im UI Design - Part 2

    Visuelles Geschichtenerzählenk

    Der Trend zu benutzerdefinierten Grafiken hat dem Storytelling in den Benutzeroberflächen eine weitere Perspektive eröffnet. Immer mehr Websites und mobile Apps greifen auf speziell gestaltete Charaktere zurück, die die Geschichte zeigen, die Atmosphäre einstellen, die Nachricht senden oder die Vorteile so präsentieren, wie es der Stimmung, dem Ton und der Stimme der Plattform entspricht.

    Originelle Charaktere tragen dazu bei, die Interaktionen menschlicher zu gestalten, starke visuelle Assoziationen mit der realen Welt herzustellen und die gewünschte Stimmung sofort zu übertragen. Darüber hinaus können die Zeichen je nach Komposition ein effektives Werkzeug sein, um die Seite oder den Bildschirm dynamisch und lebendig zu gestalten.

    Knopflose Interaktionen

    Schaltflächen sind nach wie vor eines der wichtigsten Elemente des Benutzeroberflächen-Designs. Jetzt sehen wir kreativere Experimente zur mobilen Benutzererfahrung im Hinblick auf Benutzeroberflächen-Interaktionen ohne Schaltflächen. Dieser Ansatz spart wertvollen Platz auf dem Bildschirm, um weitere Informationen zu erhalten, und es wird sogar angenommen, dass er der erste Schritt zu den virtuellen Schnittstellen ist, die nur auf Gesten basieren.

  • 2019 - Trends im UI Design - Part 3
  • 2019 - Trends im UI Design - Part 4

    Wachstum von Videoinhalten

    Verschiedene Arten von Promo- und Erklärvideos wurden verbessert, um auf Bildschirmen und Seiten angezeigt zu werden. Kein Wunder, denn sie dienen effizient den Marketingzielen und steigern die Markenbekanntheit. Ein kreatives und einprägsames Video ist eine gute Möglichkeit, die Aufmerksamkeit der Kunden auf sich zu ziehen und die bewährte Methode, um sie schnell und hell zu informieren. Ein Video aktiviert mehrere Wahrnehmungskanäle - Audio, Video, Ton - gleichzeitig und erweitert sie um die Fähigkeit, Geschichten zu erzählen.

    Alle genannten Faktoren neigen dazu, die Präsentation per Video stark und einprägsam zu machen, insbesondere wenn sie auf qualitativ hochwertigem Grafikdesign und Animation basieren. Die Menschen sind täglich mit unzähligen Informationen aller Art überlastet, sodass die meisten von ihnen nicht bereit sind, viel Zeit in das Erlernen von Produkten oder Dienstleistungen zu investieren, insbesondere der neuen. Unter diesen Umständen sind Videos zu einem dynamischen, informativen und attraktiven Kommunikationsmittel geworden. Das Problem der Ladegeschwindigkeit für eine Webseite wird jedoch immer größer und sollte auf verschiedenen Geräten sorgfältig getestet werden.

    UI-orientiertes Branding

    Das Jahr 2018 setzte den massiven Trend des Redesigns für das Branding fort: Globale und lokale Unternehmen, Produkte und Marken änderten ihre Logos und Markendarstellungen, hauptsächlich mit dem Ziel, Formen und Details zu vereinfachen. Einer der Gründe für den Trend war das Streben nach einer besseren Bedienbarkeit und Navigierbarkeit der Markenelemente, da immer mehr Unternehmen um eine höhere Online-Präsenz konkurrieren. Daher wurden sowohl neue als auch überarbeitete Logos erstellt, um die Benutzeroberfläche zu vereinfachen und auf einer Vielzahl von digitalen Geräten und Layouts effektiv wahrgenommen zu werden.

    Darüber hinaus wurden animierte Logos zu einem Trend, der Identitätssymbole interaktiver machte und das Markenbewusstsein stärkte.

    Mehrschichtige Layouts

    Kreative Experimente werden ständig von UI-Designern durchgeführt, um neue interessante Wege zu finden, um die Webseite ansprechend und interaktiv zu gestalten. Einer der wachsenden Trends ist das Anwenden mehrerer interaktiver Ebenen, die das Scrollen und die Interaktion originell erscheinen lassen.

  • 6 wichtige Design-Tipps für die Benutzeroberfläche

    1. Kennen Sie Ihre Benutzer

    Vor allem müssen Sie wissen, wer Ihre Benutzer sind - von innen und außen. Das bedeutet, dass Sie alle demografischen Daten kennen, die Ihre Analytics-App (s) abrufen können, ja. Aber was noch wichtiger ist, es bedeutet zu wissen, was sie brauchen und was sie daran hindert, ihre Ziele zu erreichen.

    2. Definieren Sie, wie Benutzer Ihre Benutzeroberfläche verwenden

    Bevor Sie Ihre Benutzeroberfläche entwerfen, müssen Sie definieren, wie die Benutzer sie verwenden. Angesichts der zunehmenden Verbreitung von Touch-basierten Geräten ist dies ein zentrales Anliegen, als Sie vielleicht denken. Schau einfach auf

    Zunder: Das Benutzererlebnis der App wird buchstäblich durch die Leichtigkeit und Impulsivität eines einfachen Streifens definiert.

    Menschen nutzen Websites und Apps auf zwei Arten: direkt (durch Interaktion mit einem Element des Produkts) und indirekt (durch Interaktion mit einem Element außerhalb des Produkts).

    3. Feedback geben

    In der realen Welt gibt uns die Umgebung Feedback.

    Nur allzu oft geben digitale Schnittstellen nicht viel zurück, sodass wir uns fragen, ob wir die Seite neu laden, den Laptop neu starten oder einfach aus dem nächsten verfügbaren Fenster werfen sollen.

    Also gib mir die Lade-Animation. Lassen Sie diesen Knopf aufspringen und schnappen Sie zurück, wenn ich darauf tippe - aber nicht zu viel. Und gib mir ein virtuelles High-Five, wenn ich etwas für dich mache und ich stimme zu, dass es fantastisch ist.

    4. Standards sind wertvoll

    Als hochkreativer Typ lieben Designer es, Dinge neu zu erfinden - aber das ist nicht immer die beste Idee.

    Warum? Eine überarbeitete Version einer vertrauten Interaktion oder Benutzeroberfläche führt zu einer „kognitiven Belastung“: Sie lässt die Benutzer erneut über einen Prozess nachdenken, den sie bereits gelernt haben. Natürlich können Sie das Rad neu erfinden - aber nur, wenn es das Design tatsächlich verbessert.

    5. Platzierung Grösse der Elemente

    Überlegen Sie sich die Platzierung und Größe der Elemente genau
    Das Fitts-Gesetz, ein grundlegendes Prinzip der Mensch-Computer-Interaktion (HCI), besagt:

    Die Zeit zum Erfassen eines Ziels ist eine Funktion der Entfernung zu und der Größe des Ziels.

    Mit anderen Worten: Je näher und / oder größer etwas ist, desto schneller können Sie den Cursor (oder Finger) darauf platzieren. Dies hat natürlich alle möglichen Auswirkungen auf die Interaktion und das Design der Benutzeroberfläche, aber drei der wichtigsten sind:

    6. Machen Sie die Entscheidungsfindung einfach

    Zu viele Internetseiten schreien nach uns: „Banner“ werden plötzlich zu Vollbildanzeigen. Modals erscheinen und flehen uns an, Blogs zu abonnieren, die wir noch nicht lesen konnten. Video-Interstitials halten uns auf unseren Spuren und zwingen uns, kostbare Sekunden ach so langsam vorbeizuschauen. Und lass mich noch nicht einmal mit den Widgets, Flyouts, Tooltips beginnen ...

    Je mehr Optionen Sie einem Benutzer präsentieren, desto schwerer fällt es ihm, eine Entscheidung zu treffen.

  • Prototyping Software

    Sketch

    Sketch ist ein sehr beliebtes Tool in der Design-Community, mit dem Sie HiFi-Schnittstellen und Prototypen erstellen können. Eine der großartigen Funktionen ist "Symbole", mit denen Sie UI-Assets und -Elemente zur Wiederverwendung entwerfen können. Auf diese Weise können Sie Designsysteme erstellen und Ihre Schnittstellen konsistent halten. Von dort aus können Sie Ihr Design problemlos in einen klickbaren Prototyp exportieren. Wenn Sie ein InVision-Benutzer sind, überprüfen Sie das Craft-Plugin.

    balsamiq

    Wenn Sie schnelles Wireframing suchen, ist Balsamiq ein guter Vorschlag. Sie können schnell und einfach Strukturen und Layouts für Ihre Projekte entwickeln. Die Drag & Drop-Elemente vereinfachen das Leben und Sie können Schaltflächen mit anderen Seiten verknüpfen. So können Sie schnell mit der Planung Ihrer Schnittstellen beginnen und diese dann an Ihr Team oder Ihre Kunden weitergeben.

  • Gesaltungsrichtlinien

    Google Material Design

    Material Design ist eine visuelle Sprache, die die klassischen Prinzipien guten Designs mit der Innovation von Technologie und Wissenschaft verbindet.

    Material Design

    Microsoft Fluent Design

    Fluent vereint die Grundlagen von prinzipiellem Design, technologischer Innovation und Kundenbedürfnissen. Es ist ein kollektiver Ansatz zur Schaffung von Einfachheit und Kohärenz durch ein plattformübergreifendes, gemeinsames offenes Designsystem.

    Fluent Design
  • Barrierefrei

    Design für alle, Universal Design, Inklusive Design, Barrierefreies Design… alle diese Begriffe können so interpretiert werden, dass die Designer an ALLE Menschen denken, und ihre Bedürfnisse berücksichtigen, egal welches Alter, Geschlecht, Herkunft, Beeinträchtigung (permanent, temporär oder situativ) sowie in welchen Kontext (physisch und sozial) sie sich befinden.

     

    Einen gutes Kontrastverhältnis bieten

    Die Inhalte sollten leicht wahrgenommen werden können und die Unterscheidung zwischen Vorder- und Hintergrund sollte leicht sein.
    Nicht nur unter optimalen (kontrollierten) Bedingungen, sondern auch in verschiedenen Nutzungskontexten muss ein ausreichender Farbkontrast berücksichtigt werden, z.B. Bildschirm in der Sonne, Auflösung/Größe des Bildschirmes, alte Monitore, etc.
    Die Wahrnehmung des Inhalts und die Unterscheidung zwischen Vorder- und Hintergrund sollte so weit wie möglich erleichtert werden.

     

    Hilfreiche Ressourcen für barrierefreies Designen.

    Minimum Kontrast WCAG – BITV
    Kontrast Checker plugin für Sketch
    Mozilla WCAG Contrast checker
    Google Developer Guidelines for Accessible Styles

     

    Reinen Text verwenden, wo immer dies möglich ist

    Statt Texte in form von Bildern auszugeben, sollte reiner Text genutzt werden. So kann der Text verkleinert und vergrößert werden (Responsivität), dazu lädt er schneller und ist einfacher zu übersetzen. Reine Texte können auch von Screenreadern einfach vorgelesen werden. Es müssen keine zusätzlichen alternative Texte für die Bildern hinterlegt werden.

  • Farbwahl-Tools

    Beliebte Werkzeuge zum Auswählen von Farben
    Beim erstellen eines Farbschemas gibt es viele Werkzeugen, die das definieren des UI-Farbschemas vereinfachen.
    Farbe ist der Eckpfeiler des UI-Designs.

    Coolors.co

    Dieses Tool ermöglicht es, ein Bild hochzuladen und daraus eine Farbpalette zu erstellen. Auch den Export von Farbkombinationen in verschiedene Formate wie SVG ist möglich.

    Coolors.co

    Adobe Color CC

    Mit Adobe Color CC können Sie mithilfe eines Farbrads ein Farbschema erstellen. Das erstellte Schema kann in Adobe Photoshop exportiert werden. Color CC bietet auch eine hervorragende Sammlung von Tausenden von Farbkombinationen aus der kreativen Community.

    Adobe Color cc

    Paletton

    Paletton ähnelt Adobe Color CC. Der Hauptunterschied besteht darin, dass Sie nicht nur auf 5 Töne beschränkt sind. Diese Funktion ist praktisch, wenn Sie Primärfarben haben und mit zusätzlichen Tönungen spielen möchten.

    Paletton

    Googles MDL Color Customizer

    Googles MDL Color Customizer ist ein hervorragendes Tool für Android-Entwickler. Benutzer können damit primäre und sekundäre Benutzeroberflächenfarben für die Android-App kombinieren.

    Googles MDL Color Customizer

Agenturen / Kunden

Kostenloses Beratungsgespräch,
Moodboards und eine Fixpreis-Offerte!

So einzigartig wie Ihr Film, gestalten sich auch die Aufwände für die Produktion. Schon nach einem fünfminütigen Gespräch kann ich Ihnen erste Umsetzungs-Ideen und eine Fixpreis-Offerte zusenden.
Erzählen Sie mir von Ihrem Projekt!