Apple's Design process

Michael Lopp, Senior Engineering Manager at Apple discussed Apple's design process at a presentation given at SXSW. Business Week summarized the points, excerpted below.

Pixel Perfect Mockups
This, Lopp admitted, causes a huge amount of work and takes an enormous amount of time. But, he added, “it removes all ambiguity.” That might add time up front, but it removes the need to correct mistakes later on.

10 to 3 to 1
Apple designers come up with 10 entirely different mock ups of any new feature. Not, Lopp said, "seven in order to make three look good", which seems to be a fairly standard practice elsewhere. They'll take ten, and give themselves room to design without restriction. Later they whittle that number to three, spend more months on those three and then finally end up with one strong decision.

Paired Design Meetings
This was really interesting. Every week, the teams have two meetings. One in which to brainstorm, to forget about constraints and think freely. As Lopp put it: to "go crazy". Then they also hold a production meeting, an entirely separate but equally regular meeting which is the other's antithesis. Here, the designers and engineers are required to nail everything down, to work out how this crazy idea might actually work. This process and organization continues throughout the development of any app, though of course the balance shifts as the app progresses. But keeping an option for creative thought even at a late stage is really smart.

Pony Meeting
This refers to a story Lopp told earlier in the session, in which he described the process of a senior manager outlining what they wanted from any new application: "I want WYSIWYG... I want it to support major browsers... I want it to reflect the spirit of the company." Or, as Lopp put it: "I want a pony!" He added: "Who doesn't? A pony is gorgeous!" The problem, he said, is that these people are describing what they think they want. And even if they're misguided, they, as the ones signing the checks, really cannot be ignored.

The solution, he described, is to take the best ideas from the paired design meetings and present those to leadership, who might just decide that some of those ideas are, in fact, their longed-for ponies. In this way, the ponies morph into deliverables. And the C-suite, who are quite reasonable in wanting to know what designers are up to, and absolutely entitled to want to have a say in what's going on, are involved and included. And that helps to ensure that there are no nasty mistakes down the line.

Thanks to this article, I heard someone in my office referring to dream features as ponies.

http://www.businessweek.com/the_thread/techbeat/archives/2008/03/apples_design_p.html

Templates for Creating Blueprint-Compatible Comps


I've created Adobe Photoshop and Illustrator templates for creating comps that work with Olav Bjorkoy's Blueprint CSS Framework. The templates are simply documents with guides based on the 24 units provided by Blueprint. The background image of the grid is also provided with a layer to show unit numbers if you like, and the Illustrator document shows a fake comp to demonstrate positioning on the grid.

You may download the templates here:

I welcome your feedback.

http://urlgreyhot.com/personal/resources/illustrator_template_blueprint_css_comps

1 month review

So it's about 1 month after I officially launched this site. If you were with me when it first went up, you may have noticed a few minor changes. I started out getting as many things up as I could, and am now evaluating the effectivenes of some decisions and simplifying. Some of the issues around changes have to do with figuring out what works best, others are based on issues having to do with services.

Most notable changes:

  • I turned off design submissions temporarily because the screenshot service I was using ceased to function. Am considering now just allowing the submission pool to exist, but there will only be screenshots on hover using the Snap.com service.
  • I turned on interface submissions. This requires that you take a screenshot with a tool of your choice (I would recommend Skitch or Jing) and posting it to the pool.

Upcoming changes in March-April timeframe:

  • Formatting content to put out complete RSS feeds with images. Requires doing some views work on Drupal with my custom content types.
  • Feedburner email newsletter with full content in the feed including a preview of submissions.

That's it for now. I know that posting is slow, but it's regular. I'm trying to emphasize the curative nature of this site rather than going for volume. Everyone else does the volume posting well.

MoFuse: Hosted Mobile Website Service

MoFuse is a service that allows site owners to provide a .mobi experience for their existing sites. The service allows you simply plug an RSS feed url into your account settings for a new site, and delivers a mobile formatted version of that feed. They also provide the ability to publish as an iPhone app, using the IUI interface, which you can experience on Google and FaceBook mobile sites. The service also allows you to create static pages, and customize the colors of the UI.

The demo below shows the Konigi feed implemented as a mofuse site. I haven't gotten around to doing feeds that provide screenshots, so you'll see only text for content.

konigi Mobile - iPhone Preview on MoFuse

The free service allows publishing under the mofuse .mobi domain, e.g. our Konigi demo is at konigi.mofuse.mobi, and includes analytics tools. You can also monetize your site using AdMob or Google Adsense—you'll do a 50% revenue share with MoFuse. For $6 USD, you can upgrade your account to use your own domain, provide a header logo, and get 100% of your ad revenue.

The functionality you provide is fairly limited, but this can be a nice simple implementation of the IUI experience for sites that don't want to invest the time in creating a mobile format for their sites.

http://www.mofuse.com/

Samsung TouchWiz & F480 (Phone Scoop)

PhoneScoop provides a demonstration and photos of the new Samsung TouchWiz finger touch user interface, a 2.0 version of the company’s Croix OS.

This one of the first phones to rush to market in order to compete with the iPhone. There doesn’t appear to be a multi-touch-type interface for two-finger interactions like zooming, but dragging and dropping appears very similar to the iPhone’s drag behavior. One of the fun features is a very configurable home page, which provides user-selectable widgets. Very cute.

Viewing Search Results in the Chart View of Morae

TechSmith has published a useful tutorial that shows how to view where people clicked during sessions.

Morae recordings use TechSmith’s Rich Recording Technology (RRT) to capture video, audio, camera input, as well as all sorts of data, including keyboard entry, screen text, web page changes, mouse clicks, and system events. Use Manager’s Search Results pane to help you focus in on this valuable information to support your findings.

This feature is pretty hidden, so Morae users will want to check this out.

10 Mistakes in Icon Design

Denis Kortunov provides a nice illustrated list of common mistakes in icon design.

  1. Insufficient differentiation between icons
  2. Too many elements in one icon
  3. Unnecessary elements
  4. Lack of unity of style within a set of icons
  5. Unnecessary perspective and shadows in small icons
  6. Overly original metaphors
  7. National or social characteristics not being taken into account
  8. Images of real interface elements in icons
  9. Text inside icons
  10. Outside the pixel framework

http://turbomilk.com/truestories/cookbook/criticism/10-mistakes-in-icon-design/

Video Demonstration of Interfaces

I've started experimenting with doing video screencasts in the interface section. You can see an example of the first one here: Gawker Media Video Comments. Scroll to the bottom of the screenshots for video--which we're going to use Vimeo's excellent video publishing service for the hosting. Here's a preview of the first video:

I think it makes a lot of sense to do this for interfaces because screenshots simply cannot reproduce the experience of transitions, motion, and AJAX interactions. Let me know what you think.

-Michael