The future is modulair - new approach to web design

Post on 22-Apr-2015

56 views 0 download

description

inspired by the superb congres #FOWD in London April 2014. This talk held @freelancefriday in Amsterdam 12 September 2014

Transcript of The future is modulair - new approach to web design

The Future is Modulaira new approach to websites building

12 Sep 2014 Amsterdam@freelancefriday venue @de_ Zwijger @wpmariken

1

The Future …..

2

….. modulair

3we are moving away from pages to webpages built from bits and pieces.

from pages to ….

we no longer look at webpages as pages. The structure of the internet has changed.

4

Remember him?

http://youtu.be/rR8XkWek7E4

“not true to the web”... you’re signing of on a picture of the website”

About designing a website in Photoshop. Hear what Brad Frost says in this interview with Treehouse (from 0.38 to 0.55” small part of the interview)

http://youtu.be/5J7mq0ogwBI

Tim Berners Lee

back then it’s was ment for publishing and distributing scientific documents

What is our canvas?

...“create interaction …. start with a story board”...

Rachel Nabors’ approach.She blends the art of traditional storytelling with digital media “to tell beter stories through code”

new canvas?

...“things we as web designers can potentially learn from the world of theatre.”....

Luke Murphy- Wearmouth sees a lot of parallels with theatre production.

Reframing the Web http://lanyrd.com/2014/fowd/scwxrt/

new canvas?

...“non-linear digital narratives: disjointed stories, parallel narratives, even embedded memories……

….we can create non-linear narratives that exist as the perfect storytelling format for the web.....

…we have the digital tools at our fingertips….

Senongo. http://lanyrd.com/2014/future-of-web-design-nyc/sdbwry/http://senongo.net

new canvas?

we need something that:

! works well on all screens

! can easily present information coming from many sources

! can support personalization of content and provide a unique

experience to everyone.

Paul Adams #FOWD April 2014 London

12 Sep 2014 Amsterdam@freelancefriday venue @de_ Zwijger @wpmariken

√ screens

we have the technical solutions to get our websites looking good on all screen sizes.

frameworks:Bootstrap - TwitterFoundationSkeleton & more

Linda van Deursenhttp://alistapart.com/article/content-out-layout

√ screens

Grids do not exist in a vacuum. They exist in relation to the content. We never start with a grid. We start with an idea which is then translated into a form, a structure.

√ screens

plenty of tools tout there.

We need something that:

√ works well on all screens

! can easily present information coming from many sources

! can support personalization of content and provide a unique

experience to everyone.

Paul Adams #FOWD April 2014 London

12 Sep 2014 Amsterdam@freelancefriday venue @de_ Zwijger @wpmariken

√ sourcesre-architecture of the web,

away from pages and destinations, towards

completely personalised experiences built on an

aggregation of many individual pieces of content.

So ... stuff/ data from other sources is uploaded and displayed on our website

cards have arrivedand on more platforms

cards on Google

http://www.google.com/landing/now/

why are cards so promising?

with Google cards you can provide your customer with personalised information. Upon preferences/ location/needs etc..

cards on Twitter

https://dev.twitter.com/cards

crazy card tricks

http://davidwalsh.name/demo/css-flip.php

cards are fun.

with css3 you can do a lot of tricks. - flip - swipe - place them on top of each other -zoom in /zoom out.

more card tricks

http://designshack.net/articles/css/css-card-tricks/

cards do a good job specially on mobile.

Take small space, are easy to arrange, carry a lot of information.

We need something that:

√ works well on all screens

√ can easily present information coming from many sources

! can support personalization of content and provide a unique

experience to everyone.

12 Sep 2014 Amsterdam@freelancefriday venue @de_ Zwijger @wpmariken

1

√ personalization

1

√ personalization

1

users of your website bring data. Via social check-in they bring their frends, preferences and maybe more...

● personalization

1

√ personalization

a review of a friend of my friend (on Facebook). check the “friends first setting”

from other sources

We need something that:

√ works well on all screens

√ can easily present information coming from many sources

√ can support personalization of content and provide a

unique experience to everyone.

Paul Adams #FOWD April 2014 London

12 Sep 2014 Amsterdam@freelancefriday venue @de_ Zwijger @wpmariken

What about my little website?

from Dan Mall’s talk @ Smashing Conf 2013

Quote Do not focus on the goals, concentrate on the motivation

business goals vs. user needs

Talking about needs- motivation:Would I like this colorfull and entertaining website when I want my passport renewed?

Thumbs up for the gov.uk project

Serve your customer

My challenges:

● Better performing websites

● API’s and SDK’s

● rethink WordPress (as a CMS only and less as a building platform)

On my to do / learn list:

● Github ● S_● Flexbox● CSS animations● Sass or Less

Thanks to : Future Of Web Design, London #FOWD Paul Adams @padday

Paul Boag @boagworld

Harry Roberts @csswizzardry

Luke Murphy- Wearmout @lurkmoophy

Rachel Nabors @rachelnabors

more about cards: http://insideintercom.io/why-cards-are-the-future-of-the-web

??

:)

Links to : Harry Roberts on CSS frameworkshttps://speakerdeck.com/csswizardry/what-is-a-css-framework-anyway

Luke Murphy- Wearmout on reframing the web:http://lanyrd.com/2014/fowd/scwxrt/

Rachel Nabors article:http://alistapart.com/article/web-animation-at-work

more about cards: http://insideintercom.io/why-cards-are-the-future-of-the-web

??

:)

Thank you !

52

http://designlab.nl

@wpmariken