Balsamiq Wireframing Workshop
-
Upload
michael-gaigg -
Category
Design
-
view
154 -
download
0
Transcript of Balsamiq Wireframing Workshop
Balsamiq / myBalsamiq Workshop
Michael Gaigg
@michaelgaigg
Examples
• Douglas County Energy Dashboard• NC DOT: SPOT On!ine• US Census: Community TIGER
Wireframes as Part of the Development Process
• Waterfall Projects- Strategy – Concept – Design – Graphics – Implementation- 2 or 3 rounds of Wireframes
• Agile- Design as part of each sprint & by the team- 1 or 2 days max- Document design decisions, consideration and implications
• Products / Solutions- Involve stakeholders- Validate technical feasibility
Dealing with Clients
• Communicate- Don’t present your wireframes in isolation- Document and explain design decisions
• Offer points of reference- Clients value your design more if they have points of reference- Show a bad design that doesn't offer as much value- Show a good design that your client is familiar with
• Move on- Don’t get hung up on details- Change skin or increase visual fidelity- Rapid prototyping to show look & feel
Best Practices - General
• Set expectations: WHY and WHAT• Think holistically and Focus in later• I love:
- Versions- Sticky notes- Assets
• Don’t use placeholders!
• Map UI Pattern Library- http://www.designingmapinterfaces.com/patterns/
Best Practices - Balsamiq
• Use latest desktop version (upgrade periodically)• One project = one directory• All .bmml files in this directory + /assets folder• Configuration
- BalsamiqMockups.cfg (in local store folder)- <documentsPath>\\mikeg\Balsamiq</documentsPath>- <fontFace>Architect Small Block</fontFace>- rememberWindowSize, useCookies, snappingEnabled, selectionColor
• MockupsToGo- https://mockupstogo.mybalsamiq.com/projects
Using Desktop & Web effectively
• Start on desktop and move to myBalsamiq (web)• Collaboration• Version Control (History)• Interactive prototype
• Upload files• Single files: Create a project on myBalsamiq & upload BMML files
from desktop (add notes)• Larger projects: Zip project and upload via "Upload new project..."
• Update files• Use "New Mockup > Upload a new mockup" to replace existing files
Assets (= Templates)
• Are "templates" stored in assets folder- Get latest from \\mikeg\Balsamiq\- Place in your local ...\Balsamiq Mockups\Assets- Avoid cloud storage (Dropbox, Google Drive, shared drives)
• 2 Types- Account (site-wide) assets- Project assets (need to be uploaded to myBalsamiq separately)
• Keep them in-sync
Assets Creation & Usage
• Group controls• Name the grouped controls
- Will create the assets folder for you- Adds the template to assets\symbols.bmml
• Usage- Use like any other control- Create main template as the frame- Override properties as needed
Sharing Strategies - Static
• Images- Clipboard- PNG- Permalink (web)
• BMML- Source files
• ZIP- Send archive to colleague
Sharing Strategies - Interactive
• PDF (desktop & web)- Slide order is important- Use the same background control on all pages & lock it- Export to actual size (100%) for best print quality- Link mockups and show linking hints
• URL (web)- First slide is the homepage- Set access: Private by default (website, blog, wiki)- Usability testing: UserTesting.com ($49 per participant), Loop11,
Usabilia, Kupima, UserZoom
Collaboration
• myBalsamiq- Invite project member- Add comments- Propose alternate versions - After some collaboration consolidate into v2
• Next Steps- Document design decision, assumptions, implications- Store code in TFS, SVN, Github- Version control really only in myBalsamiq
The Road Ahead
• Best use of our myBalsamiq subscription?- Only use when really needed- Archive when done- Do we need more projects?
• Knowledge Transfer- More (detailed/focused) Workshops?- Enhance site assets
• We can help- Review, Design, Graphics, Implementation- POC: Michael Gaigg, [email protected], x2688