Entwurf Redesign - alles über Bord!

wolfgang.wiesmayr.uni-linz, 2. Mai 2013, 22:05

Vor zwei Tagen war es dann schlussendlich so weit - nicht mehr zufrieden mit dem Stand der Dinge wurden sämtliche bisherigen Designideen über Bord geworfen und wieder bei Null gestartet.

Nach einer längerem Brainstorming-Session dann die rettende Idee - Flat Design! Was bedeutet das? im Grunde nichts andres, als das sämtliche grafischen Elemente entfernt werden die keinen bestimmten Nutzen haben. Flat Design ist Minimalismus.

Homepage

Für die Homepage halten wir uns von der Basis her noch stark ans alte Design, allerdings mit neuem Menü, dessen Mitte das Firmenlogo (wird noch überarbeitet) ziert:

Contentpage

Für die Content-Pages verwenden wir zentrierten Text und funktionale Formen - im vorliegenden Mockup (Bilder werden noch erstellt; Dummymaterial) kann der User auf diese Klicken um mehr Informationen über den Inhalt zu bekommen. Beim Hovern über der Form verändert sich diese auch leicht (z.B. wird dunkler, etc.), damit der User die Interaktionsmöglichkeit erkennt:

Und hier die Detail-Site, nach einem Klick auf ein Polygon:

1 comment :: Kommentieren

wolfgang.wiesmayr.uni-linz, 5. Mai 2013, 14:30

Zum Detail-Bild möchte ich noch ein wenig was ausführen:

 

Man sieht hier ein sog. DIV-Popup/Popover (kennt man z.B. von Umfragen), welches beim Klick auf eines der Polygone gesetzt wird:

            function showDiv() {
               document.getElementById('semitransparent_overlay').style.display = "block";
               document.getElementById('overlay').style.display = "block";
            }

Zusätzlich wird im Hintergrund noch ein semitransparentes DIV gesetzt, damit User-Interaktionen abgefangen werden und dieser auch "mitbekommt", dass die Funktionen gesperrt sind. Wird auf dieses DIV (Name: semitransparent_overlay; siehe JS) geklickt, so verschwindet das gesamte Overlay wieder.

Verlinken :: Kommentieren