Chris Kaminski

designer

Building My Site: Design

12 November 2015

When I decided to update my site, I wasn’t looking for a job — my current employer is a great company to work for. But having lived through the dot-bomb crash, the closing of two employers, the subprime crisis, and seemingly annual layoffs when I worked for Yahoo! I know that things can change quickly, and wanted to get my portfolio up to date. Just in case.

Faced with the task of redesigning a website that hadn’t been touched in a decade, I approach it as I would client work: gather the requirements, determine the process necessary, do the research, formulate the design principles, and execute a design.

Requirements

The goal of the redesign was to have up-to-date materials ready if I suddenly found myself needing to apply for a new job. So the functional requirements of the site were simple: make it easy to find and skim my CV and portfolio on the web, and allow users to download them for printing, filing, or emailing. It also needed to be easy to update the site so I could keep it current.

Non-functional requirements were equally simple. The design needed to present a contemporary, professional image that wouldn’t date quickly and would reflect my qualities as a designer: analytical and research-heavy with traditional graphic design training and a strong background in web technology.

Finally, to help potential employers remember me I wanted the site to operate with an identity system which included business cards and the PDF and print versions of my CV and portfolio. So the design had to translate well to other media and contexts.

Process

With such simple functional requirements, a full-on design process with user flows and personas and the like is overkill. Similarly, the content of the site would be dead simple: portfolio, CV. That’s it. No need for a site map or concept model.

The process would also be simple: background research, high-level content design and layout, then refine the visual design.

Research

With the basic requirements established, I began my research. First was a literature review of articles and the like on UX portfolios. Next, I did a competitive analysis of sites from other UX designers and agencies. Finally, I spoke with friends and colleagues who have hired UX designers.

The strongest theme that emerged from the research was that a UX portfolio needs to show process and thinking, not just outputs. That requires a ‘case study’ approach, with a balance between text and images: the images should illustrate text descriptions of my thinking, and the text should explain the context and function of the designs in the images.

Contrary to my expectations (and my own experience when hiring), many employers do look at portfolios on mobile phones. So the design not only had to be responsive, but had to work on slow network connections or if JavaScript failed to load.

As well, hiring managers I spoke to said that their biggest problem when hiring is sifting through the large number of applicants. When they first review a portfolio or CV quickly they look as much for reasons to discard an applicant as for reasons to contact them. So unlike a visual design portfolio, where showing your style is important, for UX it’s more important not to make a bad impression than it is to ‘wow’ the visitor.

It also was clear I needed to do more than just show my work. I needed to show how I think and communicate about design, and that I do so outside of the strict confines of client work. The easiest way to do that would be to include a simple blog.

Principles

The insight from my research, together with my requirements, yielded a set of design principles:

Solution

I started with a CV layout that I’d been honing for some years: name and contact details at the upper right where they’re visible when thumbing through a stack of pages, blank space below for notes, generous left margin for stapling or sticking in a folder. With the main navigation inserted to the left it also worked well for the web at desktop/large tablet sizes, leaving a nice clear column, sized relative to the text to keep an optimal line length for reading. Using position: fixed; on the header and navigation allowed me to keep my name and contact and download links always handy.

In narrower viewports, I prioritised keeping the content column at an optimal width so images would remain as large as possible. That meant moving first the header, then the navigation to the top. When the navigation moves up, the header switches sides so the top line reads across: ‘Chris Kaminski: Blog, CV, Portfolio’. In very narrow widths, the navigation drops to the bottom to avoid excessive scrolling

Did want to demonstrate visual design background, so good typography. Also an old-school web person, so wanted it to be of the web: responsive design, underlined links, visited link styles.

Finally, I wanted the mood to be cool and modern to reflect the fact I work with digital products, and take a analytical, research-heavy approach to design.

Wanted to use a single font family: in line with minimalist philosophy, not so much to download. Also, most of the best pairings are with serif fonts, but serif fonts tend to have a warmer, more classical mood than I desired.

Because I wanted to restrict myself to a single family, the font had to work in print as well as on the web. I also wanted a variety of weights so it wouldn’t get too monotonous.

FF DIN https://www.fontshop.com/families/ff-din DIN Next http://www.linotype.com/517415/DINNext-family.html

I’ve always had a soft spot for DIN, despite the fact it’s something of a design cliché. In fact, I initially wanted to use FF DIN, an update of the classic DIN font by Albert-Jean Pool, for this website (and my CV, business cards, etc.) but just couldn’t justify the licensing costs for personal use. I also looked at DIN Next by Akira Kobayashi, but wasn’t fond of the way rendered as a web font, particularly the bolder weights.

So I looked at alternatives. News Gothic offers a vertical emphasis somewhat similar to DIN, but only comes in a limited number of weights. I looked at Roboto and it’s predecessor Droid Sans, but they’re frankenfonts, and in any event too closely associated with the Android platform — I’m not a Google product. I’d used Helvetica Neu for previous versions of my CV, but it just felt too ‘upscale design studio’ for the website. I also tried Futura, which I’ve always admired, but for body copy…no. It would need a second face, and I’d already ruled that out.

Then Paul D. Hunt used it as inspiration for Adobe Source Sans.

Source Sans doesn’t have vertical emphasis of DIN or News Gothic, and carries a bit more warmth than either. But it does have

white: respectful of environment & potential employers (doesn’t waste printer ink); black prints text clearly regardless of printer (grey may suffer from halftoning/blurry edges); red prints OK on monochrome, adds a bit of colour/interest on colour and stands out against both the white BG and the black text.

on CV, name & contact details in upper right as when stapled, paper-clipped, put in folder people using left-to-right languages fasten on left & riffle right edge

on web, no riffling but wanted to balance navigation, traditionally on left; smaller widths, logo on right: tablet view has nav on top, reads badly with logo on right; on mobile, nav on bottom but right-aligned logo is unbalanced

Width defined by max comfortable line length for 16px text, margins and spacing also defined by text size.