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.

Comments

  1. User Avatar
    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. User Avatar
    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.

    Thanks!

  3. User Avatar
    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….

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag