Developer Journal: Researching Web Design Portfolios & Case Studies (Collage by: Eric Hepperle Designs, 2018 | Credit: “Notebook Flat Icon Vector.svg” by Videoplasty.com; “pexels-photo-943096” by Danny Meneses)I’ve recently discovered the need for a decent web developer portfolio.
Now, I’ve been aware of web developer portfolios for a while and I’ve seen some good ones. But, usually the ones I came across were quite by accident, and part of someone’s larger design portfolio. These design portfolios consist of mostly graphic design and brand packaging design with some web design stuff added almost as an afterthought. Web design wasn’t their primary focus.
Most software engineering and web design projects I’ve worked on — whether for a technical recruiting agency like TekSystems, Volt, or Compucom, or even freelance gigs on Upwork — usually require submitting work samples (e.g., code samples, tear sheets, portfolios, etc.) at the beginning of the process.
What is Process Detail?
I never felt an urgency to have a well-designed, well-developed portfolio until now. I had already built several portfolio pages in my main WordPress website through the years. But, they all lacked one crucial element: process detail.
Here are some different versions of my portfolio landing page over time:
And here is what it looks like at the time of this post:
As you can see, I’ve made some improvements.
So, what do I mean by process detail? Have you ever seen web design portfolios that are just a bunch of thumbnails that lead to a larger image in a lightbox pop-up and that’s it? That is what I used to have and what Mike Locke recommends. I like Mike — he’s got some great tutorials and insight into the freelance web design business. But, I realized after my own experience with other portfolio pages that image-only portfolios can leave the user or prospective employer questioning how much work you actually did.
Full disclosure: Process detail is a term I coined, and if there is a better one to describe the same concept please let me know!
For example, Take this cc0 image from artist and Pixabay user geralt:
Disclaimer: I have no affiliation with geralt. I just found this image on Pixabay and it seemed to fit the bill for my purposes of illustration. The following discussion does not evaluate whether or not he has a portfolio website, nor it’s quality.
The graphic is composed of many parts. There are three monitors, a cityscape background, some binary text, and line overlays with glowing effects that appear to symbolize electrical circuits or data transmission pathways.
But, if I wanted to hire geralt to create a graphic design for me, I would want to know several things to help me a) decide whether or not he is capable of doing the work and b) determine how capable, and thus what price I am willing to pay. Before we get into that, let’s clear up some terminology I will be using:
- artist: the person who created the composition and posted it online.
- composition: a piece of art composed of multiple images, photos, or graphics; can be a collage, but not necessarily.
- assets: images, photos, or graphics used in a composition.
Questions to Determine Designer Competency
Here are some of the questions I would ask:
- How much of this is clip art?
- How much was created from scratch?
- What are the licencing restrictions on the source assets (images, graphics, etc.)?
- Did the artist shoot the cityscape photo?
- Were the monitors designed in a 3-D modeling program like Blender, or are they clipart?
- What graphic design program (Photoshop, Gimp, InkScape, InDesign, Illustrator, CorelDraw, Google Drawings, Pixlr, etc.) was used to create the composition?
The answers to these types of questions help to clarify how skilled an artist is, and specify his or her strengths and possible weaknesses. Wondering if there was a term for a document that detailed answers to these types of questions, I posted this on Quora along with the following image I created to help illustrate what I was asking.
Maintaining Consistency with Style Guides
Quora users suggested terms including brand usage guide, branding style guide, logo guidelines, brand identity guidelines, style guide, logo usage, standards guide, brand voice, and voice of the brand. Those are all synonyms (except the last two) and basically describe a document that includes a logo design in many permutations, an annotated color palette, typography, tone and appropriate/inappropriate usage for the logo and branding. This is a topic that we may explore in a future post. (Leave a comment if you are interested in learning more so I know what kind of content you guys want to see).
Knowing is Half the Battle
Suffice it to say, the real term that I didn’t know I needed was case study. Or, more precisely, a web design case study.
G.I. Joe was a cartoon in 1980’s I used to watch on cable, based on one of the first military action figure toys for boys. The Bozo Show would come on cable channel 8 in Waterloo, Iowa which carried WGN, a Chicago channel. Often, the Bozo Show would run animated commercials starring the G.I. Joe team. At the end of each 60 second commercial, the Joes would teach a lesson and some kid would would say “now I know”, to which the Joes would always reply “And knowing is half the battle!”
Ever have an idea about something you want to search for online and you suspect, believe, or know that it exists, but don’t know what to call it? Finding the proper term for something really can seem like a battle in itself. I’m not convinced “knowing” is half, one-fourth, or one-eighteenth of the battle. But, in the fast-moving, dynamic, ever-changing tech industry, not knowing the term you need to web search for can seriously put you behind the curve.
Searching for Case Studies
Being “loaded for bear” and finally knowing the correct terminology, I began googling and searching for long-tail strings like
and
Some great results came up. I found YouTubers like Nathan Allotey‘s video on How to Write a Case Study for Your Portfolio and Robert Smith’s How To Write A UX Case Study | UX Tutorial.
Both videos were well-composed, gave step-by-step instructions, and taught me some things I didn’t know. I also looked at videos from the The Futur, Flux, Ben Taylor, and Alex Berman which contributed to my understanding and were great resources.
And Nathan also provided a video that listed some websites he felt were great portfolio case study examples. One company that he mentioned that I found really resonated with me was the Canadian design agency Paper Leaf.
That’s all for now folks! Join us next time, true believers, when I discuss what makes a great web design case study.
Date Posted: 09/16/18