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.