mazze.ch matthias walti informationsarchitekt

Transkript

1 mazze.ch matthias walti informationsarchitekt Collegium Vocale Lenzburg Vorschlag für Webdesign verfasst durch Matthias Walti Informationsarchitekt Vorderweystrasse Muri info@mazze.ch Datum: 14. Februar 2014 Dokumentversion 1.0

2 Hoi Oliver, wie vereinbart sende ich Euch heute die Designvorschläge für die neue Website. Ein paar Erklärungen dazu findest Du nachfolgend. Vorgehen Gerade im responsiven Webdesign lässt sich die Darstellung nicht mehr pixelgenau steuern. Aufgabe des Webdesigns ist es, diese Einschränkung geschickt zu umgehen. Deshalb arbeitet man zunehmend weniger mit klassischen Vorlagen aus Photoshop, sondern entwickelt eine Art Designsystem, das sich universell anwenden und erweitern lässt. Die Sache ist vergleichbar mit den Moodboards, welche in der Werbung oft verwendet werden. Unerlässlich beim responsiven Design ist ebenfalls die Verwendung eines Gestaltungsrasters, auch dieser ist in anderen Bereichen längst bekannt, etwa in der Buchproduktion. Vorschläge Die Vorschläge sind deshalb nicht pixelgenaue Vorlagen, sondern eher eine Art Kochrezept, wie die Elemente angewendet werden können. Gerade bei der Frontseite liegen zudem zwei Alternativen vor, welche mögliche Alternativen bei der Gewichtung von Inhalt sowie Farbeinsatz zeigen, ansonsten aber praktisch identisch sind. Schrift Eine sorgfältige Schriftauswahl ist gerade für die Darstellung auf Smartphones wichtig. Einerseits ist da wenig Platz für Bilder, die der verwendete Font hat einen umso grösseren Anteil am Erscheinungsbild. Anderseits muss die Schrift auch in kleinen Grössen gut lesbar sein. Ein weiterer Punkt: die Schrift muss überhaupt in einer Webfont-Version verfügbar sein. Ich habe mich bei der Auswahl stark an Eurein bisherigen Plakaten orientiert, wo Ihr eine sehr klare Grotesk-Schrift verwendet. Sie ist stark stilbildend für Euer Erscheinungsbild (und gefällt mir übrigens sehr gut). Nach der Evaluation einiger Schriftschnitte schlage ich Euch den Webfont Aktiv Grotesk von Dalton Maag vor, einer sehr renommierten Schriftschmiede in London, übrigens mit Schweizer Wurzeln. Die Unterschiede zur bekannten Helvetica sind bei der flüchtigen Betrachtung gering. Aber auf dem Screen wirkt die Sache jedoch viel besser lesbar und hochwertiger. Die Verwendung der Schrift ist auf dem Prototypen direkt live abrufbar: (warum aber auf den Gestaltungsvorschlägen eine andere Schrift verwendet wurde, erkläre ich Dir am einfachsten mündlich, es gab technische Probleme auf meinem Rechner;-). Kurz: für die Beurteilung gilt die Webadresse, NICHT die Screens). Farben Bei der Farbauswahl unterscheide ich zwischen Primär- und Sekundärfarben. Primäre Farben haben Signalcharakter und sind entscheidend für den optischen Eindruck. Ich habe bei der Farbintensität etwas weniger leuchtende Werte als bei Euren Kollegen in Gent gewählt, also etwas dezentere Töne mit mehr erdigem Anteil.. Zudem liegen zwei Beispiel bei, wie stark sich die unterschiedliche Gewichtung auswirken kann. Diskutiert die Sache, ich bin gespannt auf Eure Eindrücke. Weiteres Vorgehen Ihr habt ja am 18. Februar Vorstandssitzung, wie Du mir gesagt hast. Diskutiert doch den Vorschlag unter dem Aspekt, dass es sich eben um eine Designsystem handelt und nicht um pixelgenaue Vorschläge. Es ist vergleichbar mit einer Art Kochrezept, das man bei der Umsetzung ebenfalls noch variieren kann. Und dann besprechen wir Eure Rückmeldungen und Kommentare und gehen in die Iteration. Bis heute in einer Woche kann ich die Vorschläge dann überarbeiten ( Design 2.0 auf Basecamp).

3 Moodboard Einsatz und Gewichtung der Designelemente. Schriftauswahl Aktiv Grotesk Std von Dalton Maag (London) passt sehr gut zu Eurer bisherigen Kommunikation.

4 Schriftfont im Einsatz Dies ist der Screenshot von der effektiven Webdarstellung der Aktiv Grotesk. Sehr schön und gut lesbar auch im Lauftext. Frontseite Vorschlag für Frontseite, Farbstimmung dezent. Der Anteil an Signalfarben ist gering, und trotzdem sind sie gut sichtbar und gleichzeitig nicht aufdringlich.

5 Inhaltsseite Rasteraufteilung (Desktop-Version) Basierend auf einem 12-er Raster Farbgewichtung Beispiel 1 Variante Frontseite, Farbstimmung dezent, Anteil Signalfarben hoch

6 Farbgewichtung Beispiel 2 Diese Seite zeigt, wie der Einsatz von weniger erdigen Tönen die Anmutung sofort verändern kann, in diesem Fall der Einsatz von Blau. Anteil Signalfarben: hoch. Bildgewichtung Hier noch ein Beispiel, wie man dem Key Visual mehr Gewicht geben kann, indem man es über die gesamte Breite laufen lässt. Farbstimmung dezent, Anteil Signalfarben hoch.