Every project that comes across my desk gets a wireframe layout right before I hit Photoshop. These usually take moments and establish a quick plan in my notebook before I create a polished layout.
Recently we had a marketing website project come our way with an aggressive timeline, and a roadblock in the way. Our client knew exactly what they wanted on their website, but we were waiting on wrapping up another project before deciding how the visual styling should look. With our first design meeting scheduled and incoming, in order to use our time most efficiently we got started on our layout through presentation-ready wireframes.
The first step in creating a wireframe plan for a layout is to take stock of every individual bit of content that needs real-estate in the layout. I’ve lovingly nicknamed these the ‘Includes’. Social links, video content, editable welcome messages, news feed, logos, etc.
Next, some obvious thought has to go into the size of each element, and the jigsaw puzzle of layout begins. Usually I create anywhere from a single to three layout options quickly sketched in my notebook. For this particular project I mentioned it was important that our wireframes were presentation-ready and not only intelligible by me, so I took my wireframing efforts into Photoshop.
In a few moments I was able to create the following plans for our presentation. They helped us accomplish layout planning in our meeting and got us closer to a finished product.
Tags: design, marketing website, PhotoShop, Web Design, wireframe
Oh, looks like the Manitoba Bold website!
And look how well it turned out!
I’ve always wondered how useful it would be to make some reusable laminated cutouts of different UI elements. Could even go so far as formalizing each cutout as a “component” with the developers. It’s a very visual way of getting requirements out.
Or better still…do it all with Lego!
http://www.webatelier.net/research/reports/url-user-requirements-with-lego