Konigi

Carsonified

jibbajabba — Thu, 09 Jul 2009 14:23:33 -0400

Carsonified redesigns with bold monochromatic pages with a retro look that feels insired by poster art. Sweet.

LITAGO KU-KUNST

jibbajabba — Thu, 09 Jul 2009 13:58:05 -0400

Cute use of sticker effects and vinyl toy illustration in this promotional site for a Norwegian milk product. Love the background and navigation menu on the bottom.

http://www.litago.no/kampanjer/kunst/

Helveticons

jibbajabba — Thu, 09 Jul 2009 12:30:11 -0400

Helveticons are royalty-free vector icons, glyphs and symbols based on the Helvetica Bold typeface.

EA Microsite Navigation

jibbajabba — Thu, 09 Jul 2009 12:03:19 -0400

Game maker EA provides access to their network of microsites from EA.com and offers cross-site navigation via a toolbar that is positioned at the bottom or top of each site. I like the design of the navigation on the main site and the Sports sites. But the navigation is inconsistent in position, visual design, and behavior from site to site. The Pogo site doesn't have a micro-site navigator at all, so ironically, you have to "pogo" up to the main EA site via the logo in the footer to cross-navigate. This may not be an issue, however, if EA doesn't want or need users to cross-navigate, or more importantly if Pogo users don't want to navigate to other EA sites.

http://www.ea.com/

Nike Microsite Navigation

jibbajabba — Thu, 09 Jul 2009 11:27:07 -0400

Nike.com's main site provides entry to a host of micro-sites for each sport or product family, but a consistent navigation model is provided across all microsites. A primary navigation widget is provided in the Nike Swoosh button, which reveals a list of a few of the most popular microsite destinations. A "More" link epxands the list to show all of the microsites.

http://www.nike.com/nikeos/p/nike/en_US/?

Nike Video Hero

jibbajabba — Thu, 09 Jul 2009 09:47:28 -0400

Nike has been using a video player as hero graphic in the main Nike.com site. The player features large buttons for play controls and link to microsite (the button with the right angle quotes), star rating, playhead, low/high resolution and bandwidth switcher, a time elapse countdown, volume bars, and save/share options.

http://www.nike.com/nikeos/p/nike/en_US/?

emmi

jibbajabba — Thu, 09 Jul 2009 09:22:10 -0400

A minimalist portfolio with low-fi graphics, fixed-position navigation.

http://www.emmi.co.uk/

Infographics: Examples of Design-Enhanced Data

jibbajabba — Thu, 09 Jul 2009 09:19:08 -0400

Jim Basio of Viget shows off a collection of his favorite Infographics.

Content Templates to the Rescue

jibbajabba — Thu, 09 Jul 2009 09:04:10 -0400

Erin Kissane writes about using content templates "... to help speed up the information-collection process, improve consistency across the website, and make the editing process easier and more orderly" in A List Apart.

The ideal situation is to have a content strategist, perhaps a technical writer, who can provide the guidance for auditing and organizing information, and add some rigor to the writing process. The absence of a content strategist on a project necessitates at least dedicating one person to this task. Kissane's article shows how to use content templates to provide the framework for preparing each page of content so they may communicate the essential information effectively and consistently. If you have an IA on the project, this can follow from wireframes on new work.

Redub Designs a Better Online Magazine

jibbajabba — Thu, 09 Jul 2009 06:31:04 -0400

I came across Redub's "Don't Make Me Scroll" presentation embedded above, which looks at the current offering of magazine readers which are modeled after print layouts, are difficult to read, SEO-unfriendly, and which rarely use the full capabilities provided by web browsers, e.g. multi-media. Or they're modeled largely after blogs with articles are long and scrolling, are limited by the possibilities of HTML/CSS, and have layouts that aren't differentiated from blogs and which pale in comparison to the layout in the printed version of the original magazine article.

Redub is working on a magazine reader, built on Flash, with a keyboard-enabled UI (input devices work as well) that scales to any screen size, does not scroll, and provides designer-friendly layout possiblities. You can check out the GOOD magazine demo to experience the reader. There's some really interesting interface design happening there including unobtrusive menus and prev/next paging controls, a pagination bar that is scaled to indicate the amount of content on the page, great examples of interactive media in the content, e.g. interactive charts, and hints at personal options like annotations. It's very well thought-out and works better for reading magazines than any of the readers out there.

It seems like they're trying to do for online magazine reading what the Kindle does for ebooks. Exciting stuff to see the full potential of Flash being utilized to improve the magazine reading experience, rather than just port it over to an digital, PDF-like version that doesn't work as well on screen.

Deliverable Templates from AP's "Designing the complete user experience" Workshop

jibbajabba — Thu, 09 Jul 2009 06:20:17 -0400

Tools, deliverables, and documentation templates used in Adaptive Path's workshops. Includes presentations and the following templates:

Business Brief
Prioritization Exercise
Mental Model Visualization
Persona Chart
Scenario
Competitive Analysis
Interaction Flow Diagram
Usability Recruiting Screener
Usability Test Protocol

SlickMap CSS: HTML Sitemapping Tool

jibbajabba — Wed, 08 Jul 2009 13:47:09 -0400

Matt Everson of Astuteo has created SlickMap CSS, a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.

Via David Kaneda

delve Masterclasses Hit Brooklyn

jibbajabba — Wed, 08 Jul 2009 11:30:30 -0400

The first Delve workshop/micro-conference hits Brooklyn August 5-6. DelveUI is a 2-Day Masterclass on Designing (Web) User Interfaces. Delve bills itself as the antidote to the bloated conference experience. Basically small, affordable & frequent vs. overwhelming, occasional & costly. Each DELVE consists of a series of masterclasses conducted by expert practitioners, authors and thinkers of the biggest topics facing those of us who design and develop for digital, interactive spaces.

Spend two days in Brooklyn for this special event learning the ins and outs of creating beautiful and meaningful web interfaces with a killer lineup of masters in the craft. Speakers include UX pros Lou Rosenfeld, Jina Bolton, Jeff Croft, Scott Jehl, Andrew Maier, Jamey Kosoy, Jason Santa Maria, Ryan Stewart, Theresa Neil, Robert Hoekman, Joshua Porter, Anders Ramsay, and Todd Zaki Warfel.

Registration is open now.

Beautiful Minimal Websites

jibbajabba — Wed, 08 Jul 2009 09:37:18 -0400

I'm enjoying the 6 part collection of minimalist designs posted by Vandelay Design. Some sites are more minimalist than others. I tend to use that term loosely at times as well. But the predominant theme seems to be type as interface, minimal use of graphics (aside from a logo and the body content), few if any graphic treatments of navigation, and little to no use of texture and graphic effects, and liberal use of white space.

Infomaki: Open Source Usability Testing Software

jibbajabba — Wed, 08 Jul 2009 09:28:33 -0400

Infomaki is a Ruby on Rails application developed by the New York Public Library as a way of rapidly testing alternate designs and navigation language with minimal disruption to users. NYPL are using it to power http://usability.nypl.org and test new designs for the main NYPL.org web site. More and documentation is available at the NYPL Labs blog, http://labs.nypl.org.

Writing Microcopy

jibbajabba — Wed, 08 Jul 2009 09:14:38 -0400

Joshua Porter writes about the use of microcopy to create confidence and alleviate concerns in customers about the actions they take on your site.

Ironically, the smallest bits of copy, microcopy, can have the biggest impact. ... Microcopy is small yet powerful copy. It’s fast, light, and deadly. It’s a short sentence, a phrase, a few words. A single word. It’s the small copy that has the biggest impact. Don’t judge it on its size…judge it on its effectiveness.

Porter provides a few detailed examples showing how microcopy helped users entering ecommerce funnels, in one case reducing errors by qualifying an address form, and in another case adding information to assure customers that they don't need a PayPal account to purchase with PayPal. He provides a few more before/after bits of copy for typical registration and ecommerce scenarios as well.

Dashboard Insight's Dashboard Gallery

jibbajabba — Wed, 08 Jul 2009 07:10:35 -0400

Dashboard Insight has an extensive collection of screenshots of information dashboards that are worth a look.

100 Login Forms

jibbajabba — Tue, 07 Jul 2009 13:35:47 -0400

Design Reviver collects and captures a massive set of 100 login forms.

EightShapes Unify

jibbajabba — Tue, 07 Jul 2009 13:33:55 -0400

EightShapes Unify is a collection of templates, libraries, and other assets that enable user experience designers to create more consistent, effective deliverables faster. The system utilizes the Adobe Creative Suite of products; primarily, Adobe InDesign is the key authoring tool.

Userfocus 247 Web Usability Guidelines

jibbajabba — Tue, 07 Jul 2009 13:26:01 -0400

Userfocus provides guidelines for evaluating web site usability. The cover the following different contexts.

Home page usability
Task orientation
Navigation and IA
Forms and data entry
Trust and credibility
Writing and content quality
Page layout and visual design
Search usability
Help, feedback and error tolerance