Archive for June, 2010

Welcome to the bitstream

Like many others before me, I’ve moved the weblog portion of SimpleBits over here to Tumblr. I did this for many reasons. I like that there’s one f!@#$ing template. That’s it. I don’t miss comments. I don’t mind that archives aren’t styled the same way as the main theme. I’m actually excited about the subtle social aspects of Tumblr.

I don’t have time to customize another CMS. I used to love having the time to customize a CMS only to find a better one and customize that. I’m aiming for efficiency now. I enjoyed designing this theme. I don’t like that is a redirect to

I have 10 years of archives. I had fun adding responsiveness to this design. I need to reskin the shop. I need to add static pages for speaking and about sections. I need to figure out what I’m going to do with the portfolio. If I waited till everything was perfect I would’ve never launched this thing. I’m now ok with doing things in stages. I think the most important thing in all of this is that I’ll be able to post quickly, easily, with less effort.

I’m looking forward to telling you more once I finish the book I’ve been writing for the past few months.

eBoy FixPix

eBoy FixPix:

Having long been a fan of eBoy’s pixel art, this new iPhone game caught me attention immediately. But what’s interesting here is how simple yet addictive it is.

“Piece together” 100 of beautifully chunky posters by tilting your iPhone in certain directions. My only complaint is that it can be so fast paced that you often fail to stop and admire the artwork.

Hello, Craig.

Hello, Craig.:

Illustrator and Dribbble Rebound King™, Craig Henry launches a new portfolio, with prints available for two of the pieces. Would love giant poster versions of all these.

Concerning Fidelity in Design

People swear by their design processes. Rachel Glaves insists on sketching by hand; Dan Brown urges extensive wireframing; while Ryan Singer goes straight to HTML. Heated debates arise at conferences as advocates staunchly defend their favorite techniques.

With all of these different methods to choose from, should you be sketching, wireframing, mocking-up, or prototyping? The answer, simply put, is yes you should.

Design methods are not mutually exclusive. Rather, each method exists on a continuum of fidelity, ranging from low fidelity sketches to high fidelity HTML prototypes. Each method is well-suited for a particular phase of the design process, with one level of fidelity often leading into the next.

The design funnel

In his book Sketching User Experiences, Bill Buxton portrays the design process as a cycle of elaboration and reduction. The goal of the elaboration phase is to generate as many different ideas as possible, while the reduction phase is meant to select one of those ideas and carefully refine it.

Elaboration and reduction as overlapping funnels

Laseau’s overlapping funnels (as portrayed in Sketching User Experiences) indicate the dual nature of design as elaboration followed by reduction.

Rinse and repeat

While it does typify the design process as a whole, in practice the elaboration and reduction process must be continuously repeated time and again throughout the course of design. From information architecture, to visual design, to the functional prototype, each stage must be explored in full, then lovingly honed down to a precise solution.

The design funnel, from low to high fidelity

The design funnel illustrates the repetition of the elaboration/reduction cycle from low fidelity to high fidelity, converging into the final concept (inspired by Stuart Pugh’s funnel).

Getting it right

Using a method too high in fidelity wastes resources (both time and material) and risks a mediocre path being selected because better options were never given a chance. Working at too low a fidelity, on the other hand, means that the details never get filled in, yielding a half-baked result.

Time increases along with fidelity

A real world example

Thus far I’ve outlined an orderly model with distinct categories. Reality, however, is much more complicated: various components are often designed in parallel and at different phases; lines blur between information architecture and visual design; and refinement can sporadically revert back into ideation. What does the design funnel look like in the real world?

In a nutshell

In late 2009, I teamed up with Nutshell to design a new customer relationship management application. Over the past 9 months we have sketched (a lot), wire-framed (a bit), mocked-up (a whole lot), and coded (continuously) as part of the design process. The first month and a half was made up entirely of discussions in front of the whiteboard and around paper sketches. The month after consisted of turning the selected sketches into wireframes, while sketching continued for other parts of the application.

Actual time spent designing with each medium

Our media-of-choice over the past 9 months of designing a CRM.

At three-and-a-half months in, we had a pretty good picture of the information architecture for 80% of the screens. From then until now, most of my effort has gone into full-fidelity mockups, while I revert to sketches when we encounter less well-defined screens or workflows. As soon as the first mockup was complete, my colleagues began coding an HTML5/CSS3 prototype, which we used (and are still using) to see how our ideas hold up under actual use. We chose to build this Safari-only prototype first so that we could iteratively refine with as little overhead as possible.

When the tables turn

What we discovered is that there comes a point in time where working at a higher fidelity actually requires less time than working at a lower fidelity. For instance, once our visual style had been developed in the mockups, it was no longer beneficial to build wireframes; going straight from sketch to mockup worked just fine. Similarly, when we discovered something in the prototype that didn’t feel quite right, it was often easier to tweak the prototype directly than to go back to Photoshop.

A simplistic view of the design funnel, from sketch to wireframe to mockup

Be lazy (in a good way)

There is no single correct form of design. Rather, each method is appropriate in a certain context. At the end of the day, it simply comes down to selecting the level of fidelity that gets the job done in the least amount of time. As it’s been said, “Laziness is the mother of efficiency.”

Beginning Photoshop Tutorials: Start Here

Photoshop is one of the most versatile tools available for the graphic designer or artist. Many people don’t realize how truly powerful the program can be when it comes to altering and enhancing images, but the fact is that most commercial images have been touched by Photoshop at some point. When it comes to using the application, well, anyone who has ever opened the program knows that Photoshop’s versatility comes with a somewhat steep learning curve. Fortunately, Photoshop tutorials are available for those who would like to learn how to use the program but need a little bit of extra help.

Here are some of our favorite Photoshop tutorials suitable for beginners pulled from the archives: (...)
Read the rest of Beginning Photoshop Tutorials: Start Here

© Tutorial Blog, 2010. | Buy iPhone Accessories | iPad App Reviews

  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress