Responsive webdesign en het ontwerpproces (NL)

A674c1bef71a1890a94e462d5a93c5da?s=47 Designlab
September 13, 2013

Responsive webdesign en het ontwerpproces (NL)

20 min talk @ FreelanceFactory Amsterdam 13 september 2013

A674c1bef71a1890a94e462d5a93c5da?s=128

Designlab

September 13, 2013
Tweet

Transcript

  1. RWD responsive webdesign en het ontwerp proces 13 sep 2013

    FreelanceFriday Pakhuis de Zwijger Amsterdam Mariken de Ruiter 1
  2. RWD 2 http://alistapart.com/article/responsive-web-design

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

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

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

    ontwikkelen?
  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.
  7. OVER MIJ • hts voor de kleding- industrie ♥ kleuren

    ♥ talen , incl. HTML en CSS ♥ dingen maken ♥ klanten en … handel 7
  8. MINI BIO mijn school 8

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

  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
  11. LINEAIR ontwerp front-end back-end online! 11

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

  13. WAT VERBETEREN? 13 efficiënter werken onze ideeën goed communiceren beter

    samenwerken, samen met developers en klant
  14. OPGELET “het is onze taak om een future friendly ontwerp

    systeem te creëren ” 14 quote vertaald: Pon Kattera @pkattera
  15. RWD: WAT NODIG? 1. flexibele ‘grid based’ layout 2. flexibele

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

    media en 3. media queries 18 uit: Responsive Webdesign, Ethan Marcotte
  17. OMG! 19 Webdesigners gebruiken nog PHOTOSHOP!

  18. OKAY, we hebben het begrepen. we ontwerpen geen pagina’s maar

    een reeks van onderdelen. 20
  19. Denk elementen, componenten & patronen 19

  20. DOEL • consistentie in vormgeving op alle beeldschermen scherm •

    herkenbare stijl, huisstijl • gebruiksvriendelijk • continuïteit / klaar voor de toekomst 20
  21. Eén beleving fluid style guides 21

  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 “
  23. 23 ZET ER DE SCHAAR IN

  24. 24 FF elementen

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

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

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

    Patroon Ruimte Typo
  28. MODULAIR 28 Her-bruikbare Elementen her en der

  29. Tip 1 29 Start met Lettertype op kleine schermen zullen

    andere design elementen niet weergegeven worden, dus type is belangrijk.
  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/
  31. Tip 2 31 Gebruik voor het creatieve werk de tool

    waar je je lekker bij voelt.
  32. TADDAH! Wow! de verschillende lay-outs in de browser presenteren 32

  33. PROTOTYPE 33 Wat laten we de klant zien? mood-board, of

    …. http://clearleft.com/thinks/visualdesignexplorations/
  34. tip 4 laat de klant LOOK & FEEL met Photoshop

    zien. en toon een vergelijkbare bestaande website als voorbeeld in de browser 34
  35. collage 35 http://danielmall.com/articles/rif-element-collages/

  36. 36

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

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

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

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

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

  42. STYLE GUIDES de voordelen: • makkelijk testen • betere workflow

    • gezamelijke vocabulaire • referentie punt 42 http:// 24ways.org/2011/front-end-style-guides/
  43. style guide 43 http:// bbc.co.uk/gel

  44. style guide 44

  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
  46. Deel 46 efficiënter en meer fun ervaringen met tools Probeer

    nieuwe tools - templates Werk samen TOT SLOT
  47. 47 Reading tip http://insideintercom.io/why-cards-are-the-future-of-the-web

  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
  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
  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.
  51. VRAGEN ? 51 :)

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