One of the best things I’ve ever tried when trying out a new web design was to get away from the computer entirely. (Sounds weird, but it actually worked for me.)

My First Paper Layout Mockup

I was still fairly new to web design back in 2004; I was entirely self-taught, and was desperately trying to come up with something just as original and cool as the awesome designs I’d seen my Internet friends do. Problem was, I couldn’t figure out how to do what they did–how could I make the text of my page appear in this little bitty box in the middle of a beautiful background picture, like theirs? I couldn’t make heads or tails of the page sources I looked at, either. It was all just expanses of wild code, tangled and insurmountable…my creative mind was absolutely flummoxed.

Finally, in exasperation, I pushed away from the computer, got a sheet of notebook paper from one of my college notebooks, and literally drew out a couple of designs with the closest writing instrument to hand–a pencil. I knew I wanted the background image to be wispy and pretty, and I wanted the text to “float” on top of the background image. Even with my (very) limited art skills, I got down what I wanted, enough to know that I would need a scrolling box for most of my content, since the “box,” whatever it was made of, would be small.

I found myself referring back to this rudimentary drawing over the next few days, as I searched the Internet for “text boxes” and “scrolling boxes” and whatever other terminology I could try. Finally, a tutorial defined what I wanted (a text box that could float over a background image) as something called an “iframe.” This, coupled with the iframe tutorials I looked up later, revolutionized the way I designed sites completely. I learned how to create the background image in the graphics program I had at the time (Photoshop Elements 2.0), and, armed with the code, I began to create my first iframes layouts.

If I had never done that little sketch, I would have never been able to figure out how to make my site both easily updatable and trendy with current web designs of the day. I also would not have figured out one of the key elements of my design style: the less a user has to scroll to see vital site information, the better. Sketching out what I wanted was the first step–it was a new way to approach the problem, which in turn helped me research and eventually innovate.

Paper Mockups: Still Using ‘Em!

I still resort to using paper mockups when it’s just too much trouble to try to Photoshop something together, especially something that I’m not even sure will work. Good ol’ pencil/pen and paper are faster to pull up than Photoshop, for sure, and it’s easier to direct a pen precisely around the page than to move a laptop mouse cursor to attempt drawing something. Plus, something about actually touching a physical pen to physical paper makes me get into a better “designing” mood, and I end up with a better, more carefree result.

This is a recent mockup I did, for a possible new layout for WithinMyWorld.org (click for larger pic in new window):

Not only do you get a sample of my horrendous handwriting (LOL), but you get to see a bit of the design process–I’ve mocked out where the sidebar and content will go, including RSS feeds, links, and affiliates, as well as possible image-map navigation, and a “pretty wavy background” that, for now, only exists in my imagination. 😀 Also, I included a couple of funny hints to myself, in the vein of “(maybe some fish?)” and “OMG BUBBLES!” 🙂 I think you have to have a sense of humor when you’re putting mockups together–it makes the process a lot easier to manage, at least for me.

Now You Try!

Try the website sketch idea when you’re stuck on a layout idea–it’s amazing what a pencil and paper can do in this day and age. You might just come up with something that you hadn’t thought of…like using hand-drawn bubbles as an image map. 🙂