Your SlideShare is downloading. ×
Wireframe
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Wireframe

1,142
views

Published on

Basic concept of wireframing in web design development

Basic concept of wireframing in web design development

Published in: Design, Technology, Art & Photos

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,142
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
60
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Wire frame Multimedia Design
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. The Wire Frame
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 7. Photoshare PROTOSHARE makes it easy to create and then reuse templates, giving you full creative control and efficiency.
  • 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. 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. 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/

×