The Future is Modular

A674c1bef71a1890a94e462d5a93c5da?s=47 Designlab
September 14, 2014

The Future is Modular

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

A674c1bef71a1890a94e462d5a93c5da?s=128

Designlab

September 14, 2014
Tweet

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
  36. None
  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