Blog
NETNODE News
30.08.2019

NETNODE Projektkompass - DESIGN

In den beiden Phasen DISCOVER und DEFINE wurden die Zielgruppen analysiert, die Strategie entwickelt sowie die Ziele und Anforderungen definiert. Es steht alles bereit um in der DESIGN Phase das Konzept in Szene zu setzen.

Ziele im DESIGN

In der DESIGN Phase wird auf der Grundlage des erarbeiteten Detailkonzepts die Gestaltungsrichtung entwickelt und das Design detailliert ausgearbeitet. Das Ergebnis ist ein visueller Prototyp als Basis für die technische Umsetzung.

The details are not the details. They make the design.
Charles Eames

Brand Look & Feel

Neben dem Detailkonzept inklusive den Wireframes und der Sitemap sollte ein Brand Look & Feel beispielsweise in Form von Moodboards vorhanden sein. Aus diesem lässt sich die visuelle Sprache des Brands oder des Produkts herauslesen. Existiert ein solches noch nicht, ist es sinnvoll sich vor dem eigentlichen Design des digitalen Produkts mit der Typografie, Farben, Form- und Bildwelten auseinander zu setzen.

 

Ästhetik

Ästhetik ist ein Erfolgsfaktor wenn es darum geht, Interesse zu wecken und die Nutzermotivation zu fördern. Lesen Sie mehr über Ästhetik und User Experience in unserem Blog-Post «Der erste Eindruck zählt». Ästhetische Produkte oder Services werden als bedienungsfreundlicher wahrgenommen, unabhängig ob sie es auch sind.

Entsprechend hoch ist der Stellenwert einer ansprechenden visuellen Gestaltung. Das Design sollte dabei immer mit der zuvor definierten Strategie, Anforderungen und Zielgruppen-Ansprache begründbar sein. Zusätzlich darf das bestehende Corporate Design nicht ausser Acht gelassen werden – das digitale Produkt sollte die Marke widerspiegeln.

Hässlichkeit verkauft sich schlecht.

Raymond Loewy

Rastersystem und Seitenaufbau

In einem ersten Schritt entwickeln wir das Layout-Raster (Grid) für das Design. Das Raster gibt die grundsätzliche Struktur vor und kann aus den bereits erstellten Wireframes abgeleitet werden. Zusätzlich fliessen stets die unterschiedlichen Endgeräte in die Entscheidungen mit ein. In den meisten Fällen greifen wir auf ein flexibles Rastersystem («fluid grid») zurück. Dabei passt sich die Webseite auf kleineren Bildschirmen der Breite des Browsers an und die Spalten werden beispielsweise untereinander statt nebeneinander platziert.

jetzt Downloaden
Webseiten-Redesign-Checkliste
Erfolgreicher Webseiten Relaunch

Mit der Webseiten-Redesign/Relaunch-Checkliste wird Ihre neue Webseite garantiert ein Erfolg.

mehr erfahren.

Look & Feel

Aufgrund des Rasters definieren wir die Position und Grössenverhältnisse der Hauptbereiche wie Header, Navigation, Contentbereich und Footer. Anschliessend beginnen wir mit der Gestaltung der einzelnen Bereichen, Modulen und Inhaltslementen. Dabei orientieren wir uns an den Wireframes, erproben diese visuell und nehmen Fein-Justierungen vor. Wir experimentieren im Rahmen des Corporate Designs mit der Typografie, Farben und dem Bildeinsatz bis ein stimmiges und überzeugendes Gesamtbild entsteht.

Form Follows Function

Bei der Ausgestaltung der Inhaltselementen spielt die Zielgruppe eine wichtige Rolle. Wie gross, detailreich oder verspielt dürfen diese gestaltet sein – beispielsweise haben Senioren andere individuelle Anforderungen als Kinder. Und auch das Endgerät spielt eine wichtige Rolle: Ein Menüelement auf Touchscreen benötigt mehr Platz als eines das mit der Maus bedient wird.

Viele Inhaltslemente kommen mehrfach und auf unterschiedlichen Seitentypen zum Einsatz. In der DEFINE Phase haben wir diese Elemente kategorisiert und in der DESIGN Phase achten wir nun auf eine konsistente Gestaltung. Durch die Kategorisierung können die Elemente in einer «Bibliothek» gesammelt werden und bildet eine gute Grundlage für die Erstellung eines Online Styleguides.

Prototyping und Testing

Sind die wichtigsten Seitentypen und Inhaltselemente gestaltet, erwecken wir die designte Webseite ein erstes Mal zum Leben. Mittels dem Prototyping-Tool InVision können die Screens zu einem klickbaren Prototypen zusammengestellt werden. Das Design lässt sich direkt im Browser oder auch auf einem Smartphone betrachten. Unser Kunde kann sich das Endprodukt so bereits sehr gut vorstellen und die Abnahme des Designs fällt sehr viel leichter.

Ein solcher Prototyp eignet sich zudem hervorragend für ein Usability Testing um herauszufinden wie intuitiv sich beispielsweise das Navigationskonzept durch den Nutzer bedienen lässt.

Fazit

In der DESIGN Phase entsteht die visuelle Erscheinung des digitalen Produkts. Dank dem Prototypen kann die Webseite bereits Online betrachtet werden und bildet zusammen mit dem Styleguide eine ausgezeichnete Basis für die technische Umsetzung in der DELIVER Phase.