Grundlegende Trends im 
WEB DESIGN 
die 
DATENWERKkochbuch 
serie 
1
über 
DATENWERK 
Wir sind eine Web-Kommunikationsagentur mit 
dem Ziel die Dinge für Sie zu erleichtern. 
Wir sind seit 20...
INHALTE 
FLAT UI 
RESPONSIVE 
TYPOGRAPHY 
MOBILE 
FOCUS 
Farben 
Hero 
Areas 
Micro UX
flatUI 
WAS IST 
Flat UI? 
Flat UI ist eine 
Designphilosophie, die aktuell 
im Web und User Interface 
Design im Trend li...
skeuomorphicDESIGN 
Vor nicht allzu langer Zeit war der Computer den meisten 
Menschen unbekannt. Hallo Skeuomorphismus! D...
vielleicht3D? 
In der Kombination von Flat User Interface und 3D oder 
Video Elementen passiert gerade viel Spannendes. Ka...
responsive 
TYPOGRAPHY 
WAS IST 
responsive 
typography? 
WIE 
mache ich 
das? 
Wir haben da drei 
Vorschläge 
WARUM 
ist ...
jqueryPLUGINS 
Beste Ergebnisse 
Full liquid responsiveness 
1 
2 
CSSVIEWPORTunits 
Für wichtige Überschriften 
auf der g...
mediaQUERIES 
Zur Zeit die häufigste Methode für responsiveness. 
Geht nur für adaptive responsiveness. Das bedeutet, man ...
mobile 
FOCUS 
WARNUNG: 
Lasst euch das gescheiterte 
Experiment mit inwinite scrolling 
von Etsy.com eine Lehre sein: 
Ei...
Die fixierte 
Navigationsleiste 
mal anders: 
ryanscherf.net 
Warum fad sein? 
wa sKOMMT? 
Fixe Positionen für Content: Al...
FA R B E N 
DIE 5 MINUTEN 
FARBPALETTE! 
Schnell und einfach moderne 
und frische Farben winden? Hier 
lang: 
flatuicolors...
Verwendet ihr immer noch Slider? 
Vielleicht stattdessen mal eine große „hero area“ 
in Erwägung ziehen 
Den Bereich mit d...
Was ist microinteraction? 
In Sachen Webdesign geht es hier um jede kleine Interaktion, 
die UserInnen auf einer Website m...
kontakt 
D AT E N 
Welchen Web Trends folgst du? 
Lass es uns wissen! Wir freuen uns von dir zu hören! 
WOLFGANG ZEGLOVITS...
Nächste SlideShare
Wird geladen in …5
×

datenwerk Kochbuch: Webdesign- Trends 2014 (de)

12.101 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Internet
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
12.101
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
10.783
Aktionen
Geteilt
0
Downloads
15
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

datenwerk Kochbuch: Webdesign- Trends 2014 (de)

  1. 1. Grundlegende Trends im WEB DESIGN die DATENWERKkochbuch serie 1
  2. 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. 3. INHALTE FLAT UI RESPONSIVE TYPOGRAPHY MOBILE FOCUS Farben Hero Areas Micro UX
  4. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×