Webdesign

Die Gestaltung von Online-Medien umfasst strukturelle, funktionale und visuelle Aspekte. Die Ziel­gruppen spielen dabei eine wichtige Rolle.

Eine zentrale Anforderung beim Webdesign ist die responsive Umsetzung. Smartphone, Tablet und Desktop unterscheiden sich nicht nur in den Bild­schirmgrössen und Formaten, sie werden auch anders bedient und in unterschiedlichen Situationen und Umgebungen genutzt.

Relaunch geplant?
Reden wir darüber.

Agentur hausformat: Webdesign für Naturama und Hilfe schenken

Desktop first oder Mobile first?

Desktop first und Mobile first beschreiben zwei Herangehensweisen im Webdesign. Desktop first legt den Schwerpunkt auf Laptops und Desktop-Bildschirme, danach wir das Design für mobile Geräte optimiert. Bei Mobile first ist es umgekehrt.

Die Frage, welches Ausgabegerät priorisiert werden soll, hat an Bedeutung verloren. Die gelebte Vielfalt ist zu gross: User nutzen eine Website manchmal am Computer, manchmal auf dem Handy. Und sie erwarten – zu Recht – in jeder Situation eine gute User Experience. Statistisch gesehen haben die mobilen Zugriffe enorm zugelegt. Bei vielen Websites, die wir betreuen, ist es mehr als die Hälfte, je nach Branche sogar 80 % oder mehr.

User first

Das User Centered Design denkt nicht in technischen Kategorien, sondern orientiert sich am Bedürfnis und Verhalten der Menschen, die erreicht werden sollen. Die Analyse der bisherigen Zugriffe und User Journeys  kann bei einem Relaunch wertvolle Anhaltspunkte liefern. Mit welchen Devices werden die Inhalte angeschaut und wie lange? Wo finden die meisten Interaktionen statt? Gibt es Punkte mit kritischen Absprungraten?

Das sorgfältige Studium der Zielgruppen ist Voraussetzung, um Design-Lösungen zu finden, die intuitiv zu bedienen sind, die User in eine positive Stimmung versetzen und als Gesamterlebnis überzeugen.

Prototyping

+

Wir arbeiten beim UI/UX Design mit einem kollaborativen Online-Tool, das die Website im Browser simuliert. Es sind Interaktionen und Animationen möglich, so dass es sich schon fast wie ein realer Online-Auftritt anfühlt. Im iterativen Designprozess können alle Beteilig­ten direkt auf den Screens Kommentare platzieren. 

Nach der Umsetzung der Templates läuft die Website auf unserem geschützten Staging Server. Inhalte und Layout können so vor dem Go‑live 1:1 überprüft werden.

Webfonts

+

Mit guter Typografie kann man viel bewirken – funktional wie emotional. Bei der Wahl der Schriften richten wir uns entweder nach dem vorgegebenen Corporate Design oder machen uns auf die Suche nach Webfonts, die zum Brand und den Zielgruppen passen.

Wo möglich, setzen wir auf Variable Fonts. Bei dieser Technik sind alle Schriftschnitte in einem File vereint. Parameter wie die Dicke lassen sich stufenlos einstellen und sogar animieren. Dadurch kann die Typografie und Lesbarkeit noch präziser aufs Medium abgestimmt werden.

Page Speed

+

Ein Merkmal moderner Webdesigns sind die grosszügigen Bilder und Videos. In bester Qualität, auch für hochauflösende Bildschirme. Gleichzeitig sind kurze Ladezeiten nicht nur für die User Experience wichtig, sie zählen für SEO als Ranking Faktor.

Neue Formate wie webP und AVIF verdrängen immer mehr das klassische jpg und gif. Trotz hoher Kompression ist die Qualität erstaunlich. Eine weitere Möglichkeit, die Performance zu steigern, ist die Auslagerung der Bild­prozes­sierung auf einen separaten Medien-Server. 

Gutes Webdesign steigert die Conversion

Das Webdesign ist ein wichtiger Faktor für den Erfolg einer Website. Wenn sich die User von der Ästhetik und Stimmung persönlich angesprochen fühlen und unkompliziert finden, was sie suchen, setzen sie sich länger und intensiver mit den Inhalten auseinander. Die Absprungrate sinkt, die Conversion steigt.

Ist das Interesse einmal geweckt, sind Designelemente wie Teaser zu verwandten Themen ein bewährtes Mittel, um die User ohne Navigationsmenü und Hierarchie-Struktur auf eine Entdeckungsreise zu schicken, die nahtlos von einer Seite zur nächsten führt. Die organische User Journey ist eine grosse Chance, der Zielgruppe auch Inhalte zu präsentieren, die ausserhalb der ursprünglichen Suchintention liegen. Gut platzierte Call-to-Action-Elemente helfen, konkrete Handlungen auszulösen wie Kontaktaufnahme, Kauf oder Spende.