Smart Tips for Wireframing by Indrajit basu


Published on

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.

Published in: Technology, Education
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Smart Tips for Wireframing by Indrajit basu

  1. 1. 10 Steps to Better Wireframing by Indrajit Basu Project Coordinator Data-Core Systems
  2. 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 doesn’t 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. 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 it’s 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. 4. 1. Be Crystal Clear 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. 5. 2. Functional, Not Pretty Wireframe is meant to deal with the functional parts of an application, e.g. a page will have 3 text boxes and 2 buttons. It’s about function (boxes, buttons, dropdowns etc) not captivating graphics. It’s 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 don’t need to understand relational databases to wireframe. www.datacoresystems.comLearning by knowledge sharing
  6. 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 doesn’t 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 customer’s 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 user’s 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. 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. 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, “let’s 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. 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. 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. 11. 8. Know When to Stop Make sure all relevant stakeholders have the opportunity to give feedback but don’t 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. 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 you’re 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 etc www.datacoresystems.comLearning by knowledge sharing
  13. 13. 10. It’s 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. 14. THANK YOU www.datacoresystems.comLearning by knowledge sharing