SlideShare a Scribd company logo
1 of 89
Download to read offline
Creating a Great
Portfolio Website
I am Mel Choyce
• Design Engineer at Automattic
• WordPress core contributor
• Live in Boston
• Connecticut native
• @melchoyce | choycedesign.com | melchoyce.com
What kind of work do you do?
Let’s start with
some fun.
(and by that I mean embarrassing screenshots)
General principles
Keep it simple.
Let your personality
shine through. :)
Clever microcopy or
intro statements
Type and iconography
Illustration and animation
Self portraits
Tailor your portfolio to a
specific audience.
http://www.shoeboxblog.com/?p=16820
Don't showcase work you
wouldn't want to do again.
Don't do something cool
just because you can.
Less is more, as long as
it's high quality.
Explain your process. Your
work doesn't speak for itself.
Focus on the problem you solved,
not the tools you used
I used to just have thumbnails that
opened into light boxed static mockups.
Not that hot.
Write a case study.
Haraldur Thorleifsson
http://haraldurthorleifsson.com/morethanamap/
Haraldur Thorleifsson
http://haraldurthorleifsson.com/morethanamap/
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.
Sometimes shorter is okay.
Sebastien Gabriel
http://kounterb.dunked.com/chromeos-filesapp
Writing a shorter case study
• What was the project?
• What was your role?
• Relevant screenshots, mockups, code snippets
• Link to the final product
GitHub and Dribbble do not
a portfolio make
Make it easy for the
right audience to get in
touch with you
What do employers
look for in a portfolio?
– 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.”
– Andrew Norcross, @norcross
“attention to detail”
– Roger Huang, @rogerh1991
“Drive. I want to see that somebody cares about
their projects, and takes the time for a few
related passion projects.”
– 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.”
– 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.”
Building a Portfolio
• 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
To add your content, you can...
• Use or make a portfolio CPT
• Use category pages
• Make each piece a page
Finding (or making) a
good theme
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
Widely
WordPress.com: http://theme.wordpress.com/themes/widely/
WordPress.org: http://public-api.wordpress.com/rest/v1/themes/download/widely.zip
SemPress
WordPress.com: http://wordpress.com/themes/sempress
WordPress.org: http://wordpress.org/themes/sempress
Mixfolio
WordPress.com: http://wordpress.com/themes/mixfolio
WordPress.org: http://wordpress.org/themes/mixfolio
Hatch
WordPress.com: http://wordpress.com/themes/hatch
WordPress.org: http://public-api.wordpress.com/rest/v1/themes/download/hatch.zip
Portfolio Press
WordPress.org: http://wordpress.org/themes/portfolio-press
Motif
WordPress.com: http://wordpress.com/themes/motif
WordPress.org: http://public-api.wordpress.com/rest/v1/themes/download/motif.zip
Illustratr
WordPress.com: http://wordpress.com/themes/illustratr
Espied
WordPress.com: http://wordpress.com/themes/illustratr
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
Roll your own with _s
_s (Underscores)
Download at http://underscores.me/
Enhance with plugins
Jetpack
Download at http://jetpack.me/
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?)
NextGen Gallery
Download at http://wordpress.org/plugins/nextgen-gallery/
Contact Form 7
Download at http://wordpress.org/plugins/contact-form-7/
Portfolio Post Type
Download at http://wordpress.org/plugins/portfolio-post-type/
In general, worth looking at...
• Security plugin (BruteProtect, iThemes Security)
• Backup plugin (BackupToDropbox, BackUpWordPress)
Demo?
Thank you!
@melchoyce | choycedesign.com | melchoyce.com

More Related Content

What's hot

The light princess
The light princessThe light princess
The light princess
kchasarik
 

What's hot (20)

Working the Net, Netting the Work
Working the Net, Netting the WorkWorking the Net, Netting the Work
Working the Net, Netting the Work
 
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
 
Teach Yourself to Build Web Apps
Teach Yourself to Build Web AppsTeach Yourself to Build Web Apps
Teach Yourself to Build Web Apps
 
Untangling spring week3
Untangling spring week3Untangling spring week3
Untangling spring week3
 
Web Accessibility Gone Wild
Web Accessibility Gone WildWeb Accessibility Gone Wild
Web Accessibility Gone Wild
 
Beyond the 5 minute install
Beyond the 5 minute installBeyond the 5 minute install
Beyond the 5 minute install
 
The light princess
The light princessThe light princess
The light princess
 
The Tools we Use 27 June 2017
The Tools we Use 27 June 2017The Tools we Use 27 June 2017
The Tools we Use 27 June 2017
 
Kelsey Beard Professional Persona Project
Kelsey Beard Professional Persona Project Kelsey Beard Professional Persona Project
Kelsey Beard Professional Persona Project
 
Blogging for content developers
Blogging for content developersBlogging for content developers
Blogging for content developers
 
How to Teach Yourself to Code
How to Teach Yourself to CodeHow to Teach Yourself to Code
How to Teach Yourself to Code
 
Daniel Burka - Iterative Design Strategies
Daniel Burka - Iterative Design StrategiesDaniel Burka - Iterative Design Strategies
Daniel Burka - Iterative Design Strategies
 
arixstudio l virtual web design academy
arixstudio l virtual web design academyarixstudio l virtual web design academy
arixstudio l virtual web design academy
 
Untangling the web week1
Untangling the web week1Untangling the web week1
Untangling the web week1
 
8 little things to make your blog post better
8 little things to make your blog post better8 little things to make your blog post better
8 little things to make your blog post better
 
Exploring the Design Process
Exploring the Design ProcessExploring the Design Process
Exploring the Design Process
 
E-learning and instructional design toolbox
E-learning and instructional design toolboxE-learning and instructional design toolbox
E-learning and instructional design toolbox
 
How to Start a WordPress Meetup in Your Town
How to Start a WordPress Meetup in Your TownHow to Start a WordPress Meetup in Your Town
How to Start a WordPress Meetup in Your Town
 
Fast prototypes and customer development for start ups
Fast prototypes and customer development for start upsFast prototypes and customer development for start ups
Fast prototypes and customer development for start ups
 
Untangling spring week1
Untangling spring week1Untangling spring week1
Untangling spring week1
 

Viewers also liked

Viewers also liked (12)

Getting the Most out of WordPress.com
Getting the Most out of WordPress.comGetting the Most out of WordPress.com
Getting the Most out of WordPress.com
 
The Importance of Estimating - WCMKE 2015
The Importance of Estimating  - WCMKE 2015The Importance of Estimating  - WCMKE 2015
The Importance of Estimating - WCMKE 2015
 
Brain Based Conversion - NeuroMarketing
Brain Based Conversion - NeuroMarketing Brain Based Conversion - NeuroMarketing
Brain Based Conversion - NeuroMarketing
 
Getting Help With Your WordPress Site
Getting Help With Your WordPress SiteGetting Help With Your WordPress Site
Getting Help With Your WordPress Site
 
Webfonts: WordPress and Beyond
Webfonts: WordPress and BeyondWebfonts: WordPress and Beyond
Webfonts: WordPress and Beyond
 
Webfonts: Demystified
Webfonts: DemystifiedWebfonts: Demystified
Webfonts: Demystified
 
Design Basics for Non-Designers
Design Basics for Non-DesignersDesign Basics for Non-Designers
Design Basics for Non-Designers
 
Crap design
Crap designCrap design
Crap design
 
Alas, No Mind Meld: Designer-Developer Communication for a Harmonious Future
Alas, No Mind Meld: Designer-Developer Communication for a Harmonious FutureAlas, No Mind Meld: Designer-Developer Communication for a Harmonious Future
Alas, No Mind Meld: Designer-Developer Communication for a Harmonious Future
 
Practical UX Methods - as presented at FOWD 2014
Practical UX Methods - as presented at FOWD 2014Practical UX Methods - as presented at FOWD 2014
Practical UX Methods - as presented at FOWD 2014
 
A Lean Design Process for Creating Awesome UX
A Lean Design Process for Creating Awesome UXA Lean Design Process for Creating Awesome UX
A Lean Design Process for Creating Awesome UX
 
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
 

Similar to Creating a Great Portfolio Site

Last linklove presentation round-up
Last linklove presentation round-upLast linklove presentation round-up
Last linklove presentation round-up
Agnese Geka
 

Similar to Creating a Great Portfolio Site (20)

Professional Portfolios
Professional PortfoliosProfessional Portfolios
Professional Portfolios
 
Levering Your Portfolio(s)
Levering Your Portfolio(s)Levering Your Portfolio(s)
Levering Your Portfolio(s)
 
Using a Content-First Design Process
Using a Content-First Design ProcessUsing a Content-First Design Process
Using a Content-First Design Process
 
MAG!C Presentation: Portfolios for Creative Professionals
MAG!C Presentation: Portfolios for Creative ProfessionalsMAG!C Presentation: Portfolios for Creative Professionals
MAG!C Presentation: Portfolios for Creative Professionals
 
Professional Portfolios: Putting Your Best Foot Forward
Professional Portfolios: Putting Your Best Foot ForwardProfessional Portfolios: Putting Your Best Foot Forward
Professional Portfolios: Putting Your Best Foot Forward
 
Unless It Was a Digital Dog, No One Ate Your Homework (Diigo)
Unless It Was a Digital Dog, No One Ate Your Homework (Diigo)Unless It Was a Digital Dog, No One Ate Your Homework (Diigo)
Unless It Was a Digital Dog, No One Ate Your Homework (Diigo)
 
11 Amazing things I Learnt At Word Camp Sydney 2014
11 Amazing things I Learnt At Word Camp Sydney 201411 Amazing things I Learnt At Word Camp Sydney 2014
11 Amazing things I Learnt At Word Camp Sydney 2014
 
Should I DIY or BUY a new WordPress website?
Should I DIY or BUY a new WordPress website? Should I DIY or BUY a new WordPress website?
Should I DIY or BUY a new WordPress website?
 
Last linklove presentation round-up
Last linklove presentation round-upLast linklove presentation round-up
Last linklove presentation round-up
 
Untangling spring week2
Untangling spring week2Untangling spring week2
Untangling spring week2
 
Biggest Mistake of Broke Web Designers
Biggest Mistake of Broke Web Designers Biggest Mistake of Broke Web Designers
Biggest Mistake of Broke Web Designers
 
Create Your Own Starter Files
Create Your Own Starter FilesCreate Your Own Starter Files
Create Your Own Starter Files
 
Barcelona Digital Designers: Portfolio Workshop Deck
Barcelona Digital Designers: Portfolio Workshop DeckBarcelona Digital Designers: Portfolio Workshop Deck
Barcelona Digital Designers: Portfolio Workshop Deck
 
Fast Prototyping Customer Development Mock Ups 2014
Fast Prototyping Customer Development Mock Ups 2014Fast Prototyping Customer Development Mock Ups 2014
Fast Prototyping Customer Development Mock Ups 2014
 
Wp 3hr-course
Wp 3hr-courseWp 3hr-course
Wp 3hr-course
 
Customizing WordPress Themes
Customizing WordPress ThemesCustomizing WordPress Themes
Customizing WordPress Themes
 
SharePoint Usability and Design Tips for Non Designers
SharePoint Usability and Design Tips for Non DesignersSharePoint Usability and Design Tips for Non Designers
SharePoint Usability and Design Tips for Non Designers
 
Prototyping like it is 2022
Prototyping like it is 2022 Prototyping like it is 2022
Prototyping like it is 2022
 
HTML/CSS for WordPress
HTML/CSS for WordPressHTML/CSS for WordPress
HTML/CSS for WordPress
 
Stand Out Online and Land an Interview
Stand Out Online and Land an InterviewStand Out Online and Land an Interview
Stand Out Online and Land an Interview
 

Recently uploaded

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aljazherman
 
Article about KI Content Creator Pro.pdf
Article about KI Content Creator Pro.pdfArticle about KI Content Creator Pro.pdf
Article about KI Content Creator Pro.pdf
FatimaMary4
 

Recently uploaded (7)

Salma Karina Hayat - The Ultimate Guide to Becoming a Successful Business Adv...
Salma Karina Hayat - The Ultimate Guide to Becoming a Successful Business Adv...Salma Karina Hayat - The Ultimate Guide to Becoming a Successful Business Adv...
Salma Karina Hayat - The Ultimate Guide to Becoming a Successful Business Adv...
 
Bromazolam CAS 71368-80-4 high quality opiates, Safe transportation, 99% pure
Bromazolam CAS 71368-80-4 high quality opiates, Safe transportation, 99% pureBromazolam CAS 71368-80-4 high quality opiates, Safe transportation, 99% pure
Bromazolam CAS 71368-80-4 high quality opiates, Safe transportation, 99% pure
 
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 
MBA 674 Final Research Paper Livengood Harnessing Entrepreneurial Spirit .pdf
MBA 674 Final Research Paper Livengood Harnessing Entrepreneurial Spirit .pdfMBA 674 Final Research Paper Livengood Harnessing Entrepreneurial Spirit .pdf
MBA 674 Final Research Paper Livengood Harnessing Entrepreneurial Spirit .pdf
 
Article about KI Content Creator Pro.pdf
Article about KI Content Creator Pro.pdfArticle about KI Content Creator Pro.pdf
Article about KI Content Creator Pro.pdf
 
Codes and Conventions for music videos .
Codes and Conventions for music videos .Codes and Conventions for music videos .
Codes and Conventions for music videos .
 
Proposal Qurban Ma'had Tahfizhul Qur'an Ahlus Shuffah 1445 H.pdf
Proposal Qurban Ma'had Tahfizhul Qur'an Ahlus Shuffah 1445 H.pdfProposal Qurban Ma'had Tahfizhul Qur'an Ahlus Shuffah 1445 H.pdf
Proposal Qurban Ma'had Tahfizhul Qur'an Ahlus Shuffah 1445 H.pdf
 

Creating a Great Portfolio Site