The nature of UI development is so complex that fitting it into a set of rules is simply not possible. But Wireframing is an extremely important step in the planning process of a website. It allows you get a clear picture of what information will be needed on each page before design. The only way to become an expert in this field is through a constant practice and effort to better the results by learning more out of small mistakes.
- 1. 10 Steps to Better Wireframing byIndrajit Basu Project CoordinatorData-Core Systemswww.datacoresystems.com
2. What is Website Wireframe ? A website wireframe is a visual guide that represents the skeletal framework of a website. It deals with the page layout or content arrangement of a website, including interface elements and navigational systems, and how they work together.The wireframe normally doesnt depict typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content. www.datacoresystems.comLearning by knowledge sharing 3. Common Mistakes to Avoid Possibly the biggest mistake in any development project is failure to plan. Wireframing is one of the first steps in your planning process and arguably its one of the most important ones. This is when the idea starts to take shape as an application. www.datacoresystems.comLearning by knowledge sharing 4. 1. Be CrystalClear Projects are rarely simple and anyone with experience will know what a myriad of unforeseen issues and challenges await you if you go down this route. A wireframe will help you identify many of these issues in a way that is time and cost effective. It is far easier to make changes to a collection of paper screens than after you have written a thousand lines of code. The process also helps to create a better understanding of the application. Putting it down on paper raises questions and ideas and leads to changes. The final output will be a blueprint from which designers, developers, architects and project managers will work and makes sure everyone is in sync.www.datacoresystems.comLearning by knowledge sharing 5. 2. Functional,NotPretty Wireframe is meant to deal with the functional parts of an application, e.g. a page will have 3 text boxes and 2 buttons. Its about function (boxes, buttons, dropdowns etc) not captivating graphics. Its better to ignore anything that could be seen as design or layout. While developing a wireframe, you do not need skills in design or development. All anyone needs is experience in using web apps or websites. Of course the more experience the better but you dont need to understand relational databases to wireframe. www.datacoresystems.comLearning by knowledge sharing 6. 3. Know Your Role Make sure someone owns the wireframe process. They are responsible for keeping it up to date and managing feedback, changes etc. In the case of a start-up this is often the ones with the idea and vision to understand the end goal. It doesnt matter who it is so long as someone is in charge. But at the same time, make sure you involve both the development team and the customers team during the development of your wireframe. For example, if you are integrating your app or site with existing databases then make sure the DB owner can check that all the data fields exist in their database before you add them to your wireframe. Collecting a users cell number is no good if there is nowhere to store it. Designers, on the other hand, should have a good understanding of user experience and can spot potential problems in the flow early on. www.datacoresystems.comLearning by knowledge sharing 7. 4. Set a Deadline It is important to set aside predefined periods of time and deadlines for deliverables to keep a project moving. The initial wireframing session could be one day or several, depending on the size of the application. Set a period and stick to it. Follow up review meetings can be much shorter or even done remotely. www.datacoresystems.comLearning by knowledge sharing 8. 5. Be Organized A website or app is often divided into sections such as news, products and user account. Break up your wireframe document accordingly, for much easier reference. We often tend to say, lets skip the login section, that is already implied. Make sure you wireframe everything. At the end of this process you should have a document that can be stepped through just like the final website. Every step counts and none should be ignored.www.datacoresystems.comLearning by knowledge sharing 9. 6. Use Page Numbers, Be Smart A web application often consists of a number of processes; a Shopping Cart Checkout Module can be a good example. Often these are linear but sometimes users can choose different paths such as skipping a step. Clearly number the pages in your document and then label which page a particular action (such as clicking a button) takes the user to.www.datacoresystems.comLearning by knowledge sharing 10. 7. Be Consistent Consistency within an application is helpful to users, developers and designers. Consistency in groups of elements can therefore be a good thing. For example, wherever a user enters an address it should be the same fields in the same order. Look for these areas of repetition as you wireframe. www.datacoresystems.comLearning by knowledge sharing 11. 8. Know When to Stop Make sure all relevant stakeholders have the opportunity to give feedback but dont turn this exercise into painting the Monalisa. Typically I would say three drafts should get the job done. The first gets the idea onto paper. The second reflects feedback from other parties such as developers, and designers. The third should be the final polish, after the approval from the customer. www.datacoresystems.comLearning by knowledge sharing 12. 9. Choose the Right Tools Pen and paper is often the way to start. It is much easier and faster than using a computer and lets you get thoughts and ideas down, as the concept evolves. Once you start creating the document our advice would be to use the tool youre most comfortable with. Developers for example may use Microsoft Visio, project managers can use PowerPoint, Designers may prefer Adobe Fireworks. Wireframe should be a document rather than something interactive like a webpage. The latter can be a distracting and therefore creating HTML is probably not the best thing. Several free and paid tools are also available for wireframing like Balsamiq, Mockingbird, Pencil Project, OmniGraffle, Cacoo etcwww.datacoresystems.comLearning by knowledge sharing 13. 10. Its Not Just the Public Site Many sites have an administration area for managing content, viewing registered user profiles, resetting passwords etc. This may not be viewed by many people but it is still important. Sometimes it can contain data that is not publicly available (a user approval button) but significant for the administrator. This is important for the developers when designing the application. This point should always be considered while designing the wireframe. www.datacoresystems.comLearning by knowledge sharing 14. THANK YOUwww.datacoresystems.comLearning by knowledge sharing