Unsere ersten Entwürfe haben wir inzwischen angepasst, weiterentwickelt und grafisch aufgewertet. Die Formen sind abgerundet, halbtransparent und wurden zum Teil mit einem Glanz-Effekt versehen. Zum Beispiel bei den Produkt-Icons lässt sich so besser visualiseren, dass die Objekte mit der Maus bewegt werden können. Die abgerundeten Formen schaffen eine Zusammengehörigkeit zwischen den Objekten. Insgesamt wurde außerdem ein Raster verwendet, was sich über beide Bereiche der Infografik erstreckt. Die Farbcodierung hilft bei der Navigation und schafft eine passende “Atmosphäre” für die Nutzung.
Jürgen Verschiedenes Design, Gestaltung, Layout, Screendesign
Auch für die Prozessebene gibt es nun erste Entwürfe. Da wir den Kaffeeprozess visualisieren, soll der Nutzer durch die Farbgebung sofort an Kaffee erinnert werden.
In diesem Entwurf fehlt jedoch noch die Hauptnavigation.
Andrea Gestaltung Design, Gestaltung, interaktive Infografik, Layout, Screendesign
Erste Entwürfe
Nach einer langen Recherche- und Konzeptionszeit geht’s jetzt an die Gestaltung. Ziel für das Screendesign ist die Kombination eines zurückhaltenden, seriösen Stils mit ansprechender, moderner Gestaltung (in Anlehnung an typische Web 2.0 Designs). Hier einer der ersten Entwürfe in Photoshop für die Vergleichs-Ebene mit Drag n’ Drop Funktion.
Format
Das Format unserer interaktiven Infografik wird 800×600 Pixel sein. So kann die Grafik, parallel zu einem Artikel über virtuelles Wasser, in einem externen Fenster geöffnet werden. Das 800×600-Format bietet genug Platz für unsere Inhalte, verdeckt aber nicht den ganzen Bildschirm und ist somit bestens für diesen Zweck geeignet.
Jürgen Gestaltung Design, Gestaltung, interaktive Infografik, Layout, Screendesign
Unsere ersten Entwürfe haben wir inzwischen angepasst, weiterentwickelt und grafisch aufgewertet. Die Formen sind abgerundet, halbtransparent und wurden zum Teil mit einem Glanz-Effekt versehen. Zum Beispiel bei den Produkt-Icons lässt sich so besser visualiseren, dass die Objekte mit der Maus bewegt werden können. Die abgerundeten Formen schaffen eine Zusammengehörigkeit zwischen den Objekten. Insgesamt wurde außerdem ein Raster verwendet, was sich über beide Bereiche der Infografik erstreckt. Die Farbcodierung hilft bei der Navigation und schafft eine passende “Atmosphäre” für die Nutzung.
