{"id":169200,"date":"2017-11-29T13:00:16","date_gmt":"2017-11-29T13:00:16","guid":{"rendered":"https:\/\/premium.wpmudev.org\/blog\/?p=169200"},"modified":"2017-11-09T07:47:18","modified_gmt":"2017-11-09T07:47:18","slug":"checklist-website-portfolio","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/checklist-website-portfolio\/","title":{"rendered":"14-Point Checklist: Creating a Website Portfolio That Gets You Clients"},"content":{"rendered":"<p>As our reliance on mobile and smart devices grows year after year, there\u2019s going to be a greater need for coding experts to create more digital applications for us. In fact, estimates say that <a href=\"https:\/\/www.bls.gov\/ooh\/computer-and-information-technology\/web-developers.htm#tab-6\" rel=\"noopener\" target=\"_blank\">the number of web developers will grow by 13%<\/a> between now and 2026.<\/p>\n<p>What will do with all that extra competition flooding the job market?<\/p>\n<p>Well, the first thing you\u2019ll need to do is hone and enhance your skills. That\u2019s priority number one. But marketing will play a big part in this as well. If you\u2019re not out there right now, putting your best face forward, showing <a href=\"https:\/\/wpmudev.com\/blog\/finding-freelance-clients\/\" target=\"_blank\" rel=\"noopener\">prospective clients<\/a> what you\u2019re capable of doing, then you\u2019re already putting yourself at a disadvantage.<\/p>\n<p>Step number two once you\u2019ve ironed out your WordPress development skills? Create a portfolio for your WordPress business. And make it so good that you barely need to make a call, send an email, or post a self-promotional tweet in order to convince someone of how good you really are. Your portfolio will speak for itself and will let others know that you\u2019re worth more of a shot than the lookalike competition surrounding you.<\/p>\n<h2>A Quick Note About Creating a WordPress Portfolio<\/h2>\n<p>We\u2019re living in an age where we\u2019re all able to use the Internet as a sort of background check&#8211;for potential employers, dates, and even adoptable puppies. So, you better believe that clients are looking at your previous work to see if you have what it takes to create the WordPress site they believe their business deserves.<\/p>\n<p>Of course, creating a portfolio isn\u2019t as simple as throwing <a href=\"https:\/\/wpmudev.com\/blog\/wordpress-gallery-plugins\/\" target=\"_blank\" rel=\"noopener\">a gallery plugin<\/a> onto your site or creating a list of links out to client sites you developed. Those might work as an interim solution, but you need to take time to create a well-balanced and impressive portfolio that\u2019s truly representative of your WordPress work.<\/p>\n<p>Your portfolio should be able to stand alone and speak volumes about:<\/p>\n<ul>\n<li><b>You<\/b>: your personal style, professionalism, and attention to detail<\/li>\n<li><b><a href=\"https:\/\/wpmudev.com\/blog\/steps-starting-successful-biz\/\" target=\"_blank\" rel=\"noopener\">Your niche<\/a><\/b>: what industry, type of website design, device, or geographic region you specialize in, among other things<\/li>\n<li><b>Your process<\/b>: this is as much about showing off the finished product as it is about telling a story for each project and revealing details about what happens behind the scenes<\/li>\n<\/ul>\n<p>This is your chance to create a truly up-close-and-personal look at what you do, the decisions made, and the outcomes for your clients. While a site like Dribbble is good for showing off your samples and you can use social media to share snippets of your web designs, those require people to discover your work outside of your brand.<\/p>\n<p>If you really want to win new business, you need to impress them with your portfolio.<\/p>\n<h2>Tips for Creating a Portfolio for Your WordPress Business<\/h2>\n<p>If you\u2019re a WordPress developer (or designer), then you obviously need to have your own website that runs on the CMS. Your website should then be fairly light on text:<\/p>\n<ul>\n<li>A short introduction to who you are on the home page<\/li>\n<li>A paragraph or two on the About page<\/li>\n<li>A Contact page with details on how to reach you, including social media links, <a href=\"https:\/\/wpmudev.com\/blog\/wordpress-contact-form-plugins-pros-cons\/\" target=\"_blank\" rel=\"noopener\">a contact form<\/a>, etc.<\/li>\n<\/ul>\n<p>Outside of the basics, however, you should have a fully-formed portfolio that truly demonstrates what you can do. The following tips will guide you through the process of creating a dedicated space for a portfolio on your site.<\/p>\n<h3>1.\u00a0Find a Portfolio Theme<\/h3>\n<p>To begin, find <a href=\"https:\/\/wpmudev.com\/blog\/20-stunning-wordpress-portfolio-themes-to-inspire-you\/\" target=\"_blank\" rel=\"noopener\">a theme that caters to the portfolio<\/a> website. There is a good selection of high-quality portfolio themes out there, so find one that gives you a good place to start from in terms of portfolio type, layout options, and built-in features like animation, lightboxes, and simplified navigation.<\/p>\n<h3>2.\u00a0Use Optimization Plugins<\/h3>\n<p>Since your portfolio will be comprised of images, maybe some video, and perhaps even animation (as the below examples may inspire you to do), optimization plugins are a must.<\/p>\n<p><a href=\"https:\/\/wpmudev.com\/project\/wp-smush-pro\/\" target=\"_blank\" rel=\"noopener\">WP Smush Pro<\/a> can take care of compressing your images, while\u00a0<a href=\"https:\/\/wpmudev.com\/project\/wp-hummingbird\/\" target=\"_blank\" rel=\"noopener\">Hummingbird<\/a> will handle the caching, minification, and other speed optimization tasks.<\/p>\n<h3>3. Add a Picture of Yourself<\/h3>\n<p>Don\u2019t be shy! As part of the whole trust-building process, you should expect that clients want to see what you look like. They\u2019ll also want to know more about you and why you\u2019re qualified to design their site.<\/p>\n<p><a href=\"http:\/\/marinaaisa.com\/\" rel=\"noopener\" target=\"_blank\">Marina Aisa<\/a> has tackled this point in a really cool way:<\/p>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/11\/Create-a-Portfolio-Marina-Aisa.png\" alt=\"Create a Portfolio - Marina Aisa\" width=\"600\" height=\"248\" \/><figcaption class=\"wp-caption-text\">The portfolio of Marina Aisa.<\/figcaption><\/figure>\n<\/div>\n<p>Her photo is right there, above-of-the-fold. However, rather than write out a paragraph or two about who she is, she\u2019s included a fun little animation that explains what she does. It\u2019s attention-grabbing and succinct.<\/p>\n<h3>4. Get Client Permission<\/h3>\n<p>Unless you have something specific built into your <a href=\"https:\/\/wpmudev.com\/blog\/wordpress-biz-contract\/\" target=\"_blank\" rel=\"noopener\">client contract<\/a> that gives you express permission to use images of or code from your clients\u2019 sites within your own, you\u2019ll want to reach out to each of the site owners before publishing anything to your portfolio. While they might be thrilled about the <a href=\"https:\/\/wpmudev.com\/blog\/seo-quality-backlinks\/\" target=\"_blank\" rel=\"noopener\">backlink<\/a>, they might not like the idea of people seeing how poorly made their site was before.<\/p>\n<h3>5.\u00a0Use Relevant Samples<\/h3>\n<p>Your portfolio doesn\u2019t need to include samples from every website you\u2019ve built (unless you\u2019re just starting out and only have a few under your belt). This is about quality over quantity. Prospective clients want to see an accurate representation of what you can do.<\/p>\n<p>So, if you haven\u2019t found your niche yet, feel free to include a breadth of work that shows off your many talents. If you have carved out a clear niche for yourself, then use only those specialized examples. This\u2019ll ensure you attract the right type of client.<\/p>\n<h3>6.\u00a0Dress to Impress<\/h3>\n<p>Don\u2019t be afraid to show off here. In fact, I\u2019d urge you not to be humble when it comes to your portfolio. This means never use anything:<\/p>\n<ul>\n<li>Low resolution<\/li>\n<li>Outdated (i.e. more than a year old)<\/li>\n<li>Broken (if the link isn\u2019t live anymore, this is a no go)<\/li>\n<li>The client wasn\u2019t 110% thrilled about<\/li>\n<li>You weren\u2019t 110% thrilled about<\/li>\n<\/ul>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/11\/Create-a-Portfolio-Tim-Roussilhe.png\" alt=\"Create a Portfolio - Tim Roussilhe\" width=\"600\" height=\"352\" \/><figcaption class=\"wp-caption-text\">The portfolio of Tim Roussilhe.<\/figcaption><\/figure>\n<\/div>\n<p><a href=\"http:\/\/timroussilhe.com\/\" rel=\"noopener\" target=\"_blank\">Tim Roussilhe<\/a> calls himself a \u201ccreative developer\u201d and you can see why in the samples on his site. Nothing here looks old or out of touch with what we know to be effective and modern design.<\/p>\n<h3>7.\u00a0Provide Context<\/h3>\n<p>Although most of your clients won\u2019t understand your process of researching, wireframing, staging, and so on, they\u2019ll appreciate extra transparency about what you did to bring a project from point A to point B. When telling each sample\u2019s story, be sure to include little details about your process along with photos or videos that capture each step of the way so they can see this.<\/p>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/11\/Create-a-Portfolio-Neil-Carpenter.png\" alt=\"Create a Portfolio - Neil Carpenter\" width=\"600\" height=\"259\" \/><figcaption class=\"wp-caption-text\">The portfolio of Neil Carpenter.<\/figcaption><\/figure>\n<\/div>\n<p>If you\u2019re looking for inspiration, check out how <a href=\"http:\/\/neilcarpenter.com\/work\/\" rel=\"noopener\" target=\"_blank\">Neil Carpenter<\/a> handled this on his own portfolio.<\/p>\n<h3>8. Add a CTA<\/h3>\n<p>A <a href=\"https:\/\/wpmudev.com\/blog\/designing-buttons-calls-to-action\/\" target=\"_blank\" rel=\"noopener\">call-to-action<\/a> isn\u2019t necessary, but it really is something you should consider adding to the bottom of your portfolio and each individual sample\u2019s page. After all, you\u2019re not showing off your work just so people can say, \u201cWow!\u201d You want them to be so impressed with your work that they\u2019re dying to reach out and start working with you <em>now<\/em>.<\/p>\n<h3>9. Create Case Studies<\/h3>\n<p>More robust case studies are also a great way to show context. The main difference is that context can be as simple as \u201cClient X needed a responsive website and simplified menu structure. Here is what we did.\u201d Case studies take you through absolutely every part of the process and will often educate readers on something they might not have been aware of before.<\/p>\n<p>Once you\u2019ve worked for enough clients, amassed a large enough portfolio, and set aside time to take care of business-building tasks, you can start creating case studies for your portfolio as the following designers have done:<\/p>\n<p><a href=\"https:\/\/ianlunn.co.uk\/portfolio\/\" rel=\"noopener\" target=\"_blank\">Ian Lunn<\/a>:<\/p>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/11\/Create-a-Portfolio-Ian-Lunn.png\" alt=\"Create a Portfolio - Ian Lunn\" width=\"600\" height=\"348\" \/><figcaption class=\"wp-caption-text\">The portfolio of Ian Lunn.<\/figcaption><\/figure>\n<\/div>\n<p><a href=\"http:\/\/www.adhamdannaway.com\/portfolio\/\" rel=\"noopener\" target=\"_blank\">Adham Dannaway<\/a>:<\/p>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/11\/Create-a-Portfolio-Adham-Dannaway.png\" alt=\"Create a Portfolio - Adham Dannaway\" width=\"600\" height=\"314\" \/><figcaption class=\"wp-caption-text\">The portfolio of Adham Dannaway.<\/figcaption><\/figure>\n<\/div>\n<p><a href=\"http:\/\/haraldurthorleifsson.com\/\" rel=\"noopener\" target=\"_blank\">Haraldur Thorleifsson<\/a>:<\/p>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/11\/Create-a-Portfolio-Haraldur-Thorleifsson.png\" alt=\"Create a Portfolio - Haraldur Thorleifsson\" width=\"600\" height=\"288\" \/><figcaption class=\"wp-caption-text\">The portfolio of Haraldur Thorleifsson.<\/figcaption><\/figure>\n<\/div>\n<h3>10.\u00a0Add Testimonials<\/h3>\n<p>When you\u2019re reaching out to clients to ask permission to use their website in your portfolio, don\u2019t forget to ask for a testimonial at that time. Like any other kind of <a href=\"https:\/\/wpmudev.com\/blog\/plugins-user-generated-content\/\" target=\"_blank\" rel=\"noopener\">user-generated content<\/a>, this will give prospective clients a face and name to relate to as well as a sense of what it will be like to work with you.<\/p>\n<p>Take, for instance, the portfolio samples used by <a href=\"http:\/\/sebkay.com\/\" rel=\"noopener\" target=\"_blank\">Seb Kay<\/a>.<\/p>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/11\/Create-a-Portfolio-Seb-Kay.png\" alt=\"Create a Portfolio - Seb Kay\" width=\"600\" height=\"215\" \/><figcaption class=\"wp-caption-text\">The portfolio of Seb Kay.<\/figcaption><\/figure>\n<\/div>\n<p>Most sample and case study pages include a strong personal quote from the client.<\/p>\n<h3>11.\u00a0Use Other Trust Marks<\/h3>\n<p>Speaking of <a href=\"https:\/\/wpmudev.com\/blog\/credibility-trust-marks\/\" target=\"_blank\" rel=\"noopener\">trust marks<\/a>, don\u2019t forget to include other types in support of your portfolio too (so long as they don\u2019t interrupt the experience).<\/p>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/11\/Create-a-Portfolio-Jeremy-Thomas.png\" alt=\"Create a Portfolio - Jeremy Thomas\" width=\"600\" height=\"153\" \/><figcaption class=\"wp-caption-text\">The portfolio of Jeremy Thomas.<\/figcaption><\/figure>\n<\/div>\n<p>You could do as <a href=\"http:\/\/jgthms.com\/\" rel=\"noopener\" target=\"_blank\">Jeremy Thomas<\/a> does and call out big-name clients whose association will instantly make you more attractive to work with. Or you could include other relevant trust marks like web development or Google certifications to add credibility to your work.<\/p>\n<h3>12.\u00a0Stay Organized<\/h3>\n<p>If you\u2019re just starting out, I\u2019d urge you to find a simple and well-organized layout and <a href=\"https:\/\/wpmudev.com\/blog\/consistency-web-design\/\" target=\"_blank\" rel=\"noopener\">be consistent<\/a> about applying it, like <a href=\"http:\/\/www.emilyridge.ie\/\" rel=\"noopener\" target=\"_blank\">Emily Ridge<\/a> does with hers:<\/p>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/11\/Create-a-Portfolio-Emily-Ridge.png\" alt=\"Create a Portfolio - Emily Ridge\" width=\"600\" height=\"313\" \/><figcaption class=\"wp-caption-text\">The portfolio of Emily Ridge.<\/figcaption><\/figure>\n<\/div>\n<p>As your business grows and you amass more and more samples for your portfolio, you may find that it makes sense to include more than just a small handful. This will especially be the case if you decide to turn your freelance business into a full-grown <a href=\"https:\/\/wpmudev.com\/blog\/switching-from-freelance-agency\/\" target=\"_blank\" rel=\"noopener\">WordPress agency<\/a>. Agencies can handle multiple niches, so your portfolios in that case should reflect that.<\/p>\n<p>There are a few ways to handle this:<\/p>\n<ul>\n<li>Create a sub-menu for your portfolio so it\u2019s easier to navigate with different pages dedicated to each specialty.<\/li>\n<li>Use a system of categories and tags so users can filter through to relevant samples.<\/li>\n<li>Add clear labels to each item in your portfolio for easier scanning.<\/li>\n<li>Include a search bar at the top of your portfolio page.<\/li>\n<\/ul>\n<h3>13. Update Often<\/h3>\n<p>I know that adding to and revising your portfolio takes time, especially if you\u2019re writing a short \u201cstory\u201d for each one. However, keeping your portfolio up-to-date ensures that prospective clients can see you at your current and best skill level (since you should never stop learning as a WordPress developer).<\/p>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/11\/Create-a-Portfolio-Simon-Evans.png\" alt=\"Create a Portfolio - Simon Evans\" width=\"600\" height=\"329\" \/><figcaption class=\"wp-caption-text\">The portfolio of Simon Evans.<\/figcaption><\/figure>\n<\/div>\n<p><a href=\"http:\/\/sii.im\/#!\/\" rel=\"noopener\" target=\"_blank\">Simon Evans<\/a> actually talks about this very thing within his own portfolio, which is a nice addition since it isn\u2019t just about how great the site looks, but about how he learned from the experience too.<\/p>\n<h3>14.\u00a0Include Other Work<\/h3>\n<p>Even if you spend eight-plus hours every day building WordPress websites, you likely have other projects you\u2019re working on that prospective clients might find interesting. Maybe you design icons or fonts? Perhaps you\u2019re into building JavaScript libraries? Or you might just enjoy taking photos in your spare time? Whatever other creative pursuits you enjoy&#8211;and that you can use to impress your clients even further&#8211;don\u2019t be afraid to include them on your site.<\/p>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/11\/Create-a-Portfolio-Matt-Farley.png\" alt=\"Create a Portfolio - Matt Farley\" width=\"600\" height=\"346\" \/><figcaption class=\"wp-caption-text\">The portfolio of Matt Farley.<\/figcaption><\/figure>\n<\/div>\n<p><a href=\"http:\/\/mattfarley.ca\/\" rel=\"noopener\" target=\"_blank\">Matt Farley<\/a> is a UX\/UI designer who also happens to do open source work, mentor designers, and work on other personal projects.<\/p>\n<h2>Wrapping Up<\/h2>\n<p>Whether your WordPress business is brand new and you\u2019re looking for a way to demonstrate that you actually know what you\u2019re doing, or you\u2019re running a WordPress agency that wants to demonstrate a track record of consistency, quality, and success, a portfolio is a must. And, when done correctly, it should speak entirely for itself, letting prospective clients know that yours is a brand they can trust and a service they can depend upon to deliver top results.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>As our reliance on mobile and smart devices grows year after year, there\u2019s going to be a greater need for coding experts to create more digital applications for us. In fact, estimates say that the number of web developers will grow by 13% between now and 2026. What will do with all that extra competition [&hellip;]<\/p>\n","protected":false},"author":518583,"featured_media":169304,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[10469],"tags":[10825],"tutorials_categories":[],"class_list":["post-169200","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-business-marketing","tag-portfolio"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/169200","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/518583"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=169200"}],"version-history":[{"count":5,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/169200\/revisions"}],"predecessor-version":[{"id":169305,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/169200\/revisions\/169305"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/169304"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=169200"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=169200"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=169200"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=169200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}