Creating Your Design Portfolio Website

Once you have assembled your design portfolio content, the remaining piece of the puzzle is to find a place to post it for review online.

Let’s quickly run through the main components you need for your portfolio.

You should have:

• At least three quality projects.
• Narratives documenting your process.
• Content for an appropriate “About Me” page.

Got that? If not, step back and assemble your pieces. Then it’s time to find a way to post your portfolio online. 

Create within your skill set

By creating within your skill set, we mean publishing your portfolio online is not the moment to learn a brand new skill.

If you’re a print designer, now is not the time to master HTML, CSS, JavaScript or other skills in order to create a custom-designed portfolio page. (Spoiler alert: Adobe Portfolio is a good channel for many designers to share work). If you try, you’re likely to end up wasting time, frustrated, and ending up with a less-than-acceptable-looking site.

And if you are an accomplished web designer, work within a skill set you are comfortable and confident in. There are workable HTML templates you can adapt to present your work.

Don’t overshadow your projects

By not overshadowing your projects, we mean don’t design such an elaborate user experience for your portfolio website that your actual work is buried.

If you have sufficient web design skills to create your own portfolio template, apply neutral colors, fonts that don’t demand attention, and a page structure that will look good on a potential client or employer's tablet, phone, or large screen.

Do “touch up” projects as necessary

As a general rule, do not take the launching of your portfolio as the moment to create a new, major project. The workflow and dynamic should be:

1. Create better and better projects for your class assignments and for projects outside of class. 
2. When you have at least three projects that you and your instructors think are ready for the world, launch your portfolio with them.
3. As you create better and more impressive projects, rotate out or deemphasize lesser projects and feature your best work.

At a minimum, do a final review of the projects with which you will launch your portfolio. 

• Check spelling! Are people’s names, product names, and words spelled correctly? Adobe Creative Cloud and other apps you use to create projects have less-than-robust and often not-used spell checkers, so go over your projects by hand.
• Remove artifacts, leftover “junk” that was not cleaned up when you finalized your project.
• Maybe tweak your projects to polish them, while avoiding complete redos.

Here, by the way, you’ll note the importance of saving all work you do to your portfolio folder in Google Drive, Dropbox, or another cloud-based storage space so you can retrieve it and touch it up as needed.

Two basic options

With your material collected and polished, you’re ready to post your portfolio to the world. Here, you have two basic options:

Build a custom website… or

Post to a portfolio hosting site like Adobe Portfolio.

The decision on which pathway to pursue should be based on your own design strengths and material you have to present.

Go with a custom website if…

• The best content in your portfolio is web design-related, like prototyping apps, designing and creating pages, coding HTML, CSS, etc., customizing WordPress themes, or developing web animation that runs native in a website.
• Your web page design skills are solid (consult with your instructor for an objective evaluation of that).
• You are comfortable managing acquiring and configuring web hosting and domain names.

Go with a service like Adobe Portfolio if…

• You are not comfortable acquiring, configuring, and managing a hosted website.
• Your best projects are graphic design for digital, motion graphics, print, etc. that do not rely on HTML and CSS to play and interact with.
• Your best projects do not need custom-coded HTML and CSS to demonstrate.

A few other what-ifs:

What if you have motion graphics to present in your portfolio but don’t know how to create a professional-quality website?

> Adobe Portfolio allows you to embed motion graphics

What if you have very high-definition audio, video, or images that will stretch the limits of any online hosting platform?

> Host those elements elsewhere (videos at Vimeo or YouTube; audio at SoundCloud; files at Google Drive, Dropbox, or other cloud storage spaces).

What if you already have a website but it is full of other things besides your portfolio?

> You can create a portfolio folder in your site, with a URL like www.mysite.com/portfolio to share.

Hosting Your Portfolio on a Website

Here we can identify three basic paths you can take to host your portfolio on a website:

1. Create the website from scratch.
2. Use and customize a WordPress (or other Content Management System) theme.
3. Use a drag-and-drop site-builder like Wix.

Let’s simplify the options by more-or-less ruling one out. There are serious downsides to drop-and-drag website options like Wix. These drop-and-drag platforms generally do not provide enough tools to create a professional-looking site. And, maybe even more importantly, potential clients and employers will recognize that you used a drag-and-drop site-building tool and that will not reflect well on presenting a professional demeanor and seriousness. For those reasons, we won’t focus on that option in this article.

If your strong suit is building websites that are not just inviting and attractive, but are robust enough to not collapse in any viewing environment, you can consider building your own portfolio pages. 

But even if you do have the skills and talent to do that, factor into your decision the reality that building such a site will take substantial time that is perhaps better invested in polishing your portfolio content.

Using a WordPress theme

This leads us to option 2, WordPress (or another CMS). A quick search of themes for “portfolio” at WordPress.org yields over a thousand options. They’re not all right for your work, of course. But some of them probably are.

If your portfolio is composed of carefully polished pieces, with meaningful process narrative, and in a decent, accessible, inviting and responsive theme, the theme itself does not have to be particularly distinctive. 

Customizing the header and site identity elements (including adding your own logo if you have one) in the Appearance panel, and adding just a bit of CSS to customize the color scheme and fonts in a WordPress theme is enough to make your site distinctive while focusing the viewer’s eye on your projects.

Tip: Choose and install a Google font that is not distracting.

And, for help with color-scheming, search Adobe Color for “portfolio.”

You can easily grab a color scheme there and copy the colors as a CSS comment.

And then paste the comment code into the Custom CSS tab in the Appearance panel in WordPress.

From there, you can deploy the custom colors and fonts to create a WordPress theme that is just distinctive enough to reflect your brand, your look and feel, and your identity.

Hosting your portfolio at Adobe Portfolio

There are a lot of reasons to use Adobe Portfolio, especially as your first platform for presenting your work. Among them:

• Setting up and customizing your portfolio is intuitive and coding-free.
• You can get inspiration from other designers who use Adobe Portfolio in the Examples section.
• You can avail yourself of a substantial library demonstrating features as well as third-party learning resources.

Adobe Portfolio’s features include:

• Design without coding.
• Website hosting with no extra fees.
• Customizable starter layouts for art, illustration, photography, graphic design, fashion, architecture, motion graphics, and web design.
• Responsive layouts that work in any viewport or device.
• Custom domains with your own URL (this costs a little extra).
• And, hosting at Adobe Portfolio lends some credibility to your work, indicating that you are a subscriber to Adobe Creative Cloud.

Here we must add that a current subscription to at least one app in Creative Cloud is a requirement to launch and maintain an Adobe Portfolio.

You’ll find it very intuitive to use Adobe Portfolio. The site essentially walks through everything you need to create a respectable portfolio, and there are plenty of online resources, including this step-by-step guide.

Other Options

We’ve focused on two specific options for building your portfolio online: WordPress or Adobe Portfolio. Those two options are examples of a wide range of platforms. 

The Behance network is a very popular place to host an online portfolio, and Adobe Portfolio syncs well with Behance.

Other portfolio sites are aimed at specific genres or themes, offer free hosting, or support collections of work without all the portfolio design features. You might check out: 

• Dribble
• DeviantArt (owned by and works in conjunction with Wix)
• Crevado Portfolios (free)
• Portfoliopen (free)
• Coroflot Portfolios (associated with a job posting site)
• FolioHD (for models and photographers - example above)

The article There’s More Than One Way to Share Your Design Work at the AIGA Eye on Design site shares some off-the-beaten-path but possible alternatives including:

• Google Docs
• Google Slides
• The classic: a downloadable PDF
• Are.na

4 Takeaways

If you are an accomplished website designer, you should probably design/code your own portfolio site. If not, you should probably explore the option of Adobe Portfolio. Whatever platform you choose, keep these points in mind:

1. Choose a platform and features within your skill set.
2. Reflect your personal identity and style with custom fonts and colors.
3. Avoid over-styling your portfolio in a way that overshadows your work.
4. If your skill set allows, WordPress templates provide a good starting point; if not, Adobe Portfolio is a good option for publishing your portfolio code-free.