Published on

Basic concept of wireframing in web design development

Published in: Design, Technology, Art & Photos
  • Be the first to comment

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

No notes for slide


  1. 1. Wire frame Multimedia Design
  2. 2. Instructional Goals• Understand about basic concept of wire frame in website design• Understand the benefits using wire frame before develop your full website content• Apply wire framing process in designing web
  3. 3. In the world of 3D animation, a wire frame is a working model of acharacter without color, skin, clothing or hair. This way, the animatorscan easily test the model and make modifications to it before a greatdeal of money is spent in developing its finer points.
  4. 4. What is Wire frame in Web Design?Wire framing a Website involves building a text-only version of thesite, with working links, but without graphic detail.
  5. 5. Benefits of wire framing your sites before fully developWithin this working model of your Website, the links can be followedthrough, which provides a real feel for how the information on yoursite connects and how the site flows.It enables you as web designer to pinpoint potential problemsthat might arise later
  6. 6. Prepare Your SitemapBefore we begin to work with wire frame model, it’s good idea tosketch out a quick signal flow diagram of the pages contained in thesite.Draw simple boxes that represent each page and write the pages titleinside. Use lines to indicate how the sections of the site will linktogether.Site map can be hand-drawn, or using a program such as MicrosoftVisio, Adobe Illustrator, or FreehandThe goal is to provide a single-page overview of your site as aguide for constructing wire frame
  7. 7. Home Sample of SitemapOverview Package 1 Package 2 Package 3 Content Order Form Backend Success Page Or Database 3rd Part Credit Fail Page Verify Client Email Merchant Email
  8. 8. Create your Wire frame ModelStep 1. Create the Wire FrameTry to eliminate any layout ideas that you have and concentrate insteadon the skeleton of the site.Begin by creating a simple HTML page for each of the blocks that yousketched out in your site map diagram. Include the title of the page andthe purpose that the page will serve.
  9. 9. Step 2. Add Your ContentOnce you have all the pages set up and your client has approved thepage titles, purposes and link titles, you can begin to fill in the contentfor each page.
  10. 10. Step 3. Start Laying Out the PagesAt this point, we need to create a rough layout of the site using placeholderimages, or by creating separate layers.
  11. 11. The Wire Frame
  12. 12. The wireframe diagram illustrates the layout of a web page. Usingdifferent shapes (such as boxes, ovals, and diamonds) to represent content,functional, and navigational elements, these shapes displays theirplacement on the page.
  13. 13. The use of simple shapes lets you focus on the information design first, tomake sure it meets users needs, before moving on to the pretty pictures.
  14. 14. Wire Frame vs. Visual DesignA wireframe diagram lets everybody focus on what’s important at this step:clearly understanding what goes on each page, where it goes, and why itgoes there, so you can achieve the best overall balance and structurefor each page.
  15. 15. Note for Visual DesignerAt this point in the process, visual designersshould conduct exploratory meetings tounderstand the client’s visual preferences andthe visual elements of the brand.Wait until wireframes are set before showing anyvisual-design treatments of the pages to theclient.Note for ClientFor clients who insist on seeing visuals earlierrather than later, ask visual designers to designpage mock-ups representing possible colours,imagery, its look and feel, as well as possiblestyles of what is being considered at this stage. Hand-drawn Wire-Frame Sketches
  16. 16. 9 Application Tools To Create Wire Frame Digitally1. Balsamiq Using BALSAMIQ mockups gives you the feeling like you are drawing, but its digital, so you can tweak and rearrange the controls easily, and the end result is much cleaner. Teams can come up with a design and iterate over it in real-time in the course of a meeting.
  17. 17. 2. iPlotz With iPlotz you can create clickable, navigable wireframes to create the experience of a real website or software application. You can also invite others to comment on the designs, and once ready, you can manage the tasks for developers and designers to build the project.
  18. 18. 3. Pencil Project The PENCIL PROJECTs unique mission is to build a free and open source tool for making diagrams and GUI prototyping that everyone can use.
  19. 19. 4. templatr templatr is a Template Generator, with which you can create an individual design for your Blog online. You need no knowledge of HTML or any special Software. All you need is a Browser, maybe a little creativity and a small idea of how the finished design should look. You can download the finished Template with a simple click.
  20. 20. 5. Flair Builder FlairBuilder is a cross-platform tool for rapid authoring of interactive wireframes and user interface prototypes. It comes with a palette of common fully functional components. Your prototypes will have interaction built-in from the first moment.
  21. 21. 6. GUI Design Studio GUI Design Studio is a fully featured application user interface design and rapid prototyping tool that requires absolutely no coding. It is equally suitable for creating desktop, mobile and Website application designs.
  22. 22. 7. Photoshare PROTOSHARE makes it easy to create and then reuse templates, giving you full creative control and efficiency.
  23. 23. 8. Serena PROTOTYPE COMPOSER is a completely new way of gathering requirements. Prototype Composer makes it possible to see how an application will look and function before any code is even written. Instead of endless text documents, Prototype Composer makes it easy for business users and analysts to collaborate on requirements by building simple, high-fidelity prototypes that simulate a working application.
  24. 24. 9. DUBDENIM is a system that helps web sitedesigners in the early stages of design.DENIM supports sketching input, allowsdesign at different refinement levels,and unifies the levels through zooming.
  25. 25. Reference:http://articles.sitepoint.com/article/wire-frame-your-sitehttp://www.onextrapixel.com/2009/07/15/the-importance-ofwireframes-in-web-design-and-9-tools-to-create-wireframes/