Building wireframes is a good practice before you begin coding. It can save you money and help you build a better user experience.

1. CREATING WIREFRAMES
FOR WEBSITES & WEB
APPSMARK CALKINS
VP PRODUCT DEVELOPMENT, BLUEHOST

2. got
wirefra

3. WHAT IS A WIREFRAME?
￭ A visual representation of a website or web app design
￭ Represents the basic page layout structure and navigational
scheme
￭ Visual blueprint

4. WHY WIREFRAMES?
￭ Relatively cheap to create
￭ Easy to throw away
￭ Easy to show functionality to
others
￭ Becoming more critical with
rich internet apps and more
complex websites

5. WIREFRAMES ALLOW YOU TO
￭ Experiment with the UI design of forms and interactive
elements
￭ See how content lays out on the page
￭ Evaluate the layout effectiveness
￭ Test and refine navigation
￭ Do initial user acceptance testing
￭ Tell a story
￭ Gain consensus

6. USER CENTERED DESIGN
Identify
Users
User
Scenario
s
Process
Flows
User
Stories
Wireframes
Design
Prototyping
User
Testing
Evaluate & Adapt
1
2
3
4
5
6
7
8
9
User
Centered
Design

7. COST OF REQUIREMENTS
CHANGES
Requirements Design Coding Testing Production
Traditional
Agile Development
http://www.agilemodeling.com/essays/costofchange.htm
Cost of
Chang
e
time

8. UI DESIGN FLOW

9. Identify
Users
User
Scenario
s
Process
Flows
User
Stories
Wireframes
Design
Prototyping
User
Testing
Evaluate & Adapt
1
2
3
4
5
6
7
8
9
USER CENTERED DESIGN
User
Centered
Design

10. UI DESIGN FLOW
Concept
Low Fidelity
Wireframe
Prototype
High Fidelity
Design
capture ideas
& basic
interface
core layout
show the
interaction
create the
design
elements

11. UI DESIGN FLOW
Concept
Low Fidelity
Wireframe
Prototype
High Fidelity
Design
Feedback Feedback
Technical
Feasibility
Technical
Feasibility
Technical
Feasibility
Feedback

12. UI DESIGN FLOW ALTERNATIVE
Concept
Interactive
Wireframe
Design
Feedback Feedback
Technical
Feasibility
Technical
Feasibility
Feedback
Technical
Feasibility

13. WIREFRAME ALTERNATIVES
Low Fidelity
￭ Build quickly
￭ Easy to change
￭ Online
￭ Create interaction
￭ Facilitate collaboration
High Fidelity
￭ Helps evaluators
￭ Desktop tools
￭ Designer approach
￭ Tool often lacks interaction
￭ Collaboration missing

14. EASY FOR EVALUATORS
TO UNDERSTAND
HARD FOR
EVALUATORS
TO UNDERSTAND
HARDFORCREATOREASYFORCREATOR
HIGH FIDELITY
WIREFRAME
LOW FIDELITY
WIREFRAME

17. CHOOSING A
WIREFRAMING TOOL

18. PENCIL, PEN OR WHITEBOARD

19. UI DESIGN FLOW
Concept
Low Fidelity
Wireframe
Prototype
High Fidelity
Design
create the
design
elements

20. ONLINE TOOLS
FREE TOOLS
￭ Frame box
￭ Gliffy*
￭ MockFlow*
￭ Mockingbird*
FEE-BASED
￭ Balsamiq
￭ Pidoco
￭ UXPin
* Free version, fee-based for premium features

21. DESKTOP TOOLS
FREE TOOLS
￭ Pencil Project
￭ Justinmind*
FEE-BASED
￭ Axure
￭ Balsamiq
￭ Adobe CS
(Photoshop,
Fireworks,
Illustrator)
￭ PowerPoint,
Keynote
* Free version, fee-based for premium features

22. CRITERIA TO CHOOSE
￭ Desired level of fidelity
￭ Interactive
￭ Collaboration support
￭ Device layout support
￭ Familiarity with the tool
￭ Speed of wireframe creation
￭ Functionality and available tools
￭ Flexibility for change

23. HIGH FIDELITY OPTION
￭ Add interaction
￭ Online collaboration

26. EXAMPLES

27. BLUHOSTWEBSITESCREEN
SHOT

28. MOCKINGBIRD

29. GLIFFYGLIFFY

30. UXPIN
see features
>

31. (888) 401-4678 products programs support about login
hosting with
genuine support
only $6.99
$3.95/monthOur experts are here 24/7 to offer
real solutions and advice
get started now
powering over 2 million websites
worldwide
see features
24/7
support
money-back
guarantee
one-click installs over $200 in offers
Trained, in-house
experts
are here to help 24/7.
Our robust help center
includes guides, video
tutorials and more.
Try us and love us, or
get a refund any time.
You’re never locked into
a contract and there are
no hidden fees or
gimmicks.
MOJO Marketplace is
integrated directly into
your account, making
the
web’s most popular
resources available
Enjoy advertising offers
from Google, free
credits
from Facebook and
other leading sites to
help grow your
POWERPOINT
have
questions?
n o h i d d e n f e e s , a n y t i m e
m o n e y - b a c k g u a r a n t e e

32. FIREWORKS

33. HOW TO CREATE
WIREFRAMES

34. DO DISCOVERY FIRST
Identify
Users
User
Scenario
s
Process
Flows
User
Stories
Wireframes
Design
Prototyping
User
Testing
Evaluate & Adapt
1
2
3
4
5
6
7
8
9
User
Centered
Design

35. 1: DEFINE USERS & USE CASES
￭ Identify “actors”
￭ Define primary use cases
￭ Create use case flows
￭ Identify alternate use case flows
Web Designer
/ Developer
Blogger Job
Seeker
Small
Business
Owner
ProfessionalEntrepreneur

36. SAMPLE USE CASES
Actor Use Case
Blogger Signs up for service
Creates password
Logs into control panel
Selects to install WordPress
Chooses admin username and password
Installs WordPress
Logs into WordPress admin account
Small Business
Owner
Signs up for service
Creates password
Logs into control panel
Selects to get help from professional services to set up
e-commerce site
Web Designer /
Developer
Signs up for service
Creates password
Logs into control panel
Sets up FTP account
Logs into FTP account and uploads files for website

37. DESCRIBE HOW TO GET FROM
POINT A TO POINT B
New user Confirm email
Verify email
Search for
Property
Enter info Select
Property
Notify Property
Owner
Terms &
Conditions
Overview
Send
Welcome Email

38. 2: CREATE MASTER ELEMENTS
￭ Avoid endless cut-and-paste
￭ Create once, use multiple
￭ Put static elements on master layers for reuse
￭ Header, footer, sidebars, navigation, backgrounds
Master Layer Content Layer

39. cart help log
out
hosting domains addons account
new domain search
usersdomain.com -
vps
get started
checkoutwhatthenewcontrolpanel interfacethis
video will provide an overview.
email manager
file manager
server settings
domain manager
notices
frequently used features
featured
getting started
how-to
videos
help center change
passwords
update
settings
email website files domains security database
marketin
g
services
email
email
manager
check
webmail
free
anti-spam
premium
anti-spam
website
website
manager
install
WordPress
WordPress
templates
setup
Weebly
goMobi
mobile
install
scripts
files
file manager webdisk ftp manager unlimited ftp site backup
pro
home cPanel server email website ftp databases marketplace

40. cart help log
out
hosting domains addons account
new domain search
usersdomain.com -
vps
home cPanel server email website ftp databases marketplace
server is:
rescue mode:
tech support
access:
running
125 days uptime
disabled
disabled
Additional Information about Server Actions
Start: This runs a normal boot up sequence.
Stop: This runs a 'soft' stop. Meaning all processes will receive a termination signal before the server is
stopped.
Reboot: This runs a 'soft' reboot. Meaning all processes will receive a termination signal before the server
is restarted.
Rescue/Unrescue: This will toggle rescue mode status on or off for the server and then reboot it. This is
generally used to help troubleshoot the server when normal boot up fails.
Tech Support Access: This may be enabled to allow support staff temporary access to your server to
assist you in troubleshooting issues.
start stop reboot
enable
enable
server
management
system statistics
access
management
system console
server IP
disk management
bandwidth
firewall
install modules
system updates
server: vps enhanced cpu: 2 core location: Utah
ram: 4 GB ip: 173.46.50.91
storage: 60 GB

41. 3: CREATE LIBRARY OF
COMPONENTS
￭ Icon libraries
￭ Build once for reuse
Q W E R T Y U I O P
A S D F G H J K L return
Z X C V B N M Q
.?123 .?123
!
,
?
.

42. LEVERAGE ONLINE TOOLS
text input
Label 6
Label 6
http://bluehost.com
Do you want to leave this site?
Cancel OK
Untitled
Googlebluehost.com3
Q W E R T Y U I O P
A S D F G H J K L
Z X C V B N M
.?123 space Search
button button
buttonbutton

43. 4: LEVERAGE THE BUILT-IN TOOLS
Navigation
Breadcrumbs
Link
Search box
Tabs
Dropdown
Button
Dialog box
Scroll bar
Radio buttons
Checkboxes
Tag cloud
Charts
Pagination
Grid
Banner ad
Video player
Drag and drop

44. 5: MASTER THESE KEY TOOLS
￭ Group elements whenever possible
￭ Use layers if the wireframe app supports it
￭ Arrange items – bring to front, send to back – can
simulate layers
￭ Tables are great guides (and useful for data too)
IP Address # Domains # Add-on Domains
207.46.232.182 16 12
62.144.122.24 8 4
214.22.95.1 11 9
TOTAL 35 25

45. help log out
vps - usersdomain.com
You are logged in as user@usersdomain.com
Read mail using Horde
See the helpdesk guide on using
the new version of Horde Mail
Enable AutoLoad for Horde
Read mail using
RoundCube
See the helpdesk guide on
using RoundCube
Enable AutoLoad for
RoundCube
Read mail using
SquirrelMail
See the helpdesk guide on
using SquirrelMail
Enable AutoLoad for
SquirrelMail
auto email
responders
email
filtering
change
passwords
configure
mail client
autoload
email client
Setup Webmail Client to Load at Login
Horde will automatically load after 5 second(s) next time you
login.
Setting the value to 1 second will hide this Webmail Login page.
OK Cancel

46. cart help log
out
vps - usersdomain.com
hosting domains addons account
home cPanel server email website ftp databases marketplace
server
management
system statistics
access
management
system console
server IP
disk management
bandwidth
firewall
install modules
system updates
port firewall
default inbound rule deny all incoming traffic
default outboard rule allow all outbound traffic
allow ping yes no
port access rules
select to allow inbound and outbound traffic that are exceptions to default rules above
port description
allow
inbound
deny
outbound
notes
20 FTP x SFTP over SSH is more secure
21 FTP x
22 SSH
25 SMTP x
26 SMTP Only used if designated in WHM service manager
37 rdate x To give server correct time
43 whois x
53 DNS Only needed if you run a public DNS server on the
system
80 HTTP x
110 POP3 x
113 ident x
143 IMAP x
443 HTTPS x
465 SMTP TLS/SSL x
?
?
?

47. cart help log
out
vps - usersdomain.com
hosting domains addons account
home cPanel server email website ftp databases marketplace
add new account
email accounts
email forwarding
email configuration
anti-spam filtering
email filters
enter username
enter email password retype email password
usersdomain.com@
password strength
mailbox storage
250MB
unlimited
let user choosedefault webmail client
set up new email account
Not at this timeset up anti-spam
SpamExperts ensures your
email is free from threats
and junk mail. It blocks
spam, viruses, phishing,
and email threats.
learn
more
create & add another create & finish
Passwords need to have 1 capital letter, 1 lower case letter, 1 number, 1 symbol, be a
minimum of 8 characters long and reach at least 50% on the password strength scale below.
password generator
help
Search
Search the help knowledge
base
Help Center
Create an Email Account
Help Topics
New Email Account Setup
Change Email Passwords
Add, Delete and Manage Email
Accounts
Related Upgrades
Eliminate email spam

48. cart help log
out
vps - usersdomain.com
hosting domains addons account
home cPanel server email website ftp databases marketplace
add new account
email accounts
email forwarding
email configuration
anti-spam filtering
email filters
enter username
enter email password retype email password
usersdomain.com@
password strength
mailbox storage
250MB
unlimited
let user choosedefault webmail client
set up new email account
Not at this timeset up anti-spam
SpamExperts ensures your
email is free from threats
and junk mail. It blocks
spam, viruses, phishing,
and email threats.
learn
more
create & add another create & finish
Passwords need to have 1 capital letter, 1 lower case letter, 1 number, 1 symbol, be a
minimum of 8 characters long and reach at least 50% on the password strength scale below.
password generator
help
Search
Search the help knowledge
base
Help Center
Create an Email Account
Help Topics
New Email Account Setup
Change Email Passwords
Add, Delete and Manage Email
Accounts
Related Upgrades
Eliminate email spam

49. 6: EXPERIMENT WITH LAYOUTS
￭ Take a use case and model it through the
flow
￭ Try out a few different layout styles
￭ Keep things intuitive and simple
Do this for each
use case to meet
requirements

50. cart help log out
home cPanel server email website ftp database marketplace
hosting domains addons account
new domain search
usersdomain.com - vps
Checkoutthenewcontrolpanel interfaceinthis
video:
NOTICES
email manager
file manager
server settings
domain manager
FREQUENTLY ACCESSED
find
email website files domains security database servicesmarketing
EMAIL
email
manager
check
webmail
free
anti-spam
premium
anti-spam
WEBSIT
E
website
manager
install
WordPress
WordPress
templates
setup
Weebly
goMobi
mobile
install
scripts
www
get started
guide
GETTING STARTED
how-to
videos
help center change
passwords
update
settings
?
FILES
FEATURED
Adwords
Get $100

51. cart help log outhosting domains addons account
usersdomain.com - vps
main
manage email
website tools
domains
file management
security
databases
marketing
advanced
find live visitor map
FEATURED
Adwords
Get $100
_
main
live visitor
map
live traffic
stats
unique
visitors
page visits performanc
e
server

52. 7: GET FEEDBACK & UPDATE
￭ Peer reviews
￭ Preliminary “user acceptance testing”
￭ Much cheaper to get feedback on
wireframes
￭ Quick and “relatively” easy to
change & update
How intuitive
is the UI?
Are the use case
flows efficient?
Does the UI meet
the requirements?

53. USE OF DESIGNERS
￭ Leverage the designer AFTER wireframes are
developed
￭ Design needs to follow function
￭ Design needs to consider user experience

54. CASE STUDY
BILLING AGENT APPLICATION

55. IDENTIFIED THE ACTORS
Tech
Support
Agent
Billing
Agent
Billing
Superviso
r
Billing
Dev Ops
Chargeback
Supervisor
Chargebac
k Agent

56. DOCUMENTED USE CASES

57. Skynet Billing Manager Logged in to Bluehost as jdoe | logout | Create Project/Report
Bug
Help
customer search Search
Main History
Billing Address Service Address
Company Small’s Florist Company Small’s Florist
Address 123 Main Street Address 123 Main Street
Address Address
City Sunnyvale State CA Zip 94550 City Sunnyvale State CA Zip 94550
Country United States Country United States
Day Phone 408-423-9600 Day Phone 408-423-9600
Night
Phone
415-561-8643
Night
Phone
415-561-8643
Edit Add Note
Attach
Document
Customer Details
Main domain: smallsflorist.com Customer name: Jane Small Credit card ending in: 3394
Cust ID: 203811 Customer email: jsmall@smallsflorist.com Card expiration date: 01/15
Status: Active Signup date: 2009-05-22 # cards on file: 1
Credit Balance: $0.00 Convert Next renewal date: 2014-05-22 Current hosting service: Shared (1 of 1)
Change
Customer
View Customer
cPanel
Resend
Password
Link to CPM
Send Help Desk
Article
Current Products
Most Recent Transaction
Validate Account

58. got
wirefra

59. LINKS
￭ Online wireframe vendors
 framebox.org
 www.gliffy.com
 www.mockflow.com
 gomockingbird.com
 balsamiq.com
 pidoco.com
 uxpin.com
 iplotz.com
￭ Collaboration
 www.invisionapp.com
￭ Desktop wireframe vendors
 pencil project
 www.justinmind.com
 www.axure.com
 balsamiq.com
 getwirefy.com
 adobe.com
 microsoft.com
 apple.com

60. LINKS
￭ Wireframing tools
 Illustrator wireframe kit
 Sqetch (Illustrator
wireframe toolkit)
 WireKit
 Ultimate Wireframe UI kit
 Mini wireframing kit
 Photoshop wireframe kit
 Browser elements
 Web UI element pack
 Modern Web UI set
 Web UI wireframe kit
 PowerPoint/Keynote kit
￭ Mobile tools
 iPad sketch elements AI
 iPad GUI PSD
 iPhone GUI PSD
 iPhone Mockup
 iPhone GUI elements
 Google Android kit
 UI8
 Sketch iPhone UI kit
￭ More…
 Wireframe magazine

61. contact info
mcalkins@bluehost.com
linkedin.com/in/markcalkins