Android Honeycomb Stencils and Resources

I have previously posted numerous mobile stencils and wireframes, but with Google’s recent release of the new OS, we designers need the new tools:

Android Honeycomb Stencils & Sketchsheets

android tools

Google recently released their OS designed specifically for tablets: Android Honeycomb. This is a set of stencils & sketchsheets to help you get started mocking up your GUI’s.

DroidDraw

android tools

DroidDraw is an online tool to help you easily build graphical user interfaces for the Android cell phone platform. There’s also a standalone executable available for Mac OS X, Windows, and Linux. This is a really quick way to emulate your application with almost no need to know code and focus strictly on the interface. Continue reading

Rapid Wireframe Sketching in Google Docs

posted in googledocs blog

Morten Just is a product manager in Vodafone. Based in Copenhagen, Denmark, he spent most of his career as an interaction designer churning out wireframes and diagrams, and also co-founded Imity, a Bluetooth-enabled social network for mobile phones in 2006. On his personal blog he writes mostly about user experience.

When I saw Google drawings on a Twitter update a few weeks ago, I didn’t really think about it until I got a feeling I might not have understood a rather complex problem at work. I drew a diagram and asked my colleague to edit it in case I had misunderstood him. It worked out well, we’re still using the drawing as a basis for discussion, and it is constantly being refined as we go along. So taking the next step and trying out a wireframe was an obvious decision.

For quite a while I’ve been wanting a simple and fast way to burst out interface ideas, and then quickly share them with my colleagues in Düsseldorf and London. Since a relatively large portion of a wireframe looks like something I’ve sketched out before, I figured modifying a template like a list view or a landing page would speed things up.

In fact, I wanted to speed it up to the point where I all I had to do was to add a few words before I had a wireframe.

From the templates I extracted the scroll bars, buttons, and sliders and put them in the gutter outside the drawing’s canvas, ready to be duplicated and dragged onto the wireframe.

Here’s a generic page displaying product details:


… and a typical mobile phone drill-down of items in groups:


To begin working on a wireframe

  1. Open the template you want to use
  2. Click ‘Sign in’ in the upper right
  3. Choose file > make a copy
  4. Make your wireframe

Packing it up

When you have several individual wireframes it can be a neat thing to pack them all up into one single document that you can send around, have people print out, or even present in meetings.

Since there’s no way to import a drawing into a presentation yet, here’s a trick using the web clipboard feature. You’ll still be able to edit the imported drawing should you need to.

  1. Go to File > New Presentation. A blank presentation opens in a new window.
  2. Switch back to your drawing and select everything.
  3. Click the web clipboard icon > Copy to web clipboard
  4. Switch back to your presentation and paste your drawing using the web clipboard.

Building the library


I’d love for this to be the beginning of a shared wireframe template repository in Google Docs. For now, I’ve shared a folder in which I’ll add user contributed templates and stencils. Get in touch if you want to contribute.

I hope you’ll enjoy the templates and that it will help you actually sketch out your ideas rather than just describe them in words. As Dan Roam said in his keynote at this year’s IA Summit, “The person who draws the picture wins.”

Links

Posted by: Morten Just, mortenjust.com

5 Books Every Designer Needs

I recently wrote about self directed learning for UX Professionals. One of the suggestions was about reading and it is important in our day and age of information overload to focus on the material that is going to help the most.
There are too many design books available nowadays.

While there is likely to be value found in every article and book (with some exceptions), it is always helpful to get suggestions from people in the industry. A starting point from which to get your basics and find what you are interested in and how to access that information.

There is graphic design, interaction design,  web design, user interface design, logo design, marketing design. .. The list goes on. In the span of 30 years, the ability to communicate graphically has grown exponentially. However, with all of that knowledge, where is a budding designer to turn to when they are looking for a concise reference?

Being a budding ‘everything’ designer myself, I know that good reference books are not easy to come by. What follows are Andrew Maier’s top 5 reference books for budding web/interaction designers:

Top 5 Web and Interactive Design Books

Robin Williams Design Workshop, 2nd Edition

All good web designers should constantly be looking for inspiration. I prefer CSS galleries such as http://www.bestwebgallery.com, myself. However, when I need references to good, solid graphic design work, I find myself turning to this book.

Robin William’s Design Workshop takes the best parts of her first book, The Non-Designer’s Design Book (a great read, not-so-much a great reference), and builds upon them. Firstly, she goes over the basics of graphic design: contrast, repetition, alignment, proximity, typography, and color theory. Secondly, she approaches many of the common projects assigned to graphic designers: stationery design, flyer design, poster design, business card design, logo design, and form design, to name only a few. Because most of these projects translate to the web, everything in this book serves as a guide to graphic design best practices; which in turn, helps you as an “everything” designer.

What I like about Robin Williams style is that she is short and to the point. Robin uses good and bad examples to clearly illustrate design concepts. While some parts of the book are a bit dated regarding web design, don’t let that discourage you. This book is a solid graphic-design reference which I have come back to again and again.

Don’t Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition, by Steve Krug

Usability… let’s just say it’s a small obsession of mine. “What is usability?” and “what does it have to do with design?” you might ask. This book will answer those questions and questions you hadn’t even thought about.

As much as this book explains the basics on these topics, it does even more: it explains them in a way that is eye-opening and almost always enlightening. When solving basic design problems, Steve takes the design element out of the picture entirely. This is incredibly useful because oftentimes, as designers, it’s difficult for us to break the habit of designing before developing. Time and time again, I’ve gone back to this book to reevaluate what could be going through the mind of people using my site, so that I design to make my users feel more intelligent. Steve teaches us that form always follows function.

If you have a desire to get inside of your user’s heads and figure out how they are using your site, then this book is for you. If you have a desire to learn how a professional usability expert would accomplish a review of your site, then this book is for you. If you want to create a script and conduct your own “guerrilla” usability tests, then this book is for you. Don’t Make Me Think! is a great fore into the world of user interaction and how your users think. The best part is, it’s not just for designers; this book will help every member of your team ask the right questions before building out a feature, and thereby saving you and your company plenty of money. That’s always a good thing, right?

Designing the Obvious: A Common Sense Approach to Web Application Design, by Robert Hoekman, Jr.

Designing the Obvious by Robert Hoekman, Jr. is a lot like Don’t make me Think! by Steve Krug. The difference here is, Robert is a designer by trade, whereas Steve is a usability expert. For this reason alone, the two books diverge very rapidly. Robert takes the core principles of Steve’s work and manifests them through his work, describing the trials and tribulations of adding “just one more feature” to a burgeoning web application. As a designer for an Atlanta startup, this was music to my ears. Robert hits the nail on the head time and time again.

Creating new features and new designs is the cornerstone of infant web-applications. Many teams don’t feel productive until they’ve implemented feature x, or upgraded feature y. Robert invites application designers take a much-needed step back. People who use web applications have an intended purpose: they generally want to get one or two very specific things done. How can your application support that? What features have you added that don’t support that? This book is about what not to do, rather than what to do.

If any of these questions sound like ones you have asked yourself or your team, you owe it to yourself to get this book. Robert has been there and done that, and his lessons are of infinite value to web startups everywhere. I would love to see more people reading his book and taking his advice.

Designing the Moment: Web Interface Design Concepts in Action (Voices That Matter), by Robert Hoekman, Jr.

Another book by Rovebert Hoekman, and this time the focus is slightly different. If you’re not into web application design, you can still benefit from web interface design, that’s what this book is all about. What’s changed? In this book, Robert focuses on the small idiosyncrasies of a web-user’s experience on your site: Do you surface keywords? Do you have verbose copy? Do you use video to instruct your users?

What’s brilliant about this book is that it takes many of the web-interface concepts that have only emerged within the past year or two as best practices and highlights all of them. Many of the chapters in the book are short but hardly anecdotal; they are poignant and informative. In fact, there were many chapters in this book that I said “ah ha!” as I read them.

My copy of this book is riddled with earmarked pages and bookmarks, simply because it’s that good. I encourage any designer who wants to look at every phase of user interaction to peruse this book. I don’t believe a true cover-to-cover read of this book is necessary (I would obviously skim the sections to make sure the book, in it’s entirety, would be useful to you). The best way to use this book would be to correlate your reading with the task you have at hand. Because Robert relates his knowledge of every “phase” of the user interaction, you can simply refer to the section of user signup/login when you are developing that interaction, user profiles when you are building user profiles, etc.

Designing Interfaces: Patterns for Effective Interaction Design, by Jenifer Tidwell

The ultimate (layman’s) desktop application interface pattern book. I do not know if a more authoritative reference exists. Designing interfaces by Jenifer Tidwell takes readers on a tour of every element in application design. The book takes an approach similar to http://www.uipatterns.com, explaining not only what the pattern is, but it’s problem it intends to solve as well as real-world examples of this pattern.

The patterns covered include: forms, text editors, graphic editors, spreadsheets, browsers, calendars, media players, and information graphics. What more, Jenifer gives readers a basic style guide and reference section, making this book one of the most comprehensive on this list.

While almost all of the conventions and patterns used in the book are specific to desktop-applications, this book defines what has come to be expected of applications and application-interaction. Because web-sites are becoming closer and closer to web-applications, the utility and authority of this book can only get broader. Interface Patterns help define an interface designers toolbox. Therefore, learning about best-of-breed practices as well as old, familiar patterns can help you take any design problem and break it down into manageable, familiar, and most importantly, easy to use parts.

Some text and images from Tutorial9.net.