Website Design Using Wireframes
There are a number of different ways to approach website design. Some people start with a layout, others begin with words and photos. I think of it like furnishing a room—Who will use the room? What will they use it for? How will the room feel? Or Who is my target market? How will people use my website? What actions do I want them to take? How do I want people to feel?
I had the opportunity to recently work with Atomic Media on MyBudget’s website redesign and found their method very elegant and efficient. Using a system of wireframes, we produced a skeletal prototype of the website, complete with navigable pages and components such as titles, text and image boxes. For creatives (copywriters, graphic designers etc.) the benefit of wireframes is that you are able to work in situ. You know exactly what’s needed in each section and how it relates to other sections, pages and components. What an invigorating and efficient process!
Here are some screenshots that show how it works.
Website prototype in wireframe format:
Pages are designed in skeleton format
Copy and graphic design start to be applied to the wireframes:
Copywriting and graphic design starts to put meat on the bones
