Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Hip Hop & The Web

Hip Hop & The Web

How A Culture Can Define A Process

Travis Miller

June 22, 2013
Tweet

More Decks by Travis Miller

Other Decks in Design

Transcript

  1. How A Culture Can De ne A Process
    HIP HOP & THE WEB TRAVIS MILLER
    @tm_web
    #hiphopweb

    View Slide

  2. INTRO

    View Slide

  3. "We don’t have any rules, everybody is
    trying to figure it out. That’s why the
    Internet is like the Wild West. The Wild,
    Wild West. We need to write the new
    rules."
    Jay-Z

    View Slide

  4. HIP HOP

    View Slide

  5. ELEMENTS OF HIP HOP

    View Slide

  6. ELEMENTS OF THE WEB

    View Slide

  7. ELEMENTS OF THE WEB
    INFLUENCE
    FREESTYLE
    MIX & FLOW
    DEMO
    STUDIO
    SHOW TIME

    View Slide

  8. INFLUENCE

    View Slide

  9. INFLUENCE

    View Slide

  10. INFLUENCE
    INSPIRATION

    View Slide

  11. INFLUENCE

    View Slide

  12. INFLUENCE
    BUILD OFF WHAT EXISTS

    View Slide

  13. DEFINE THE PROBLEM
    RELATE TO THE CLIENT/ AUDIENCE
    INSPIRATION FOR THE PROJECT
    INFLUENCE

    View Slide

  14. + Project Brief
    + Content Outline
    + Requirements Analysis
    INFLUENCE

    View Slide

  15. FREESTYLE

    View Slide

  16. FREESTYLE
    BRAINSTORMING

    View Slide

  17. FREESTYLE
    + Site Map
    + Sketches / Wireframes (lo-fi)
    + Design Elements

    View Slide

  18. FREESTYLE

    View Slide

  19. FREESTYLE

    View Slide

  20. FREESTYLE
    + Sliders
    + Buttons
    + Hovers
    + Animations

    View Slide

  21. MIX & FLOW

    View Slide

  22. Mix & Flow is combining your findings,
    content and other outputs with design and
    direction.
    MIX & FLOW

    View Slide

  23. + Structured Content / Wireframes (hi-fi)
    + Style Guidelines
    + Resource Collection
    MIX & FLOW

    View Slide

  24. [header]
    [body]
    [footer]
    HTML ELEMENTS
    MIX & FLOW

    View Slide

  25. SONG ELEMENTS
    [chorus]
    [verse]
    [hook]
    MIX & FLOW

    View Slide

  26. STRUCTURE CONTENT LIKE LYRICS
    MIX & FLOW

    View Slide

  27. [chorus] > consistent elements (page to page)
    [verse] > main content (differs for each page)
    [hook] > call to action / next steps for users
    MIX & FLOW

    View Slide

  28. MIX & FLOW

    View Slide

  29. MIX & FLOW

    View Slide

  30. MIX & FLOW

    View Slide

  31. RESOURCES
    MIX & FLOW

    View Slide

  32. MIX & FLOW

    View Slide

  33. =
    github
    google
    twitter
    MIX & FLOW

    View Slide

  34. DEMO

    View Slide

  35. DEMO
    PROTOTYPING

    View Slide

  36. DEMO

    View Slide

  37. DEMO
    + Rapid Prototypes
    + Design Integration
    + Tickets & Tasks

    View Slide

  38. DEMO

    View Slide

  39. DEMO

    View Slide

  40. DEMO

    View Slide

  41. DEMO
    DEVTOOLS AUTOSAVE!!!

    View Slide

  42. DEMO
    DOCUMENTATION

    View Slide

  43. DEMO

    View Slide

  44. INTERCHANGEABLE

    View Slide

  45. STUDIO

    View Slide

  46. STUDIO
    REFINE YOUR MASTERPIECE

    View Slide

  47. STUDIO
    + Testing
    + Iterations
    + Design Integration / Refinement

    View Slide

  48. STUDIO
    HEAVY CRITIQUE AND TESTING

    View Slide

  49. STUDIO
    TOOLS

    View Slide

  50. STUDIO

    View Slide

  51. STUDIO
    REVIEW
    RELEASE
    REPEAT

    View Slide

  52. SHOW TIME

    View Slide

  53. SHOW TIME

    View Slide

  54. SHOW TIME
    PRACTICE

    View Slide

  55. SHOW TIME
    + Optimization
    + Maintenance
    + Support

    View Slide

  56. SHOW TIME
    PERFORMANCE

    View Slide

  57. SHOW TIME

    View Slide

  58. SHOW TIME

    View Slide

  59. SHOW TIME

    View Slide

  60. SHOW TIME

    View Slide

  61. OUTRO

    View Slide

  62. BE COOL

    View Slide

  63. THANKS
    @tm_web
    #hiphopweb

    View Slide