https://res.im/work/fitness-health-match/

Source #5: Res.im

This is a case study. I’ts well designed, but the thing that stands out most to me is the ‘tagging system’ used to indicated their role in the work.

Deciding what to build

Now that I have all my sources, I have a great understanding of the direction that I want to go with my portfolio.

It will have a text based intro with a specific words or phrases highlighted to draw the user’s attention

It will have big portfolio images

The design will be minimal

And it will be broken down into case studies.

Build it!

The next step is to build the actual site, using your sources of inspiration where appropriate. It was pretty quick to put together because my sources gave me a solid starting point and clear direction. Here’s what the final site looked like. Below I describe the sources for the main elements of each page.

Hero

Just like CRCL and Palookaville, a text based value statement is the only thing in my hero area. And just like those two sites, I used a different color to draw the user’s attention to specific words

Since I loved how Palookaville’s portfolio items ‘peeked’ above the fold, I made sure to include a similar element in my design.

Portfolio Images

Almost everyone of the sites that I used for inspiration used extremely large images on their portfolio pages. I did the same thing.

Typography is extremely important, especially on minimal sites. Ideally I wanted to use a free font similar to ‘Atlas Grotesk’, which is what is used on the CRCL site. According to typewolf, Aktiv Grotest and Nimbus Sans are two good alternatives, both of which are available in Typkit. Unfortunately neither felt right so I ended up using Roboto, which is a font I’ve used many times before with good results.

Portfolio Pages

Screenshots & Images

I continued with the theme of having portfolio items ‘peek’ above the fold on all of the portfolio pages, and I used very large screenshots for the portfolio pages, just like almost every site in this list.Tags

The tagging system used on Res.im is a great way to describe your role on a project and it is a great fit for my portfolio.Colors

I really wanted to use white with red accents as the primary colors of the site (just like Palookaville), but this is harder to pull off than it seems. I spent at least an hour trying to make this work, but I was unable to. Ultimately I settle for a light grey.

Key Takeaways