We start out with our Photoshop file open. The rather silly looking "elongated" iPhone screenshot, which simply just gives us a canvas in the mobile first context.

We start out as simple as can be: with Jeff's name. We need to pick a font straight away. This kind of thing can be very difficult. We have a legacy font to deal with (the font used on the last site) and Jeff's brand and personality to consider. Fonts can bring so much personality along with them. We look at some fonts with far too much personality (it would fight against Jeff's style). We look at the old font. Then we settle on Proxima Nova, as it shares a lot of characteristics with the old font without imparting too much personality. It's just clean a simple. The lines that make the letters are very similar to the lines in Jeff's work. Just as importantly, we know we can use Proxima Nova on the web as well.

Right below Jeff's name, we drop in some photos of Jeff's work. That's probably the most important thing we do on this site. It's needs to be painfully obvious what Jeff creates. One image will be front and center. Then we'll place two other photos, but off to the edges so they are just peaking in. We'll ultimately make a slider here, and these peaking in image make it very obvious you can slide the center image over to reveal the images on the edges. No explanations necessary. Mobile first! The design decisions we make here will inform the behavior of the slider later.


  1. Rodrigo Ibarra
    Permalink to comment#

    Typical shit!!!! FTW! I once sent a list like that to a client… ¬¬ he wasn’t too happy about it

  2. Ricardo Diaz
    Permalink to comment#

    Loving this series just as much as the V10. From watching these vids it seems like you assume that the client will like whatever you make for them. I know there have been times I spend a couple of days doing all of this only to be rejected and start over.

    Has this happened to you or does your name carry weight to it. People trust you because of your status. Hope this doesn’t come off rude. Just curious if other’s hit this wall sometimes.


  3. Mark Szymanski
    Permalink to comment#

    Loving the workflow, super glad I joined the “Lodge”.

    I’m no PS expert, but my technique for over-lapping images (esp with white backgrounds) is to hit em’ with the ‘Darken’ filter setting. Easy to manipulate then. Just sharing.

    Looking forward to the rest of the series….

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.