datenwerk Cookbook: webdesign trends 2014 (en)

15
Basic trends in WEB DESIGN the DATENWERKkochbuch series 1

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 of datenwerk Cookbook: webdesign trends 2014 (en)

Page 1: datenwerk Cookbook: webdesign trends 2014 (en)

Basic trends in

WEB DESIGN

theDATENWERKkochbuchseries

1

Page 2: datenwerk Cookbook: webdesign trends 2014 (en)

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.

Page 3: datenwerk Cookbook: webdesign trends 2014 (en)

CONTENTS

FLAT UI

RESPONSIVETYPOGRAPHY

MOBILEFOCUS

colours

heroareas

micro ux

Page 4: datenwerk Cookbook: webdesign trends 2014 (en)

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

Page 5: datenwerk Cookbook: webdesign trends 2014 (en)

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.

Page 6: datenwerk Cookbook: webdesign trends 2014 (en)

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

Page 7: datenwerk Cookbook: webdesign trends 2014 (en)

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.

Page 8: datenwerk Cookbook: webdesign trends 2014 (en)

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

Page 9: datenwerk Cookbook: webdesign trends 2014 (en)

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

Page 10: datenwerk Cookbook: webdesign trends 2014 (en)

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

Page 11: datenwerk Cookbook: webdesign trends 2014 (en)

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

Page 12: datenwerk Cookbook: webdesign trends 2014 (en)

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?

Page 13: datenwerk Cookbook: webdesign trends 2014 (en)

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

Page 14: datenwerk Cookbook: webdesign trends 2014 (en)

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

Page 15: datenwerk Cookbook: webdesign trends 2014 (en)

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.