Posts Tagged ‘sketching’

Interactive Sketching Notation v1.3

Wednesday, November 21st, 2012

The next version of the Interactive Sketching Notation is out for those who like to sketch electronically and tell stories with big canvases. The Adobe Illustrator template has been mostly extended to include more icons, device screens, and components amongst a few other minor fixes.

There are now 80 common user interface icons in a sketch based style. Proportionally sized screens now include devices such as: iPhone 4 & 5, two popular Windows 8 phones (Nokia Lumia 920 & HTC Windows Phone 8X), Samsung Galaxy Nexus, Samsung Galaxy S3, iPad, iPad Mini, Nexus 7, and a bunch of browser screens. Newly added components include such things as a: video player, map, chart, two new tooltips, and tabs. Finally, I’m also am trying out a second user story style which is composed of a: user type, scenario title, scenario description, need, and problem – still experimental. If anyone has any symbols, components or feedback to be included in a future release, please let me know. Enjoy. :)

Purchase & Download here.

Credits: Jakub Linowski

How I Sketch: An Introduction

Wednesday, August 15th, 2012

I’ve decided to do a screencast of How I Sketch and the style that came to be known as the Interactive Sketching Notation. It’s around 13 minutes in length going over the basic concepts, some of the key benefits, as well as an example of a real world project. The video is in HD so you might have to expand to full screen in order to experience the real deal. Somewhere at the end you might also find a few minutes of attempted real time UI design. :) Let me know if it’s useful, and if it is, I might do another one of these in the future. I’ve also setup a Vimeo Channel for this just in case. Enjoy. Cheers.

If you need the Adobe Illustrator template, you can purchase it right here for $29.

Credits: Jakub Linowski

15 Dribbble UI Sketching Designers

Monday, April 23rd, 2012

Dribbble UI Sketching Designers
There are those who design, and then there are those who design in the open – enter Although sharing a 300 by 400px image perhaps might work if you want to show off a shiny button style, maybe it isn’t always the best constraint for interaction type of work (flows, multiple screens, scenarios and stuff in between the screens). Nevertheless the other day I was looking through out of curiosity for some designers who might be doing a bit of UI sketching type of work. I guess I always find it interesting to look at how others sketch. Here is a bit of a list (including myself at the bottom) for those who might be interested. :)

Sketch More, Sketch Better: The Buzz at Interaction12

Thursday, March 1st, 2012

Article by:

I am a sketcher. I recently realized quite how much sketching defines what I do when someone pointed out to me that I rarely present any work without a pen in my hand. Whether I’m drawing on a whiteboard or quickly sketching on paper sketching that helps me to illustrate what I’m talking about. So it was an interesting challenge when I was asked to present a workshop at the Interaction12 conference in Dublin, where I would be doing the talking but the participants would be doing the sketching.

Looking at the number of workshops and presentations at the conference that were related in some way to sketching, and the number of people who have viewed my presentation slides on Slideshare (nearly 70k views in just over a week), I think it’s pretty safe to say that the perceived lack of sketching skills in the digital design community is something that has obviously touched a nerve. With all the rhetoric around collaboration with coders and clients through sketching, and the focus on lesser deliverables, this was obviously well timed.

I do believe that by breaking the ‘art’ of sketching down to a set of basic techniques that can be practiced, anyone can create sketches that not only do a good job of communicating but also look good. But before I dived into the practical side of the workshop I spent a bit of time asking people to think about 2 really important aspects that underpin all of the techniques that I was about to share: ‘what is a sketch?’ And ‘why sketch?’

What is a sketch? (and what isn’t?)

Firstly, and possibly most importantly, I like to make a distinction between sketching and drawing.

A sketch is not the same as a drawing in 2 important ways: execution and intent.

Aside from the obvious wiggly lines vs. straight lines type of differences, it’s easy to look quickly at something and decide whether it’s a sketch or a drawing. Quality and fidelity are easy markers but there’s more to it than that.

Unlike drawings, sketches aren’t precise and often include mistakes or corrections. A drawing is closer to a finalized design or idea. From a drawing you can get a good idea what the whole thing will look like. And that’s often what stops people picking up a pen. Half of the time when people are reluctant to sketch it’s because they are scared that their sketches will be judged by the same standards we use to judge a drawing or a polished design.

A good sketch doesn’t try to describe everything in detail (the bit that counts is ‘in focus’ and the rest is vaguely described for context), but it gives you enough information to get the point across.

When I sketch I’m not looking to create a beautiful, polished or even finished object (sketches can be beautiful, but they don’t have to be). What I’m trying to do is to capture an idea so that I can communicate it to others and explore whether or not it works. I’m not trying to do visual design on paper. We’ve all been in scenarios where the bottom line is boss and thinking time is seen as a luxury. If I’m spending time articulating all of my ideas in high fidelity on paper, it’s going to take way more time than I have.

The point of sketching is not to produce polished outputs, it’s to explore, challenge and validate ideas. That’s not to say that sketches can’t look good. They can, and with a bit of practice they will. But it’s not so much about what they look like as what they allow you to achieve.

Fast and free

I like to sketch because it’s quick and free (and not just in the financial sense). I can explore ideas on paper much quicker than I can in Illustrator or other tools and I’m not tempted to fall back on libraries of stock elements to solve problems because it’s easy.

Plus, the temptation in doing things digitally is to make things too neat.

When I am about to sketch on paper, knowing that it will be harder to undo, I hold myself back and think twice before the ink or lead leaves a mark … When I sketch electronically, this worry disappears as I know that I don’t have to generate the right ideas, but instead can easily correct myself if something needs adjusting. [Jakub Linowski]

Show your workings

I’m not against sketching digitally. If you can work as quickly as you can on pencil and explore as many ideas in the same way, then the medium isn’t really the issue. My worry is that working digitally encourages us to tidy up and erase mistakes, when often the mistakes are just as important as the final idea. If we are constantly hitting undo, all of those mistake are lost. We end up with a polished final sketch, but no record or evidence of how we got there.

When we’re reluctant to capture our ideas as sketches, often those ideas don’t get captured or aren’t explored as fully as they might be. Sketching is a really useful ideation and communication tool. The ‘art’ of sketching can be learned and practiced, but the real value is in the generating of ideas and the discussions around those ideas that sketches prompt.

Sketching shouldn’t always be solo

Jakub makes a really nice point in his piece on digital sketching:

Looking back, sketching has been wonderful at giving rise to design
representations that naturally act as conversation starters

I agree wholeheartedly with this. When I start to address a design challenge, my sketches are much looser and lower fidelity, but still enough to prompt and aid those conversations.

Sketches do not have to be pretty, beautiful or even immediately understandable by others. However, you should be able to explain your sketches and ideas when anyone asks about them.

– Sketching User Experiences [Saul Greenberg, Sheelagh Carpendale, Nicolai Marquardt & Bill Buxton]

Often the sketch will develop and evolve over the course of the conversation, as per Jakub’s point here:

Perhaps the use of paper can still be justified in collaborative sketching sessions when there‘s more than one designer at the table and the design activity happens simultaneously in real time.

I am a big advocate of this style, with one significant difference. I’ve seen this work successfully (and often) where the collaborators around the table aren’t just designers. Some of my most successful ideation sessions (for generating good design based around insight) have been when there have been designers, clients/stakeholders and developers all contributing and sketching – not just the designers.

Part of the beauty of sketching is that it doesn’t look like the finished product. It’s like creating wireframes with ‘wiggly’ sketch lines to reassure the client that this isn’t what it’s going to end up looking like – except you’re actually sketching rather than making your digital version look sort of like a sketch. The key thing here is that people don’t mind scribbling on a sketch to show you what they mean. And then you’re on your way to collaborative design. Happy days.

Sketching in code

I heard the phrase ‘sketching in code’ mentioned more than a few times at IXD12. In his presentation, Jonas Löwgren talked about (and showed) how really complex interactions can sometimes be best communicated by building them out (show don’t tell).

Although I don’t disagree with this, I don’t think it’s always necessary when we’re dealing with less complex interactions, as many of us are compared to the things Jonas demonstrated.

Committing to building something (as opposed to sketching it) definitely restricts the way that I design. It certainly takes me longer to build it than to sketch it, and as a consequence I find myself exploring less ideas. Plus, if I’ve spent time building something, I’m more inclined to keep elements and re-use them rather than starting from a blank slate. Perhaps this is a symptom of me needing to get more comfortable in code the way I am encouraging people to get more comfortable with a pen or pencil?

Sketch more, sketch better

So, in short: sketching is good, mistakes are ok, neater isn’t necessarily better and when it comes down to brass tacks, good well thought through ideas are what counts.

Like anything, the more you practice, the better you’ll get. There’s more about what is/is not a sketch as well as some basic techniques and exercises in my Sketching Interfaces workshop sides.

Credits: Sam Smith

Remote Collaborative Sketching

Saturday, February 25th, 2012

Remote Collaborative Sketching
Jeff recently has been experimenting with a remote sketching technique in a distributed team scenario. In the article, he describes the setup, technique and learnings in great detail. Interesting things that were mentioned included:

  1. use of multiple Skype accounts, cameras and dual monitors (to see both the sketches and the team in parallel)
  2. initial priming of participants
  3. use of an excel spreadsheet for rapid idea generation
  4. use of 1 and 6 screen per page templates
  5. facilitation of a 8 person team

Awesome work and thanks for sharing!

Credits: Jeff Gothelf

Sketching Interfaces Workshop Slides

Friday, February 3rd, 2012

Sketching Interfaces Workshop
Jason & Sam are over at the Dublin Interaction12 conference this year and have been running a Sketching Interfaces Workshop for which they released some slides. The slides are loaded with a few handy tips and rants (i.e. of what sketches are not). They also look at sketching as a number of activities pertaining to: warming up, capturing, focusing, writing, styling, and adding interaction. I’m sure looking through slides probably isn’t as awesome as meeting these two in person at an event. At least it’s something for those who weren’t able to make it to Ireland. :) Cheers and thanks for sharing!

Credits: Jason Mesut & Sam Smith

Personal Pattern Books

Friday, May 27th, 2011

A few weeks ago, I started a personal pattern project which I’m finding useful and thought to share as a potential design activity. After grabbing a blank notebook, I basically began sketching out and writing down various examples of interesting interactions I find all over the web. The idea isn’t completely new as design and interface patterns have been around us for quite a while now. In fact, some really awesome collections have sprung up that are great for designing interactions and interfaces. If you’re seeking inspiration from these publicly available pattern libraries some existing resources include:

  1. UI Patterns
  2. Pattern Tap
  3. Patternry
  4. Little Big Details
  5. Designing Web Interfaces: Principles and Patterns for Rich Interactions (Book)
  6. – Patterns in Interaction Design
  8. Quince

By personalizing these patterns however, there could be a few added benefits beyond just observing other people’s work passively. For one, I’m beginning to notice that after drawing out some selected examples it becomes easier to internalize and remember them later on in the future. When working on projects, these sketched patterns tend to emerge from memory more vividly than ones that were just seen somewhere. Secondly, when recording these patterns personally it is also possible to gain another chance at practising and evolving your own personal sketching style. Patterns are a great source of more complex user-interface interactions which may push the boundaries of your visual communication and sketching abilities.

There is no set standard on how to record them. Some things which I thought might be useful to include were elements such as: a title, a few screens (tied together with user actions), a simple description, a date, and an example URL. But really, these being personal, it’s all up to you to come up with your own style. So go ahead and grab that fresh notebook …

Credits: Jakub Linowski

Exploring UI Scaling

Friday, April 15th, 2011

I’ve been thinking about ways to communicate how a user interface scales over time as the amount of information it needs to support varies. For example, sometimes the UI has to support multiple cases ranging from no results, to just a few results, to thousands of results. A good interface designer would probably think this through and come up with a UI that fulfills all of the relevant cases. For this, I began exploring a couple of visual language ideas to help myself and others who would like to tackle UI scaling. Here are some open and experimental thoughts:

A) Scale Marks. These are just floating reminder notes alongside a screen with a range of information that ought to be supported. Sometimes it’s easy to forget (or not know) how much data a UI really needs to support and these could be used as small self-targeted tests of sorts.

B) Scale Sets. This is a grouping of all the multiple UI states for those times when we actually want to draw out all of the relevant state ranges.

C) Spatial Scales. When there is more information, perhaps we might wish to communicate a maximum size of an element (max width / max height).

These are just a couple of thoughts which some day I might bring into the next release of the ISN. If you have other ideas, please share. :) Hope it’s useful.

Credits: Jakub Linowski

nForm Sketching Table

Wednesday, February 23rd, 2011

The guys over at nForm recently shared their home brewed sketching table composed of IKEA bits and pieces. It has the ability to store past sketches in a number of compartments right underneath, and an awesome kraft paper roller on top (possibly for saving large canvases of related sketches). More importantly, it looks like it’s inviting collaboration as Gene Smith suggests:

The total cost was about $500, and we’re seeing two benefits: it’s much easier for us to incorporate sketching into our daily workflow, and we’re having lots of quick feedback sessions since the table makes it easy for us to share and sketch ideas.

Thanks for sharing.

Credits: nForm

ZURB iPad Omnigraffle Stencils & Sketchsheets

Wednesday, February 2nd, 2011

Adding this iPad Omnigraffle Stencil to the list for all those MAC users out there (thanks Ivana for finding it). The set looks pretty decent with a great deal of popovers, buttons, bars, icons, keyboards, alerts, and so on. As an added bonus the set also comes with a few blank and printable PDF sketchsheets – handy for all those times when you don’t feel like drawing out hundreds of screen outlines over and over again. Enjoy.

Credits: ZURB