datenwerk kochbuch: webdesign- trends 2014 (de)
DESCRIPTION
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.TRANSCRIPT
überDATENWERK
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.
flatUIWAS 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 ELEMENTEdefinieren
Flat UI?
Knackige Kanten
Helle, kräftige Farben
2D Illustrationen und Ikonographie
Raum zum Atmen
Klar gekennzeichnete Elemente für Interaktion und Navigation
WARUMFlat?
Im Folgenden ein kurzer Abriss, wie's früher war und warum es vielleicht Zeit ist umzusteigen.
flatUIFlatUI 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.
skeuomorphicDESIGNVor 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.
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.
WASkommt als nächstes?Jede Designphilosophie weicht entweder einer
anderen oder entwickelt sich selbst weiter.
Oder beides.
gizmodo.com
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?
“A�ter radical �latness, we’ll probably see designers carefully reintroduce dimensionality where it’s really needed.”
Für ein atemberaubendes 3D Erlebnis empfehlen wir den 3D WebGL Spacewalk
Elegantes Flat Interface mit großartigen Videointeraktionen
gravitymovie.warnerbros.com
keecker.com
responsiveTYPOGRAPHYWAS IST responsive
typography?
WIEmache ich
das?Wir haben da drei
Vorschläge
WARUMist 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.
jqueryPLUGINSBeste Ergebnisse
Full liquid responsiveness
CSSVIEWPORTunits
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.
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
Für allgemeine Texte:
simplefocus.com/flowtype
FLOWTYPE
Für wichtige Überschriften auf der ganzen Breite: SLABTEXT
freqdec.github.io/slabText
caniuse.com/viewport-units
1
2
mediaQUERIESZur 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 EINEaufregende
Erfahrung von responsive typograpy?
Hier in Kombination mit Gesichtserkennungsso�tware ansehen!
webdesign.maratz.com/lab/responsivetypography
“A�ter radical �latness, we’ll probably see designers carefully reintroduce dimensionality where it’s really needed.”
mobileFOCUS
WARNUNG:
Lasst euch das gescheiterte Experiment mit in�inite scrolling
von Etsy.com eine Lehre sein: Einem Web-Trend zu folgen ist
vielleicht nicht immer das Beste �ür die eigene Zielgruppe.
wasKOMMT?
Schon bemerkt, dass es einen steigenden Fokus auf responsive und mobile Webseiten gibt? Das �ührt zu einigen allgemeinen Trends im Web Design:
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.
3
2
Die fixierte Navigationsleiste
mal anders:ryanscherf.net
Warum fad sein?
wasGEHT?
Lange, starre Textbereiche1
Sidebars2
wasKOMMT?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
FARBEN
DIE 5 MINUTEN FARBPALETTE!
Schnell und einfach moderne und frische Farben �inden? 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?
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.
EIN STATEMENT SETZENDIE MARKE IN DEN FOKUS STELLEN
ZUR INTERAKTION AUFRUFENINFORMATIONEN BEKOMMEN
baystreetbiergarten.com
realtii.com
HeroAREAS
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.
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.
cssdeck.com/labs/animated-check-inputs
kontaktDATEN
WOLFGANG ZEGLOVITS [email protected] 01 585 60 71 1418
Magdalenenstraße 33, 1060 Wien
www.datenwerk.at
www.opiniontracker.net
Welchen Web Trends folgst du?
Lass es uns wissen! Wir freuen uns von dir zu hören!