Using Wireframes

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

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
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

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

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

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

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

UI DESIGN FLOW ALTERNATIVE
Concept
Interactive
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
HARDFORCREATOREASYFORCREATOR
HIGH FIDELITY
WIREFRAME
LOW FIDELITY
WIREFRAME

UI DESIGN FLOW
Concept
Low 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

(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

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

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

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
Selects to get help from professional services to set up
e-commerce site
Web Designer /
Developer
Signs up for service
Creates password
Sets up FTP account
Logs 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 Email

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
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

cart help log
out
new domain search
usersdomain.com -
vps
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

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.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

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

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 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

cart help log
out
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
?
?
?

cart help log
out
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

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
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

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

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
Superviso
r
Billing
Dev Ops
Chargeback
Supervisor
Chargebac
k Agent

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

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

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

Using Wireframes

More Related Content

Using Wireframes