Showing Off - The Art of The Portfolio- Andrew Bergeron - WordCamp LAX

Your work may be stellar – but no one will ever know unless you present it in the best light. In a world where a Behance account can be set up in minutes, there is no excuse to miss the opportunity to show off just how awesome your work is. Since your first impression could be your last, it is critical to captivate your audience with not only the final-product you’ve created but also the brilliant methods you’ve used to build these solutions.

Video link here:
http://wordpress.tv/2015/10/08/andrew-bergeron-showing-off-the-art-of-the-portfolio/

Transcript

1. thank you.
   

   View Slide

2. UR MY
   NEW
   BFF’s
   

   View Slide

3. Showing Off -
   The Art of
   The Portfolio
   

   View Slide

4. Art has to move you
   and design does not,
   unless it’s a good
   design for a bus.
   ~ David Hockney
   

   View Slide

5. portafoglio
   portfolio - 18th Century
   portare (“to carry”)
   folium (“sheet”)
   +
   

   View Slide

6. PORTFOLIO =#1
   

   View Slide

7. @ 1st sight?
   Do U ever
   FEEL
   

   View Slide

8. You should be clear
   when you need
   people to understand
   you immediately.
   ~ Chip Kidd
   Judge This: the power of first impressions
   

   View Slide

9. common
   similarites
   of
   great
   portfolios
   6
   

   View Slide

10. They describe their
    client and their
    client’s needs.
    1
    

    View Slide

11. They describe
    what they did to
    solve the clients
    problem.
    2
    

    View Slide

12. They share
    their process.
    3
    

    View Slide

13. They present the
    work in an
    impressive way.
    4
    

    View Slide

14. Often have a
    testimonial.
    5
    

    View Slide

15. Borrow*
    (*don’t steal)
    from their
    idols.
    6
    

    View Slide

16. CASE STUDIES
    1
    2
    3
    4
    5
    6
    They describe the client and the clients’ needs
    They describe what they did to solve the clients problem
    They share their process
    Present their work in an impressive way
    Often have a testimonial
    Borrow* (*don’t steal) from their idols
    +
    

    View Slide

17. PORTFOLIO
    CASE STUDY
    CASE STUDY
    CASE STUDY
    CASE STUDY
    +
    

    View Slide

18. 8 steps to
    building a
    solid case
    study…
    

    View Slide

19. STAY
    ORGANIZED
    #Step1
    

    View Slide

20. No matter what your dev job description
    is, you need a robust and reliable system
    for note-taking, etc…
    … Even before you’ve built
    up your skills, a mature process for
    managing the information involved in your
    work will help throughout your career.
    ~ Mark Llobrera
    Memory Management, A List Apart - June 23, 2015
    

    View Slide

21. ADMIN
    SITEMAP
    WIREFRAMES
    TEMPLATES
    DEV
    SKETCHES
    CONTENT
    

    View Slide

22. Ask yourself this
    question:
    “what do I want to
    be hired to do?”
    SHOW this type
    of work.
    #Step2
    

    View Slide

23. UX/UI
    wireframes
    •
    

    View Slide

24. UX/UI
    wireframes
    flowcharts
    1 2 3
    login index main
    •
    •
    

    View Slide

25. UX/UI
    wireframes
    flowcharts
    sitemaps
    •
    •
    •
    

    View Slide

26. Visual/Branding
    Designer
    logos/icons
    •
    

    View Slide

27. Visual/Branding
    Designer
    logos/icons
    styleguides
    •
    •
    Color Palate
    Buttons
    Titles
    Body
    Taglines Find and post a performance, job…
    Backhausdance, Southern California’s critically-acclaimed
    contemporary modern dance company, is seeking male
    2015/2016 season.
    Emeryville Taiko
    

    View Slide

28. Visual/Branding
    Designer
    logos/icons
    styleguides
    applied design
    •
    •
    •
    

    View Slide

29. Developer
    technology
    •
    +
    

    View Slide

30. Developer
    technology
    functions/systems
    •
    •
    

    View Slide

31. Developer
    technology
    functions/systems
    results: analytics, SEO etc...
    •
    •
    •
    

    View Slide

32. Show that you can solve
    problems, and you’ll
    show that you’re
    worth hiring.
    ~ Emelyn Baker
    Building your design protfolio? Here are 8 things
    I wish I’d known.
    medium.com
    

    View Slide

33. Find idols
    & take
    notes.
    #Step3
    

    View Slide

34. List your
    favorite
    examples.
    

    View Slide

35. List your
    favorite
    examples.
    

    View Slide

36. Highlight
    specific styles
    & qualities you
    are attracted to.
    

    View Slide

37. View Slide

38. Identify
    similarities in
    your own
    work.
    

    View Slide

39. The frame, decorations and gradients
    were removed.
    A color palate was established.
    -
    -
    .
    

    View Slide

40. START
    WRITING
    #Step4
    

    View Slide

41. Da who,
    da why,
    da what,
    da how !?!?
    

    View Slide

42. Define who hired
    you and why they
    hired you (what did
    they need solved).
    

    View Slide

43. _________ makes/is the best _________ in _________.
    With buisness rising/failing it was time for a
    __________ refresh to help the business grow.
    Knowing the current __________ was outdated,
    _________ focused on updating _________’s _________,
    _________, and _________.
    (client) (thing) (place)
    (stuff)
    (stuff)
    (you) (client) (#1)
    (#2) (#3)
    

    View Slide

44. Explain what you did
    and how you did it.
    

    View Slide

45. Using _________, _________, and _________ the result
    was an updated __________ which included
    __________, __________, and __________.
    As a result, __________ is totally stoked because the
    new __________ has grown business by __________.
    (client)
    (## %)
    (feature #1)
    (skill #1) (skill #2) (skill #3)
    (stuff)
    (feature #2) (feature #3)
    (stuff)
    

    View Slide

46. Share
    your
    process
    #Step5
    

    View Slide

47. screenshots
    

    View Slide

48. moodboards
    

    View Slide

49. wireframes
    

    View Slide

50. sketches
    

    View Slide

51. exploration
    

    View Slide

52. pen to pixels
    

    View Slide

53. wireframes
    

    View Slide

54. solving a process
    1. Info 2. Date + Location 3. Decription 4. Media + Submit 5. SUCCESS!
    

    View Slide

55. responsive design
    

    View Slide

56. Sharing your process
    is valuable because:
    

    View Slide

57. Sharing your process
    is valuable because:
    • it shows how you work
    

    View Slide

58. Sharing your process
    is valuable because:
    •
    •
    it shows how you work
    it shows how you think
    

    View Slide

59. Sharing your process
    is valuable because:
    •
    •
    •
    it shows how you work
    it shows how you think
    it shows that you know how to take an idea from
    concept to finished product
    

    View Slide

60. Show the
    final product*
    *the WHOLE brand, web, app, etc…
    #Step6
    

    View Slide

61. There is
    (hopefully)
    much more to
    your website/app
    then a screen shot
    of the landing page
    “above the fold”.
    Cats.com
    

    View Slide

62. Show websites/apps
    on multiple devices
    and show full
    page designs.
    

    View Slide

63. View Slide

64. GO BIG*
    because no one says “go small or go home”.
    *
    

    View Slide

65. View Slide

66. Show examples of
    websites, apps, etc.
    in a “real environment”
    

    View Slide

67. View Slide

68. Show brading &
    style guides.
    

    View Slide

69. Titles
    Tagline
    Body
    Logotype
    meet the team
    do you have what it takes?
    This trek is considered to be one of the most beautiful hikes many
    travelers have taken. It will pass through countless waterfalls, some
    even flowing past your feet.
    

    View Slide

70. Take pictures of “print items”
    outside in “grey light”.
    iPhones photos can be OK.
    

    View Slide

71. Defy budgets
    and bulk up your
    portfolio.
    

    View Slide

72. View Slide

73. View Slide

74. Use these resources for
    out-the-box design assets:
    madebysidecar.com creativemarket.com
    pixeden.com
    

    View Slide

75. macbook psd mockup
    blank t-shirt psd
    android wireframe template
    

    View Slide

76. View Slide

77. use a variety of sources
    make alot from a little
    less is more
    Tips for using “stock art”:
    •
    •
    •
    

    View Slide

78. Bundle collections -
    do not let old (good)
    work die…
    

    View Slide

79. View Slide

80. Ask for testimonials:
    #Step7
    

    View Slide

81. • during the “launch celebration period”
    Ask for testimonials:
    #Step7
    

    View Slide

82. •
    •
    during the “launch celebration period”
    expedite delivery by offering value/service
    Ask for testimonials:
    #Step7
    

    View Slide

83. •
    •
    •
    during the “launch celebration period”
    expedite delivery by offering value/service
    show examples
    Ask for testimonials:
    #Step7
    

    View Slide

84. I felt Andrew was
    truly interested in
    creating something
    that would reflect me
    and build my
    practice.
    Andrew is great
    about incorporating
    the clients needs
    into his creative
    and technical
    process.
    Andrew’s patience &
    understanding of my
    aesthetic vision for my
    website has exceeded
    my expectations.
    Andrew is a
    collaborator in the
    truest sense of the
    word.
    

    View Slide

85. Build
    your portfolio
    #Step8
    

    View Slide

86. View Slide

87. View Slide

88. View Slide

89. 1. Easy to navigate
    2. Easy to contact
    

    View Slide

90. Quality
    Quantity
    

    View Slide

91. View Slide

92. View Slide

93. #Step1
    #Step2
    #Step3
    #Step4
    #Step5
    #Step6
    #Step7
    #Step8
    - stay organized
    - what type of work?
    - find idols take notes
    - start writing
    - share your process
    - show the final product
    - ask for testimonials
    - build it.
    

    View Slide

94. View Slide

95. Make a habbit of updating
    your portfolio
    •
    

    View Slide

96. Make a habbit of updating
    your portfolio
    Look your best
    •
    •
    

    View Slide

97. Make a habbit of updating
    your portfolio
    Look your best
    Create memorable
    first impressions
    •
    •
    •
    

    View Slide

98. Building a portfolio
    is a marathon,
    NOT a sprint.
    

    View Slide

99. Today’s
    FAVORITES*
    *subject to change
    

    View Slide

100. Every job is an opportuinty
     to do your best work.
     

     View Slide

101. View Slide