Presentation is loading. Please wait.

Presentation is loading. Please wait.

Wireframing Web-based Systems | Misbhauddin 2 Wireframe a.k.a Page Architecture, Page Schematic, or Blueprint {def.} Highly simplified sketch of the.

Published byBeverly Glenn Modified over 9 years ago

Similar presentations

Presentation on theme: "Wireframing Web-based Systems | Misbhauddin 2 Wireframe a.k.a Page Architecture, Page Schematic, or Blueprint {def.} Highly simplified sketch of the."— Presentation transcript:

1

2 Wireframing Web-based Systems | Misbhauddin 2

3 Wireframe a.k.a Page Architecture, Page Schematic, or Blueprint {def.} Highly simplified sketch of the important information in a page {goal} Reflect importance of different elements, including the content and the navigation on the page Web-based Systems | Misbhauddin 3

4 Types of Wireframes Web-based Systems | Misbhauddin 4 Wireframes Low-Fidelity High-Fidelity rough sketch or a quick mock-up less detail quick to produce Detail matches actual webpage Takes longer to create Used in documentation

5 Wireframing Techniques/Tools Web-based Systems | Misbhauddin 5 UI Kits / Stencils Adobe Illustrator AI, Vector EPS Adobe Photoshop PSD Difficulty in Collaboration Time Consuming Online Tools Specific Diagramming Built online right in the browser Easy to Collaborate Faster Offline Pen & Paper Desktop Application

6 Wireframing Techniques/Tools Web-based Systems | Misbhauddin 6 http://rafaltomal.com/free-photoshop- wireframe-kit/ http://www.eleqtriq.com/2010/08/sqetch- wireframe-toolkit/ http://www.pixeden.com/web- wireframing/webpage-wireframe-stencil UI Kits / Stencils

7 Wireframing Techniques/Tools Web-based Systems | Misbhauddin 7 1 project with 10 pages; 2 users; no archived projects Free/Paid 1 project; 1GB space; 2 users Paid$9/mo; 10 projects; 1GB space Free/Premium Single page Paid 30-Day Free Trial Free for Students (Invited by Instructor Online Tools >> Specific Free

8 Wireframing Techniques/Tools Web-based Systems | Misbhauddin 8 1 folder with 25 sheets; 15 users; Free/Paid 5 diagrams; 2mb space; 0 users Online Tools >> Diagramming Free/Paid 60 objects/diagrams; 25mb space; 1 users

9 Wireframing Techniques/Tools Web-based Systems | Misbhauddin 9 $99; 15-Day Free Trial FlairBuilder Paid $49.99; Mac & iPad; Offline Tools >> Desktop Applications Paid OmniGraffle Adobe Fireworks Paid £282.9; 30-Day Free Trial $599.95-$999; 60-Day Free Trial Paid PowerMockup PaidPowepoint Plugin; Trail Version Available

10 Sample -1 Web-based Systems | Misbhauddin 10

11 Sample -2 Web-based Systems | Misbhauddin 11

Download ppt "Wireframing Web-based Systems | Misbhauddin 2 Wireframe a.k.a Page Architecture, Page Schematic, or Blueprint {def.} Highly simplified sketch of the."

Similar presentations

Jeppesen Proprietary Intersessional Correspondence Group Document Sharing Platform Michael Bergmann Director Maritime Industry Jeppesen Marine.

Jeppesen Proprietary Intersessional Correspondence Group Document Sharing Platform Michael Bergmann Director Maritime Industry Jeppesen Marine.
/ Reference Management Tools: Which One is Right for You? Yolanda Koscielski, Criminology & Psychology.

/ Reference Management Tools: Which One is Right for You? Yolanda Koscielski, Criminology & Psychology.
Information Architecture Information Architecture (IA) is a process of identifying the objectives for building a Web site and then constructing a comprehensive.

Information Architecture Information Architecture (IA) is a process of identifying the objectives for building a Web site and then constructing a comprehensive.
Google Apps for Education. What Is Google Apps For Education? Sites (Webpages) Docs (Office Suite) Gmail (E-mail) Calendar Google Talk (Communications.

Google Apps for Education. What Is Google Apps For Education? Sites (Webpages) Docs (Office Suite) Gmail ( ) Calendar Google Talk (Communications.
Agenda Overview of Silverlight Technology Map Suite Silverlight Beta Edition Features & Benefits Demonstration Where to Get Help and Learn More Q&A 2.

Agenda Overview of Silverlight Technology Map Suite Silverlight Beta Edition Features & Benefits Demonstration Where to Get Help and Learn More Q&A 2.
1 Lecture 7: Implementing a Prototype: Overview of Using PowerPoint, Flash Catalyst, html, Microsoft Sketchflow/Expression Blend, etc. Brad Myers 05-863.

1 Lecture 7: Implementing a Prototype: Overview of Using PowerPoint, Flash Catalyst, html, Microsoft Sketchflow/Expression Blend, etc. Brad Myers
1 Lecture 7: Implementing a Prototype: Overview of Using PowerPoint, Adobe Illustrator, Adobe Fireworks, Balsamiq, OmniGraffle, html, etc. Brad Myers 05-863.

1 Lecture 7: Implementing a Prototype: Overview of Using PowerPoint, Adobe Illustrator, Adobe Fireworks, Balsamiq, OmniGraffle, html, etc. Brad Myers
. Website and file organization. How websites work.

. Website and file organization. How websites work.
SIMS 202 Information Organization and Retrieval Prof. Marti Hearst and Prof. Ray Larson UC Berkeley SIMS Tues/Thurs 9:30-11:00am Fall 2000.

SIMS 202 Information Organization and Retrieval Prof. Marti Hearst and Prof. Ray Larson UC Berkeley SIMS Tues/Thurs 9:30-11:00am Fall 2000.
Portfolio Anil Sutar Team Lead (User Interface Design) CUA (Certified Usability Analyst - HFI Mumbai)

Portfolio Anil Sutar Team Lead (User Interface Design) CUA (Certified Usability Analyst - HFI Mumbai)
Instructional Technology & Design Office 217-244-4903 or 800-377-1892 Zotero & Mendeley Workshop Presented by Kate Rojas.

Instructional Technology & Design Office or Zotero & Mendeley Workshop Presented by Kate Rojas.
Information Architecture Week 7. Information Architecture QUIZ Please put your books away and get ready for this week’s quiz.

Information Architecture Week 7. Information Architecture QUIZ Please put your books away and get ready for this week’s quiz.
What is Web Design The term “web design” has come to encompass a number of disciplines, including: Visual (graphic) design User interface and experience.

What is Web Design The term “web design” has come to encompass a number of disciplines, including: Visual (graphic) design User interface and experience.
Web Design HTML CSS Creating Web Sites Design Principles.

Web Design HTML CSS Creating Web Sites Design Principles.
The Designer-Developer Workflow Martin Tirion User Experience Evangelist Microsoft.

The Designer-Developer Workflow Martin Tirion User Experience Evangelist Microsoft.
Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.

Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.
+ RSS Aggregation and Syndication. + Really Simple Syndication (aka, Rich Site Summary) Image source:

+ RSS Aggregation and Syndication. + Really Simple Syndication (aka, Rich Site Summary) Image source:
Instructional Technology & Design Office 217-244-4903 or 800-377-1892 Zotero & Mendeley Workshop Presented by Aisha Conner-Gaten.

Instructional Technology & Design Office or Zotero & Mendeley Workshop Presented by Aisha Conner-Gaten.
16 March · Visual Vocabulary · 1 Visual Vocabulary: An Introduction Jesse James Garrett.

16 March · Visual Vocabulary · 1 Visual Vocabulary: An Introduction Jesse James Garrett.
Wireframes & Mockups presents…. What is a Wireframe? a sketch or a guideline before you build actual website a “skeleton graph” that shows how the contents.

Wireframes & Mockups presents…. What is a Wireframe? a sketch or a guideline before you build actual website a “skeleton graph” that shows how the contents.

Similar presentations

Ads by Google