Wireframe Creation for Dummies

Re-Publish this Article

<h1>Wireframe Creation for Dummies</h1><strong> Author: <a href='http://www.articleseen.com/profile_Martin Metz.aspx'>Martin Metz</a></strong><br /><p>In this short tutorial we want to give a quick introduction on interface and web wireframing. What are wireframes? Why use wireframes and what can you do with wireframes? When these questions do not ring a bell, you should definitely read on. What is a wireframe? A website or interface wireframe is a first visual outline used in interface design and web development. With a wireframe, you plan and communicate the overall idea and structure of a website and specify it down to its pages. Wireframes have first been used in rapid paper prototyping in which interface concepts are drawn by hand with pen on paper. All elements of the website are just outlined (in the narrower sense of the word) and placeholders for pictures and other content (e.g. text) are used. Typically, wireframes with all link structures are completed before any artwork is developed. Why use Wireframes? Wireframes help you to go the long and rocky road from a general idea for a website to the specification with all detailed information for the designers and programmers. The important thing is that web design is an iterative process where new ideas and requirements turn up while developing the site. Therefore ideas that seemed good at the beginning turn out to cause problems when the website concept gets more and more into detail. As an example, a horizontal navigation bar might be a good choice in the beginning, but later turn out to provide not enough space for all navigation topics, thus navigation in the sidebar is more appropriate. Imagine you spent hours of work on designing all pages in detail with the horizontal navigation and now everything has to be changed! In a wireframe these changes can be made in no time and what you have to throw away did not take long to sketch. With a wireframe, you keep your flexibility refining the design concept until the end. What can I do with Wireframes? But sketching and refining ideas is not the only thing wireframes are good for! With a wireframe you can communicate your ideas and specifications to other stake holders in the project team. And as we all know, programmers speak a completely different language than designers, with a wireframe both parties communicate in a universal language: with animated pictures! The perfect thing about communicating on the basis of a wireframe is that your programmer can really see and experience what you want, ask the right questions and help finding solutions where certain (may be technical) requirements not have been considered (making changes in the concept necessary - lucky me who created a wireframe instead of spending long hours on designing all detailed pages first). Wireframes and User Testing When you can use a wireframe to communicate your ideas, improving collaboration with other parties, it is also possible to use wireframes for user testing. Where certain click paths, functionality and select options had to be explained in words when you have just a paper prototype of your website, new digital and clickable wireframes give you and your test users the whole experience. Just click through your wireframe like a real website and see whether the concepts work with real users. And everything in your concept that turns out to be problematic, can easily be changed - since it’s just a wireframe! </p><strong>About the Author:</strong><br />Pidoco.com – <a rel="nofollow" href="https://pidoco.com/en" target="_blank" title="Wireframe Software, Interface Design Software">Interface Design</a>, Interface Design Software, <a rel="nofollow" href="https://pidoco.com/en" target="_blank" title="Wireframe Software, Interface Design Software">Wireframe Software</a> & GUI Prototyping Tool. A GUI Design Interface Software for clickable Wireframes! Wireframe creating & GUI prototyping tool. Fast wireframe creating & remote website usability testing lead improved conversion! <p> Article Source: <a href='http://www.articleseen.com/Article_Wireframe-Creation-for-Dummies_51750.aspx'> http://www.articleseen.com/Article_Wireframe Creation for Dummies_51750.aspx</a></p>

Article Source : http://www.articleseen.com/Article_Wireframe Creation for Dummies_51750.aspx

Keywords : interface design, interface design software, wireframe software, GUI Prototyping Tool, wireframe tool, software prototyping, ,

Category : Computers : Software