Lean Sketching Tips: Flexible Fidelity & Cutting Corners

March 8th, 2013

Lean Mean Sketching 101
Here is some lean UI sketching advice – let the level of detail be a variable in your design process that which you control. Staying conscious of and knowing when to cut a corner or when to spend additional time detailing an interaction, screen or flow is a healthy thing. All sorts of design tools impose certain fidelities on to us the second we pick them up. Take on Axure RP for example and before you know it you’re sucked into aligning stuff at a pixel level whether you like it or not. Load up Adobe Fireworks too quickly and subconsciously you begin writing actual copy, comparing pixels, and choosing RGB color values. The tools which we use, just as Donald Norman said of the artifacts we design, also come with affordances – do stay aware of how much detail they ask of us.

Surely everyone by now knows that sketching tends to be low fidelity in nature as it’s often quick and dirty. However when it comes to its fidelity I think there is more to it. Sketching in particular is a lot more flexible than we think comparatively to other tools out there. I believe that sketching allows designers to work at a wider and therefore more flexible range of detail. On one hand it may be super quick, yet at the same time it also allows us to slow down and elaborate. Here are a couple of examples of what I mean:

Scribbles vs. Real Text

Scribble Text
Consider the text we show and indicate in our work. Sometimes it’s rightfully fine to just ignore detail and save time by showing it as a bunch of scribbled lines. At other times of course we may imbue our concepts with more detail and show the actual text. After all, copy has a clear connection to experience, usability, and understanding. Nevertheless, choose wisely.

Outlines vs. Depth with Contrasts

Outlines
What about outlines – they are a quick way of suggesting an area. These of course can be elaborated with depth or contrast in order to convey element priority. Lighter backgrounds can give way to darker ones when it comes to showing importance.

Partials vs. Full Screens

Partials
I love how useful partial screen sketches can be! They cut through time and effort like a knife through butter (and also save you additional time when you later have to update your working documents). Why design a full screen if all that matters is the top navigation? Sketching in this way allows the designer to emphasize by leaving other elements out, literally. Of course, at other times full screens are the way to go. Be in control!

Placeholders vs. Detailed Components

Placeholders
Placeholders abstract a component by describing what it contains with the byproduct of spare time. It’s a good way of cutting a corner. Alternatively spend additional design time on the same component and turn it into a higher fidelity object.

Approximate vs. Precise Alignment

Approximate
As mentioned previously, aligning elements to the pixel can be a time sink. Sometimes an approximate position is just as fine. Similarly, the same rule applies to how straight or crooked we draw our lines. Decide what works for you and when.

Taken together, being in greater control of a design process does matter with the level of detail being one such variable. When corners are decidedly cut however, some clear benefits do arise. The additional spare time which is brought on can then be allocated to other and more important areas instead. One beneficial use of effort early on in a process is on widening the scope for example and thinking through broader interactions as opposed to just a few screens. Another valuable benefit of cutting corners is for designing alternatives and generating more ideas for the same screen, interaction or user story. Of course as a project unfolds and more knowledge along with deeper consensus is generated, don’t forget to start raising your level of fidelity. After all, the devil is in the details. The important thing here is that you (and not the tool which you use) are in charge when the detailing begins to happen.

Credits: Jakub Linowski

Form Follows Function

February 25th, 2013

FFF
If you haven’t already heard of the Form Follows Function site, it’s definitely worth a peak at. The site showcases a bunch of interesting CSS and HTML5 experiments by Jongmin Kim, that stretch our understanding of what is possible with modern browsers. As an example, here is a CSS transform Flip Clock. The project has quite a few examples that somewhat remind me of what Joshua Davis was doing back in the early days of Flash. So if you’re tired of those bland boxes and arrows, here is how one individual has pushed HTML to its limits. Definitely inspirational.

Credits: Jongmin Kim

BLOKK Font

February 22nd, 2013

BLOKK Font
Tired of Lorem Ipsum content phrases? Here comes BLOKK font to help you out. It replaces all text with blocks to suggest generic text. Designed in Norway by Tom. Simply awesome. Available in TTF and web fonts.

BLOKK is a font for quick mock-ups and wireframing for clients who do not understand latin.

Update: also check out the related Redacted Font project by Christian Naths.

Credits: Tom Arne Bakkemoen

Sketch Map

February 12th, 2013


What do you get when you mix mind maps and sketches together? Well, Sketch Maps, of course. Catriona of InspireUX just shared an interesting approach to organizing your sketches around a central idea. Awesome big canvas sketching! I’m a firm believer that your workspace affects the way you think. How you structure your screens will affect what you end up with. In the case of these Sketch Maps, it’s clear that the structure guides the designer to maximize the number of alternative ideas. It forces the designer to explore more alternatives in a playful way as opposed to thinking about a concrete unified solution. Two thumbs up. Thanks for sharing.

Credits: Catriona Cornett

Wireframes Magazine + Facebook

February 7th, 2013

Quick update. It’s 2013, and I finally got around to hooking up a Facebook Page for Wireframes Magazine. So for anyone who now wishes to follow the posts as an alternative to RSS and/or Twitter, you can now also use FB. :) Cheers. Enjoy.

GUI Toolkits

February 6th, 2013


GUI Toolkits is the next major UI template release by Amir Khella, who brought to you Keynotopia and Axutopia. The toolkit is apparently “the largest collection of user interface components on the planet!”. It’s loaded with UI components of various platforms (iPhone, iPad, Android, Blackberry, Windows Mobile, Mac OS X, + etc) and for various tools (Illustrator, Axure, Fireworks, Omnigraffle, Keynote, Powerpoint and Visio). Amir has packed everything into a bundle, but also allows to purchase these toolkits individually. Great job!

Fully Editable Vector Shapes

All UI components and icons are vector shapes created from scratch in each tool, and can be easily edited and customized.

From Wireframes to Hi-Fi

Create wireframes and turn them into high fidelity pixel-perfect prototypes by switching the UI component style.

100% Royalty Free

3,000+ pixel perfect UI components and 200+ icons that can be used directly and freely in your commercial apps.

Get It Now

Framer – Modern Prototyping

January 30th, 2013

Framer
Framer (github) is a modern prototyping tool. More concretely, it’s a lightweight Javacript based framework for creating and prototyping complex interactions (with animations) on various mobile devices. I haven’t tried it on a mobile device yet, but in Chrome at least (doesn’t work in the Firefox browser), the transition and animations do look pretty smooth as the author claims to rely on the GPU directly. So if performance matters to you and you’re up for some transition prototyping fun, why not give this opensource tool a try.

In Koen’s own words:

Many people already prototype in the browser. It’s simple and quick. But while html/js/css/jquery gets a lot done it has some downsides:

  • It can get pretty complicated mixing all the different technologies
  • It can be hard to get the pixel perfect control you want
  • It’s not always performant, especially on mobile
  • It’s pretty far from how it will be actually implemented if you prototype for native

Framer tries to solve some of these problems by providing a very lightweight framework modeled after larger application frameworks. The basic idea is that you only need a few simple building blocks like images, animation and events to build and test complex interactions.

Credits: Koen Bok

MicroPersonas

January 23rd, 2013

MicroPersonas
MicroPersonas is a new icon set that I just came up with for building and using quick persona like characters in your interaction design deliverables. The set is founded on the belief that personas should be generated rapidly with only those characteristics that can be used to influence or inspire design action. If personas are to be leaner, more concise and live closer with interface sketches (without being lost in separate documents) then this is a materialization of that type of thinking and a step toward lighter documentation.

The set comes with 40 sketched style characters and 9 characteristics (beliefs, habits, comments, triggers, tools, needs, problems, data, and artifacts) setup in .AI (Illustrator) and .PNG (Fireworks) formats.

Purchase and download it at www.linowski.ca/micropersonas for $29. Enjoy …

Credits: Jakub Linowski (Twitter)

jKit – jQuery based UI Toolkit

January 14th, 2013

jKit
jKit is a new toolkit for jQuery, built by Fredi Bach from Switzerland, that I think has much to offer for those with HTML prototyping needs (the way prototyping is ought to be done I believe). :) The toolkit contains quite a few widgets, interactions and behaviors that help to enhance the UI while at the same time lowering the programming barrier to entry. Some of the many things that the toolkit allows for includes: a carousel, tooltips, form validation, zooming interactions on images, list cycling for styling, auto scrolling, etc, etc, etc. Anyhow, there is a lot more to it so have a look at the awesome examples and see if you it fits your needs for the next prototype you decide to build. Thanks Fredi for releasing it under an MIT license! Rock on!

In Fredi’s own words:

jKit was born in the summer of 2012. After developing almost two dozen jQuery plugins over the past years, some for myself and some for client projects at the company I work (deep AG), it was time to create something bigger and better, especially as we needed a frontend library at our company that was easy to use for our publishers and had the features we needed. But only after implementing the first few features, I started to see the real potential for this toolkit. With only about 1k per command, the plugin could add quite a lot of useful features without getting to big in size. It would meen for us that we could add this toolkit together with jQuery onto all our new client projects and easily have all the features we needed in 95% of all cases, with the benefit, that the API was easy to use and consistent. And now we’re here, with a really feature rich UI toolkit that meets our needs and gets better almost every day, mainly because we actually use it and hopefully because of the input you can give is for perfecting it more and more. I really hope you like jKit as much as I do, because at the end of the day we can all benefit from the knowledge and experiences of each others, getting this baby somewhere not even I imagine right now.

Credits: Fredi Bach (Twitter)

Indigo Studio

January 9th, 2013


Indigo Studio, a new interaction design tool, has been released just over a month ago by the Infragistics team on both MAC and Windows. The first version is completely free and there is no catch (future versions 2 and on will be paid). It has some interesting aspects to it:

Storyboarding

The tool itself is interesting in that it has two modes of working: screen and storyboard. The screen mode allows designers to express the position and layout of typical interface elements in a traditional sense – pretty standard for a modern UI prototyping tool. Storyboarding mode however allows designers to work at a higher level of abstraction and see the bigger picture with multiple screens in view. Here the designer is given the opportunity to think bigger than just screens as the links between them come into view. Additionally, stepping beyond just screens, Indigo Studio comes preloaded with helpful sketched out real world “scenes” of people using various devices in various context. This sets the tone to think beyond just the UI.

Interactions

Once elements are laid out, Indigo Studio allows designers to express a set of interactions or events that tie screens together into a clickable prototype. Interactions can be attached to various elements or plain hotspots (helpful if you simply wish to upload JPGs or sketches from another application). Typical interactions include such things as when a user: focuses, double clicks, focuses, changes a field, or right clicks.

Screen States & Transitions

Screens in Indigo Studio have been elaborated to include multiple states that offer a helpful way to reuse elements across a more complex situation. For example, placing an element (or making changes to it) on the first state of a screen will automatically duplicate the element (or changes) across all of its states. Of course secondary states can also be modified to incorporate unique changes as a result of interactions. All screens and screen states can also be tied with handy transitions whose delays and durations can be defined as well.

Sharing and Feedback

Additionally, all prototypes in Indigo Studio can also be shared online for further comments and feedback. Sharing a prototype generates a useful link which can be sent to the team.

Indigo Studio looks pretty solid for a first release and I’m curious what future versions might bring. Ready to see if it works for you? Give it a try.