The future is modulair - new approach to web design
?
0 likes?307 views
inspired by the superb congres #FOWD in London April 2014. This talk held @freelancefriday in Amsterdam 12 September 2014
The future is modulair - new approach to web design
- 1. The Future is Modulair a new approach to websites building 12 Sep 2014 Amsterdam @freelancefriday venue @de_ Zwijger @wpmariken 1
- 2. The Future ….. 2
- 3. ….. modulair 3 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. new 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”
- 9. 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/
- 10. 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
- 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. √ 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. Linda van Deursen http://alistapart.com/article/content-out-layout
- 14. √ screens plenty of tools tout 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.
- 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 more platforms
- 18. cards on Google why are cards so promising? with Google cards you can provide your customer with personalised information. Upon preferences/ location/needs etc.. http://www.google.com/landing/now/
- 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 small space, are 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. 1
- 24. √ personalization 1 users of your website bring data. Via social check-in they bring their frends, preferences and maybe more...
- 26. √ personalization a review of a friend of my friend (on Facebook). check the “friends first setting”
- 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.
- 29. What about my little website?
- 30. Quote Do not focus on the goals, concentrate on the motivation from Dan Mall’s talk @ Smashing Conf 2013 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
- 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