Creating a Great Portfolio Site
-
Upload
melchoyce -
Category
Small Business & Entrepreneurship
-
view
864 -
download
2
description
Transcript of Creating a Great Portfolio Site
![Page 1: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/1.jpg)
Creating a Great Portfolio Website
![Page 2: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/2.jpg)
I am Mel Choyce• Design Engineer at Automattic
• WordPress core contributor
• Live in Boston
• Connecticut native
• @melchoyce | choycedesign.com | melchoyce.com
![Page 3: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/3.jpg)
What kind of work do you do?
![Page 4: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/4.jpg)
Let’s start with some fun.
(and by that I mean embarrassing screenshots)
![Page 5: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/5.jpg)
![Page 6: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/6.jpg)
![Page 7: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/7.jpg)
![Page 8: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/8.jpg)
![Page 9: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/9.jpg)
![Page 10: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/10.jpg)
General principles
![Page 11: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/11.jpg)
Keep it simple.
![Page 12: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/12.jpg)
![Page 13: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/13.jpg)
![Page 14: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/14.jpg)
![Page 15: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/15.jpg)
![Page 16: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/16.jpg)
Let your personality shine through. :)
![Page 17: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/17.jpg)
Clever microcopy or intro statements
![Page 18: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/18.jpg)
![Page 19: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/19.jpg)
![Page 20: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/20.jpg)
![Page 21: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/21.jpg)
Type and iconography
![Page 22: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/22.jpg)
![Page 23: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/23.jpg)
![Page 24: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/24.jpg)
Illustration and animation
![Page 25: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/25.jpg)
![Page 26: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/26.jpg)
![Page 27: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/27.jpg)
![Page 28: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/28.jpg)
Self portraits
![Page 29: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/29.jpg)
![Page 30: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/30.jpg)
![Page 31: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/31.jpg)
Tailor your portfolio to a specific audience.
![Page 32: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/32.jpg)
http://www.shoeboxblog.com/?p=16820
![Page 33: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/33.jpg)
![Page 34: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/34.jpg)
Don't showcase work you wouldn't want to do again.
![Page 35: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/35.jpg)
![Page 36: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/36.jpg)
Don't do something cool just because you can.
![Page 37: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/37.jpg)
![Page 38: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/38.jpg)
![Page 39: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/39.jpg)
Less is more, as long as it's high quality.
![Page 40: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/40.jpg)
![Page 41: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/41.jpg)
![Page 42: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/42.jpg)
![Page 43: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/43.jpg)
![Page 44: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/44.jpg)
Explain your process. Your work doesn't speak for itself.
![Page 45: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/45.jpg)
Focus on the problem you solved, not the tools you used
![Page 46: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/46.jpg)
![Page 47: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/47.jpg)
I used to just have thumbnails that opened into light boxed static mockups.
![Page 48: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/48.jpg)
Not that hot.
![Page 49: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/49.jpg)
Write a case study.
![Page 50: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/50.jpg)
Haraldur Thorleifsson
http://haraldurthorleifsson.com/morethanamap/
![Page 51: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/51.jpg)
Haraldur Thorleifsson
http://haraldurthorleifsson.com/morethanamap/
![Page 52: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/52.jpg)
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.
![Page 53: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/53.jpg)
![Page 54: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/54.jpg)
Sometimes shorter is okay.
![Page 55: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/55.jpg)
Sebastien Gabriel
http://kounterb.dunked.com/chromeos-filesapp
![Page 56: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/56.jpg)
Writing a shorter case study
• What was the project?
• What was your role?
• Relevant screenshots, mockups, code snippets
• Link to the final product
![Page 57: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/57.jpg)
GitHub and Dribbble do not a portfolio make
![Page 58: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/58.jpg)
Make it easy for the right audience to get in
touch with you
![Page 59: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/59.jpg)
What do employers look for in a portfolio?
![Page 60: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/60.jpg)
– 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.”
![Page 61: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/61.jpg)
– Andrew Norcross, @norcross
“attention to detail”
![Page 62: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/62.jpg)
– Roger Huang, @rogerh1991
“Drive. I want to see that somebody cares about their projects, and takes the time for a few
related passion projects.”
![Page 63: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/63.jpg)
– 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.”
![Page 64: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/64.jpg)
– 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.”
![Page 65: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/65.jpg)
Building a Portfolio
![Page 66: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/66.jpg)
• 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
![Page 67: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/67.jpg)
To add your content, you can...
• Use or make a portfolio CPT
• Use category pages
• Make each piece a page
![Page 68: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/68.jpg)
Finding (or making) a good theme
![Page 69: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/69.jpg)
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
![Page 70: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/70.jpg)
WidelyWordPress.com: http://theme.wordpress.com/themes/widely/WordPress.org: http://public-api.wordpress.com/rest/v1/themes/download/widely.zip
![Page 71: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/71.jpg)
SemPressWordPress.com: http://wordpress.com/themes/sempressWordPress.org: http://wordpress.org/themes/sempress
![Page 72: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/72.jpg)
MixfolioWordPress.com: http://wordpress.com/themes/mixfolioWordPress.org: http://wordpress.org/themes/mixfolio
![Page 73: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/73.jpg)
HatchWordPress.com: http://wordpress.com/themes/hatchWordPress.org: http://public-api.wordpress.com/rest/v1/themes/download/hatch.zip
![Page 74: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/74.jpg)
Portfolio Press
WordPress.org: http://wordpress.org/themes/portfolio-press
![Page 75: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/75.jpg)
MotifWordPress.com: http://wordpress.com/themes/motifWordPress.org: http://public-api.wordpress.com/rest/v1/themes/download/motif.zip
![Page 76: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/76.jpg)
Illustratr
WordPress.com: http://wordpress.com/themes/illustratr
![Page 77: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/77.jpg)
Espied
WordPress.com: http://wordpress.com/themes/illustratr
![Page 78: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/78.jpg)
CapsuleInformation: 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
![Page 79: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/79.jpg)
Roll your own with _s
_s (Underscores)
Download at http://underscores.me/
![Page 80: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/80.jpg)
Enhance with plugins
![Page 82: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/82.jpg)
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?)
![Page 83: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/83.jpg)
NextGen Gallery
Download at http://wordpress.org/plugins/nextgen-gallery/
![Page 84: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/84.jpg)
Contact Form 7
Download at http://wordpress.org/plugins/contact-form-7/
![Page 85: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/85.jpg)
Portfolio Post Type
Download at http://wordpress.org/plugins/portfolio-post-type/
![Page 86: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/86.jpg)
![Page 87: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/87.jpg)
In general, worth looking at...
• Security plugin (BruteProtect, iThemes Security)
• Backup plugin (BackupToDropbox, BackUpWordPress)
![Page 88: Creating a Great Portfolio Site](https://reader033.fdocuments.in/reader033/viewer/2022042813/53fcb68d8d7f72384b8b4862/html5/thumbnails/88.jpg)
Demo?