Minimalist Designer behind the curious Developer

Transcript

1. 1.

   the minimalist Designer Developer within the curious a case study

   of a fun weekend project Wednesday, 16 January, 13
2. 2.

   www.sayan.ee coder . explorer . speaker Wednesday, 16 January, 13

3. 3.

   coder Wednesday, 16 January, 13

4. 4.

   explorer Wednesday, 16 January, 13

5. 5.

   explorer thanks!! Wednesday, 16 January, 13

6. 6.

   speaker Wednesday, 16 January, 13

7. 7.

   Process iteration . cycle . repetition Wednesday, 16 January, 13

8. 8.

   desire design develop decide ideas ux code feedback Wednesday, 16

   January, 13
9. 9.

   ideas ux code feedback Wednesday, 16 January, 13

10. 10.

    Desire emotions . features . ideas Wednesday, 16 January, 13

11. 11.

    emotions encouraging open curious friendly current hands-on accessible local global

    quality Wednesday, 16 January, 13
12. 12.

    2 features encouraging open curious friendly current hands-on accessible local

    global quality open events open source Wednesday, 16 January, 13
13. 13.

    sketch desktop & laptop mobile & tablet paper & balsamiq

    2 col 1 col Wednesday, 16 January, 13
14. 14.

    ideas components color scheme responsive design general Wednesday, 16 January,

    13
15. 15.

    Design components . layout . structure with adobe fireworks Wednesday,

    16 January, 13
16. 16.

    ui kit ui Wednesday, 16 January, 13

17. 17.

    ui kit color form table fonts typography buttons Wednesday, 16

    January, 13
18. 18.

    color scheme adobe kuler dribbble or = swatch webuildsg.ase add

    to swatch color pallette Wednesday, 16 January, 13
19. 19.

    fonts choice filters download opensans-regular.ttf code preview font pairing Wednesday,

    16 January, 13
20. 20.

    960 grids fireworks > menu > file > new from

    template Wednesday, 16 January, 13
21. 21.

    filters properties panel effects drop shadow Wednesday, 16 January, 13

22. 22.

    shapes rounded rectangles corner design resize without distortion Wednesday, 16

    January, 13
23. 23.

    state 1. 2 states 2. slice tool 3. behaviors 4.

    preview hover File > Preview In Browser > Preview in Google Chrome Window > Behaviors Window > States Wednesday, 16 January, 13
24. 24.

    pages master page - repeated parts header, footer, etc Wednesday,

    16 January, 13
25. 25.

    export file > export preview in browser options hover effects

    Wednesday, 16 January, 13
26. 26.

    logo geometric shape first letter mobile app icon apple touch

    icons logo, favicon Wednesday, 16 January, 13
27. 27.

    Develop css . html . javascript Wednesday, 16 January, 13

28. 28.

    structure sass + compass > css Wednesday, 16 January, 13

29. 29.

    slicing 1. web slice 2. optimise 3. export Wednesday, 16

    January, 13
30. 30.

    grids Wednesday, 16 January, 13

31. 31.

    color variables font variables sass > css Wednesday, 16 January,

    13
32. 32.

    css properties Wednesday, 16 January, 13

33. 33.

    jade > html viewport facebook og google fonts apple touch

    icons gridline in dev stylesheet Wednesday, 16 January, 13
34. 34.

    responsive 2 col > 1 col wider smaller Wednesday, 16

    January, 13
35. 35.

    Decide launch . feedback Wednesday, 16 January, 13

36. 36.

    feedback constructive! Wednesday, 16 January, 13

37. 37.

    next steps show more api user entry user entry url

    performance design development social icons Wednesday, 16 January, 13
38. 38.

    api integration github facebook eventbrite meetup.com manual manual Wednesday, 16

    January, 13
39. 39.

    desire design develop 2 features 2 base colors 2 fonts

    1 logo 2 weekends 1 stylesheet simple intuitive many devices decide 2 features 2 design change performance Wednesday, 16 January, 13
40. 40.

    resources html5boilerplate.com sass-lang.com compass-style.org mhs.github.com/scout-app/ jade-lang.com Wednesday, 16 January, 13

41. 41.

    thanx ;-) Wednesday, 16 January, 13