Creating a Great Portfolio Site

4,409 views

Published on

If you’re a creative or technical professional, odds are you need a great portfolio website. What makes a good portfolio? What if you’re a writer, or a developer, and don’t have a lot of visual work to show? We’ll go over how to navigate the intimidating world of personal portfolio websites, using WordPress as our guide.

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,409
On SlideShare
0
From Embeds
0
Number of Embeds
2,554
Actions
Shares
0
Downloads
21
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Creating a Great Portfolio Site

  1. 1. Creating a Great Portfolio Website
  2. 2. I am Mel Choyce • Design Engineer at Automattic • WordPress core contributor • Live in Boston • Connecticut native • @melchoyce | choycedesign.com | melchoyce.com
  3. 3. What kind of work do you do?
  4. 4. Let’s start with some fun. (and by that I mean embarrassing screenshots)
  5. 5. General principles
  6. 6. Keep it simple.
  7. 7. Let your personality shine through. :)
  8. 8. Clever microcopy or intro statements
  9. 9. Type and iconography
  10. 10. Illustration and animation
  11. 11. Self portraits
  12. 12. Tailor your portfolio to a specific audience.
  13. 13. http://www.shoeboxblog.com/?p=16820
  14. 14. Don't showcase work you wouldn't want to do again.
  15. 15. Don't do something cool just because you can.
  16. 16. Less is more, as long as it's high quality.
  17. 17. Explain your process. Your work doesn't speak for itself.
  18. 18. Focus on the problem you solved, not the tools you used
  19. 19. I used to just have thumbnails that opened into light boxed static mockups.
  20. 20. Not that hot.
  21. 21. Write a case study.
  22. 22. Haraldur Thorleifsson http://haraldurthorleifsson.com/morethanamap/
  23. 23. Haraldur Thorleifsson http://haraldurthorleifsson.com/morethanamap/
  24. 24. Writing a longer case study • What was the overall goal of the project? • What problem was the project trying to solve? • What role did you play in the project? • What was the process you used to solve the problem? • What were the results? • Link to the final product.
  25. 25. Sometimes shorter is okay.
  26. 26. Sebastien Gabriel http://kounterb.dunked.com/chromeos-filesapp
  27. 27. Writing a shorter case study • What was the project? • What was your role? • Relevant screenshots, mockups, code snippets • Link to the final product
  28. 28. GitHub and Dribbble do not a portfolio make
  29. 29. Make it easy for the right audience to get in touch with you
  30. 30. What do employers look for in a portfolio?
  31. 31. – Steve Hickey, Fresh Tilled Soil “Potential. It doesn't need to be perfect, but I need to be able to sense underlying logic and order behind the decision making. …You can't teach people how to think.”
  32. 32. – Andrew Norcross, @norcross “attention to detail”
  33. 33. – Roger Huang, @rogerh1991 “Drive. I want to see that somebody cares about their projects, and takes the time for a few related passion projects.”
  34. 34. – Andrea Lee Bishop, @andrealee_b “attention to detail & versatility. Be wary of oversights that would indicate they'd forget it on projects for you too.”
  35. 35. – Rachel Baker, @rachelbaker “It isn't what is in the portfolio but instead a potential hires responses to questions about "why?" a certain approach was taken.”
  36. 36. Building a Portfolio
  37. 37. • Open source project • Need to pay for hosting • Completely customizable • Total control • Great if you know some code or feel comfortable experimenting • Hosted WordPress service • Free hosting • Partially customizable • Paid upgrades • Great if you’re new to site building/blogging or want to make something fast
  38. 38. To add your content, you can... • Use or make a portfolio CPT • Use category pages • Make each piece a page
  39. 39. Finding (or making) a good theme
  40. 40. What makes a good theme? • Keep it simple so you can customize • Aim for the general layout you want • Avoid themes with too many options • Avoid baked-in functionality
  41. 41. Widely WordPress.com: http://theme.wordpress.com/themes/widely/ WordPress.org: http://public-api.wordpress.com/rest/v1/themes/download/widely.zip
  42. 42. SemPress WordPress.com: http://wordpress.com/themes/sempress WordPress.org: http://wordpress.org/themes/sempress
  43. 43. Mixfolio WordPress.com: http://wordpress.com/themes/mixfolio WordPress.org: http://wordpress.org/themes/mixfolio
  44. 44. Hatch WordPress.com: http://wordpress.com/themes/hatch WordPress.org: http://public-api.wordpress.com/rest/v1/themes/download/hatch.zip
  45. 45. Portfolio Press WordPress.org: http://wordpress.org/themes/portfolio-press
  46. 46. Motif WordPress.com: http://wordpress.com/themes/motif WordPress.org: http://public-api.wordpress.com/rest/v1/themes/download/motif.zip
  47. 47. Illustratr WordPress.com: http://wordpress.com/themes/illustratr
  48. 48. Espied WordPress.com: http://wordpress.com/themes/illustratr
  49. 49. Capsule Information: http://crowdfavorite.com/capsule/ Download for WordPress.org: http://sourceforge.net/projects/wp-capsule/files/1.1.1/capsule-server-1.1.1.zip/download
  50. 50. Roll your own with _s _s (Underscores) Download at http://underscores.me/
  51. 51. Enhance with plugins
  52. 52. Jetpack Download at http://jetpack.me/
  53. 53. What to use in Jetpack • Photon (load your images from WordPress.com’s CDN) • Widget Visibility (chose what widgets appear on each page) • Publicize (easily share your work with your social media accounts) • Carousel (shows your images with a nice lightbox effect) • Tiled Galleries (adds a bunch of different gallery layouts to chose from. I love the tiled mosaic one) • Contact Form (easily add a contact form to your site) • Custom CSS (lets you customize your css without overwriting your theme) • Portfolio custom post type (coming soon?)
  54. 54. NextGen Gallery Download at http://wordpress.org/plugins/nextgen-gallery/
  55. 55. Contact Form 7 Download at http://wordpress.org/plugins/contact-form-7/
  56. 56. Portfolio Post Type Download at http://wordpress.org/plugins/portfolio-post-type/
  57. 57. In general, worth looking at... • Security plugin (BruteProtect, iThemes Security) • Backup plugin (BackupToDropbox, BackUpWordPress)
  58. 58. Demo?
  59. 59. Thank you! @melchoyce | choycedesign.com | melchoyce.com

×