Webgestaltung 2.0

In den letzten zwei Schulwochen erarbeitete ich mit meiner Gruppe das Layout der Webseite mit Sketch und den ersten Webseitenentwurf für den fiktiven Reiseveranstalter „Ski Stern Sportreise“ (weitere Screenshots folgen noch).

Die ganz besondere Herausforderung an dieser Stelle war die Einbindung der Navigationsleiste, die sich rechts im Bild befindet (siehe auf dem Bild rechts).

Die grafischen Elemente können ohne weitere Hilfe nicht gemeinsam anecken. Das Resultat sieht wie folgt aus:

/ |
|  |
| /
/ |
|  |
| /

Der Browser sieht alles immer in der Form eines Quadrats. Deshalb muss man die Formen zu ihrem Glück zwingen und sie mit CSS verschieben.
Dies erfolgt über die Befehl „margin-top:  (?)px;“ .

 

 

Screendesign

Diese Woche durfte ich mich mit dem Screendesign auseinandersetzen.

Zuvor musste ich in meiner Gruppe überprüfen, welches für den Print-Bereich ausgelegte Corporate Design sich für den Webraum eigne. Überprüfungsmerkmale waren grundlegende gestalterische Elemente wie Farbe, Formen und Schriften. Orientiert haben wir uns in der Gruppe an dem bereits gestalteten Magazin.

Der nächste Schritt sah es vor eine inhaltliche Gliederung allen notwendigen Contents für die Webpräsenz zu planen. Hierbei war es wichtig ganz klar die Menge des Contents zu definieren, denn aus dieser Planung lässt sich letztlich auch die Navigationsleiste ableiten.

Und nun kommt der Leser in der Gegenwart meines Treibens an:

Die bereits angefertigte inhaltliche Gliederung muss nun visualisiert werden. Dazu nutzen wir das Programm Sketch von Bohemian Coding, welches sich als gutes Konkurrenzprodukt gegenüber Adobe zeigt – doch dazu gibt es in näherer Zukunft Infos.
Das dazu notwendige Template ist fertig, nun muss nur noch Content eingefügt werden.