The Future is Modular

new approach to web design.
talk held @FreelanceFactory Amsterdam 12 september 2014 inspired on #FOWD in London April 2014

Transcript

1. The Future is Modulair a new approach to websites building 12 Sep 2014 Amsterdam @freelancefriday venue @de_ Zwijger @wpmariken
2. The Future …..
3. ….. modulair we are moving away from pages to webpages built from bits and pieces.
4. from pages to …. we no longer look at webpages as pages. The structure of the internet has changed. 4
5. 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
6. Tim Berners Lee back then it’s was ment for publishing and distributing scientific documents
7. What is our canvas?
8. ...“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?
9. ...“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?
10. ...“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?
11. 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. √ screens we have the technical solutions to get our websites looking good on all screen sizes. frameworks: Bootstrap - Twitter Foundation Skeleton & more
13. Linda van Deursen http://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.
14. √ screens plenty of tools out there.
15. 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
16. √ sources re-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
17. cards have arrived and on many more platforms
18. 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..
19. cards on Twitter https://dev.twitter.com/cards
20. 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.
21. more card tricks http://designshack.net/articles/css/css-card-tricks/ cards do a good job specially on mobile. Take a little space, easy to arrange, carry a lot of information.
22. 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.
23. √ personalization
24. √ personalization users of your website bring data. Via social check- in they bring their frends, preferences and maybe more...
25. • personalization 1
26. √ personalization a review of a friend of my friend (on Facebook). check the “friends first setting”
27. from other sources
28. 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
29. What about my little website?
30. from Dan Mall’s talk @ Smashing Conf 2013 Quote Do not focus on the goals, concentrate on the motivation business goals vs. user needs
31. Talking about needs- motivation: Would I like this colorfull and entertaining website when I want my passport renewed?
32. Thumbs up for the gov.uk project
33. Serve your customer
34. My challenges: • Better performing websites • API’s and SDK’s • rethink WordPress (as a CMS only and less as a building platform)
35. On my to do / learn list: • Github • S_ • Flexbox • CSS animations • Sass or Less
37. 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
38. Links to : Harry Roberts on CSS frameworks https://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
39. Thank you ! 52 http://designlab.nl @wpmariken