News aggregator

"Falling Leaves" Concept UI for iPhone

Konigi - August 29, 2008 - 1:59pm

Not sure if the user on Vimeo who posted this is THE Woz, but he or she posted this concept user interface for an iPhone menu application that looks very interesting. The video opens with a UI that displays falling media that appear like little square stamps dropping like leaves to a desktop with contacts, photos, videos, etc. on the face of the leaves. The user can apparently pick up one of the pieces, and if it's a video for example, start playing that video in the UI. Also shows a pretty carousel menu and an awesome looking RGB color mixer for customizing the wallpaper I presume. Very nice ideas here, if only for conceptual purposes.

crowdSPRING, Crowdsourcing creative projects

Konigi - August 29, 2008 - 1:49pm

crowdSPRING is an interesting crowdsourcing web site. Businesses and individuals with creative design needs—logo design, business card design, graphic design and website design—post their project specs and award bounty. Designers don't bid on the project, they produce the deliverable. The community gets to bid, but ultimately, the project creator chooses who the award goes to.

Economist.com Editorial Style Guide

Konigi - August 29, 2008 - 12:08pm

The Economist, the magazine and news site, provides access to the excellent editorial style guide that every journalist for the company is given. The book, written by John Grimond, is also available for purchase in the printed book form.

IDEO

Konigi - August 29, 2008 - 11:55am

The redesigned IDEO site has been sitting in a browser tab for a few weeks now because it just felt like one of those things I needed to mull over before writing about. It's one of the few sites this year that just took me by surprise. In short, the deep treasure trove of content unleashed in this redesign is a huge departure from the tightly constrained and minimalist prior design. The old design featured a buttoned up business face, showcasing and marketing what they do and have done. The new design pulls down the curtains and shows more of who IDEO are and how they do what they do from many perspectives. This quote from IDEO designer Valerie Casey describes this new desire for transparency.

"For me, the greatest achievement of the new IDEO.com is that it really manifests IDEO's culture--transparent, messy, highly creative. We are a family of observers and collaborators, builders and storytellers." (From Core77)

I was initially overwhelmed when trying to make sense of the site. The loose and deep architecture and the flipped upside down navigation seemed the antithesis of the tidy IDEO sites of the past. But after that initial realization that there would be so much more to explore in this site, one digs in, and all of the references and currency of the exposed business begin to make sense. They're telling a different and more intimate story here, and its one that lets you almost feel like a fly on the studio wall. What you buy into here is the value of this culture, and the beliefs they're communicating. It's really the way marketing should be done.

http://ideo.com/

CNET TV Video Player

Konigi - August 29, 2008 - 11:39am

CNET TV provides a video player that showcases their large library of content including product reviews, news coverage, and special reports. The main page of CNET TV features the video player in the center stage, with a short list of featured (hot) content flanking the left side, and a playlist on the right showing the currently playing video. The player controls are simple and easy to use, but at full screen, the controls a little soft and blurry. They offer options for downloading the clips and sharing on bookmarking services and embedding. Email button is a mailto: link.

The page is clean and offers good navigation options without overwhelming the user with too much information. A carousel at the bottom of the page shows thumbs of popular and new content as well as videos from their Loaded and News sections.

http://cnettv.cnet.com/?tag=hdr%3bsnav

CNET

Konigi - August 29, 2008 - 10:59am

CNET redesigns its identity and with it, all of its sites now sport a cleaner, more modern aesthetic. Some claim that the original c|Net, with the block of yellow navigation on the left hand side was responsible for the proliferation of that layout type in the 90's. Today there is only a hint of yellow, and that left sidebar that held most of the site navigation is now relegated to a simpler, singular category or local navigation purpose within a section. A big improvement. The global navigation at the top serves to keep the user situated in the larger scheme of things.

CNET is a huge site, and because of that, it is probably difficult to keep the home page simple, while addressing the needs of their divisions. They've been evolving their design over the years (as you can see from the last 3 screenshots) and the current and past designs have moved towards a cleaner look, and simplified navigation. If you compare this home page with the prior design, they appear to have made stronger, more selective decision for keeping the home page less cluttered and easier to skim.

http://www.cnet.com/

StickyNote Ninja

Konigi - August 28, 2008 - 11:02am

This is a very topically focused blog I can appreciate. Kate Rutter of Adaptive Path started, StickyNote Ninja, a site dedicated to using sticky notes for more than just to do reminders.

From her about page, she says "...I’ve been using them in my work, my personal life and as a tool to help companies work faster, more collaboratively, and to make smart decisions that stick. In 2007, I began speaking to groups about these simple, cheap, ubiquitous and powerful tools. This site is a resource for stickynote ninjas everywhere as we journey in our quest for perfection via stickynotes."

Love it.

Hanmail Paper Prototype

Konigi - August 28, 2008 - 10:32am


Video of a paper prototype created for Daum's AJAX-based hanmail.net webmail service. It's a little hard to know what's going on without hearing the test participant think out loud, but it's a nice demo of the prototype.

Via IATV.

Photoshop Custom Comping Elements

Konigi - August 28, 2008 - 9:59am

Bad Assembly provides a layered Photoshop file with common user interface elements for design comping. It's like the PSD analog to a wireframing UI stencil.

TheWB.com Video Player

Konigi - August 27, 2008 - 2:41pm

The WB brings its video site to the masses of OC and Friends fans and adds another network portal into the mix with Hulu. In terms of visual appearances and the high level navigation (IA), TheWB.com feels like the polar opposite in sensibility to Hulu's pared down appearances and very usable directory structure and show pages. On Hulu, once you arrive at a show page, everything you can watch whether it be a full episode or clip, is neatly organized and presented on the page. TheWB, while lusciously designed gives you a harder navigation experience.

The video player, on the other hand, is quite nice and easy to use. The sharing and commenting tools slide out a right-side drawer and push the player to the right of the stage area. The transition is slick. They also offer video clipping like Hulu. Unlike Hulu, TheWB's clipping controls move the screen with the playhead. We expect that Hulu will fix that one day. No one seems to have perfected this interface yet, but it's a nice option for users who like to embed and share.

http://www.thewb.com/

ProofHQ

Konigi - August 27, 2008 - 2:05pm

ProofHQ is a collaborative tool for reviewing creative projects such as photography and graphic design. The tool allows you to upload anything from a PDFs, PSDs, and JPGs to Word and PowerPoint files up to 75 MB. The functionality is a bit like a mashup of Flickr and Skitch. It allows users to annotate, mark up, and comment on the work. The art can be embedded into a web site with the provided embed code.

Here's a test mini proof using the original design comp for Konigi to show the tool in action. Mark it up to see how the tool works. Ideally you'd be able to embed proofs into whatever project management site you have set up.

MobileMe Calendar Date Selector

Konigi - August 26, 2008 - 6:31pm

The date selection controls in MobileMe Calendar mimic the date selection segmented control in iCal. Howerver, the control bar adds an additional drop-down menu for actions like creating events, and jumping to a specific date. The interface is simple. The addition of the action menu makes the functions from the iCal menu bar accessible without having to add to the web-based calendar interface.

http://www.me.com/calendar/

OmniGraffle UX Template

Konigi - August 26, 2008 - 11:56am

I've updated the OmniGraffle web design template formerly hosted on my blog at urlgreyhot. The new UX template is now formatted for OmniGraffle Pro version 5.

In this template you'll find shared layers (masters) for a title page, wireframe, wireframe/storyboard hybrid, simple storyboard, and storyboard with notes. Guides and adherence to a regular grid make it easy to use. The doc is sized so you can work at 100%, and print at 8.5" x 11" or 11" x 17".

You you can view screenshots and download here at Konigi.

OmniGraffle UX Template

Konigi - August 26, 2008 - 11:49am
Made for web designers

An OmniGraffle Pro (version 5) template for User Experience Designers with the formats you'll need most for interface and interaction design. The doc is sized so you can work at 100%, and print at 8.5" x 11" or 11" x 17".

The masters you need

In this template you'll find shared layers (masters) for a title page, wireframe, wireframe/storyboard hybrid, simple storyboard, and storyboard with notes. Column guides and a regular grid make it easy to use and keep your layout tight.

Download for free

This document is free to use, but may not be distributed for commercial purposes without permission. To use, unzip the file in your ~/Library/Application Support/OmniGraffle/Templates directory.
Download the template.

Purchase OmniGraffle Pro

This template requires the Professional version of OmniGraffle. You can purchase Omnigraffle Professional 4.0 from Amazon. I highly recommend the Pro version over the standard -- the Pro version allows you to create documents using slide masters.

The Usability Post, A design and usability blog

Konigi - August 25, 2008 - 11:00am

Dmitry Fadeyev's new blog, The Usability Post is posting some thoughtful entries on design usability.

Fi on Wireframing

Konigi - August 25, 2008 - 8:25am

Fi do a little show and tell of their Visio wireframes and discuss their use on Think Swedish.

Hillcrest Labs Remote Control

Konigi - August 21, 2008 - 12:08pm

Hillcrest Labs provides a vision of the pointing and navigating future with their demonstration of Freespace motion-controlled TV remote.


I came across the video demos of Hillcrest Labs' remote control via NewTeevee. The video above shows a demo at the Consumer Electronics Show last winter, but check the NewTeevee link for the more complete demo of their Freespace motion control technology (sadly they won't let me embed it here). The demo shows a proof of concept software interface for the TV that allows the user to navigate and access media on their TV/Computer using the "Loop" concept remote control.

The prototype TV interface shows the flexibility and scalability of navigation that is possible with a motion controlled remote pointing device equipped with scroll wheel and selection buttons. The software they demo is a zoomable user interface (ZUI) that was created to demonstrate the possibility for navigating a media space on the TV. The remote provides tremor control, so panning motions with the remote don't produce the jiggle you see on the Wiimote.

This demonstrates the great potential and possibilities that ZUIs provide for a simple hierarchical interface like this. Other options could have been explored, but the ZUI provides a very intuitive experience using pointing rather than an up/down/left/right control for navigation, e.g. in your TiVo and Apple TV remotes.

The technology will be licensed to consumer electronics companies, so we might hopefully see this navigation paradigm on set top boxes in the future.

iPhone GUI PSD

Konigi - August 21, 2008 - 8:10am

The iPhone GUI PSD by teehan+lax is an editable layered Photoshop file with graphic elements including the iPhone, buttons and controls, form inputs, and application chrome.

Thanks to Designnotes for the tip.

Yahoo! Buzz Voting

Konigi - August 20, 2008 - 1:40pm

Yahoo! Buzz pulls actively viewed and shared pages from its portal and puts them in a Digg-like interface with vote-to-promote buttons so users may actively push stories up and down the Buzz list. The digg/bury interface is simple. Stories are categorized by several main topic areas, and users may view the stories with the highest vote count, over several time slices, or sorted by recency.

http://buzz.yahoo.com/

VideoEgg Tabs

Konigi - August 20, 2008 - 1:12pm

The VideoEgg Advertising Network site uses vertical tabs along the right of the page with labels properly oriented in the north-south direction. While doing tabs this way requires that they be handled as images or Flash, the metaphor is recognizable and its use makes sense immediately. Local navigation is handled inside the banner area.

http://www.videoegg.com/