How we created beautiful resumes for everyone

Jeremy Goldberg
3 min readSep 30, 2014

Here’s the challenge. Until now, creating a resume has often been a laborious and outdated process.

For example:

1. A lot of people don’t know where to start. Setup is hard and can be overwhelming, plus most templates are not aesthetically pleasing.

2. Many people still rely on offline tools like Microsoft Word. There’s a ton of buttons, many of which go unused, that complicate the interface.

3. There’s no opportunity to learn how to make a better resume. You’re on your own.

4. Sharing your resume relies on more external tools like email and social networks.

5. There’s no way to track how many people view your resume.

6. Mobile devices aren’t even considered.

Searching for an effective solution to these problems proved to be difficult and didn’t yield great results. So my friends, Jordan Singer, Brandon Jacoby, and I decided to build the experience that we ourselves wanted. We just wanted a better way to résumé. We call it Represent.

The foundation of our resumes

It was important that all of our resumes have a consistency derived from flow, spacing, typography, color, and hierarchy without pushing a brand agenda. We also created a grid that our themes inherit, which work exactly the same on the web and in PDF’s.

Our first grid is for typography, which we call the baseline grid. Below you can see how every element on the screen is aligned with the baseline grid. Everything is divisible by 8 pixels, but we bend this rule occasionally with descriptions, which require a 4 pixel grid because of the leading.

An 8px baseline grid on three different resume themes.

Our second grid is for spacing and varying screen sizes. Again, everything is based on 8px increments. Some themes use two column layouts, but they all end up quite similar on tablet and mobile screen sizes.

Style

Once the foundation for our themes were defined, we moved on to color, type, and iconography. First, we wanted our resumes to have a touch of personality, so we developed a color palette that is used for accents within the resume. These accents are applied to sections, hover states, and links.

We follow a spec for typography that concentrates on contrast and leading. The font sizes and leading work together with our baseline grid.

Finally, some themes use iconography to help with scanning the resume in order to quickly distinguish different sections.

The Result

When all of these details were considered, iterated on, and executed, we arrived at a set of resumes that we’re extremely proud of. The best part is, this attention to detail carries though the rest of the experience, from signing up, to creating and editing your resume in the dashboard. I’m eager for you to give Represent a try, and hopefully you too can experience a better way to resume.

--

--