Telling My (Design) Story with My Portfolio

Every website tells a story. Whether your website represents an individual or an entire organization, the aim is to represent a brand, build trust, convey a message, and request an action. Before building a website, any website, you should know exactly why you’re doing it. You should know your story. And you should know how you want your audience to react.

My Story

For as long as I can remember, I’ve created art in one form or another. By the time I learned the basics of coding, I couldn’t wait to create my own website to show off my work.

Self-portrait in pencil, 2007.

I started by creating a site that displayed my sketches, my short stories, and a few comics that I had created. In time, I added my design work. But the site was a mess. It was unfocused. And I didn’t have a firm grasp about what I was trying to say, or who I was trying to say it to.

Early website design from 2007.

As the years passed, I refined my message. My design work came to dominate the site, as it had my professional life, and I slowly moved my personal work — my artwork, my writing — to specialty websites. I slowly came to understand that my website was the purest representation of my brand. I was a designer, with a growing body of work, dedicated to solving problems and creating unique but practical visual experiences online. If you liked my work, you should hire me. That was my story. And anything that didn’t serve that story didn’t belong on my website. So I removed it.

By the middle of 2017, I took on more freelancing work, and by the fall of that year, I was at it full time. Within a few months, I realized that my website wasn’t telling my story clearly enough, nor did the site represent who I had become as a designer. And with the wealth of options to share my work online, I seriously questioned if I even needed a personal portfolio site at all. After a lot of thought, I knew a website that I had designed myself would be the most accurate representation of my talents, and would keep me from blending in with my peers. So I streamlined the overall experience, centered on a succinct and easy-to-follow narrative, and found a way to represent my work by tying in to the larger design community.

The Overall Strategy

One page websites are great for linear storytelling. There are no act breaks, no possibility of users getting lost and missing the flow. And from my experience, users are more inclined to scroll than they are to click, so I decided to take advantage of that.

Website wireframe, showing the five major sections of the single-page experience.

With my new website, my strategy was to serve up content in the order that potential clients would be interested in receiving it: Start with a high-level introduction, drill down into what exactly I did, show what I’ve done in the past, add in some examples of how I thought, then end with some of my backstory and an invitation to get in touch. The navigation (anchors links) served as a site summary, with the call to action (Contact) appearing at the end, where most eyes finish scanning. And because the header stayed in place, there was no need for a “back to top” link.

The overall design aesthetic was a reflection of my personal style: clean, modern, and minimal. I chose to stick with a neutral color scheme to further emphasize the colors used in my design work. After all, that was the star of the show. I also made use of 45 degree angles in background graphics and section breaks to play off the same angle in my logo. (Subtle design tricks like that are why the logo should always precede the website.)

Moodboard for the new site.

A Virtual Handshake

Website introductions can be difficult. It’s the visual grabber line, a virtual handshake, and the first impression. From what I’ve seen of designers and agencies, the options are typically one of the following: a photo of the designer/studio, a typographic message, or a featured case study. Whichever you choose, it says a lot about your brand, and how you’re attempting to engage your audience.

Potential website intros: portrait, typography, and featured project.

When deciding on a direction for my site, I did a quick online poll. Most of the people I surveyed said that the work was what they were most interested in seeing first. And that makes sense. If you’re selling a product, show what you’re selling. After all, a picture of me wouldn’t have shown what I did, but rather what I looked like. And a message would explain what I did, but visuals grab attention more than text ever can. And though a featured case study would’ve indeed showed my work, it wouldn’t have shown the range of my work, and would have risked confusing and obscuring my own brand.

Instead, I created a collage of a few key pieces in context, with a simple, clear message. “I turn your ideas into digital experiences,” which is about as straight-forward as I could put it. But at the risk of being too nebulous with that introduction, I led users directly into the Services section.

Final collage intro.

Defining My Services

I wish I could say that the Services section was planned from the beginning, but in actuality, it was a last-minute addition. I looked at the websites of other freelancers, and noticed that they clearly defined what they do for their clients.

Pinpointing my specialties, worded with a client focus.

For my sake, I found that defining my services served several ends. For starters, it clarified what I did, which was teed up in the introduction. It was the “How” behind the “What.” Also, it allowed clients to identify their needs, understand what I did and didn’t do, and got them ready for a possible conversation with me. Plus, it ended up putting some much needed keywords on my site for SEO.

Showing My Work

In displaying my work, I decided to only show nine projects, which would focus visitors on my most recent output. And rather than have each case study live on my site, I opted to link out to my existing Behance pages. (Behance is Adobe’s portfolio platform, used by 10 million professional designers and artists worldwide.) The logic here was to benefit from the built-in design community on Behance, while also saving me from having to build and maintain two separate portfolios. Fortunately, my friend and developer Luke Peters was able to use the Behance API to tie my site to theirs, so updates made on their platform would be reflected on mine.

Work grid (left) and individual case study on Behance (right).

(I did briefly consider tying my site to Dribbble, however, I felt that Behance was better for building out more robust case studies with an unlimited number of screenshots. I still use Dribbble for project snapshots, but not for full project stories.)

Articles

While it’s important to show your work, it’s even more important to show how you work, or more accurately, how you think about and approach challenges. This helps to illustrate to clients and employers that there’s a science behind what you do, and that your decisions are rooted in logic, testing, and best practices.

Article grid (left) and individual article on Medium (right).

At Grafton Studio, I write articles about my process, and insights I’ve learned along the way. Similar to the Work section above, I chose not to create my own native blog, but rather post articles on Medium for maximum exposure, and simply link to them from my site. (Medium having over 60 million monthly users.) Without the burden of a personal blog, I was free to write articles when I had something to say, rather than when a specific date came up on my calendar.

The Man Behind the Curtain

Finally, the About section was where I could tell my backstory, and how it related to my career as a designer. And given my art background (and penchant for self-portraiture) I took the opportunity to hide several of my pieces among the randomized selfies. Showing your face can go a long way to building trust with clients, but why not have a little fun with it?

A new face with each refresh.

I wrapped up the section with a quick segue to the site’s main call to action. I decided not to use a contact form because as a user, I like to keep a record of the emails I send. So I chose to extend that courtesy to my own audience, which also made for a simple and uncluttered layout.

Bonus: The Error Page

The often neglected error page, served up in style with a precision swear word. (And adding a period to the site’s H2’s really sealed the deal.)

Because that’s the first word that comes to mind.

Change is Constant

And there it is. A portfolio site that tells my story clearly and cleanly, with both style and strategy. Though the design came together quickly, the thinking behind it evolved over the course of several years, and through several versions. And just as the site needed to change with my own changing needs and tastes, so to will it continue to change along with me. Because my story isn’t over. And my work, whatever form it happens to take, never is.

And it works on mobile. Welcome to the 90's.

Special thanks to Luke Peters, who developed the site, and put up with my many revisions. I can’t stress enough how important it is to have a developer who has an eye for design, and a keen attention to detail.

You can check out the site here.

And go here for a closer look at the full brand evolution.

Visit Luke here.