When starting a new project it will probably take you at least 15-20 minutes of getting your stuff together. Many times I found that exactly these routine tasks are the most annoying which keep us from being productive (and happy). So, go get the html5boilerplate.com and be happy 🙂
This project by 5 driven guys, Nicolas Gallagher, Hans Christian Reinl, Mathias Bynens, Paul Irish, Cãtãlin Mariş, and Divya Manian is a great starting point for any HTML based web development. Simply awesome!
The boilerplate bundle includes:
- Directory structure (index file, img dir, js dir, css dir, etc.)
- CSS reset using normalize.css
- HTML5 feature detection through Modernizr
- Google Analytics snippet (just replace your own id)
- Other really useful tips and tricks for better development
After having used Balsamiq for some years now I was excited to try MyBalsamiq which is basically Balsamiq on the web which allows for better sharing and collaboration with your team and clients. This blog article intents to share my experiences and gotchas of using MyBalsamiq with you.
Tips & Tricks
Setting the stage is key to a successful use of MyBalsamiq. Explain to your team members and clients that wireframing helps to communicate ideas and the WHY and WHAT we are doing by intentionally stripping out visual fidelity so one doesn't get distracted with the HOW.
I typically create the first version of any design using Balsamiq for desktop. I then upload it to a project folder, dub it v1 (version 1) and share it with the team (and client) so they can start commenting or proposing alternate versions as part of the thread. After reviewing and discussing the proposed changes, missing items, misunderstood elements, etc. I create a revised version which instead of simply adding another comment/alternative I upload once again, this time naming it v2 (version 2).
Again I open it up for a round of comments. I strongly recommend finalizing the design at this point by creating a document that states the purpose of the screen, specifies any requirements and uses the final mockup as the proposed design. Move on! If you for whatever reason you cannot move on, then this might be a strong indicator that you might have a problem in your project structure.
Involve your clients
Yes, I create beautiful designs just to see them being destroyed by ignorant clients. Well, I guess it's the other way around, designers tend to be attached to their intellectual creation more often than they should. Well, chicken or egg, involving your client in the process is always a win-win situation. So do it, don't hesitate having your design dissected, your ideas challenged and your assumptions validated!
Notes are your Friends
Sometimes I start a wireframe with an empty frame and a bunch of sticky notes. I slowly fill the sticky notes with bullet points of requirements or anything I feel belongs into this space. Only later I start designing the actual components that make up the screen.
In the same way I ask my clients to use sticky notes to annotate anything they feel needs to be said about the design, missing items, assumptions that aren't reflected, new ideas, etc. It really helps commenting on concrete items rather than abstract word constructs. Remember, sticky notes are your best friends.
Assets are grouped items with a name that can be used like any other sketch control. Assets can range from custom frames, re-usable templates, industry-specific or device depended controls, etc. Spend some time creating assets and share them either site-wide or on a project by project basis. Have a look at the popular free map controls I've created some time ago to see what I mean.
Holistic vs. Focused
I almost never get into too much detail upfront. That's for multiple reasons:
- It's really easy getting hung up in details
- More often than not you will find yourself wasting precious time on something that is still in flux and bound to be thrown away anyway
- You lose sight of the bigger picture (navigation architecture, overall layout)
- It becomes harder and harder to make changes without rethinking your concept/layout
This tip becomes a rule when working in an agile environment. You need to design the holistic view upfront, have a solid concept in place that describes how you will integrate the pieces later. Think a lot and validate (e.g. usability testing on your wireframes)!
Start the holistic design as soon as you have a good handle on the available user stories and (ideally) have it done before the first sprint planning meeting - I've heard the term Sprint 0 used a lot.
Encourage the sprint master to create a "Design UI" task which will be added to each epic or even user story that requires user interface design - this is the place to design details.
Many times I create a concept sheet or experience workflow diagram directly in wireframes. I use simple sticky notes or window controls and connect them with arrows to show how a user will flow through the application. Very often these boxes later become pages that I need to design which is kinda neat because I can directly link these pages from the workflow diagram. Managers really appreciate this high-level view and are able to comprehend better the overall structure of the site/application. You will see the quality of questions improve as well 😉
Your clients and project managers love this feature: launch prototype. We've used it before on the desktop but now we have it available online using a private url. There is also a great article about how to integrate with the leading user testing tools (Usabilla, UserZoom,...).
Version history seems to be nice to have but it actually turns out to be indispensable. A designer makes decisions based on observations and changing requirements (and sometimes taste ;)). Being able to compare versions over time proves to be the best line of argumentation when it comes to explaining why we reached this conclusion?. Sometimes it is less the "how we did it" rather than the "how we got there" piece!
Get MyBalsamiq for (almost) free
Full disclosure: I'm not getting a dime for saying this. But here is how you turn your existing desktop licenses into an (almost) free subscription: "...existing Mockups for Desktop customers will be able to apply half of what you paid for Mockups for Desktop towards myBalsamiq credit."
Any invited user to myBalsamiq can use the online version for free basically saving on desktop licenses. While not as slick as desktop, it's a nice treat.
Check-in / Check-out
I'd really love to see a version control system that can be connected to your desktop version. Basic functionality would be:
- Get latest version(s) from myBalsamiq (and synchronize with desktop)
- Check-in a newer version from desktop (and propose as new)
- Show me changes for all files (i.e. compare your desktop version to myBalsamiq)
Right now I find it really difficult to get the latest version from the web, modify on desktop and update existing thread with newer version. Balsamiq team: any plans for such an integration?
High-level (conceptual) view of all screens
Above I've talked about sketching the conceptual workflow. While starting in v2.2 the Balsamiq team added a 'site map' control (very cool btw), this doesn't really fit my need to show the workflow. I guess for now I need to stick to my connected notes 🙁
- 48 Outstanding WordPress Themes of June 2011 (by Madalin Tudose)
- Useful Wireframing and Prototyping Tools – Roundup (by Jacob Creech)
- Introducing Usaura, the Fastest Way to Run Click Tests (by Dmitry Fadeyev)
- Observations versus Recommendations (by Harry Brignull) - use the FOG method, mark your statements Fact, Opinion or Guess
- Top 10 Free Source Code Editors – Reviewed (by hongkiat) - a listing of 11 free editors with their Pros and Cons
- How to Spot and Avoid Web Copy that Kills Websites (by Rick Sloboda) - here some downfalls of the often overlooked but actually really important subject of copy on the web
- Login / Registration Form: Ideas and Beautiful Examples (by bellefoong) - a little login inspiration, nice collection
- Progressive Disclosure in User Interfaces (by Alexander Dawson) - nice intro plus advantages and disadvantages
- The 5 Models Of Content Curation (by Rohit Bhargava) - content curation in its various situations explained
- 9 Ways To A Better Interview (by Mitch Joel) - in my opinion it boils down to caring about the other person and the subject and not getting hung up on standard questions and a script
- Tips for Creating an Excellent E-Commerce Website (by Mathew Carpenter) - some interesting tips here
- Creating a User Interface That Speaks Your Users’ Language (by Cedric Savarese) - about the challenge of finding a common language - in plain English.
- 37 Productivity Tips for Working From Anywhere (by Sarah Kessler) - there is at least one tip that will help you, I promise.
- The Next Level of Design: Being Unique (by John O’Nolan) - aka: designing with edge, thinking outside the box, "not stopping until you hit that eureka moment".
- Designing the #newtwitter (by @Twitter) - The new #NewTwitter proportions were not left to chance (at least in their narrowest width).
- Understanding Blind Users' Web Accessibility and Usability Problem (by Babu, Rakesh; Singh, Rahul; and Ganesh, Jai) - the authors outline seven stages of action and what they mean from a designers point of view (think checkpoints).
- A Case for Coding Your Wireframes (by Jake Rocheleau) - "Avoid detours by focusing on your main goals." - sounds so easy, right? Have a clear strategy in mind or else you are doomed to fail (delay at the very least).
- What Websites Can Learn From Mobile (by Michael Wilson) - funny, but my take-away is that 'constraints improve creative design'
- The Perfect Web Designer Should Not Exist (by Jason Gross) - base your design decisions on your sites' target audience and their goals - nothing else matters... uuuhhhhhhh....
- 97 Things to Know about Usability (by Jeff Sauro) - fantastic, fantastic, fantastic - must read!!
- Top 5 Web Font Design Trends to Follow (by Christina Warren) - WOFF-WOFF, love to hear that dog barking..
- Debunking the Myths of Remote Usability Studies (by Corrie Kwan, Jin Li, and May Wong) - some myths might seem obvious, but others - drawn from first-hand experience - are not. Anyway, lot's of good advise to be considered.
- How to Communicate With Your Clients (by Joel Reyes) - In short: Listen, Ask, Consult, Respect, Reason
- Beginner’s Guide to SEO: Best Practices – Part 3/3, Part 2/3, Part 1/3 (by hongkiat) - Search Engine Optimization is a must in all our toolboxes. Excellent three-part tutorial, thx!
- 250 Quick Web Design Tips (Part 2) (Part 1) (by Alexander Dawson) - about Browsers, Styles, Techniques, Marketing and all other good stuff.
- Agile UX and The One Change That Changes Everything (by Anders Ramsay) - Start Building Earlier through Rapid and Rich Communication and Just-in-Time Detail.
As always, send me your link or mention it in the comments. Anything related to this blog is much appreciated by all of us. Thanks!