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.
Die Grenzen zwischen mobiler und Desktopnutzung sind nicht mehr klar zu unterscheiden. Zentraler Ort der Interaktion ist das Web und nicht das Gerät. Menschen greifen über unterschiedliche Touchpoints auf Produkte und Dienstleistungen zu. Konsistenz und Klarheit unterstützen den Nutzer innerhalb eines Multiscreen-Experience-Umfelds. Das Denken und Designen in den Silos Mobile, Tablet und Desktop versperrt dabei den Blick auf das Wesentliche – auf eine nachhaltige User Experience, die Coherence, Fluidity und Adaptability adressiert. Content First, Breakpoints in Abhängigkeit einer fluiden Content Experience, frühzeitiges Prototyping und schnelles Iterieren führen zum Ziel. Klassische Designprozesse werden oder sind dagegen strategisch bedeutungslos. Der Vortag beleuchtet die Vorteile einer kontextsensitiven Experience und formuliert Empfehlungen für den Workflow und die Kommunikation mit den Stakeholdern.
Responsive Navigation Patterns - UX und GuidelinesPeter Rozek
Navigation ist nicht mehr auf ein Content, Context oder Component bezogen.
Die Navigation ist eines der Kernelemente einer responsiven Website. Welches Navigationsprinzip ist für die Informationsarchitektur, Bedienbarkeit und User Experience am besten geeignet? Neben der Skalierbarkeit für unterschiedliche Bildschirmgrößen ist die größte Herausforderung, die Balance zwischen Vollständigkeit und Klarheit zu finden. Content First und Mobile First impliziert, die Navigation zu überdenken. User Research und authentische User Journeys liefern valide Entscheidungsgrundlagen für die Priorisierung des Navigationsmodells. Je nach Komplexität sind Navigation Patterns erprobte Modelle, die man einsetzen kann. Ob Off-Canvas, Slidedown oder Hamburger-Icon, welche Vor- und Nachteile diese haben, muss sorgfältig evaluiert werden. Der Vortrag geht diesen Fragen nach und formuliert Guidelines für die Praxis.
Wie funktionieren interaktive Anzeigen auf dem iPad wirklich? Werden die angebotenen Interaktionsmöglichkeiten von den Usern auch genutzt? In einem ganzheitlichen Untersuchungsansatz untersucht die AUTO BILD-Studie die Wirkmechanismen interaktiver Anzeigen. Neben vielen Chancen zeigen die Studienergebnisse auch Risiken interaktiver App-Werbung auf.
Auf der Interact Conference des IAB Europe (23./24. Mai 2013 in Barcelona) wurde die AUTO BILD-Studie im Rahmen der IAB Research Awards in der Kategorie "Mobile Internet" mit dem Prädikat "Highly Commended" ausgezeichnet.
Sie können sich hier eine Zusammenfassung der wichtigsten Ergebnisse und der 10 Learnings für effektives App-Advertising ansehen.
COMP 4010 Lecture7 3D User Interfaces for Virtual RealityMark Billinghurst
Lecture 7 of the COMP 4010 course in Virtural Reality. This lecture was about 3D User Interfaces for Virtual Reality. The lecture was taught by Mark Billinghurst on September 13th 2016 at the University of South Australia.
A presentation given by Mark Billinghurst on September 23rd 2015 at the Sydney AR meet up. It describes how the VR space in 2016 will be different from that in 1996, and directions for future work to help grow the business.
Die Grenzen zwischen mobiler und Desktopnutzung sind nicht mehr klar zu unterscheiden. Zentraler Ort der Interaktion ist das Web und nicht das Gerät. Menschen greifen über unterschiedliche Touchpoints auf Produkte und Dienstleistungen zu. Konsistenz und Klarheit unterstützen den Nutzer innerhalb eines Multiscreen-Experience-Umfelds. Das Denken und Designen in den Silos Mobile, Tablet und Desktop versperrt dabei den Blick auf das Wesentliche – auf eine nachhaltige User Experience, die Coherence, Fluidity und Adaptability adressiert. Content First, Breakpoints in Abhängigkeit einer fluiden Content Experience, frühzeitiges Prototyping und schnelles Iterieren führen zum Ziel. Klassische Designprozesse werden oder sind dagegen strategisch bedeutungslos. Der Vortag beleuchtet die Vorteile einer kontextsensitiven Experience und formuliert Empfehlungen für den Workflow und die Kommunikation mit den Stakeholdern.
Responsive Navigation Patterns - UX und GuidelinesPeter Rozek
Navigation ist nicht mehr auf ein Content, Context oder Component bezogen.
Die Navigation ist eines der Kernelemente einer responsiven Website. Welches Navigationsprinzip ist für die Informationsarchitektur, Bedienbarkeit und User Experience am besten geeignet? Neben der Skalierbarkeit für unterschiedliche Bildschirmgrößen ist die größte Herausforderung, die Balance zwischen Vollständigkeit und Klarheit zu finden. Content First und Mobile First impliziert, die Navigation zu überdenken. User Research und authentische User Journeys liefern valide Entscheidungsgrundlagen für die Priorisierung des Navigationsmodells. Je nach Komplexität sind Navigation Patterns erprobte Modelle, die man einsetzen kann. Ob Off-Canvas, Slidedown oder Hamburger-Icon, welche Vor- und Nachteile diese haben, muss sorgfältig evaluiert werden. Der Vortrag geht diesen Fragen nach und formuliert Guidelines für die Praxis.
Wie funktionieren interaktive Anzeigen auf dem iPad wirklich? Werden die angebotenen Interaktionsmöglichkeiten von den Usern auch genutzt? In einem ganzheitlichen Untersuchungsansatz untersucht die AUTO BILD-Studie die Wirkmechanismen interaktiver Anzeigen. Neben vielen Chancen zeigen die Studienergebnisse auch Risiken interaktiver App-Werbung auf.
Auf der Interact Conference des IAB Europe (23./24. Mai 2013 in Barcelona) wurde die AUTO BILD-Studie im Rahmen der IAB Research Awards in der Kategorie "Mobile Internet" mit dem Prädikat "Highly Commended" ausgezeichnet.
Sie können sich hier eine Zusammenfassung der wichtigsten Ergebnisse und der 10 Learnings für effektives App-Advertising ansehen.
COMP 4010 Lecture7 3D User Interfaces for Virtual RealityMark Billinghurst
Lecture 7 of the COMP 4010 course in Virtural Reality. This lecture was about 3D User Interfaces for Virtual Reality. The lecture was taught by Mark Billinghurst on September 13th 2016 at the University of South Australia.
A presentation given by Mark Billinghurst on September 23rd 2015 at the Sydney AR meet up. It describes how the VR space in 2016 will be different from that in 1996, and directions for future work to help grow the business.
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)denkwerk GmbH
Das Whitepaper gibt einen Überblick über Chancen und Herausforderungen bei der Einführung von Reponsive Webdesign. Welche Möglichkeiten bringt die Anpassung eines Webauftritts an verschiedene Endgeräte mit sich? Wie kann ein einheitliches Nutzererlebnis geschaffen werden? Welche Besonderheiten bringen die einzelnen Projektphasen mit sich?
7 UX-Trends, auf die Sie sich im Jahr 2018 freuen müssen, um die End nutzer Z...Dieter Ziegler
Die Nutzerer fahrung war 2017 zwei fello sein großes Thema; seies Schnittstellen von Produkten, Onboarding-Prozessen oder Inhalten, die durch verschiedene digitale Plattformen genutzt werden.
Die Antwort auf die Herausforderungen des mobilen Webs ist Responsive Design.
Doch was verbirgt sich hinter diesem neuen Design Ansatz und welches sind die
Benefits die ich daraus ziehe? Referent: Dani Kalt (CEO, CS2 AG)
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...usability.de
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites und Applikationen
Mit dem iPhone hat Apple die mobile Internetnutzung massentauglich gemacht und dank Touch-Technologien wurden Inhalte greifbar. Um das mobile Internet zu etablieren, genügt es jedoch nicht, einfach den herkömmlichen, stationären Web-Auftritt auf ein Handy-Display zu projizieren. Der Bezug zur mobilen Nutzungssituation ist hierbei ein entscheidendes Kriterium. In diesem Vortrag erfahren Sie, wie Anwendungen für das mobile Internet optimiert werden müssen und wie der mobile Nutzer ins Zentrum aller Überlegungen gebracht wird.
Christoph Mühlbauer (Human-Computer-Interaction, Universität Siegen)
Das Konzept: Für jeden verständlich und übersichtlich, gemacht für Designer, Template-Entwickler und IT.Alle Anforderungen, alle Besonderheiten für mobile Optimierung müssen spezifiziert sein und dabei soll alles auch noch so einfach wie möglich aufbereitet sein. Gar nicht so einfach, oder?
In diesem Kurzvortrag gibt Markus Dermietzel (Senior User Experience Designer bei curtis newton gmbh, vor 2013 bekannt als dw capital gmbh) Einblicke in das Responsive Web Design des Social News Aggregators virato.de. Dazu erschien im Juli 2012 ein Online-Artikel auf WEAVE.de: http://www.weave.de/weblog/interview-mit-markus-dermietzel-zu-responsive-design-beim-relaunch-von-virato.
Bei Fragen melden Sie sich bei press@curtis-newton.com (Chérine De Bruijn).
Bootstrap ist ein Open-Source-Framework von Twitter, das eine Reihe von Hilfsmitteln für die Gestaltung von Websites und Webanwendungen bereitstellt. Die Gestaltungsvorlagen basieren auf HTML und CSS und beinhalten Formulare, Buttons, Tabellen und viele andere Oberflächenelemente. Dieser Vortrag gibt eine Einführung und weitere wertvolle Tipps aus der Praxis.
Praxis-Bericht über Entstehung der ImmobilienScout24-App. Präsentation-Inhalt lässt sich als Leitfaden für die Entwicklung von Apps im Allgemeinen verwenden.
Design und Usability tablet-optimierter eCommerce Angebote (Vortrag auf dem UX Congress 2014 in Frankfurt): Immer noch sind die wenigsten eCommerce-Angebote im Web an die Bedürfnisse von Tablet-Nutzern angepasst, obwohl sich diese Geräteklasse neben dem Smartphone als Alternative zu PC und Notebook etabliert hat. Insbesondere Nutzer der beliebten kleineren 7 Zoll Tablets erleben ein Web voller Unzulänglichkeiten. Wer optimiert jetzt schon konsequent für den Tablet Commerce? Und wie schlagen sich Responsive Design Ansätze in diesem Umfeld? Der Vortrag gibt einen Überblick über aktuelle Entwicklungen und versteht sich als Ergänzung und Update zum Mobile Web Commerce Benchmark, den Anstrengungslos in Kooperation mit dem ECC Köln veröffentlicht hat.
Webdesign Trends Teil 02 - Wie gestaltet man eine Webseitechrisign gmbh
Präsentation Design Trends im Web 2015 vom 27.10.2014, chrisign gmbh, Weinfelden.
Teil 02 - Wie gestaltet man eine Webseite
Präsentiert von Michael Mäder.
Wichtige Bezeichnungen im Zusammenhang mit Webdesign und Webentwicklung.
Hier geht es nicht so sehr ins Detail. Die Slides sollen lediglich einen schnellen Überblick und kurze Definitionen zu den genannten Bereichen im Webdesign geben. Begriffe wie "Usability" und "Whitelabel" werden von Laien häufig falsch angewendet, was z.B. bei Briefings und Workshops mit Kunden und Entwicklern zu Missverständnissen führen kann. Es ist wichtig ein gemeinsames Verständnis dieser Bezeichnungen zu haben.
Ich habe diese Zusammenfassung aus eigenem Interesse für einige Projekte erstellt und war der Meinung sie ist vielleicht auch für Andere hilfreich.
Anregungen gern in die Kommentare oder direkt an mich.
Danke an @franz für's Gegenchecken.
BASTA Spring 2018: User Interface, quo vadis? Überlebensstrategien eines Soft...Rainer Stropek
Wenn es etwas gibt, das Softwareunternehmerinnen sich die Haare raufen lassen, dann sind das im Moment User-Interface-Technologien. Web oder App? HTML oder XAML? Native oder Cross-Platform? Klassisch oder Bot? Kaum ein Unternehmen kann es sich leisten, jeden Trend und jede Plattform mitzumachen. Was also tun? Rainer Stropek ist seit über zwanzig Jahren Unternehmer in der Softwarebranche. In dieser Session teilt Rainer seine Einschätzungen über den aktuellen Stand der UI-Technologien im Microsoft-Umfeld. Er berichtet, wie er sein Unternehmen technisch und strategisch aufstellt, um nicht von den Kosten ständiger UI-Neuentwicklungen aufgefressen zu werden.
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)denkwerk GmbH
Das Whitepaper gibt einen Überblick über Chancen und Herausforderungen bei der Einführung von Reponsive Webdesign. Welche Möglichkeiten bringt die Anpassung eines Webauftritts an verschiedene Endgeräte mit sich? Wie kann ein einheitliches Nutzererlebnis geschaffen werden? Welche Besonderheiten bringen die einzelnen Projektphasen mit sich?
7 UX-Trends, auf die Sie sich im Jahr 2018 freuen müssen, um die End nutzer Z...Dieter Ziegler
Die Nutzerer fahrung war 2017 zwei fello sein großes Thema; seies Schnittstellen von Produkten, Onboarding-Prozessen oder Inhalten, die durch verschiedene digitale Plattformen genutzt werden.
Die Antwort auf die Herausforderungen des mobilen Webs ist Responsive Design.
Doch was verbirgt sich hinter diesem neuen Design Ansatz und welches sind die
Benefits die ich daraus ziehe? Referent: Dani Kalt (CEO, CS2 AG)
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...usability.de
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites und Applikationen
Mit dem iPhone hat Apple die mobile Internetnutzung massentauglich gemacht und dank Touch-Technologien wurden Inhalte greifbar. Um das mobile Internet zu etablieren, genügt es jedoch nicht, einfach den herkömmlichen, stationären Web-Auftritt auf ein Handy-Display zu projizieren. Der Bezug zur mobilen Nutzungssituation ist hierbei ein entscheidendes Kriterium. In diesem Vortrag erfahren Sie, wie Anwendungen für das mobile Internet optimiert werden müssen und wie der mobile Nutzer ins Zentrum aller Überlegungen gebracht wird.
Christoph Mühlbauer (Human-Computer-Interaction, Universität Siegen)
Das Konzept: Für jeden verständlich und übersichtlich, gemacht für Designer, Template-Entwickler und IT.Alle Anforderungen, alle Besonderheiten für mobile Optimierung müssen spezifiziert sein und dabei soll alles auch noch so einfach wie möglich aufbereitet sein. Gar nicht so einfach, oder?
In diesem Kurzvortrag gibt Markus Dermietzel (Senior User Experience Designer bei curtis newton gmbh, vor 2013 bekannt als dw capital gmbh) Einblicke in das Responsive Web Design des Social News Aggregators virato.de. Dazu erschien im Juli 2012 ein Online-Artikel auf WEAVE.de: http://www.weave.de/weblog/interview-mit-markus-dermietzel-zu-responsive-design-beim-relaunch-von-virato.
Bei Fragen melden Sie sich bei press@curtis-newton.com (Chérine De Bruijn).
Bootstrap ist ein Open-Source-Framework von Twitter, das eine Reihe von Hilfsmitteln für die Gestaltung von Websites und Webanwendungen bereitstellt. Die Gestaltungsvorlagen basieren auf HTML und CSS und beinhalten Formulare, Buttons, Tabellen und viele andere Oberflächenelemente. Dieser Vortrag gibt eine Einführung und weitere wertvolle Tipps aus der Praxis.
Praxis-Bericht über Entstehung der ImmobilienScout24-App. Präsentation-Inhalt lässt sich als Leitfaden für die Entwicklung von Apps im Allgemeinen verwenden.
Design und Usability tablet-optimierter eCommerce Angebote (Vortrag auf dem UX Congress 2014 in Frankfurt): Immer noch sind die wenigsten eCommerce-Angebote im Web an die Bedürfnisse von Tablet-Nutzern angepasst, obwohl sich diese Geräteklasse neben dem Smartphone als Alternative zu PC und Notebook etabliert hat. Insbesondere Nutzer der beliebten kleineren 7 Zoll Tablets erleben ein Web voller Unzulänglichkeiten. Wer optimiert jetzt schon konsequent für den Tablet Commerce? Und wie schlagen sich Responsive Design Ansätze in diesem Umfeld? Der Vortrag gibt einen Überblick über aktuelle Entwicklungen und versteht sich als Ergänzung und Update zum Mobile Web Commerce Benchmark, den Anstrengungslos in Kooperation mit dem ECC Köln veröffentlicht hat.
Webdesign Trends Teil 02 - Wie gestaltet man eine Webseitechrisign gmbh
Präsentation Design Trends im Web 2015 vom 27.10.2014, chrisign gmbh, Weinfelden.
Teil 02 - Wie gestaltet man eine Webseite
Präsentiert von Michael Mäder.
Wichtige Bezeichnungen im Zusammenhang mit Webdesign und Webentwicklung.
Hier geht es nicht so sehr ins Detail. Die Slides sollen lediglich einen schnellen Überblick und kurze Definitionen zu den genannten Bereichen im Webdesign geben. Begriffe wie "Usability" und "Whitelabel" werden von Laien häufig falsch angewendet, was z.B. bei Briefings und Workshops mit Kunden und Entwicklern zu Missverständnissen führen kann. Es ist wichtig ein gemeinsames Verständnis dieser Bezeichnungen zu haben.
Ich habe diese Zusammenfassung aus eigenem Interesse für einige Projekte erstellt und war der Meinung sie ist vielleicht auch für Andere hilfreich.
Anregungen gern in die Kommentare oder direkt an mich.
Danke an @franz für's Gegenchecken.
BASTA Spring 2018: User Interface, quo vadis? Überlebensstrategien eines Soft...Rainer Stropek
Wenn es etwas gibt, das Softwareunternehmerinnen sich die Haare raufen lassen, dann sind das im Moment User-Interface-Technologien. Web oder App? HTML oder XAML? Native oder Cross-Platform? Klassisch oder Bot? Kaum ein Unternehmen kann es sich leisten, jeden Trend und jede Plattform mitzumachen. Was also tun? Rainer Stropek ist seit über zwanzig Jahren Unternehmer in der Softwarebranche. In dieser Session teilt Rainer seine Einschätzungen über den aktuellen Stand der UI-Technologien im Microsoft-Umfeld. Er berichtet, wie er sein Unternehmen technisch und strategisch aufstellt, um nicht von den Kosten ständiger UI-Neuentwicklungen aufgefressen zu werden.
Machen Sie Ihre Website besser auffindbar! Die datenwerk innovationsagentur unterstützt Sie dabei. Im vorliegenden Teil 3 unserer SEO Frühlingsserie zeigen wir Ihnen, wie Sie Google und Bing helfen, sich auf Ihrer Website schneller zurechtzufinden.
Nicht nur Ihre Fenster sollten das ganze Jahr über streifenfrei strahlen, sondern auch Ihr Webauftritt.
Die datenwerk innovationsagentur zeigt Ihnen in Teil 2 der SEO Frühlingsserie, wie Sie streifenfrei schreiben und damit Ihre Webpräsenz das ganze Jahr über up-to-date und großartig machen. Wie Sie durch suchmaschinenoptimierte Texte besser auf Google gefunden werden, erklärt Ihnen SEO-Spezialist Hartwig Krebitz in Teil 2 der fünfteiligen Serie.
Die datenwerk innovationsagentur hat sich als Web-Kommunikationsagentur
zur Aufgabe gemacht, Ihre Webpräsenz up-to-date und
großartig zu machen. Damit Ihre Webseite auch als großartig wahrgenommen
wird, muss sie auf Google gefunden werden. Das geht
schneller, besser und einfacher, wenn Sie Ihre Webseite suchmaschinenoptimieren.
Wie man eine Website SEO-tauglich macht, erklärt Ihnen
SEO-Spezialist Hartwig Krebitz in einer fünfteiligen Serie.
Unterlagen zum Workshop "Social Media & Recht" von datenwerkerin Ingrid Gogl am 18. Oktober 2014 im Rahmen von Digitalista
Themen:
Blogging und Recht
Urheberrercht
Verwendung von (fremden) Fotos im Blog
Blogger Relations (Kooperation mit Unternehmen)
Werbung im Internet
Online-Informationspflichten für Unternehmen
Gewinnspiele und Wettbewerbe
Unterlagen zum Vortrag "Onlinehandel neu geregelt! Der rechtskonforme Webshop 2014".
Seit 13. Juni 2014 gelten neue Regelungen für Verträge zwischen KonsumentInnen und Unternehmen. Die Umsetzung einer weiteren Konsumentenschutz-Richtlinie der EU durch das Verbraucherrechte-Richtlinie-Umsetzungsgesetz (VRUG) bringt insbesondere für Unternehmer im Fernabsatz (wie Onlinehändler) komplexere rechtliche sowie technische Anforderungen.
ExpertInnen der Rechtsanwaltskanzlei Jarolim Flitsch Rechtsanwälte GmbH und den Web-SpezialistInnen der datenwerk innovationsagentur GmbH gaben im Rahmen eines Vortrags am 15. Oktober 2014 einen Überblick über die geänderten Rahmenbedingungen aus rechtlicher und technischer Sicht.
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