datenwerk cookbook: webdesign trends 2014 (en)
DESCRIPTION
What are the Trends in web design for 2014? The first edition of the "datenwerk cookbook" gives you an insight to basic trends in web design.TRANSCRIPT
Basic trends in
WEB DESIGN
theDATENWERKkochbuchseries
1
aboutDATENWERK
We are a web and communication agency that believes in making things simple for you.
We’ve been around since 2000 and currently have a staff of 15 web superheroes.
Keeping your web presence up-to-date and awesome is what we do.
CONTENTS
FLAT UI
RESPONSIVETYPOGRAPHY
MOBILEFOCUS
colours
heroareas
micro ux
flatUIWHAT IS Flat UI?
A design philosophy / style that is trending in web and user interface design today.
It is often called minimalism with a difference. It keeps the clean, open spaces and compact content of minimalism but adds bright, bold colours and improved usability cues.
WHAT ELEMENTSdefine Flat UI?
Crisp edges
Bright solid colours
2D illustrations and Iconography
Lots of breathing room
Clearly marked interaction and navigation elements
flatUIIt is compatible with responsive and mobile use. The simplified layouts are easy to optimize for all your users with all their differently sized devices.
With Skeumorphism no longer required for our tech increasingly tech savvy world, flat UI is a style relevant to our times and where we are at right now with technology use.
68% of web professionals say that flat design is here to stay. 500 million Apple devices with flat design interface were sold as of January 2013. Flat interface was expected to be on roughly 1 Billion Android devices by end of 2013.
skeuomorphicDESIGNNot too long ago, computers were a new and alien thing to most people. Enter Skeuomorphism. The idea is simple: to create metaphors. Take unfamiliar technical concepts and give them familliar names and faces.
Making a bunch of code look like a real life folder is skeuomorphism. Creating a copy of
a real life object where it doesn’t belong for the purpose of creating familiarity.
Web users today are a lot more tech savvy than the newbies of 20 years ago. It is no
longer necessary to mimic the detailed information of real life objects.
gizmodo.com
perhaps3D?Exciting things are happening with the combination of Flat user interface with 3D or video elements. Can this be a strong emerging trend for the coming year?
“A�ter radical �latness, we’ll probably see designers carefully reintroduce dimensionality where it’s really needed.”
Check out the 3D WebGL Spacewalk for a stunning 3D experience
Elegant flat interface with incredible video interactions
gravitymovie.warnerbros.com
keecker.com
responsiveTYPOGRAPHYWHAT IS responsive
typography?WHYis it
important?
With minimization of content, the little that you have becomes even more important for proper display.
Responsive typography can be of 2 types: Adaptive and Liquid
Responsive typography is not just about resizing a container and having the text reflow inside it automatically. You’re only doing half the job unless you achieve readable font sizes, line heights and line lengths for various screen sizes.
jqueryPLUGINSBest results
Full liquid responsiveness
CSSVIEWPORTunits
theUNITS
CSS Viewport Units define text size in viewport percentage. This means that the size of the font is relative to the size of the containing block (browser window). When the block changes, so does the font size.
Liquid responsiveness
Needs a manual or JQuery refresh with change in browser size.A solution more for the near future than right now. Browser compatibility for CSS vu is not great yet but quite likely to improve soon. Stay informed.
1vw = 1% of the width of the containing block
1vh = 1% of the height of the containing block
1vmin = whichever is smaller of 1vw and 1vh
1vmax = whichever is larger of 1vw and 1vh
For general text fixes:
simplefocus.com/flowtype
FLOWTYPE
For important full width headlines: SLABTEXT
freqdec.github.io/slabText
caniuse.com/viewport-units
1
2
mediaQUERIESCurrently, the most common method of achieving responsiveness
Only adaptive responsiveness possible. This means that you can define font sizes for fixed screen sizes. The font size will only change at these particular sizes or manually defined breakpoints.
While media queries work just fine for now, we still see the importance of liquid responsiveness over adaptive. At the moment, there might only be a handful of screen sizes to set breakpoints for but as our digital devices get more varied and more screen sizes come into play, it might not be practical anymore to only design for a few.
3
webdesign.maratz.com/lab/responsivetypography
“A�ter radical �latness, we’ll probably see designers carefully reintroduce dimensionality where it’s really needed.”
mobileFOCUS
what’sAPPEARING?
There is an increasing focus on responsive and mobile websites, as you might have noticed. It is leading to some general trends in web design that you should keep in mind:
Lightboxes, overlays, expanding/repositioned tiles, infinite scrolling etc: Anything that makes the most of limited space. Designed with limited mobile screen space and the swipe motion in mind.
Integration with social media: Like buttons, sharing functionalities, link to apps, email subscriptions - you name it, it’s there.
mcfunley.com/design-for-continuous-experimentation
1
Video or infographic content: Why read what you can watch? Simple, compact and easy to view.3
2
A fixed navigation bar with a difference:
ryanscherf.net
Why be boring?
what’sDISAPPEARING?
Long, solid sections of text1
Sidebars2
what’sAPPEARING?
Fixed position content: All these new levels of content on a long scrolling page can really disorient a user, which is why it’s good to provide an anchor. Fixed navigation bars are a sensible trend to follow.
4
COLOURS
THE 5 MINUTE FIX!
Need a quick & dirty colour picker that still keeps your design looking fresh and
modern?
flatuicolors.com
Confused about what colours to use?
Flat UI brings with it the use of simple, bright colours.
Use a bold, mixed palette or keep it minimalistic with a monochromatic scheme.
Emerald
Trended heavily through 2013 and into 2014
Pantone Colour of the Year 2013
Radiant Orchid
Pantone Colour of the Year 2014. A trend waiting to happen?
Still using sliders?
Consider a large hero area instead.
Use the space that gets the most attention on your website to get the most important point across.
MAKE A STATEMENTINTRODUCE YOUR BRAND
ENCOURAGE INTERACTIONGET INFORMATION
baystreetbiergarten.com
realtii.com
HeroAREAS
MicroUX
How can you use it?
There are a host of easy effects that can make simple acts like scrolling, hover effects, sliding open boxes or ticking a
checkbox more engaging for the user. Use with subtlety.
The easiest way to start with microinteractions can be with CSS 3 transitions.
Why is it important?
With minimalisim and simplicity being the trend now, design can get a little bit boring. Use Micro UX to liven up user experience, improve usability and make your website a memorable experience.
What is microinteraction?
In terms of web design, it is every tiny action a user takes on your website, hovering over a link for example.
cssdeck.com/labs/animated-check-inputs
contactSHEET
WOLFGANG ZEGLOVITS [email protected] 01 585 60 71 1418
Magdalenenstraße 33, 1060 Wien
www.datenwerk.at
www.opiniontracker.net
What web trends are you following?
Get in touch and let us know. We’d love to hear from you.