EX07 - Portfolio Style

Just Enough Flair

The visual design of a portfolio is a delicate art of balancing the content’s weight with the need to apply a personal stamp to the overall work.

Updated July 29, 2020

The upside and downside for any portfolio are attached to the fact that you are in complete control.

No bossy client to force their ideas on you. No clear metric of what success looks like aside from the relatively vague “land epic job.” No one around to look at you funny when you spring forth an incredibly terrible idea — which always happens.

Yet, for all the things that can go wrong, we love to tinker with our portfolios. At least at the beginning of the process. Less so later on.

You could chase yourself in circles unless you remembered that your portfolio’s purpose is to communicate. It’s an advertisement for what you can do and who you are.

Without the demands of outside people pressing on us, it can be challenging to adhere to design best practices. Things like legibility often take a backseat to whatever happens to be trendy at the moment.

To combat this tendency, I’ve compiled a list of things that potential employers expect to see in your portfolio. You can do anything with your portfolio design, provided it meets the following:

  • Applicable examples of work for the job you’re seeking
  • A clear description of the applicants’ design process (UX)
  • Background information on the candidate
  • Mastery of visual design (typography, color, spacing)
  • Easy to navigate
  • Expression of personality, quirkiness

That last item might catch you off-guard, but remember that your future co-workers are people too. It’s essential to display your personality through the portfolio, but in a manner restrained enough that it doesn’t overpower the body of work.

Here are a few ways you could weave some personality into your portfolio:

Bottom line

Portfolios can feature amazing projects, display great personality, and still fail to generate interest.

Your best portfolio will showcase your work and highlight your strengths while being easy to navigate.

If your portfolio fails to meet those simple benchmarks, you’re going to have a tough time. All important considerations as you begin to express yourself through the visual design of your site.

Resources for review

Please use the following items to guide your exercise attempt:

Article Source/Author
Making Your Mark New Pragmatic
Your Logo is Copied Ferdinand Vogler
How to Find the Right Typography Column Five Media
Visual Simplicity vs. Information Density Luke Wroblewski


Creating a personal style is no small task, so let’s start by breaking it into some approachable chunks.

Part one: Use the attached Figma file to generate multiple sets of type and color options.

Part two: Using the content generated in the earlier exercises, begin creating a lo-fidelity mockup of your home page. Pay close attention to spacing and typography while pushing two versions of the page in different directions. Submit your versions to #Feedback-Loop channel for review.

Part three: Building upon the guidance you receive from the #Feedback-Loop, begin importing color and visual artifacts into the design. By the end of this portion of the exercise you should have at least three different versions for review.

Part four: Export your options and create a preference test in UsabilityHub. After creating the test, release the test to a broad audience for feedback.

Once you have collected the test feedback, update your Program Journal with links to the assets produced for this exercise. Post your Journal in the #Feedback-Loop channel for review.


Up next Build and Deploy

Receive daily feedback and weekly meetings with Chris Courtney by signing up for monthly mentorship today!

Sign up today!