15
Grundlegende Trends im WEB DESIGN die DATENWERKkochbuch serie 1

datenwerk Kochbuch: Webdesign- Trends 2014 (de)

Embed Size (px)

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.

Citation preview

Grundlegende Trends im

WEB DESIGN

dieDATENWERKkochbuchserie

1

ü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.

INHALTE

FLAT UI

RESPONSIVETYPOGRAPHY

MOBILEFOCUS

Farben

HeroAreas

Micro UX

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!