#006 – Photoshopping Mobile, Part 2

(Updated on )

We have the “header” of the design in place, we just need to figure out the rest of the page. We have a list of the most important goals we’re trying to accomplish, so that will help us guide us. Essentially a set of links (“main navigation”) will serve us well.

For instance, we need to showcase Jeff’s writing. A link to the blog makes good sense. No sense in making it tiny. We’re working with small screens here so we made a big and obvious full-width bar-link. A little gradient gives it some dimensionality (pushable) and separates it from the slider above. If there is any doubt, an arrow icon sells the click (or tap) -ability.

Because we’ve used a gradient for the link, more buttons below it are already separated from the one above it. We can continue creating links down the page until we have all the major areas covered. Don’t wanna overdo it, but 4-5 should be fine. And the fact that the “fold” happens right in the middle of a bar-link is great. Just like the slides that hang off the edges of the screen, having a link hanging off the bottom makes it obvious you can scroll down as well.

The footer will be about as simple as can be. Just a copyright link and some social media stuff. Everyone knows what a link that says “Twitter” or “Facebook” means.