Your SlideShare is downloading. ×
0
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Using Wireframes
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Using Wireframes

457

Published on

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

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

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
457
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 15. CHOOSING A WIREFRAMING TOOL
  • 16. PENCIL, PEN OR WHITEBOARD
  • 17. UI DESIGN FLOW Concept Low Fidelity Wireframe Prototype High Fidelity Design create the design elements
  • 18. ONLINE TOOLS FREE TOOLS ■ Frame box ■ Gliffy* ■ MockFlow* ■ Mockingbird* FEE-BASED ■ Balsamiq ■ Pidoco ■ UXPin * Free version, fee-based for premium features
  • 19. 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
  • 20. 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
  • 21. HIGH FIDELITY OPTION ■ Add interaction ■ Online collaboration
  • 22. EXAMPLES
  • 23. BLUHOSTWEBSITESCREEN SHOT
  • 24. MOCKINGBIRD
  • 25. GLIFFYGLIFFY
  • 26. UXPIN see features >
  • 27. (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
  • 28. FIREWORKS
  • 29. HOW TO CREATE WIREFRAMES
  • 30. 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
  • 31. 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
  • 32. 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
  • 33. 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
  • 34. 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
  • 35. 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
  • 36. 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
  • 37. 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 ! , ? .
  • 38. 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
  • 39. 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
  • 40. 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
  • 41. 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
  • 42. 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 ? ? ?
  • 43. 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
  • 44. 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
  • 45. 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
  • 46. 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
  • 47. 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
  • 48. 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?
  • 49. USE OF DESIGNERS ■ Leverage the designer AFTER wireframes are developed ■ Design needs to follow function ■ Design needs to consider user experience
  • 50. CASE STUDY BILLING AGENT APPLICATION
  • 51. IDENTIFIED THE ACTORS Tech Support Agent Billing Agent Billing Superviso r Billing Dev Ops Chargeback Supervisor Chargebac k Agent
  • 52. DOCUMENTED USE CASES
  • 53. 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
  • 54. got wirefra
  • 55. 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
  • 56. 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
  • 57. contact info mcalkins@bluehost.com linkedin.com/in/markcalkins

×