$30 off During Our Annual Pro Sale. View Details »

Minimalist Designer behind the curious Developer

Sayanee
January 16, 2013

Minimalist Designer behind the curious Developer

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

Sayanee

January 16, 2013
Tweet

More Decks by Sayanee

Other Decks in Technology

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