Was sind die Trends im Webdesign 2014? Die erste Ausgabe des datenwerk Kochbuchs gibt einen Überblick und zeigt Beispiele zu grundlegenden Trends im Webdesign der heutigen Zeit.

1. Grundlegende Trends im
WEB DESIGN
die
DATENWERKkochbuch
serie
1

2. über
DATENWERK
Wir sind eine Web-Kommunikationsagentur mit
dem Ziel die Dinge für Sie zu erleichtern.
Wir sind seit 2000 im Einsatz und beschäftigen
derzeit 15 Web-SuperheldInnen.
Unser Mission ist es, Ihre Webpräsenz up-to-date
und großartig zu machen.

3. INHALTE
FLAT UI
RESPONSIVE
TYPOGRAPHY
MOBILE
FOCUS
Farben
Hero
Areas
Micro UX

4. flatUI
WAS IST
Flat UI?
Flat UI ist eine
Designphilosophie, die aktuell
im Web und User Interface
Design im Trend liegt.
Man könnte auch
„Minimalismus mit Extras“
dazu sagen. Bei Flat UI geht es
darum, die klaren Bereiche
und Freiflächen des
Minimalismus mit hellen,
kräftigen Farben und
verbesserter
Benutzerfreundlichkeit zu
ergänzen.
WELCHE ELEMENTE
definieren
Flat UI?
Knackige Kanten
Helle, kräftige Farben
2D Illustrationen und
Ikonographie
Raum zum Atmen
Klar gekennzeichnete Elemente
für Interaktion und Navigation
WARUM
Flat?
Im Folgenden ein kurzer Abriss,
wie's früher war und warum es
vielleicht Zeit ist umzusteigen.

5. skeuomorphicDESIGN
Vor nicht allzu langer Zeit war der Computer den meisten
Menschen unbekannt. Hallo Skeuomorphismus! Die Idee ist
einfach: kreiere Metaphern. Nimm ein unbekanntes technisches
Konzept und gib ihm bekannte Namen und Gesichter.
flatUI
FlatUI ist mit der mobilen Nutzung kompatibel. Die vereinfachte
Darstellung kann leicht für alle möglichen UserInnen und ihre
Endgeräte optimiert werden.
Weil wir mittlerweile auf Skeuomorphismus verzichten können, ist
flatUI aus heutiger Sicht besonders wichtig und zeigt, wo wir
technologisch stehen.
68% der Web-ExpertInnen sagt, flatUI ist „gekommen, um zu
bleiben“. 500 Millionen Apple Geräte mit flat Design Interfaces
wurden seit Jänner 2014 verkauft. Bis Ende 2013 soll Flat Interface auf
rund 1 Milliarde Android Geräten im Einsatz gewesen sein.
Einen Haufen Code wie einen Ordner
aussehen lassen? Das ist Skeuomorphismus.
Ein Objekt, das wir aus „dem echten Leben“
kennen, dort hinzusetzen, wo es eigentlich
nicht hingehört, schafft Vertrautheit.
Die heutigen Web-NutzerInnen sind weitaus
technikaffiner als die Neulinge vor 20
Jahren. Es ist daher nicht mehr notwendig
Objekte aus „dem echten Leben“ detailgetreu
nachzustellen.
WAS
kommt als
nächstes?
Jede Designphilosophie
weicht entweder einer
anderen oder entwickelt
sich selbst weiter.
Oder beides.

6. vielleicht3D?
In der Kombination von Flat User Interface und 3D oder
Video Elementen passiert gerade viel Spannendes. Kann
das ein richtiger Trend für das kommende Jahr werden?
“Awter radical wlatness, we’ll probably
see designers carefully reintroduce
dimensionality where it’s really needed.”
gizmodo.com
gravitymovie.warnerbros.com
Für ein atemberaubendes 3D Erlebnis
empfehlen wir den 3D WebGL Spacewalk
Elegantes Flat Interface mit
großartigen Videointeraktionen
keecker.com

7. responsive
TYPOGRAPHY
WAS IST
responsive
typography?
WIE
mache ich
das?
Wir haben da drei
Vorschläge
WARUM
ist das
wichtig?
Wenn Content minimiert
wird, ist es umso wichtiger,
das, was man dann noch hat,
optimal darzustellen.
Es gibt zwei Arten von
responsive typography:
Adaptive und Liquid
Bei responsive typography
geht es nicht nur darum,
Bereiche und den darin
fließenden Text automatisch
größentechnisch anzupassen.
Wer nicht auch gut lesbare
Schriftgrößen, Zeilenhöhen
und -längen für
unterschiedliche
Bildschirmgrößen mitdenkt,
macht nur die halbe Arbeit.

8. jqueryPLUGINS
Beste Ergebnisse
Full liquid responsiveness
1
2
CSSVIEWPORTunits
Für wichtige Überschriften
auf der ganzen Breite: SLABTEXT
freqdec.github.io/slabText
Für allgemeine Texte:
simplefocus.com/flowtype
dieEINHEITEN
CSS Viewport Unions definieren die Textgröße in viewport
Prozenten. Das bedeutet, dass die Schriftgröße relativ zur Größe des
Inhaltsbereichs (Browserfenster) angepasst wird. Wenn der
Inhaltsbereich seine Größe ändert, so tut das der Text auch.
Liquid responsiveness
Es bedarf einer händischen- oder jQuery – Anpassung bei der
Änderung der Browsergröße; dies ist wahrscheinlich eher eine
längerfristige Lösung. Die Browserkompatibilität für CSS vu ist noch
nicht optimal. Das wird sich wahrscheinlich bald ändern.
FLOWTYPE
1vw = 1% der Breite des Inhaltsbereichs
1vh = 1% der Höhe des Inhaltsbereichs
1vmin = das jeweils Kleinere von 1vhw oder 1vh
1vmax = das jeweils Größere von 1vhw oder 1vh
caniuse.com/viewport-units

9. mediaQUERIES
Zur Zeit die häufigste Methode für responsiveness.
Geht nur für adaptive responsiveness. Das bedeutet, man kann
nur fixe Schriftgrößen für vordefinierte Bildschirmgrößen
festlegen. Die Schriftgrößen ändern sich dann nur bei diesen
bestimmten Größen.
Obwohl media queries zur Zeit noch durchaus ihren Zweck
erfüllen, sehen wir sehr wohl die Notwendigkeit von liquid
responsiveness. Zur Zeit mag es nur eine Handvoll
Bildschirmgrößen geben, auf die man sich einstellen muss. Doch
technische Geräte werden stetig weiterentwickelt. Es macht also
durchaus Sinn in Zukunft nicht nur für ein paar wenige
Bildschirmgrößen zu designen.
3
LUST AUF EINE
aufregende
Erfahrung von
responsive
typograpy?
Hier in Kombination mit
Gesichtserkennungssowtware ansehen!
webdesign.maratz.com
/lab/responsivetypography

10. mobile
FOCUS
WARNUNG:
Lasst euch das gescheiterte
Experiment mit inwinite scrolling
von Etsy.com eine Lehre sein:
Einem Web-Trend zu folgen ist
vielleicht nicht immer das Beste wür
die eigene Zielgruppe.
Schon bemerkt, dass es einen steigenden Fokus auf
responsive und mobile Webseiten gibt? Das wührt zu einigen
allgemeinen Trends im Web Design:
wa sKOMMT?
Lightboxes, Überlappungen, sich erweiternde Kacheln,
infinite scrolling usw.: Alles, was das Beste aus dem wenigen
vorhandenen Platz macht und die typische
„Wischbewegung“ mitdenkt.
Integration von Social Media: Like Buttons, Sharing
Funktionen, Links zu Apps, Newsletter Bestellungen – was
auch immer – es ist da.
mcfunley.com
/design-for-continuous-experimentation
1
Videos oder Infografiken? Warum lesen, wenn man es
sich anschauen kann? Einfach, kompakt und leicht zu
konsumieren.
2
3

11. Die fixierte
Navigationsleiste
mal anders:
ryanscherf.net
Warum fad sein?
wa sKOMMT?
Fixe Positionen für Content: All diese neuen Levels
von Inhalten auf einer langen Scroll-Seite können
BenutzerInnen leicht verwirren. Deswegen macht es
Sinn, ihnen etwas zum Festhalten zu geben. Fixierte
Navigationsleisten sind ein Trend, dem man gut und
gerne folgen sollte.
4
wa sGEHT?
1 Lange, starre Textbereiche
2 Sidebars

12. FA R B E N
DIE 5 MINUTEN
FARBPALETTE!
Schnell und einfach moderne
und frische Farben winden? Hier
lang:
flatuicolors.com
Welche Farbe soll ich verwenden?
Flat UI hats drauf - mit einfachen, hellen Farben.
Fetzige, gemischte Farbpaletten verwenden oder mit einem
monochromatischen Schema auf der minimalistischen
Seite bleiben.
Emerald
Trendfarbe 2013 bis Anfang 2014
Pantone Farbe des Jahres 2013
Radiant Orchid
Pantone Farbe des Jahres 2014.
Ein Trend, der darauf wartet
entdeckt zu werden?

13. Verwendet ihr immer noch Slider?
Vielleicht stattdessen mal eine große „hero area“
in Erwägung ziehen
Den Bereich mit der meisten Aufmerksamkeit einer Website
nutzen, um die wichtigsten Punkte rüberzubringen.
baystreetbiergarten.com
EIN STATEMENT SETZEN
DIE MARKE IN DEN FOKUS STELLEN
ZUR INTERAKTION AUFRUFEN
INFORMATIONEN BEKOMMEN
realtii.com
Hero
AREAS

14. Was ist microinteraction?
In Sachen Webdesign geht es hier um jede kleine Interaktion,
die UserInnen auf einer Website machen. Zum Beispiel mit der
Maus über einem Link verharren.
MicroUX
Wie setze ich das ein?
Es gibt eine Vielzahl an Effekten, um einfache Aktionen wie
zum Beispiel scrollen, hovering oder auch das Anhaken von
Checkboxen aufregender zu gestalten.
Der einfachste Weg mit microinteractions zu beginnen:
Übergang zu CSS 3.
Warum ist das wichtig?
Mit dem Trend zu Minimalismus und Vereinfachung kann Design
ein wenig langweilig werden. Micro UX belebt die User Experience,
verbessert die Benutzerfreundlichkeit und macht eine Website zu
einem unvergesslichen Erlebnis.
cssdeck.com/labs/animated-check-inputs

15. kontakt
D AT E N
Welchen Web Trends folgst du?
Lass es uns wissen! Wir freuen uns von dir zu hören!
WOLFGANG ZEGLOVITS
wolfgang.zeglovits@datenwerk.at
01 585 60 71 1418
Magdalenenstraße 33, 1060 Wien
www.datenwerk.at
www.opiniontracker.net