Gabys web-lernblog

In vielen Blogartikel finden sich Zusammenfassungen von Webtrends für das Jahr 2014. Auffällig bzw. übereinstimmend sind folgende Trends erkennbar:

Flat Design
Flat Design ist jenes Stichwort, welches in den meisten Beiträgen an erster Stelle erscheint. Flat Design meint eine reduzierte, minimalistische, zweidimensionale Darstellung. Verzierungen und Schatten werden nicht mehr verwendet, dafür einfache, klare Formen und Kontraste. Als Vorreiter dieses Trends wird Microsoft 8 genannt (Lenz, 2013). Ein Nachteil ist, dass mit dieser Darstellung die Tiefenschärfe verloren gehen kann und Buttons nicht mehr wahrgenommen werden.
Als Beispiel dazu kann die Website der voestalpine genannt werden. www.voestalpine.com



Farben
Unspektakuläre Farben oder Pastelltöne werden eingesetzt.
Auch dazu kann die voestalpine als Beispiel dienen. Ein weiteres Beispiel findet sich bei der Tischlerei Zögernitz. www.zoegernitz.at



One-Page Design
Das sind Webseiten, die auf einer einzigen Seite aufgebaut sind. Die Navigierung gleicht einem Blog der senkrecht seine Beiträge anzeigt. ?Der One-Page Hype basiert [?] auf den technischen Möglichkeiten von HTML5, CSS3, Ajax und Java Script, mit dem diese neuen Navigationsstrukturen möglich geworden sind.? (Medani, 2013a).
Als Beispiel dazu dient die Seite von TM Design www.tm-concepts.at



Bildschirmfüllende Bilder/Videos
Bildschirmfüllende Bilder oder auch Videos werden verwendet. Anstelle von Headerbilder werden Header-Videos zum Einsatz gebracht.
Beim Beispiel von Clean Clothes Kampagne ist das Bild im Hintergrund und passt sich der jeweiligen Bildschirmgröße an. www.cleanclothes.at



Bei Burger Holz www.burgerholz.at ist ein übergroßes Headerbild eingesetzt.



Responsive Menüs und Off Canvas
Die Anforderung wurde ursprünglich für mobile Endgeräte realisiert, wird nun aber auch für Desktop Monitore eingesetzt bzw. sie passt sich der Bildschirmgröße an. Lenz (2013) nennt das ?eine Planung nach dem Mobil-First ?Ansatz?.
Bei Linz findet man einen praktischen Tipp. Auf der Seite www.be-responsive.de kann man seine Website testen, ob sie responsive ist bzw. wie sie auf den verschiedenen Endgeräten angezeigt wird.
Das bedeutet, dass Inhalte teilweise außerhalb der Sichtfläche platziert werden, um sie bei Bedarf per Mausklick einzublenden. Bei be-responsive habe ich die Seite der voestalpine getestet und das Ergebnis ist hier als Beispiel abgebildet.



Eine besondere Art von Responsive Menüs ist Off Canvas. Dabei werden die Menüpunkte außerhalb des sichtbaren Bereiches angeordnet und per Klick angezeigt (Medani, 2013a; Lenz, 2013).

Storytelling
Laut Medani (2013a) führen die technische Möglichkeit von One-Page Navigationsstrukturen und die bildschirmfüllend Bilder dazu Storytelling vielfältig einzusetzen. Dabei geht es darum mittels Bildern und Videos Geschichten zu erzählen und eventuell dem Nutzer die Möglichkeit einer Wahl zu lassen, welche ?Geschichte? erhören möchte.
Auch dieser Trend wurde bei voestalpine anschaulich umgesetzt.




Literatur
Medani, Omar (2013a): Webdesign Trends 2014, Teil 1. Online: http://www.medani.at/news/webdesign-trends-2014-teil1/ erstellt am 31.10.2013 (25.12.2013)
Medani, Omar (2013b): Webdesign Trends 2014, Teil 2. Online: http://www.medani.at/news/webdesign-trends-2014-teil-2/ erstellt am 11.11.2013 (25.12.2013)
Liechtenecker, Juergen (2013): Webdesigntrends 2014. Online
http://liechtenecker.at/webdesigntrends-2014/ erstellt am 18.12.2013 (26.12.2013)
Lenz, Jessica (2013): Die 5 wichtigsten Webdesign Trends 2013 / 2014. Online http://viminds.de/design/5-wichtige-webdesign-trends-2013-2014 erstellt am 6.9.2013 (26.12.2013)

Das Grund-Design stammt von Antville. Ich habe das Design Nordic 1.0 gewählt und importiert und folgende Änderungen vorgenommen:

In der Navigation auf Layout → preferences: dort habe ich Text Font auf 12px reduziert und Small fonts auf 10 px.

Die Anordnung des rechten Bereiches habe ich etwas anders angeordnet
In der Navigation auf Layout → skins → site layout → main page: die einzelnen Elemente sind im HTML-Code gut erkennbar und so können die Teile leicht gelöscht und an der passenden Stelle wieder eingefügt werden.
Die überschüssigen Links, die Antville im Original Design aufgelistet hat, habe ich Großteils gelöscht und meinen eigenen privaten Blog verlinkt.

Etwas mehr Herausforderung war das Header-Bild zu verändern.
Dazu habe ich ein privates Bild verwendet, mit GIMP auf die Größe 800 x 180 px zugeschnitten und skaliert. Um darauf Online zugreifen zu können habe ich Picasa von Google genutzt. Dort habe ich das Bild hochgeladen und schließlich ins Design importiert. Dazu bin ich wie folgt vorgegangen:
Zuerst in der Navigation auf Layout → images → add a layout image: das Bild importieren. Aus dieser Liste habe ich entnommen, dass das aktuelle Bild "m_header" heißt. Weiters habe ich in der Navigation auf Layout → skins → Site layout → Stylesheet im HTML Code den Bildnamen des Headers von "m_header" auf mein Bildnamen "banner" verändert.
Irgendwo beim Importieren wurde das Bild verkleinert. Es hat jetzt nur mehr eine Größe von 712×161 pixels. Da das Headerbild links ausgerichtet ist, war rechts ein Freiraum entstanden. Um nicht wieder ein neues Foto hochladen zu müssen, habe ich das Bild zentriert. So sieht das Design besser aus. Dies wurde ebenfalls im Stylesheet vorgenommen und von "left" auf "center" gestellt.

Das Twitter Widget wurde, der Aufgabe entsprechend, eingefügt. Dank der detailierten Beschreibung ist dies einfach von Statten gegangen.

Generell möchte ich bemerken, dass ich die Handhabung des Blogs als nicht besonders bedienerfreundlich empfinde. Ich habe ein wenig Erfahrung mit Wordpress und finde diese Plattform praktischer, da man hier eher wenig in den HTML-Code eingreifen muss. Für Übungs- bzw Lernzwecke ist natürlich dieser Blog zweckmäßiger, da man, so zusagen, dazu gezwungen wird sich mit dem Hintergrund zu beschäftigen.