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