iBooks on left and Kindle on right.
We sometimes get asked for downloadable versions of our Mockups documentation to go along with the online version we publish on our support site. We now publish the Mockups Docs in PDF, and additionally in the ebook reader formats EPUB (for iBooks) and MOBI (for Kindle). It's nothing fancy, just a version of our Documentation that was prepared in Apple iWork's Pages.app, and exported in all of these formats.
Since we took the time to figure out how to do this, we thought other small companies who may want to do the same may save some time by seeing the notes we took when we set up our templates and migrated our content. These steps are only useful if you're using a Mac, obviously.
Download our eBook
If you want to get an idea of what we've published, you can download the eBook for the Mockups for Desktop Documentation in the following formats.
PDF
For viewing in Acrobat reader.
EPUB
For iBooks app for iPad, and other ebook readers that support the EPUB format.
MOBI
For Amazon Kindle and other eBook readers that support the MOBI format.
Notes about downloading
Instructions for installing the EPUB and MOBI files vary depending on your device.
-
iPad: On iOS 5+ iPads, press the links to open, and you'll be prompted to Open in... the appropriate app (EPUB for iBooks and MOBI for Kindle).
-
Kindle: On Kindle devices, download the MOBI file and sync with your USB cable.
Download the Template
We learned how to publish to EPUB using the Apple article, “Creating ePub files with Pages”. We used a sample template they provided and modified it to suit our needs. Then we used a tool called Calibre to convert our exported EPUB file to MOBI, to make it available to Kindle users as well.
First start by saving our template file: eBook.template
You can simply open the file and select the menu File > Save as template... to save it on your Mac to ~/Application Support/iWork/Pages/Templates/My Templates/.
Writing and Editing
Set up your workspace:
- Styles Drawer should be visible. If it is not, select View > Show Styles Drawer.
- Inspector Should be visible. If it is not, select View > Show Inspector.
- Use Layout mode. View > Show Layout.
Start your file
- Start by opening a new blank document by select File > New from Template Chooser...
- If you added the eBook.template file above, you will see it under My Templates. Select it and click "Choose."
Set up title page
- With the first page selected, check the Layout Inspector > Section tab. "First Page is different" should be checked.
- Change the title and subtitle.
- To add a new image select the image box. Select the menu Insert Choose... (or use CMD+SHIFT+V) to place a new image.
- Change the author and edition text if necessary.
Table of contents
- Leave it alone, it gets generated automatically.
- If for some reason you have to force it to update, right-click the TOC and select Update Table of Contents from the context menu.
Adding Content
- Chapter title
- Insert the cursor at the start of a new chapter and select the Chapter Name style from the styles drawer. Enter your chapter name or paste it via Right-click > Paste and match style.
- Headings
- Use the Heading style for headings, Subheading style for subheadings.
- Body
- Select the Body style. Start entering your content.
- If you've worked on the content outside of pages, select the content you want to paste, right-click at the insertion point and select Paste and match style.
- Images
- Use Insert > Choose (CMD+SHIFT+V) to insert images at the insertion point.
- Images must be inline to work properly in EPUB an MOBI format, so be sure to check the Wrap Inspector. Make sure you have the "Inline" radio selected images they flow with the text. Check "Object causes wrap."
- Use a hard return after images.
- Use the Caption style if you want to place a centered caption below an image.
- Lists
- Put each list item on a new line, select the entire series and select the list style (bullets, numbered).
- Use CMD+\] to indent.
- Code
- Code Blocks: Use this style for blocks of code. They'll be shown in a block with a fixed-width font and yellow background.
- Inline Code: Use this style for code that's shown inline in a paragraph. They selected code will be shown in a fixed-width font and yellow background.
- Chapter Breaks
- After the last line of the chapter select the menu Insert > Section Break. This will start the next chapter on a new page.
Header/Footer
- We use the header and footer for the PDF version only, since EPUB and MOBI will strip these out, and use the document properties instead to get this information.
- The header shows the Document Title on every page except for the title page. On the Table of Contents page, double-click in the header to replace it with your document title.
- The footer shows the page number. You can leave this alone.
Exporting and Testing
First, save your Pages document, obviously. For PDF, simply select File > Export PDF. Follow the instructions below for exporting EPUB and MOBI formats.
Exporting to EPUB using Pages
- Select File > Export.
- Select the EPUB tab, and enter title and author information.
- Check the "Use first page as cover image" checkbox, and click Next.
- Ignore the warning about floating images, because you set the image wrapping properties if you followed the instructions above.
- Save.
- You have a few options to test in iPad: 1) Email the file to self as attachment and open to iBook, and 2) Open iTunes, drag to Books on left side of iTunes window under Library and Sync.
Exporting to MOBI using Calibre
- Use the Calibre app to convert EPUB to MOBI
- The process is pretty simple. Add your EPUB file to Calibre.
- Click Convert.
- I make sure that Output format is set to MOBI, and I add our company name to the Publisher field. I leave all other settings at defaults and click OK.
- After the file is converted, you can right-click the eBook in the app and choose Open Containing Folder to browser to the file on your file system. It's saved to the ~/Calibre Library/ folder.
- If you attach a Kindle you can copy the MOBI file to the Kindle.
That's all there is to it. Hope this helps.
Text components are interesting in Mockups. We have a lot of wiki-style syntax for formatting, and a lot of people have been asking to extend this to do things like insert icons into them. It's tricky because while a lot of us want icon insertion, this is one of those things that'll take some time to support with the current text engine.
Knowing how to exploit the characters available to you with the font you're using in Mockups can help you with some simple use cases. An example that came up today was that a user wanted to insert icons into the combo box, but didn't want to have to overlay icons on the component. I added a feature request to our queue to support selection in Combo Box, but in the meantime, you want to get work done, and you may not like overlaying components.
Here's a possible way to do it. This technique might only work for Desktop, and your mileage will vary if you're sharing your Mockups files and using config files for specifying an alternate font.
On my Mac, I used a dingbat pasted from character viewer, with tabs (Alt+Tab on Windows, Option+Tab on Mac) to create the leading spaces. The output looks like this:
That should work for the default font, or for system fonts.
To view the character map in Windows, go to Run and type in charmap.exe.
To view the character map on the Mac, see Apple Support instructions for setting up character viewer.
With a text component in focus, you can bring up your character viewer and select and insert characters into Mockups.
Depending on what font you're using, you can do all kinds of wacky stuff with dingbats.
Have fun with it.
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!
Occasionally I write a support response in our Get Satisfaction forum that seems like it could serve as a mini-tutorial, so I thought it might be helpful to surface those on our blog. I find that the best tips are the ones that are based on solving problems in real-world scenarios, so I'm going to start blogging these as a best tip of the week series, and put it under the tags "tips."
The Problem
One of our customers wanted to know if we had a pivot table component in Excel. We don't but that doesn't mean you can't create a datagrid that communicates the functionality of a pivot table. Mockups is just puzzle pieces you put together to communicate an idea. Here's how I'd do it.
The Solution
If you're creating pivot tables in Excel, here's a handy way to create a pivot table in Mockups by formatting the table using your Excel data.
1) Create your pivot table in Excel, and then copy the data.
2) Add a Datagrid / Table component to your Mockups canvas, and paste the copied values into the component.
3) Your pivot table is now in a table.
4) Do a little formatting if you need to indicate other aspects of the pivot table. I added some sem-transparent rectangles and icons for the headings.
Hope that gives you an idea of how use Excel data in datagrids. If you don't have a need for this now, store it in the back of your mind. You never know when a wireframing technique like this one might turn out useful to you in the future.
