Sketch Zine

This is a little zine I made from my Sketch talk.

I’m putting these in the package when people buy a sketchbook. I’ll be sending one out soon to everyone who already purchased a book. Still working on setting up international shipping. :)

A little zine has been something I’ve always wanted to make. This is a zine in the traditional, DIY photocopy sense. It’s not an art piece, as so many beautiful zines are these days. But maybe I’ll make something more refined in the future.

Aspect ratio calculators

In my Skillshare course there’s a brief moment where I show a ratio calculator that I use for doing things like figuring out dimensions of containers while designing.

The idea is simple. You have a ratio like 16:9, 4:3, 9:6, etc. and want to see how to scale another object with that ratio using a fixed dimension, e.g. you know the width.

Here are a few that I like:

Aspect Ratio Calculator, a free web calculator by Andrew Hedges that I’ve used for years.

Aspect Ratio Calculator for Mac, by David Wolf. Available via the Mac App Store for $3.99.

Aspect Ratio Calculator for Chrome, a Google Chrome extension that’s always available if you’re working in the browser. (via @ryanshafer)

Skillshare Course on Rapid Wireframing

I published a free course for Balsamiq users on Skillshare. The course, Rapid Wireframing: Finding the Right Product Design, is designed for those new to Balsamiq, but also features some demonstration of new features like Quick Draw (using the mouse to block out wireframe zones) and Alternates (creating alternate versions of screens). If you’re a veteran user, you may be interested in checking that out, and updating to the latest version to take advantage of these useful new ways of working on projects.

Here’s a trailer to give you an idea of what to expect.

You’ll learn how to successfully create wireframes for early stage product design as I show how to use Balsamiq Mockups to design interfaces with product teams, using the example requirements from UX Apprentice.

In the 51 minute course, you’ll see how concept selection can be tackled with low-fidelity wireframes, learn to create rough sketches to explore ideas, and then transform them into interaction design solutions that can be refined quickly, and polished for presentation.

The class is perfect for product managers, developers, and those new to designing with wireframes. No prior knowledge or experience with interface design is required. By the end, you’ll be able to present wireframes for a finished product idea and demonstrate a clickable prototype.

Start taking the free course at Skillshare now!

5.25 Inch Floppy Sketchbook Is Back

Remember these? From 2009-2010 I these sketchbooks for a while, using a 5.25” floppy disk as a notebook cover. I kind of missed them, so I made a limited number in blank and grid paper.

It’s a wirebound 5.25 inch square sketchbook with about 120-130 pages (60-65 sheets) of 70 pound white vellum paper, hand-crafted by me in my home North of the SF Bay. You can buy a book with blank sheets or one printed with 1cm grid in warm gray ink. Inside you’ll find a floppy disk pocket, and a disk label. Hope you like them! They’re a head turner. :)

Get yours at the shop while they last! Shipping inside the US only this time around.

Too Damn High Five Emoticon for Hipchat

I thought that our company chat was in dire need of a (toodamnhighfive) emoticon. As with the needed (coolio), I’ll forgive the omission and provide one to fill the gap.

Principle for Mac: Animation and Prototyping

Principle for Mac ($99) is a tool for designing animation, primarily for mobile devices. It provides an easy to use interface for prototyping interaction, transitions, or other animated elements in your interface.

You can design with text, rectangles (which can modified with border radius to make circles), or graphics created with other tools, and then hook up animations for actions like taps, scrolling, and drag, and use the drivers UI to connect those actions to drive other properties. An animation UI gives you control over timing and easing for specific transitions, but the defaults also work well without customization. Really nice.

In the prototype window, you can test out your actions and animations. Pressing the video icon will record the session and allow you to export as a .mov file or animated gif.

They have a gallery of starter templates to help you with basic needs. There’s also some great examples of what people are building over on Dribble.

Read more about Principle for Mac.

Roots Static Site Builder

Roots is an open source static site compiler that can help take some of the work out of setting up your own build tasks using taskrunners like gulp or grunt. It runs in your terminal and requires minimal setup. Design Sharing via Slack

Relay looks like it’ll be a nice design communication tool for teams using Slack. Capture screens directly from Adobe CC, Sketch, Chrome, or anything else on your screen and it’ll be ready for critique in Slack, with comments and annotation.

(Hatip Leon)

Creating Polished Wireframes in Balsamiq

For Balsamiq users or anyone that bemoans handwritten fonts and sketchy wireframes, I wrote an article to show how to create polished wireframes in Balsamiq on our UX blog. It shows how to use the wireframe skin with a few base controls, and techniques to achieve a minimalist aesthetic. It’s meant for those who need to create client-ready deliverables, or for when the sketchy-skin gets in the way of communicating your ideas. You can keep generating screens fast, but polish the details when you need to.

Read the article at the Balsamiq blog.

Jim Kalbach on Jazz as a Model for the Way Businesses Work

Jim Kalbach talks about the improvisational model of Jazz as a metaphor for the way some businesses approach collaboration today. What was probably seen a few years ago as a radical way of structuring companies to organize around the work rather than using inflexible business units as boundaries, is now more commonplace.

To demonstrate what happens in the teamwork of a group of jazz performers, Kalbach assembled a group of musicians to perform a song they hadn’t played together before, and described how jazz performances “work” as a type of collaboration. These are the characteristics we can learn from.

Empathy: Everyone brings something unique to the performance, but it’s only when the individuals come together that great music happens. So while Jazz performers allows for individuality to shine through, it’s in the listening and working with each musician’s solo that the whole emerges.

Embracing uncertainty: The idea of approaching each performance with an expectation that what may unfold is unknown means that performers can experiment and improvise.

Lastly, improvisation in a team doesn’t mean doing as you please. Without some rules or guidelines, it’d be easier to make a mess than music worth listening to. It could be a set of patterns, guidelines, and principles that set the stage for the work to be done. In jazz it can mean using song structure like working within the AABA song pattern so that the musicians have queues for how the individual moments can be framed. It can also mean having principles that the players have a common understanding of, so they can work with how the others’ use them.

These three points can be easily applied to how businesses organize and do work. I like the chart he shows, giving a snapshot of how Spotify’s organic Guild structure (PDF) has allowed their Agile teams to make do with a fast growing company. It’s a great example showing how a business organizes teams into organic groups around projects. This makes it possible to flex with the constantly changing organization and business goals in order to get things done. This way of working is the antithesis of what Kalbach refers to as the command and control model of work from the Drucker age of business management for information work. The work becomes more important as does embracing the uncertainty of flatter and continuously morphing teams.

Where I work, a lot of our inspiration comes from the same examples of companies that Kalbach references like Gore and Valve–companies that have created flatter, work-oriented teams where the focus on how the company works is as important as the products. Our founder Peldi’s greatest achievement in many of our opinions is not the product, but the company he’s created. Our most interesting meetings have been discussion focussed on continuous improvement, rather than anything related to technology.

This is an inspiring presentation, and I love the connection made with Jazz performance. You can see more talks from Jim at his blog Experiencing Information.

Hat tip to @jboogie

Hello Hugo: Konigi is now a Static Site

Drupal->Hugo->WordPress, oh my! I migrated this site again since writing this in 2015, this time from Hugo to WordPress in 2017. Hugo served me well for those years in hibernation.

After many years of being a Drupal user, from version 2 when I started to version 6 on this site, I’ve made the move from PHP/MySQL blog to full on static site. Here’s why and how I did it.

Choosing Static Site Generators

In the past few years, I’ve taken a few sites backwards from Drupal and WordPress into the age of static sites. In many ways, it feels like going back to the beginning of my career, when I used Perl and Shell scripts to generate sites in my first job, and later to more sophisticated site generation using MovableType as a middle man.

As each of the small personal projects I’ve worked on became bigger, I started to miss how simple things used to be, and loathe how much I had to babysit my site or pay a lot for better cloud MySQL instances. In my day job, we also had to deal with the regular security patches on WP and Drupal, and it became a drag.

I started our first experiment by moving a site to Hammer, then shortly after moved it to become a grunt generated site. Those sites are happily chugging along, maintained by a team that generates the pages with grunt. Our main site at is one of them.

After that year or so of being happy with how simple those site are to maintain, I started looking at more powerful static site generators and finally migrated this site content off of Drupal so it can be used by a static generator. I now use Hugo to generate the few thousand pages of this site in a few seconds and sync it to AWS S3 using their static site hosting options.

Hugo is a generator written in the Go programming language. I chose Hugo over a few of the other great options out there like Jekkyl and Octopress because of its speed, support for taxonomies, and markdown support. I’m no programmer, so my implementation of Hugo is very simple and I put together my theme using only the examples in the docs, and a couple of questions to the discussion forum.

I still haven’t gotten my head around how to do more complex things yet, and I don’t want to be the newb that inundates the forum with dense questions. If you happen to find yourself in that forum you’ll see how little I understand, despite reading docs. But for now, after a few weeks of work with only a few days of template building, it’s doing nearly everything I did in Drupal, with none of the overhead.

Migrating Content Off Drupal

To get started, I created a modified version of my Drupal theme that exports all of my content to text files. I removed all the views and only exported the actual node contents. Each node includes Hugo’s “front matter” at the top of each page. This is the metadata that describes title, tags, permalink slug, and publish date. I pared down my taxonomy use on this site to one tag taxonomy for the time being to simplify things. I had taxonomies for people, company, color, etc.

After testing to see that what I output was formatted to properly get read by Hugo, I then used httrack to download all of the nodes of content to my machine. Each file was downloaded into a subfolder for the corresponding sections used by the global nav and the url paths on the site. I ran the files all through a file renamer to add .md (markdown) extensions. I use Name Mangler on the Mac for renaming.

These articles helped with figuring out the export part of the process.

Building it in Hugo

Next step was to install Hugo and generate a basic Hugo site with the .md files I downloaded. The Hugo docs show you how to create a Hugo site and install a theme. I did this first to test out the content. Then I started learning how templates work and built my own straight from the docs, looking at a few examples to figure out how to create taxonomy views. I started with a skeleton template that just spits out a nav and bodies, then made some section views.

Next was CSS/JS asset management. I copied over my SASS files and JS. I also decided to switch from the Bootstrap grid to Foundation, so I stripped down a lot of styles and the layout. After years of changing layout ideas, it’s nice to trim the SASS layout files down to nothing.

To manage the pre-processing, minifying and building of JS and SASS/CSS I had to set up a task manager. I decided to learn how Gulp handles this compared to Grunt, and I like how simple and clean my Gulpfile.js is. It works about the same as Grunt, so there was little to learn there. This post on getting started with gulp is good if all you’re interested in is processing Sass. There’s plenty of StackOverflow articles on processing JS. I only run gulp whenever I make a change to JS or SASS which is rare, and the minified files get included with the Hugo build command.

My process for writing new content now is to start up Atom, create a new .md file in the appropriate directory, then run “hugo server –watch” to test it. When I’m happy with my writing, I run “hugo” to build files into my /public directory and I’m ready to deploy.

The last step is a command that uses s3cmd to sync only the changed pages to the generated public directory, removing deletions. See the options in the docs for doing this. There are many blog posts with different suggestions for how to deploy, but I found all I needed in this one on Programblings.

That’s what I’ve done to date and it’s working well. My next steps are to get my content, which is on Git, hooked up to a middleman that will automate the deploy part of the process. If you’re interested in seeing how I created this site, you can look at my theme templates. The entire site is publicly viewable on Github.

So far I’m very happy, and after a few years of trying different tools, this set feels right… until the next change. The older I get, however, the less I want to waste time on stuff like this, so it feels like a keeper. Huge thanks to Steve Francia for creating Hugo and to everyone who contribute to it. If a simple-minded UX designer like me can use it, that’s saying a lot.

Static Site Generator Directories

These are the 2 main directories listing generators that you can use to build a static site. Each offers a sortable lists to browse by user rating or language.

StaticGen - Lists the top Open Source static site generators only. Filter by language. Sort by rating, issues, forks, titles.

Static Site Generators - Lists Open Source and Commercial static site generators. Sort by rating, license, and language.

Balsamiq Mockups Version 3 Released

We released version 3 of Balsamiq Mockups today! There's plenty to see including an updated interface, new file format (single packaged project files), better asset and symbols management, the addition of FontAwesome icons, and plenty of improvements under the surface. We point out some of the highlights in the video below.

There's plenty more under the hood, and lots of new stuff on deck. You can read all about it in the announcement. It's a free update to existing users. Download it here.

Special thanks to all of the great customers giving us feedback over the years, and particularly those who we talked to in our forum, in our Beta group, our usability test sessions, and in the hallways at Interaction 15 this year. Much more to come!

Astropad: Use iPad as Mac Graphics Tablet

AstroPad turns your iPad into a Mac graphics tablet, mirroring a section of your Mac’s screen when connected via WiFi or USB. Once connected you can sketch/draw on the tablet with an iPad stylus or finger. It will operate pretty much like a Wacom graphics tablet when you’re using a Desktop graphics app with a drawing tool like Pixelmator, Photoshop, or Sketchbook Pro.


PAPERPROTO is a 3D printable model to use for paper prototyping mobile applications, in the style of a story scroll. You can download the file or buy the model for printing on demand directly from Shapeways.

Via Zeke Franco

Tumblr Fave Animation

This is a small animation of the heart/broken heart that is shown when favoriting or unfaving a Tumblr post in the mobile app.

Pinterest Tag Search and Suggestions

Pinterest's search feature shows tag and board suggestions in the auto-completion list. Select terms/tags to display, and a horizontal list (accordion) of correlating tags to refine or narrow your your search are displayed below the search box.

Pinterest Mobile Radial Menus

Pinterest's mobile app displays a radial menu if you tap on an image. The menu items are for functions that are also available using the icons and buttons in the top of the UI for allowing you to pin, like, or send the image.

UX Check

UX Check is a Google Chrome extension for reviewing web sites and apps against Jakob Neilsen’s Usability Heuristics.

The tool opens the heuristics in a side panel next to the website you enter. You select a problem area on the screen, related to one of the usability heuristics and a callout appears for you to add notes and recommendations. When you"re done a report is available with screenshots and your notes for each issue. You can download the report as HTML or in Word .docx format.

Looks like a nice tool for evaluating web sites in Chrome, as long as the pages you"re reviewing have selectable DOM elements.

The Accessibility Project

The A11Y project is a community-driven effort to make web accessibility easier. They provide articles on best practices for doing front end development with accessibility in mind. The site includes an accessibility checklist, a pattern library for accessible widgets, and a list of resources for diving deeper into web accessibility.