using wireframes
DESCRIPTION
Building wireframes is a good practice before you begin coding. It can save you money and help you build a better user experience.TRANSCRIPT
CREATING WIREFRAMES FOR WEBSITES & WEB APPSMARK CALKINS
VP PRODUCT DEVELOPMENT, BLUEHOST
got wirefra
me?
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
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
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
USER CENTERED DESIGN
Identify Users
User Scenari
os
Process Flows
User Stories
Wireframes
Design
Prototyping
User Testing
Evaluate & Adapt
1
2
3
4
5
6
7
8
9
User Centered Design
COST OF REQUIREMENTS CHANGES
Requirements Design Coding Testing Production
Traditional Devel-opment
Agile Development
http://www.agilemodeling.com/essays/costofchange.htm
Cost of
Change
time
UI DESIGN FLOW
Identify Users
User Scenari
os
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
UI DESIGN FLOW
ConceptLow Fidelity Wireframe
Prototype
High Fidelity Design
capture ideas & basic
interfacecore layout
show the interaction
create the design
elements
UI DESIGN FLOW
ConceptLow Fidelity Wireframe
Prototype
High Fidelity Design
Feedback Feedback
Technical Feasibility
Technical Feasibility
Technical Feasibility
Feedback
UI DESIGN FLOW ALTERNATIVE
ConceptInteractive Wireframe
Design
Feedback Feedback
Technical Feasibility
Technical Feasibility
Feedback
Technical Feasibility
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
EASY FOR EVALUATORS
TO UNDERSTAND
HARD FOR EVALUATORS TO UNDERSTAND
HA
RD
FOR
CR
EATO
REA
SY FO
R C
REATO
R
HIGH FIDELITY WIREFRAME
LOW FIDELITY WIREFRAME
CHOOSING A WIREFRAMING TOOL
PENCIL, PEN OR WHITEBOARD
UI DESIGN FLOW
ConceptLow Fidelity Wireframe
Prototype
High Fidelity Design
create the design
elements
ONLINE TOOLS
FREE TOOLS
￭ Frame box
￭ Gliffy*
￭ MockFlow*
￭ Mockingbird*
FEE-BASED
￭ Balsamiq
￭ Pidoco
￭ UXPin
* Free version, fee-based for premium features
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
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
HIGH FIDELITY OPTION￭ Add interaction
￭ Online collaboration
EXAMPLES
BLU
HO
ST W
EB
SIT
E S
CR
EEN
SH
OT
MO
CK
ING
BIR
D
GLI
FFY
GLI
FFY
UX
PIN
see features >
(888) 401-4678 products programs support about login
hosting withgenuine supportonly $6.99 $3.95/month
Our experts are here 24/7 to offerreal 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, orget a refund any
time.You’re never locked
intoa contract and there
are no hidden fees or
gimmicks.
MOJO Marketplace isintegrated directly
intoyour account, making the
web’s most popular resources available
instantly.
Enjoy advertising offers
from Google, free credits
from Facebook andother leading sites to
help grow your business
- all included.
PO
WER
PO
INT
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
FIR
EW
OR
KS
HOW TO CREATE WIREFRAMES
DO DISCOVERY FIRST
Identify Users
User Scenari
os
Process Flows
User Stories
Wireframes
Design
Prototyping
User Testing
Evaluate & Adapt
1
2
3
4
5
6
7
8
9
User Centered Design
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
Professional
Entrepreneur
SAMPLE USE CASESActor Use Case
Blogger Signs up for serviceCreates passwordLogs into control panelSelects to install WordPress Chooses admin username and passwordInstalls WordPress Logs into WordPress admin account
Small Business Owner
Signs up for serviceCreates passwordLogs into control panelSelects to get help from professional services to set up e-commerce site
Web Designer / Developer
Signs up for serviceCreates passwordLogs into control panelSets up FTP accountLogs into FTP account and uploads files for website
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
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
cart help log out
hosting domains addons account
new domain search
usersdomain.com - vps
get started
check out what the new control panel interface this 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 securitydatabas
emarketi
ngservices
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
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:
running125 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: Utahram: 4 GB ip: 173.46.50.91storage: 60 GB
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
!, ?
.
LEVERAGE ONLINE TOOLS
text input
Label 6
Label 6
http://bluehost.comDo 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
4: LEVERAGE THE BUILT-IN TOOLSNavigationBreadcrumbsLinkSearch boxTabsDropdownButtonDialog boxScroll barRadio buttons CheckboxesTag cloudChartsPaginationGridBanner adVideo player
Drag and drop
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
help log out
vps - usersdomain.com
You are logged in as [email protected]
Read mail using HordeSee 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 responder
s
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.
OKCance
l
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 ruleallow 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 descriptionallow
inbounddeny
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
?
?
?
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 passwordretype 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 morecreate & add
anothercreate &
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
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 passwordretype 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 morecreate & add
anothercreate &
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
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
cart help log out
home cPanel server email website ftp database marketplace
hosting domains addons account
new domain search
usersdomain.com - vps
Check out the new control panel interface in this video:
NOTICES
email manager
file manager
server settings
domain manager
FREQUENTLY ACCESSED
find
email website files domains securitydatabas
eservicesmarketin
g
email manager
check webmail
free anti-spam
premium anti-spam
WEBSITE
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 $100Adwords Credit
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 $100Adwords Credit
_
main
live visitor map
live traffic stats
unique visitors
page visits performance
server
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?
USE OF DESIGNERS￭ Leverage the designer AFTER wireframes
are developed
￭ Design needs to follow function
￭ Design needs to consider user experience
CASE STUDY
BILLING AGENT APPLICATION
IDENTIFIED THE ACTORS
Tech Support Agent
Billing Agent
Billing Supervis
or
Billing Dev Ops
Chargeback
Supervisor
Chargeback Agent
DOCUMENTED USE CASES
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 CAZip
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
EditAdd Note
Attach Document
Customer Details
Main domain: smallsflorist.com Customer name: Jane Small Credit card ending in: 3394
Cust ID: 203811 Customer email: [email protected]
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 CPMSend Help Desk
Article
Current Products
Most Recent Transaction
Validate Account
got wirefra
me?
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
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
