App und Webdesign

Designkompetenz seit 2010

Seit 2010 konzipieren und designen wir digitale Produkte – im Design liegt eine unserer Kernkompetenzen. Wir sind darauf spezialisiert, schöne und benutzerfreundliche digitale Produkte zu gestalten, die das tägliche Leben der Menschen vereinfachen.

Unser Konzept und Design Team kreiert Nutzungserlebnisse, die klar und einfach bedienbar sind. Durch die enge Zusammenarbeit von Design, User Research und Softwareentwicklung entstehen Apps und Webseiten, die sich durch ihre Konsistenz und gezielte Ausrichtung auf das Zielpublikum auszeichnen. Ein durchdachtes Konzept sowie eine klare Designsprache schaffen ein Nutzungserlebnis, bei dem die Funktionen und Inhalte ohne Mühe und mit Freude genutzt werden können.

Auch bei digitalen Produkten beginnt der Konzeptions- und Designprozess häufig mit Skizzen auf Papier

App- und Webdesign: Zusammenspiel von Ästhetik und Funktionalität

App- und Webdesign ist viel mehr als die Gestaltung hübscher Oberflächen. Es ist die Kunst, Ästhetik und Funktionalität zu vereinen, sodass digitale Produkte nicht nur gut aussehen, sondern auch intuitiv und effizient genutzt werden können.

Dabei spielen zwei Disziplinen eine zentrale Rolle: User Interface (UI) Design und User Experience (UX) Design.

UX legt die Basis, UI verleiht das Look & Feel

Während UX Design sich mit der gesamten Nutzungserfahrung beschäftigt – von der Führung der Nutzer*innen über die Informationsarchitektur bis hin zur Funktionalität – liegt der Fokus des UI Designs auf der Gestaltung der Benutzeroberfläche.

Beide Disziplinen sind untrennbar miteinander verbunden: Ohne durchdachte UX nützt das schönste UI nichts – und ohne ein ansprechendes UI bleibt selbst die beste Funktionalität unsichtbar.

UI Design Elemente

Das User Interface ist die Schnittstelle zwischen Mensch und Maschine. UI Design legt fest, wie diese Schnittstelle gestaltet wird. Die eingesetzten Farben, Icons oder Schriftarten verleihen einem digitalen Produkt Charakter. Damit sich ein Interface lebendig anfühlt, gehören auch Animationen, Transtitionen, Komponenten und deren Zustände und ein passendes Sound- und Haptik-Konzept zum UI-Design dazu. Ebenfalls nicht zu vergessen sind Responsiveness und Accessibility Kriterien.

CICD als Grundlage

In den meisten Fällen sollen digitale Produkte erkennbar zu einer Firma oder Organisation gehören. Das heisst, Design Elemente orientieren sich an Corporate Identity und Corporate Design Richtlinien (CICD), oder ergänzen diese. In jedem Fall ist für das visuelle Design das CICD eine wichtige Grundlage. Das bedeutet auch: Entsteht für eine digitale Lösung eine gänzlich neue Marke, muss mindestens ein rudimentäres CICD definiert werden.

Farben & Schriften

Ergänzt werden muss ein CICD, wenn es nicht die nötigen Parameter, Informationen und Definitionen für die digitale Welt enthält. Etwa weil Farben nicht für Bildschirme, sondern für Print definiert sind, oder Schriften nicht lizenziert oder für digitale Produkte schlicht ungeeignet sind.

Klarheit über Farben und Schriften ist ein wichtiger Meilenstein auf dem Weg zum finalen Design – damit kann man starten. Für die langfristige Effizienz und Kohärenz muss aber letztlich viel mehr in einem Design System festgehalten werden: Dies beinhaltet das Anlegen von Farb- und Schriftstilen. Bei Schriften definiert man dabei zusätzlich Schriftgrössen, Zeilenabstände und Farben. Ausserdem wird spezifiziert, welche Kombinationen erlaubt sein sollen. Es entsteht dabei eine Hierarchie. Im Web Design werden auch die klassischen Tags, wie zum Beispiel H1, H2, H3, und so weiter vergeben.

UI Komponenten

Um Features zu implementieren und gleichzeitig sicherzustellen, dass nicht jeder Button anders aussieht, ist es wichtig – auch wenn man kein komplettes Design System baut – die wichtigsten Komponenten zu definieren. Dazu gehören zum Beispiel:

Navigationselemente wie Menüs oder Tabbars
Knöpfe und deren Verwandte: Buttons, Toggles, Checkboxes, Dropdowns und so weiter
Formular-Komponenten wie Textfelder und Datepicker
Fehlermeldungen und Statusanzeigen
Dialoge, Pop-Ups, Pop-Overs und Flyouts
Layout Elemente wie Cards, Tabellen, Accordions und dergleichen

Das ist keine komplette Liste. Jedes Konzept benötigt eine andere Zusammenstellung an Komponenten. Mal mehr, mal weniger. Mal simpel, mal komplex. Da sich IT Projekte bekanntlich bis zur letzten Sekunde vor Go Live in Inhalt und Struktur ändern, lohnt es sich in jedem Fall auch für kleine Projekte standardisiert mit Komponenten zu arbeiten. Eine kleine Änderung wird so in Sekundenschnelle auf sämtliche Instanzen angewendet – es entsteht kein Flaschenhals.

Animationen & Mikro-Interaktionen

Digitale User Interfaces sollten nicht statisch sein: Oft fällt das erst so richtig auf, wenn Animationen und sogenannte Mikro-Interaktionen fehlen. User*innen erwarten aber bewusst oder unbewusst, dass sich Apps auf eine bestimmte Art verhalten und bewegen. Und das kann je nach Plattform, sei es Web, iPhone App, Android App oder gar Desktop Applikation, auch unterschiedlich sein. Mit unserer Erfahrung wissen wir genau, wo eine Transition, Animation oder Mikro-Interaktion sinnvoll ist: Wirkt es zu statisch? Wirkt es für deine Marke zu verspielt?

Diese und weitere Fragen und viele Details gilt es bewusst zu gestalten. Je nach Anwendungsfall setzen wir dafür unterschiedliche Technologien wie Swift UI, Jetpack Compose oder Keyframes im Web ein. Auch Tools wie Rive und Lottie für komplexere Anforderungen sind in unserem Katalog.

Detailliertere Informationen zum Thema gibts im Blogbeitrag «Mikro-Interaktionen und Animationen in Apps - was bringen sie?».

Tabbar mit animierten Icons

Ton & Sound

Ebenfalls eine Schnittstelle zwischen Mensch und Maschine kann Klang sein: In den meisten Fällen verhalten sich Applikationen stumm. Töne, etwa bei Fehlern oder Notifications, werden dem Betriebssystem überlassen.
Aber nicht immer: Apps, die im Hintergrund laufen oder ohne aktive Bedienung funktionieren, nutzen oft Klänge, um Nutzende aufmerksam zu machen. In solchen Fällen stellen sich im Design ähnliche Fragen wie bei Farben: Wie klingt deine Marke? Und greift man auf Standards zurück oder produziert man etwas Individuelles?

Haptik

Wir sprechen oft auch bei visuellen Designs davon, «wie es sich anfühlt». Doch sprechen unsere Smartphones ja auch den Tastsinn an. Das sogenannte taktile oder haptische Feedback, also die Wahrnehmung von Ereignissen über unsere Haut, ist dank Vibrationsmotoren in unseren Geräten möglich. Haptisches Feedback ist ein oft unterschätzter Teil des Interface Designs, weil die Wahrnehmung oft unbewusst geschieht. Deshalb ist sie relevant und wird insbesondere in nativen Apps unbewusst erwartet. Auch in Webapplikation ist haptisches Feedback je nach Browser, Betriebssystem und Geräteeinstellungen möglich.

Barrierefreiheit oder Accessibility

Es ist wichtig, beim visuellen Erscheinungsbild nicht «nur» darauf zu achten, dass ein digitales Produkt ansprechend aussieht und sich das Produkt in bestehende Corporate Design und Corporate Identity Richtlinien einfügt, sondern dass das UI auch barrierefrei gestaltet wird.

Sind beispielsweise Farbkontraste genügend hoch, lassen sich die Schriftgrössen anpassen, ohne dass das Design komplett kaputt geht und sind die technischen Voraussetzungen für Screenreader-Kompatibilität gegeben?
Barrierefreies Design ist kein «Zusatzfeature» oder «nice-to-have», sondern elementar: Es steht niemandem im Weg, sondern trägt dazu bei, dass eine digitale Lösung für möglichst viele Nutzende zugänglich ist. Bedienbarkeit mit Tastatur ist wichtig, wenn man zum Beispiel einen Finger gebrochen hat und die Maus nicht gut bedienen kann, gut lesbarer Text, wenn man etwa aufgrund einer Operation temporär Schwierigkeiten mit der Sehkraft hat.

Eine gute Übersicht über das Thema gibt zum Beispiel bei A11y - Blindspot Accessibility

In unseren Blogbeiträgen finden sich ausserdem Inhalte rund ums Thema Accessibility:

Weil uns das Thema grundsätzlich wichtig ist, sind wir ausserdem Mitglied des Gönnervereins der Stiftung Zugang für alle.

Gutes Design ist so wenig Design wie möglich

Obschon die unterschiedlichen Elemente alle wichtig sind, darf man nicht vergessen, den Inhalten (Text und Bilder) genügend Platz zu geben und nicht alles mit UI Elementen zuzustellen. Der deutsche Industriedesigner Dieter Rams hat dies mit seinen 10 Thesen für gutes Design sehr passend veranschaulicht, indem er die ersten 9 Thesen seiner Liste mit der 10. These relativiert: «Gutes Design ist so wenig Design wie möglich». Daran orientieren wir uns wenn immer möglich.

Vielseitige Erfahrung

Unser Konzept & Design Team besteht aus Expert*innen mit verschiedenen Hintergründen und Fachwissen in den unterschiedlichsten Bereichen. Dadurch können wir nebst dem «klassischen» Design von digitalen Produkten auch weiterführende Dienstleistungen bieten, die für die erfolgreiche Entwicklung und Vermarktung eines digitalen Produkts nötig sind: