This is a Symbol library with a set of grid layouts using the Bootstrap framework. The different layouts correspond to min-width and max-width media queries for different viewport dimensions, to help people doing responsive layout wireframes.
Toggling Markup visibility (CTRL+K/CMD+K) hides columns, notes, and top bar to reveal only the square rectangle of the viewport.
To use as a symbol, click the Download BMML link under the Mockup on the page above and save to one of your assets folders to use as a Symbols library, or you can download the BMML file directly from here:
https://mockupstogo.mybalsamiq.com/projects/layout/Bootstrap+Grid+Layout.bmml
In case you're unfamiliar with Symbols, they are re-usable components that you can customize. You can find documentation and tutorial for using Symbols here. A tutorial for using this symbol library is forthcoming.
Interface sketching is a path focussed on generating ideas and finding solutions.
I feel good when I have a drawing pen or pencil in my hand. Doodling, sketching, and drawing has always made me happy, whether it's trying to be artsy in life drawing classes, imagining characters while drawing with my son, or capturing ideas for interfaces. I'm not the most skilled with a pencil, but I enjoy it. It's the quick and spontaneous creation that I've always loved, and I love being able to sketch as an interface designer.
Sketching interfaces is a path focussed on generating many ideas, and to borrow from Bill Buxton, is an activity that leads to finding the right design. It's focussed on finding solutions to problems. Lately I've been thinking about how to further take the activity of physically sketching on paper, to get the same results in Mockups.
Sketching in the physical world
I think there's something interesting about capturing interface design ideas in sketches as a disposable, spontaneous action. After the conversation and research about the problem you're solving, there is always the need to visualize the solution. The quick sketch is the right tool at this time because it can be focussed on the idea without becoming attached to how it's represented visually—form is rough and function is usually the focus.
Here are some key things to keep in mind when doing interface sketches.
- create quickly
- create a lot
- don't worry about how it looks
- don't become attached
A lot of interaction designers and information architects make this part of the ideation phase easier by creating templates with small spaces for teams to create sketches within. These look like little storyboards. They're compartmentalized sheets of paper, usually 6-up or 8-up for thumbnail sketches. The idea is to produce as many ideas as possible at this stage and at this scale, and progressively add information, select, iterate, and refine.
Brandon Schauer and Leah Buley at Adaptive Path talk about using Sketchboards as a way of generating ideas with sketches and quickly performing iterations on many possible solutions. Todd Zaki Warfel of Message First also has a similar sketchboarding technique that he calls a the 6-8-5 method, where individuals produce 6-8 sketches in 5 minutes.
I've done most of my intertaface sketching on paper, but I've been wondering how to do that same sort of rapid-fire sketching early on in Mockups.
Sketching in Mockups
Over the past year I've continued to sketch on paper, and occasionally scanned and shared them with my team. But when the myBalsamiq beta/gamma matured and became more stable, I started finding myself experimenting with how to use it to do nearly everything.
Our design process at Balsamiq is a bit like a conversation that can start from any point, but which usually flows down a similar path. Here's one typical design/dev cycle for me.
- A feature is introduced from somewhere, internally or externally. A feature might be discussed in Pivotal Tracker, our issue tracker, or a quick Skype conversation may start it. From here, the story is described more completely.
- Ideas are are mocked up. We set down broad strokes. Traditionally, this is where I sketched. It's like the beginning of a conversation about a new topic, where one person introduces the topic and the dialogue ensues.
- The idea is iterated, a solution might be selected. We quickly select the idea with the most merit and iterate over it, filling in details about the flow and interaction required by the feature.
- The mockup becomes a UI Requirement when we finally all approve, and we build.
Previously I was doing all the sketching on paper, but now I'm starting to do some rougher, sketch-style ideation in Mockups using myBalsamiq. We're also doing all of our Mockups work in myBalsamiq now, so the critique and review sessions are happening there. And since myBalsamiq is much like using a wiki with version control, alternate proposals and the iterations are happening there too. All the ideation is being moved into the ecosystem we're building for ourselves.
What's a thumbnail Mockup?
Mockups has the low-fi aspect of sketch-wireframing covered. But we're still dealing with wireframes when we work in Mockups. There's already a level of detail working at wireframe scale, and when you work too early at that scale, there's the danger of diving deep before you're really ready.
It's hard to imagine that low-fidelity wireframes made with Mockups can become precious documents. The thick, crooked, sharpie-like lines and the unattractive hand drawn font are there to keep you from fussing and making things pretty and real. But they can become precious, and for many people they will. It's natural. You work with something for long enough and you become attached. This is especially why I think there is a step that you might consider before diving into full-scale Mockups, where you're even further from sweating the details, so you can see the bigger picture.
This is where thumbnail sketching steps in. I hardly ever start full scale on a wireframe. Before I have the chance to even think about the details I work with thumbnail sketches. It's like zooming 20 feet away from the thing you're designing, blurring your eyes, and just seeing the major elements of the page.
The idea with thumbnail sketching is to draw a smallish representation of your design, roughing out boxes and greeking lines of text to get an idea of what your interface will look like. You actually don't even need text to sketch the interface, just scribbled lines. You can use text captions to describe what's happening in the story.
Here's a picture to give you an idea of what I create on paper.
Ryan Singer of 37signals wrote a nice article in 2004 that illustrates his interface design approach, and shows some nice sketches like this if you're interested in seeing more sketches at this kind of scale.
Now here's a screenshot to give you an idea of how I've been doing the same thing with Mockups
I think this give you an idea of how I'm trying to make it close to the same experience in terms of speed and fidelity.
How to make thumbnail Mockups
To create our Mockups at this scale, we start out with two simple shapes: the box and the line (straight and squiggly). With these two, you can pretty much draw most of what you need for web and app interfaces, although you occasionally need other basic shapes like ellipses and triangles. Then, of course, you will probably need arrows to show directional flow.
I've created a thumbnail sketch symbols library that includes 2 sets of templates for 6 up or 8 up sets of thumbnail sketches, and a thumbnail sketching elements library. Download the "Sketch Templates" symbols library here.
Here's the basic set of sketch elements in the sketch library:
There's not much to it. These are the basic elements I used. There are straight and squiggly style lines for the text elements.
- Title/Heading
- Subtitle/Subheading
- Paragraph
- Sentence
- List
- Label
- Text Input
- Textarea
- Checkbox
- Radio button
- Button
- Horizontal rule
I can combine these with whatever geometric shapes and rectangles might be needed. I start to build up layouts quickly by dropping these blocks into place and annotate as I go.
Next you step through parts of the interface or entire views, by sketching the interaction and flow through some functionality, either in story-board form or by breaking out parts of the page into a sidebar, or what Dan Brown calls page description diagrams, illustrating state changes.
It might help to get an idea of how I do iterations on a single sketch board, so we've made one of our internal myBalsamiq projects for redesigning the Mockups heads-up-displays available for you to look at here. In particular you might want to check out the history page for my sketchboard to see how I stepped through iterations on that sketch.
Finally, you can look at how we started to work at the right resolution once we selected a concept from the sketchboard that represented the direction we wanted to go in. The wireframes for the HUD are worked on at 1:1 scale or something close to it when we're ready to start considering more than just abstract gray boxes.
What do you think?
Mockups gets faster for me when I focus on doing the right thing at the right time, and this idea is working for me for making quick sketching, or sketch-like activity more collaborative. I'm going to keep experimenting with this technique and updating the sketch library as I continue to evolve it.
Here's a bonus. If you haven't seen Dave Gray's Forms Fields and Flows video, you should check it out. In it, he writes about how sketching is just combining forms and lines, and all you really need to be able to come up with pictures is to see and use these basic shapes. This is what I'm doing most of the time when I'm designing outside of the intended use of Mockups' UI library.
Have fun!
Mockups users know that Mockups to Go (MTG) has been our go-to resource for showing off what you can make with Mockups. Because it's user-contributed, it lets the entire Mockups user community show off what kind of magic they can do with it, and gives the wider community a collection of ready-to-use UI components.
It ain't broke
We know it works the way it is, and we've got an awesome community of power users to thank for making it so valuable. But we think that taking it to the next level by bringing some new features to it will make it even more useful, and in the end, having this library at your disposal will end in nothing but your increased awesomeness as an interface designer.
What we plan to do is relaunch MTG as a myBalsamiq site, and close the Posterous site. Doing this will mean that MTG becomes something of a wiki, and what wiki means in myBalsamiq is really much more interesting than you would think.
This update is like the Create Mode of the community-driven ecosystem in the game Little Big Planet. We'll let you dream up new components and apps and build them within MTG, share it within the MTG world so others can save them as Symbols, and then others can mash it up and continue to evolve it.
This is what we're thinking:
1. Keep it open
The best part of Mockups to Go is that it's community-authored. We want to keep that going. Anyone can still publish to the new Mockups to Go. What we're going to do is create an open project using myBalsamiq. It's just going to be easier for anyone to contribute and re-use that content.
If you post anything to Mockups To Go, you agree that the Mockup will be provided publicly. We will always credit the original creator of a Mockup, but all works published on Mockups to Go are in the public domain and not covered by intellectual property rights. This allows others to use the Mockup in their own work and create derivative works without requiring attribution.
If you want to remove a Mockup version that we've ported over from the orginal Mockups To Go site, you can contact us and we'll honor your request.
2. Organize it
We want to make it easy to find the Mockups posted here. Initially, that's going to come in the form of folders. We'll keep a folder for common interface controls, text elements, browser chrome, design elements, and diagramming. We'll have separate folders for designing mobile apps for specific devices.
Folders are the start. As we continue to evolve myBalsamiq, we'll be designing search and filtering mechanisms to help make the Mockups more easily findable as the library begins to grow.
3. Make it easier to contribute
We also want to make it easier to use Mockups to Go. Currently you can create a Mockup in your Desktop app and then you email the BMML file and PNG. It's several steps to get it there, but it works. We want to make that even easier.
In the new MTG, you'll just enter the submissions project, click the New Mockup button, design your component, and save. Because this is an open wiki, people will be able to view and comment right away.
Want to see how easy it is? View this YouTube video to see how to add Mockups.
4. Let you remix and mash up
myBalsamiq is like a wiki for wireframes. It gives you the power to create versions of Mockups and provides a versioning system to branch and promote mockups.
What this means for Mockups To Go is that we are going to lean heavily on the "Propose an Alternate Mockup" feature. This feature lets users add a special type of comment that contains an edited version of the current Mockup.
To give an example, you could find a Mockup on MTG for a Progress Bar. But you might think that there are other versions of progress bars that should be added to the library. So you can click the Propose Alternate Mockup button in the comment stream, and add a proposal. If the community agrees that this is a great addition, they can add their own comments. Because we keep the entire version history of proposals in the comment stream, you will be able to download any proposal that has been submitted.
One of us at Balsamiq will be moderating, and will promote new additions when necessary. We will, of course, also test each proposal to see that group naming is done properly to work with the Symbols feature.
We think this is THE killer feature for MTG. View how Promote Alternate Mockup works in this YouTube video.
5. Integrate it with your personal work flow
The most useful part of this new world for Mockups to Go is that it will work well with Symbols.
In the beginning, what this means is that we will make sure that each mockups that has been promoted in the Mockup categories has properly named groups so that they will work as symbols. All you will need to do is click the Download BMML link for each Mockup and save it to your account or project assets folder on your computer and it will magically appear as a symbol or symbol library in the Mockups app.
The goal is to eventually integrate the library into the Desktop and myBalsamiq apps to provide a seamless experience for browsing for design pattern libraries and MTG components, click a button to import into your app, and start using them right away.
What do you think?
So this is our initial plan:
- We will be closing down the old Posterous site and cutting over to the new myBalsamiq MTG site.
- All new submissions will go to the new site.
- We're going to do this some time next week.
We want to keep expanding MTG, but your contributions are what drive it's usefulness. We'd love to hear your thoughts and ideas for making it better!
So without further ado, here's the link to preview our work in progress on the new Mockups to Go. We're not quite done, so expect some rough edges.
