Archiv der Kategorie: Visual Design

Visual Design

Nach Konzeptüberarbeitung gibt es nun eine inhaltliche Dreiteilung: Die Kapitel Was? (Was ist Responsive Webdesign) Warum? (Warum Responsive Webdesign) und Wie? (Wie funktioniert Responsive Webdesign). Sowohl die Topnavigation, als auch die Kapitelüberschriften weisen auf diese Dreiteilung hin. Über unterschiedliche Farben wollten wir zunächst die Kapitelgliederung auch visuell verdeutlichen. Jedoch mussten wir pro Kapitel mehrere Farben verwenden, um beispielsweise Wireframes darzustellen. So konnten wir pro Kapitel nicht nur eine Farbe einsetzen. Stattdessen beschränkten wir uns darauf für die Highlights in aufeinanderfolgenden Kapiteln unterschiedliche Farben zu verwenden. Um die Übergänge zwischen Kapiteln zu verdeutlichen, bedienen wir uns bestimmter „Transitions“ Mehr dazu folgt.

Es ist schwierig gleichzeitig eine Infografik zu bedienen und Texte durchzulesen. Deswegen ist es nach unserer Meinung zwingend erforderlich, visuell eine Hierarchie zu erreichen. Wir haben uns dafür entschieden, die Grafik hierarchisch über die Texte zu stellen, da der Nutzer bei einer unauffälligen Grafik übersehen könnte, dass er interagieren kann/sollte. Das könnte dazu führen, dass er weiter scrollt und dadurch wichtige Bereiche der Grafik übersieht. Es war uns also sehr wichtig, dass der Fokus stets auf den Visualisierungen liegt, damit sich der Nutzer zunächst mit dem Bedienen der Grafik auseinandersetzt. Erreicht haben wir dies über Größe, Farbigkeit und Detailgrad. Die Texte müssen dennoch leserlich und auffällig genug sein, sodass sie vom Nutzer nicht übersehen werden, da sie wichtige Informationen enthalten. Das Interesse des Nutzers soll durch die Grafik angeregt werden, sodass er nach weiteren Informationen „sucht“.

Durch die gesamte Infografik ziehen sich Visualisierungen von Mobilgeräten, Laptops und Monitoren. Hier wurde versucht eine einheitliche Bildsprache bzw. Anmutung zu kreieren. Der Realismusgrad sollte nicht zu groß sein. Wir bedienten uns, sowie auch in der übrigen Gestaltung, dem „Flat Design“. Den großen Vorteil des „Flat Designs“ sehen wir in der Umsetzung. Elemente wie die Navigation oder Buttons können gänzlich in CSS erstellt werden und sind dadurch in jeder Auflösung scharf, können vergrößert bzw. verkleinert werden und laden schneller als Bilder. Das ist der Hauptgrund für unsere Entscheidung für „Flat Design“. Die Visualisierungen müssen jedoch trotzdem als Images eingebunden werden, sie sollten aber zur Gesamtanmutung der Website passen.

Foto 22.07.13 19 29 43Geräte