#005 – Photoshopping Mobile, Part 1

(Updated on )

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.