Planning a project thoroughly is often more important than the design, app or site. If a project is badly planned and organised then your heading for a disaster.
Wireframing is usually one of the first steps to really mapping out your user flows, and is a place where all the ideas can be brought together to build a better picture of what the final project will be like. Its important to understand the purpose of a wireframe and communicate this to either your client or colleagues.
You wouldn’t build a house without an architect and plans. So why build a site without a wireframe and planning?
As a designer and developer who often works on personal projects in my spare time all be it limited its hard sometimes to skip the planning stage and rush straight into building something, a wireframe helps to give you project scope. It’s a flexible layout that you can easily make changes to.
As you’d expect, a wireframe is important from a design perspective. So any designer that’s brought into a project can easily get straight up to speed understanding each element in a simplified way. But it doesn’t stop there. from a developer or architects perspective, wireframes are key for mapping out processes and getting to grips with any complex interactions.
Wireframes can help to uncover any underlying problems at an early stage in a project. Its far more cost effective to make tweeks to a wireframe than a site design or worst still site architectural changes which could also impact on site design.
You’r wireframe is in no way a basic site design. Don’t be tempted to over design your wireframe, keep it clean and simple. If anything it should help from a user interface perspective, don’t overcomplicate it with notes about AJAX elements, this can come at a later stage. If for example your wireframing a contact page that requires just three text fields and a button then thats all you need to include in your wireframe.
Its often easy to want to skip simple pages like legal or contact pages, pages that are not regarded as high traffic. Don’t do it. wireframe each page, it’s so important to build up a complete structure of your project.
When setting out its much easier to grab a sheet of paper and a pen and scribble some boxes and buttons down than dive straight into a more structured computer approach. A tool I like to use to build wireframes is Balsamiq an Adobe air application for both Max and PC that has a set of almost pre-defined stencils that you can manipulate, it even has an array of iphone development tools. If you don’t want to invest in specific software like Microsoft Viseo you can always use Adobe Illustrator, Photoshop or even Powerpoint.
Designer and web developer, Co-founder and Technical Director at Harkable.com London. Previously I worked at InMobi, Spotify and MySpace. Interests include photography and making short videos. Also an avid F1 fan. I also run Mega Infographics for your daily dose of the best infographics.
Follow us on Twitter and get in-stream updates.
Subscribe to all the Papermashup tutorials and articles straight to your RSS reader.
Sign up and get all the Papermashup tutorials straight to your inbox.