Responsive webdesign en het ontwerpproces (NL)

20 min talk @ FreelanceFactory Amsterdam 13 september 2013

Transcript

1. RWD
   responsive webdesign
   en het ontwerp proces
   13 sep 2013
   FreelanceFriday Pakhuis de Zwijger Amsterdam
   Mariken de Ruiter
   1
   

   View Slide

2. RWD
   2
   http://alistapart.com/article/responsive-web-design
   

   View Slide

3. designing ...?
   3
   Treehouse interview with Brad Frost
   http://blog.teamtreehouse.com/designing-in-the-browser-an-interview-with-brad-frost
   

   View Slide

4. ...?
   4
   Wie ontwerpt websites in Photoshop?
   

   View Slide

5. ...?
   5
   Wie krijgt Psd bestand aangeleverd om
   website te ontwikkelen?
   

   View Slide

6. RWD
   vanavond:
   ● iets over mij
   ● hoe nu te ontwerpen?
   ● tips en tools
   ● vragen
   6
   Disclaimer: ik breng je niet de oplossingen, ik draag mogelijkheden aan, ik
   nodig je uit voor input en discussie.
   

   View Slide

7. OVER MIJ
   ● hts voor de kleding- industrie
   ♥ kleuren
   ♥ talen , incl. HTML en CSS
   ♥ dingen maken
   ♥ klanten en … handel
   7
   

   View Slide

8. MINI BIO
   mijn school
   8
   

   View Slide

9. 9
   illustratie: http://carro.nl
   KLANTEN - AUDIENCE -
   GEBRUIKERS - USERS
   

   View Slide

10. The way people use the web has changed,
    so the way we make web sites needs to changes as well.
    http://www.flickr.com/photos/theeerin/5271910918/ 10
    

    View Slide

11. LINEAIR
    ontwerp front-end back-end online!
    11
    

    View Slide

12. LINEAIR
    content ux ontwerp front-end back-end online!
    12
    + RWD
    

    View Slide

13. WAT VERBETEREN?
    13
    efficiënter werken
    onze ideeën goed communiceren
    beter samenwerken, samen met
    developers en klant
    

    View Slide

14. OPGELET
    “het is onze taak om een
    future friendly
    ontwerp systeem
    te creëren ”
    14
    quote vertaald: Pon Kattera @pkattera
    

    View Slide

15. RWD: WAT NODIG?
    1. flexibele ‘grid based’ layout
    2. flexibele plaatjes en media en
    3. media queries
    15
    uit: Responsive Webdesign, Ethan Marcotte
    

    View Slide

16. UUH?
    1. flexibele ‘grid based’ layout
    2. flexibele plaatjes en media en
    3. media queries
    18
    uit: Responsive Webdesign, Ethan Marcotte
    

    View Slide

17. OMG!
    19
    Webdesigners gebruiken nog PHOTOSHOP!
    

    View Slide

18. OKAY,
    we hebben het begrepen.
    we ontwerpen geen pagina’s
    maar een reeks van onderdelen.
    20
    

    View Slide

19. Denk
    elementen,
    componenten & patronen
    19
    

    View Slide

20. DOEL
    ● consistentie in vormgeving op alle
    beeldschermen scherm
    ● herkenbare stijl, huisstijl
    ● gebruiksvriendelijk
    ● continuïteit / klaar voor de toekomst
    20
    

    View Slide

21. Eén beleving
    fluid style guides
    21
    

    View Slide

22. Eén beleving
    22
    The web’s primary design principle is
    universality …
    Tim Berners-Lee
    http://www.scientificamerican.com/article.cfm?id=long-live-the-web
    “
    

    View Slide

23. 23
    ZET ER DE SCHAAR IN
    

    View Slide

24. 24
    FF elementen
    

    View Slide

25. 25
    http://bradfrostweb.com/blog/post/atomic-web-design/
    ATOMIC DESIGN
    

    View Slide

26. ATOMIC DESIGN
    26
    http://bradfrostweb.com/blog/post/atomic-web-design/
    http://joshduck.com/periodic-table.html
    

    View Slide

27. MODULAIR
    27
    Design Elementen
    Typo
    Textuur
    Ikoontjes
    Lijnen
    Kleur
    Vorm
    Patroon
    Ruimte
    Typo
    

    View Slide

28. MODULAIR
    28
    Her-bruikbare Elementen
    her en der
    

    View Slide

29. Tip 1
    29
    Start met Lettertype
    op kleine schermen zullen andere
    design elementen niet weergegeven
    worden, dus type is belangrijk.
    

    View Slide

30. DESIGN TOOLS
    30
    Statisch Responsive HTML/CSS
    pen en papier Froont
    http://froont.com
    Notepad
    Sketch Macaw
    http://macaw.com
    Sublime Text
    http://www.sublimetext.com/
    Photoshop Rf Adobe Egde Reflow
    http://www.webdesignerdepot.
    com/2013/04/an-introduction-to-edge-reflow/
    in de browser:
    Mockingbird, Handcraft,
    Easel, Firebug e.v.a.
    https://www.easel.io/
    

    View Slide

31. Tip 2
    31
    Gebruik voor het creatieve
    werk de tool waar je je lekker
    bij voelt.
    

    View Slide

32. TADDAH!
    Wow!
    de verschillende lay-outs
    in de browser presenteren
    32
    

    View Slide

33. PROTOTYPE
    33
    Wat laten we de klant zien?
    mood-board, of ….
    http://clearleft.com/thinks/visualdesignexplorations/
    

    View Slide

34. tip 4
    laat de klant LOOK & FEEL met Photoshop
    zien.
    en toon een vergelijkbare bestaande website
    als voorbeeld in de browser
    34
    

    View Slide

35. collage
    35
    http://danielmall.com/articles/rif-element-collages/
    

    View Slide

36. View Slide

37. 37
    STYLE TILES
    http://styletil.es/
    

    View Slide

38. 38
    STYLE TILES
    http://styletil.es/
    

    View Slide

39. 39
    STYLE TILES
    http://styletil.es/
    

    View Slide

40. 40
    STYLE TILES
    http://styletil.es/
    

    View Slide

41. 41
    STYLE TILES
    http://styletil.es/
    

    View Slide

42. STYLE GUIDES
    de voordelen:
    ● makkelijk testen
    ● betere workflow
    ● gezamelijke vocabulaire
    ● referentie punt
    42
    http:// 24ways.org/2011/front-end-style-guides/
    

    View Slide

43. style guide
    43
    http:// bbc.co.uk/gel
    

    View Slide

44. style guide
    44
    

    View Slide

45. STYLE GUIDES
    45
    vertaald naar: Brad Frost @ #btconf Beyond Tillerand 2013
    nadelen:
    ● kost veel tijd
    ● beschouwd als een hulpmiddel ipv
    richtlijn
    ● vaak pas gemaakt nadat project online is
    ● soms te abstract
    ● of incompleet
    ● mist een methodische basis/logica
    ● uitsluitend gezien als designer/developer
    tool
    

    View Slide

46. Deel
    46
    efficiënter en meer fun
    ervaringen met tools
    Probeer
    nieuwe tools - templates
    Werk samen
    TOT SLOT
    

    View Slide

47. 47
    Reading tip
    http://insideintercom.io/why-cards-are-the-future-of-the-web
    

    View Slide

48. 48
    “Let’s keep talking,
    sharing, and
    learning.
    This is a new way of
    doing design. “
    from Dan Mall’s talk @ Smashing Conf 2013
    

    View Slide

49. TAKE AWAY
    49
    25 tools voor RWD @brad_frost
    http://www.netmagazine.com/features/top-25-responsive-design-tools
    RWD scooped @gonzodesign
    http://www.scoop.it/u/gonzodesign
    Sparkbox design-dev tool
    http://seesparkbox.com
    Hands on RWD @bencallahan
    https://speakerdeck.com/bencallahan/hands-on-responsive-web-design
    This is for everyone @paulrobertlloyd
    https://speakerdeck.com/paulrobertlloyd/this-is-for-everyone-ldnia-number-4
    

    View Slide

50. DANK !
    50
    voor alle inspirerende informatie
    ♥ mensen om te volgen:
    @gonzodesign Jan Rajtoral NL
    @boagworld Paul Boag GB
    @aral Aral Balkan GB
    @lukew Luke Wroblewski US
    @brad_frost Brad Frost US
    e.v.a.
    

    View Slide

51. VRAGEN ?
    51
    :)
    

    View Slide

52. THANK YOU !
    52
    http://designlab.nl
    @wpmariken
    

    View Slide