Hip Hop & The Web

How A Culture Can Define A Process

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