updated: November 6th, 2007 / Ross Johnson / 3 Comments

Give your self margin in mockups

A few weeks ago I was at a photo shoot and the photographer said something profound that didn’t really hit me until today. As we were setting up shots, he said “If it is in the frame I am going to compose with it.” Essentially stating that if we had any element with in the frame of his shot he would naturally use it as a composition element.

Later that week while working on a design mock up I experienced the same phenomenon, however in a different light. A lot of people make the mistake of working on a mockup with in a designated width, ie: 960px , 760px, etc… however what you end up doing is composing with the edges not thinking about what happens when someone is running a higher resolution.

This is a common mistake of traditional graphic designers who are used to having set edges to the art, and will likely design a page not thinking about what happens outside of the page.

Make sure you work in a space that is significantly wider than what the site is designed for. This will force you to think about how the page will work with the background, and what edges you want to define graphically.

3 thoughts Give your self margin in mockups

  1. Totally agree with that. My graphic designer is learning some of these ‘finer details’ at the moment…

  2. Totally, I have ran into the problem so many times when doing the front-end, and I go back to the desinger and ask: What happens when the browser window is bigger?

    After a while it sinks in. The devil is in the details.

  3. Totally agree, I learned this a few years back and ever since then all my documents are at least 1200px across, with varying heights. It also makes it actually fun to design elements that add a little extra flair to the outside areas, knowing only people with larger monitors will every really enjoy it.

Comments are closed.

Free WebinarOur proven method of increasing website leads by 400% or more using design psychology

That anyone can implement, even if you're not a designer or developer.

Join me on April 8th at 11:00am EST time and you'll learn:

  1. How to understand your target audience so you can excite them and drive them towards action
  2. How to capture prospects before they’re ready to reach out, so you can build a relationship and nurture them towards a sale
  3. How to avoid the #1 mistake on websites that causes lackluster results
  4. A step by step process to realign your website around your target audience’s psychology

Plus we'll provide downloadable templates and checklists so you can implement what you learn on your own!