Minimalist Designer behind the curious Developer

A case study of a fun weekend hack project - from design to code.

Transcript

1. the minimalist
   Designer
   Developer
   within the curious
   a case study of a fun weekend project
   Wednesday, 16 January, 13
   

   View Slide

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

   View Slide

3. coder
   Wednesday, 16 January, 13
   

   View Slide

4. explorer
   Wednesday, 16 January, 13
   

   View Slide

5. explorer
   thanks!!
   Wednesday, 16 January, 13
   

   View Slide

6. speaker
   Wednesday, 16 January, 13
   

   View Slide

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

   View Slide

8. desire
   design
   develop
   decide
   ideas
   ux
   code
   feedback
   Wednesday, 16 January, 13
   

   View Slide

9. ideas
   ux
   code
   feedback
   Wednesday, 16 January, 13
   

   View Slide

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

    View Slide

11. emotions
    encouraging
    open
    curious
    friendly
    current
    hands-on
    accessible
    local
    global
    quality
    Wednesday, 16 January, 13
    

    View Slide

12. 2 features
    encouraging open curious
    friendly
    current hands-on accessible
    local
    global quality
    open events
    open source
    Wednesday, 16 January, 13
    

    View Slide

13. sketch
    desktop & laptop mobile & tablet paper & balsamiq
    2 col
    1 col
    Wednesday, 16 January, 13
    

    View Slide

14. ideas
    components
    color scheme
    responsive design
    general
    Wednesday, 16 January, 13
    

    View Slide

15. Design
    components . layout . structure
    with adobe fireworks
    Wednesday, 16 January, 13
    

    View Slide

16. ui kit
    ui
    Wednesday, 16 January, 13
    

    View Slide

17. ui kit
    color
    form
    table
    fonts
    typography
    buttons
    Wednesday, 16 January, 13
    

    View Slide

18. color scheme
    adobe kuler dribbble
    or =
    swatch
    webuildsg.ase
    add to swatch color pallette
    Wednesday, 16 January, 13
    

    View Slide

19. fonts
    choice
    filters
    download
    opensans-regular.ttf
    code
    preview
    font pairing
    Wednesday, 16 January, 13
    

    View Slide

20. 960 grids
    fireworks > menu > file > new from template
    Wednesday, 16 January, 13
    

    View Slide

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

    View Slide

22. shapes
    rounded
    rectangles
    corner design resize without
    distortion
    Wednesday, 16 January, 13
    

    View Slide

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
    

    View Slide

24. pages
    master page -
    repeated parts
    header, footer, etc
    Wednesday, 16 January, 13
    

    View Slide

25. export
    file > export preview in browser
    options hover effects
    Wednesday, 16 January, 13
    

    View Slide

26. logo
    geometric shape first letter
    mobile app icon
    apple touch icons
    logo, favicon
    Wednesday, 16 January, 13
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

30. grids
    Wednesday, 16 January, 13
    

    View Slide

31. color
    variables
    font
    variables
    sass > css
    Wednesday, 16 January, 13
    

    View Slide

32. css properties
    Wednesday, 16 January, 13
    

    View Slide

33. jade > html
    viewport
    facebook og
    google fonts
    apple touch icons
    gridline in dev
    stylesheet
    Wednesday, 16 January, 13
    

    View Slide

34. responsive
    2 col > 1 col
    wider
    smaller
    Wednesday, 16 January, 13
    

    View Slide

35. Decide
    launch . feedback
    Wednesday, 16 January, 13
    

    View Slide

36. feedback
    constructive!
    Wednesday, 16 January, 13
    

    View Slide

37. next steps
    show more
    api user entry
    user entry
    url performance
    design
    development
    social icons
    Wednesday, 16 January, 13
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

41. thanx ;-)
    Wednesday, 16 January, 13
    

    View Slide