Web-based Systems | Misbhauddin 2

Wireframing

Web-based Systems | Misbhauddin 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 4

Types of Wireframes

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

Web-based Systems | Misbhauddin 5

Wireframing Techniques/Tools

UI Kits / Stencils

Adobe Illustrator AI, Vector EPSAdobe 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

Web-based Systems | Misbhauddin 6

Wireframing Techniques/Tools

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

Web-based Systems | Misbhauddin 7

Wireframing Techniques/Tools

1 project with 10 pages; 2 users; no archived projects

Free/Paid

Free/Paid 1 project; 1GB space; 2 users

Paid $9/mo; 10 projects; 1GB space

Free/Premium Single page

Paid 30-Day Free TrialFree for Students (Invited by Instructor

Online Tools >> Specific

Free

Web-based Systems | Misbhauddin 8

Wireframing Techniques/Tools

1 folder with 25 sheets; 15 users; Free/Paid

Free/Paid 5 diagrams; 2mb space; 0 users

Online Tools >> Diagramming

Free/Paid 60 objects/diagrams; 25mb space; 1 users

Web-based Systems | Misbhauddin 9

Wireframing Techniques/Tools

$99; 15-Day Free TrialFlairBuilder

Paid $49.99; Mac & iPad;

Offline Tools >> Desktop Applications

Paid

OmniGraffle

AdobeFireworks Paid £282.9; 30-Day Free Trial

$599.95-$999; 60-Day Free TrialPaid

PowerMockup Paid Powepoint Plugin; Trail Version Available

Web-based Systems | Misbhauddin 10

Sample -1

Web-based Systems | Misbhauddin 11

Sample -2