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:

Axure wireframe screenshot

Pages are designed in skeleton format

Copy and graphic design start to be applied to the wireframes:

MyBudget web development

Copywriting and graphic design starts to put meat on the bones

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: