Archives For User Interface Design

Get it for $20 on the O’Reilly site, format ePub, mobi or PDF. Please rate it and leave a review, I appreciate all feedback.

The print book should be available next week. I’ll be signing copies at SXSW @ 1:30pm March 13, at the Expo Hall.

Here are some excellent resources if you are designing an Android smartphone application for Gingerbread or Ice Cream Sandwich.

Galleries

  • My Mobile Design Pattern Gallery has hundreds of screnshots from iOs, Android and other OSs. I also posted a presentation of The Best Android Apps
  • After spending months compiling screenshots for the book, I just found this rockin’ Tumblr site with hundreds of screenshots specific to Android, Android Niceties
  • 150 Top Andorid Apps, Editor’s Pick. Note, not all of these have a great UI, but it is definitely worth browsing
  • As stated, AndroidPttrns is a shameless copy of pttrns.com, the site that catalogs iOS screenshots. Android Pttrns don’t have a lot of material yet, but I’m sure it will grow over time.

Pattern Libraries

Stencils/Templates

  • Zurb’s excellent OmniGraffle Stencil
  • Android 4.0 PSD
  • High Density PSD from Teehan + Lax, June 2011
  • Stencil for Visio- Nope can’t find one. I’ll say it again, the Visio community needs to get it together and starting making high quality stencils and sharing them. If you know of a Visio stencil for a current version of the Android OS, please comment and share.
  • Keynotopia for prototyping. I have bought and used this bundle for iPad prototyping and it works well. I haven’t tried it for android apps yet.
  • Glypish Icons are really useful for low and high fidelity mockups
  • User Interface Design Guidelines

    Android Design

    Blogs/ Articles

    Books

    Presentations & Videos

    Had to whip up an OmniGraffle stencil for jQuery Mobile. I submitted it to Graffletopia, but it isn’t live yet. You can download it here in the meantime. Just put in the user name > Library > Application Support > OmniGraffle > Stencils folder and unzip.

    Another great resource to help in your mobile web design projects is the Glyphish icon library- free and inexpensive icons for your mockups.

    Happy new year! I’m excited to say our group is continuing to grow, not just with more clients and projects, but in our experience as designers. In 2011 we had the good fortune to lead the design forImage

    One thing that was common across many of these projects was the need for a comprehensive cross platform UX solution.

    So we’re offering something new this year, a complete design and development solution for classic web apps + mobile  web apps + installed apps for smartphones and tablets.

    We’ve pulled together designers and developers from our little group to build the UXpert Team. Our team includes:

    • a senior UX designer
    • a creative lead
    • 2-4 very experienced developers to code the user interface and provide integration support

    So if you have a project that needs expert help, our first opening is mid-January. Email me for details.

    Update: we are booked until fall (Aug-Sept) 2012.

    I was speaking with some of our developers last night about a mobile web options like jQTouch, jQuery Mobile, Sencha Touch. And then we started talking about Backbone.js. I first heard about Backbone last week from a prospective client who mentioned they use it with PhoneGap to create their apps. I guess I’m late to the table on this one, but in case you haven’t seen Backbone.js either, check out these great examples from their site:

    Jérôme Gravel-Niquet has contributed a Todo List application that is bundled in the repository as Backbone example.

    Todos

    DocumentCloud

    The DocumentCloud workspace is built on Backbone.js, with Documents, Projects,Notes, and Accounts all as Backbone models and collections.

    LinkedIn Mobile

    LinkedIn used Backbone.js to create its next-generation HTML5 mobile web app.

    Flow

    MetaLab used Backbone.js to create Flow, a task management app for teams.

    AudioVroom

    AudioVroom is a free music streaming app that allows you to listen to your Facebook friends like radio stations.

    Foursquare

    Foursquare is a fun little startup that helps you meet up with friends, discover new places, and save money.

    Do

    Do is a social productivity app that makes it easy to work on tasks, track projects, and take notes with your team.

    Groupon Now!

    Groupon Now! helps you find local deals that you can buy and use right now.

    Basecamp Mobile

    37Signals used Backbone.js to create Basecamp Mobile, the mobile version of their popular project management software.

    Slavery Footprint

    Slavery Footprint allows consumers to visualize how their consumption habits are connected to modern-day slavery and provides them with an opportunity
    to have a deeper conversation with the companies that manufacture the goods they purchased.

    Trajectory

    Trajectory is an agile software planning tool used to discuss wireframes, record decisions made, relate user stories and bugs to discussions, and track your progress and plan the future.

    SoundCloud Mobile

    SoundCloud is the leading sound sharing platform on the internet.

    Pandora

    When Pandora redesigned their site in HTML5, they chose Backbone.js to help manage the user interface and interactions.

    CloudApp

    CloudApp is simple file and link sharing for the Mac.

    SeatGeek

    SeatGeek‘s stadium ticket maps were originally developed with Prototype.js. Moving to Backbone.js and jQuery helped organize
    a lot of the UI code, and the increased structure has made adding features a lot easier. SeatGeek is also in the process of building a mobile
    interface that will be Backbone.js from top to bottom.

    Talking Points Memo: Baroque

    Baroque is the editor currently powering the homepage of Talking Points Memo.

    Grove.io

    Grove.io provides hosted IRC for teams.

    Kicksend

    Kicksend is a real-time file sharing platform that helps everyday people send and receive files of any size
    with their friends and family.

    Shortmail

    410 Labs uses Backbone.js at Shortmail.com to build a fast and responsive inbox, driven by the Router.

    Battlefield Play4Free

    Battlefield Play4Free is the latest free-to-play first person shooter from the same team that
    created Battlefield Heroes.

    Salon.io

    Salon.io provides a space where photographers, artists and designers freely arrange their visual art on virtual walls.

    Quote Roller

    Coding Staff used Backbone.js to create Quote Roller, an application that helps to create, send, organize and track business proposals with ease.

    TileMill

    Our fellow Knight Foundation News Challenge winners, MapBox, created an open-source map design studio with Backbone.js: TileMill.

    rround.me

    rround.me uses the HTML Geolocation API to discover tweets, YouTube videos, Instagram photos, Foursquare spots, and other happenings
    posted by people close to you.

    Blossom

    Blossom is a lightweight project management tool for lean teams.

    Insta-great!

    Elliott Kember and Hector Simpson built Insta-great! – a fun way to explore popular photos and interact with Instagram on the web.

    Decide

    Decide.com helps people decide when to buy consumer electronics.

    Trello

    Trello is a collaboration tool that organizes your projects into boards.

    BitTorrent

    BitTorrent used Backbone to completely rework an existing Win32 UI.

    Fluxiom

    Fluxiom uses Backbone.js and HTML5 to deliver a seamless upload experience from the desktop to the cloud, including drag and drop, live previews, partial uploads, and one-click sharing.

    Chop

    Chop is a little app from ZURB that lets people slice up bad code and share their feedback to help put it back together.

    Blackcomb

    Opzi used Backbone.js to create Blackcomb, a web-based platform for collaboration applications.

    QuietWrite

    James Yu used Backbone.js to create QuietWrite, an app that gives writers a clean and quiet interface to concentrate on the text itself.

    Tzigla

    Cristi Balan and Irina Dumitrascu created Tzigla, a collaborative drawing application where artists make tiles that connect to each other to
    create surreal drawings.

    We recently had a new mobile project starting and all of our experienced mobile designers were booked. This gave me less than a week to ramp up a new designer. So I made a quick tutorial with lots and lots of screenshots, illustrating good design and not so good design. Gradually a set of patterns for mobile application design emerged.

    Even as I was cataloging these patterns, I knew that the real value wasn’t only the pattern identification, but in the hundreds of examples I’d captured. So instead of a tome of abstract patterns only an author can love, this book is a showcase, or gallery, of mobile application design. This book includes 400+ current screenshots from iOS, Android, BlackBerry, WebOS, Symbian and Windows mobile applications, organized by pattern type.

    Check out the:

    And follow me on Twitter, @mobilepatterns, for expert mobile design tips.

    When my son was 4 weeks old, the product manager at BabyCenter, a Johnson & Johnson company, asked if my team could design their iPhone and Android apps for new parents. They already had a successful pregnancy app, but needed an application to support new parents. The mobile application would be called My Baby Today and provide helpful resources and checklists for new parents.

    Since I had used BabyCenter’s web site and mobile app throughout my pregnancy and found it very helpful, I was excited and flattered to work on this project. This first version has the baby basics, and I hope the see more features added soon. The app is available for iOS today- Oct 12- in the App Store.

    This is a little off topic from the normal posts on interaction design and UI design patterns. But I was really impressed by the software my son used at two camps this summer:

    • Game Salad for designing games for the iPhone and iPad
    • Lego Mindstorms NXT for the robotics camp we hosted for seven 10-12 year olds this week.

    Game Salad

    This installed application for the Mac has a slick drag and drop interface and makes it pretty simple to design a multi-level game for the iPhone or iPad. In one week my son created a 10 level game with a fire breathing dragon. The only thing that would make this tool better is if they offered image libraries for use. I would have definitely paid to license a library instead of spending an hour trying to find the “right” dragon egg for my son to use in class the next day.

    Lego Mindstorms NXT

    The NXT software is pretty cool because it has a simple drag and drop GUI, but you can also use Python for development. There are sample programs to download that even show best practices for commenting code. In our camp, the kids built their own robots from scratch and coded them.

    Here’s a short clip of the final robot war. The goal was to be the last one in the ring (black tape triangle) after pushing the rest of the robots out.

    Harvest, the time tracking and invoicing tool we use, just added a new filter mechanism to their report generator. While I appreciate the additional functionality, I was most impressed with their multi-select combobox. It looks like a normal text field, but once the field has focus you can select any option and it will be added into the field, click again and you can select another option, building up any number of options. The field just gets larger (more rows are added) when you add more options than can be displayed in a single row.

    It is equally easy to remove items from the field by clicking the little ‘x’ next to each option.

    Does anyone know if there is a JQuery control for this? That would be awesome. A Flex control like this would be nice too, just in case there are any motivated developers reading this (wink, wink)…

    Update: Rajesh Rajappan provided a link to the JQuery control: http://loopj.com/jquery-tokeninput/. It has autocomplete with multi selection.

    Update again: Harvest released this control called “Chosen’, it is available here: http://harvesthq.github.com/chosen/

    We’ve been working with Adobe since last year to design and develop a showcase of reference applications for Flex 4.5 and Flash Builder 4.5. This has been an amazing project from a design and development perspective, designing for multiple form factors, and coding with the new SDK.

    Read more here:

    Just a year after Flash Builder 4 and Flex 4 SDK were released, new versions are available with Flash Builder 4.5 and Flex 4.5 SDK! The main focus for Flex 4.5 SDK and Flash Builder 4.5 is the ability to build mobile applications that target the Google Android, Blackberry Tablet OS, and Apple iOS operating systems. Additionally, Flex 4.5 SDK introduces new Spark components and improvements for large application development while Flash Builder 4.5 introduces dozens of new coding productivity features for faster ActionScript and MXML development.

    Shopping Cart


    Expense Tracker


    Sales Dashboard