Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Future is Modular

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

Designlab

September 14, 2014
Tweet

More Decks by Designlab

Other Decks in Design

Transcript

  1. The Future is Modulair
    a new approach to websites
    building
    12 Sep 2014 Amsterdam
    @freelancefriday venue @de_ Zwijger
    @wpmariken

    View Slide

  2. The Future …..

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  6. Tim Berners Lee
    back then it’s was ment for publishing and distributing scientific
    documents

    View Slide

  7. What is our canvas?

    View Slide

  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?

    View Slide

  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?

    View Slide

  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?

    View Slide

  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.

    View Slide

  12. √ screens
    we have the technical solutions to get our websites looking good
    on all screen sizes.
    frameworks:
    Bootstrap - Twitter
    Foundation
    Skeleton & more

    View Slide

  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.

    View Slide

  14. √ screens
    plenty of tools out there.

    View Slide

  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

    View Slide

  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

    View Slide

  17. cards have arrived
    and on many more
    platforms

    View Slide

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

    View Slide

  19. cards on Twitter
    https://dev.twitter.com/cards

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  23. √ personalization

    View Slide

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

    View Slide

  25. ● personalization
    1

    View Slide

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

    View Slide

  27. from other sources

    View Slide

  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

    View Slide

  29. What about my little
    website?

    View Slide

  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

    View Slide

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

    View Slide

  32. Thumbs up for the gov.uk project

    View Slide

  33. Serve your customer

    View Slide

  34. My challenges:
    ● Better performing websites
    ● API’s and SDK’s
    ● rethink WordPress (as a
    CMS only and less as a
    building platform)

    View Slide

  35. On my to do / learn list:
    ● Github
    ● S_
    ● Flexbox
    ● CSS animations
    ● Sass or Less

    View Slide

  36. View Slide

  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

    View Slide

  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

    View Slide

  39. Thank you !
    52
    http://designlab.nl
    @wpmariken

    View Slide