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.