Home >Internet >datenwerk Kochbuch: Webdesign- Trends 2014 (de)

datenwerk Kochbuch: Webdesign- Trends 2014 (de)

Date post:01-Dec-2014
Category:
View:3,001 times
Download:1 times
Share this document with a friend
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:
  • 1. Grundlegende Trends im WEB DESIGN die DATENWERKkochbuch serie 1
  • 2. ber DATENWERK Wir sind eine Web-Kommunikationsagentur mit dem Ziel die Dinge fr Sie zu erleichtern. Wir sind seit 2000 im Einsatz und beschftigen derzeit 15 Web-SuperheldInnen. Unser Mission ist es, Ihre Webprsenz up-to-date und groartig 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 knnte auch Minimalismus mit Extras dazu sagen. Bei Flat UI geht es darum, die klaren Bereiche und Freiflchen des Minimalismus mit hellen, krftigen Farben und verbesserter Benutzerfreundlichkeit zu ergnzen. WELCHE ELEMENTE definieren Flat UI? Knackige Kanten Helle, krftige Farben 2D Illustrationen und Ikonographie Raum zum Atmen Klar gekennzeichnete Elemente fr Interaktion und Navigation WARUM Flat? Im Folgenden ein kurzer Abriss, wie's frher 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 fr alle mglichen UserInnen und ihre Endgerte optimiert werden. Weil wir mittlerweile auf Skeuomorphismus verzichten knnen, 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 Gerte mit flat Design Interfaces wurden seit Jnner 2014 verkauft. Bis Ende 2013 soll Flat Interface auf rund 1 Milliarde Android Gerten 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 hingehrt, 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 nchstes? 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 fr das kommende Jahr werden? Awter radical wlatness, well probably see designers carefully reintroduce dimensionality where its really needed. gizmodo.com gravitymovie.warnerbros.com Fr ein atemberaubendes 3D Erlebnis empfehlen wir den 3D WebGL Spacewalk Elegantes Flat Interface mit groartigen Videointeraktionen keecker.com
  • 7. responsive TYPOGRAPHY WAS IST responsive typography? WIE mache ich das? Wir haben da drei Vorschlge 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 flieenden Text automatisch grentechnisch anzupassen. Wer nicht auch gut lesbare Schriftgren, Zeilenhhen und -lngen fr unterschiedliche Bildschirmgren mitdenkt, macht nur die halbe Arbeit.
  • 8. jqueryPLUGINS Beste Ergebnisse Full liquid responsiveness 1 2 CSSVIEWPORTunits Fr wichtige berschriften auf der ganzen Breite: SLABTEXT freqdec.github.io/slabText Fr allgemeine Texte: simplefocus.com/flowtype dieEINHEITEN CSS Viewport Unions definieren die Textgre in viewport Prozenten. Das bedeutet, dass die Schriftgre relativ zur Gre des Inhaltsbereichs (Browserfenster) angepasst wird. Wenn der Inhaltsbereich seine Gre ndert, so tut das der Text auch. Liquid responsiveness Es bedarf einer hndischen- oder jQuery Anpassung bei der nderung der Browsergre; dies ist wahrscheinlich eher eine lngerfristige Lsung. Die Browserkompatibilitt fr CSS vu ist noch nicht optimal. Das wird sich wahrscheinlich bald ndern. FLOWTYPE 1vw = 1% der Breite des Inhaltsbereichs 1vh = 1% der Hhe des Inhaltsbereichs 1vmin = das jeweils Kleinere von 1vhw oder 1vh 1vmax = das jeweils Grere von 1vhw oder 1vh caniuse.com/viewport-units
  • 9. mediaQUERIES Zur Zeit die hufigste Methode fr responsiveness. Geht nur fr adaptive responsiveness. Das bedeutet, man kann nur fixe Schriftgren fr vordefinierte Bildschirmgren festlegen. Die Schriftgren ndern sich dann nur bei diesen bestimmten Gren. Obwohl media queries zur Zeit noch durchaus ihren Zweck erfllen, sehen wir sehr wohl die Notwendigkeit von liquid responsiveness. Zur Zeit mag es nur eine Handvoll Bildschirmgren geben, auf die man sich einstellen muss. Doch technische Gerte werden stetig weiterentwickelt. Es macht also durchaus Sinn in Zukunft nicht nur fr ein paar wenige Bildschirmgren 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 wr die eigene Zielgruppe. Schon bemerkt, dass es einen steigenden Fokus auf responsive und mobile Webseiten gibt? Das whrt 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 fr Content: All diese neuen Levels von Inhalten auf einer langen Scroll-Seite knnen 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 groe hero area in Erwgung ziehen Den Bereich mit der meisten Aufmerksamkeit einer Website nutzen, um die wichtigsten Punkte rberzubringen. 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 l
Embed Size (px)
Recommended