Entries in Macintosh (40)

Friday
Nov042011

Hello OmniFocus!

OmniFocus Flurry Icon

OMNIFOCUS has been on my mind lately, as I've been looking for a better way to keep myself on track with the complex load of projects in my life.

I'd been using Things on the Mac, iPhone and iPad, but for various reasons, wasn't satisfied with how it was working for me.

I'd been hearing good things about OmniFocus from Kevin Farner, Shawn Blanc, Merlin Mann and others I follow. Last weekend, I decided to jump in and pick up the Mac and iPhone versions of OmniFocus.

It's been less than a week, but already I'm happy I've made the switch to OmniFocus. It's powerful, but I especially appreciate the multiple ways I can view the same tasks: by project, by context, by due date or even in a custom view.

While I'm still very much an OmniFocus newbie, I wanted to share some resources for others who might be considering OmniFocus or seeking more information about how to work best with OmniFocus.

Web Articles

Shawn Blanc: A Sledgehammer Called OmniFocus
Jonathan Christopher: How I Use OmniFocus to Help Get Things Done
David Sparks: Review - OmniFocus and also Planning to Plan
OFThemes: OmniFocus Themes
Asian Efficiency: Using OmniFocus

Books

The Omni Group: OmniFocus, GTD and You
Kourosh Dini: Creating flow with Omnifocus

Videos

David Sparks: OmniFocus Ninja Tricks
The Omni Group: Mastering Workflow: using OmniFocus for iPad

Hopefully these resources will help those interested in OmniFocus to make the jump or provide good reference for current users of the tools.

If you have additional resources I can add here, please leave a comment.

Icon by Damien Huze
Sunday
Sep252011

SecondConf: Sketching for Developers


SINGLE TRACK conferences seem to be all the rage. Limited attendee slots, focused topics and one track that everyone can enjoy together. SecondConf, like Madison Ruby, is one of the new crop of focused, single-track, small conferences with the right recipe.

On Sunday, I was honored to speak at SecondConf, on the importance of sketching in app development. I shared sketches I created for developer Chad Sellers, while designing Pear Note for Mac and iPad. I offered a variety of tips and ideas to encourage indie developers to start sketching too.

I've posted a PDF of my presentation deck (2.5MB), if you'd like to check it out.

Thanks Dave and Amy Kinney for the opportunity to be part of SecondConf!

Wednesday
Sep072011

A Clean Start

Step1 shelf macbookpro 13 022411

OVER LABOR DAY WEEKEND, I made a clean start on my 13" MacBook Pro. Over the past few weeks I'd become aware of OS slowdowns, system quirks and a variety of little issues. A fresh start was in order.

Annoyances Added Up

My MacBook isn't old. I bought it at the end of 2009 and it's been the best Mac I've ever owned. Because I had to be up and running quickly for work, I used migration assistant after taking it home. This approach worked as planned, but carried forward the digital cruft of several years running OS X.

Lately I'd noticed the little annoyances — slow performance, disk space running low, font oddities and other strange issues. Years of OS barnacles needed to be scraped from my machine and a fresh coat of paint applied.

Diving In

It was Friday night of the Labor Day weekend, when I realized I had a 4 day window to start this cleansing and freshening, so I dove in. Taking a 640GB external USB drive I'd bought to archive files and movies on, I redistributed those files back to the MacBook and a spare FireWire drive, the reformatted the external USB drive to create a bootable backup.

SuperDuper took care of the rest, fixing permissions on the newly formatted drive, and preparing it for backup. I went to bed while SuperDuper cloned my drive, waking the next morning to a perfect copy.

If you're reading this and don't have SuperDuper, go get a copy now. SuperDuper is one of my most valued utility apps.

Resurrecting Lion

In July I upgraded the MacBook to Lion, which has gone very well, Unfortunately, Lion cleans up after itself and deletes the installer once it's installed. In order to wipe and install a new version of Lion on the startup drive of the MacBook, I needed to re-download the installer.

After a quick search, I learned that pressing the option key while clicking the Purchased tab in the Mac App Store turns the Download button into an Install button, which allowed me to reinstall Lion on my drive.

A bit of research turned up articles about Lion clean installs and making a bootable Lion DVD or USB thumb drive from the Lion installer. I backed up the installer image to a thumb drive and created a bootable DVD to work from.

The Cleansing Process

Once I had a clone of my MacBook's internal drive on an external drive, I initiated an Erase and Install of Lion from the bootable DVD I'd created. In 40 minutes, a fresh version of Lion was ready to go on the MacBook.

My next task was re-installing apps I use, rather than moving the whole lot over again. I wanted to start with as fresh and clean of a system as possible — to free up disk space and create a faster, cleaner system.

This approach worked great. By Saturday evening I was installing a variety of my most-used apps, with old app remnants and crufty preferences left on the external drive, in case I might need them later. The system was noticeably faster, with windows snapping open and apps running quickly.

App Installation

Bringing new apps into the system was relatively easy, especially apps purchased on the Mac App Store. In that case, a matter of logging into my Mac Store account revealed a list of apps ready to download.

A few apps were brought over from the backup drive, and in some cases (like TextExpander) preference files were brought over as well.

In some cases it was easier to install apps from disk or download the latest versions from the developer websites. I also found indy Mac app developers do a great job with serial number recovery, which I needed a few times.

After installing Adobe CS5, I intentionally un-installed flash. I'd done the same on the old system and it really helped Safari. I make use of extensions to handle video in Safari and Google Chrome for flash-dependent pages. Learn more about the flash-free approach on Daring Fireball.

I had the idea going into the cleansing, recovering apps would be the most painful part of the process — but it wasn't. I wish I'd cleaned house earlier.

Current State: Awesome

As I write this post I'm enjoying a revived MacBook Pro. With a clean, quick system, I'm using the machine more than before, especially unplugged from the AC adapter and big screen. It's like a new MacBook Pro.

I plan to add notes to this post as I encounter things relevant to the clean start process, and would love any suggestions you may have.

Resources

Shirt Pocket Software: SuperDuper
Lion Clean Installs
Burn a Bootable Lion DVD or USB Thumb Drive
Smile Software: TextExpander
Daring Fireball: Going Flash-Free on Mac OS X

Wednesday
Dec292010

Postbox Icon in Cult of Mac's 15 Favorites for 2010

postbox-2-icon-512.png

What an honor! This week the icon I designed for Postbox 2 joins Things, Transmit, Reeder and Yojimbo in Cult of Mac's 15 Favorite Mac OS X Icons of 2010!

Here's a photo of all 15 favorite icons with Postbox highlighted:

cult-of-mac-15-hilite.png

From the Cult of Mac article written by Killian Bell:

Postbox - I love the Postbox icon for its clean, graceful design that represents the elegant user interface within the application. If you’re unhappy with the built-in Mail application on your Mac, Postbox is a great alternative. Featuring unified account groups that allow you to combine all of your email accounts in to one inbox; a quick reply feature that lets you respond to emails without the need to open a separate window; intuitive conversation views; and much, much more. It’s simple, clean UI is a pleasure to use and it’s well worth its $29.95 price tag.

It was great to see Jon Trainer's icon for Knapsack, designed by my friend Fernando Lins in the mix as well. Congratulations John and Fernando!
Tuesday
Aug172010

Designing Pear Note 2.0

Pear NoteOn August 9th 2010, when Useful Fruit's app, Pear Note 2.0 was released, I realized one of my design dreams — helping an independent developer redesign a Mac application from the ground up. This is the story of the redesign process.

In 2009 I helped Chad Sellers of Useful Fruit Software to rebrand his independent software company.

I had a great time developing his new identity and now Chad needed help redesigning his flagship note-taking app, Pear Note. The timing was perfect, so Chad hired me on to begin the process of redesign.

Pear Note 1.0

The original Pear Note 1 application had tons of promise. What the application needed was an updated user interface to match its solid functionality.

recording.jpg

Goals and Plans

Before starting with any design work, I first talked at length with Chad about his overall goals for Pear Note, what areas he liked, which areas he felt needed improvement and new features he wanted to add to the app.

I spent time using and reviewing Pear Note myself, so I could suggest ideas for areas I saw could be improved, refined and updated.

Our goals for 2.0:

• Maintain the solid concepts and structure of Pear Note 1 — recording audio and video while typing and syncing with slide decks was a key feature neither Chad or I wanted to lose in a redesign.

• Updated UI controls & icons — the original version featured a collection of controls Chad was able to put together to make the app work, but there was huge potential for a sleeker design without losing any functionality.

• Addition of new UI controls and features — speed control, a jump back 30 seconds feature and document sharing to the web, so Mac users could share their Pear Note files with anyone with a web browser.

• Improvement of the search feature — in version 1 search was an icon that activated a heads-up style dark gray menu. We both wanted to add a search field in the main window with lightning fast and readable results.

• Better structure and status areas — I wanted to add an iTunes-styled info/control bar for playback, unified audio and video controls and an info status bar at the bottom of the main window with helpful, contextual information.

UI Pencil Sketch Concepts

As with all of my design projects, I like to start in pencil on paper. Using this approach helps me loosen up and explore ideas without fearing software limitations or crashes — sketching frees me to flow.

I began by sketching out a rough idea of the main window of Pear Note in pencil, with updated controls, an iTunes style playback info/control bar, unification of the right column and the info bar along the bottom of the window:

Pear Note 2.0 Sketch Wireframe v1

The original time control bar and handle control looked too much like a standard volume slider, so I put emphasis on this area first.

old-info-playback-control.png

Pear Note creates blended notes that synchronize text, audio, video and slides, so I wanted a control that could allow a user to see where they were in the note file, then slide back and forth to easily location a certain section of notes.

iTunes-Scrobber.png

Because the playback was very similar to music or podcast playback, I was inspired by Ui concepts being used in iTunes to present status and a grab-able control bar.

playback-info-sketch.png

I really liked that the iTunes status bar made it clear what part of a track had been played and what was left — another useful feature for a synced notes document.

Simplifications

Another simplification I wanted to deal with was the mixed controls in the right side of the app. In Pear Note version 1, there was a section for Recording Options, separated from Audio and Video.

right-col-controls.png

I felt recording applied to both of these functions and proposed the idea of making the controls identical by offering recording controls in both Audio and Video areas, completely eliminating the separate Recording section in the application.

unified-right-area.png

Helpful Features

Finally, having used various Mac applications with status bars at the base of their windows (Safari, Postbox, Mars Edit, etc.) I wanted to suggest the idea of a helpful, contextual notes status bar at the bottom of the Pear Note main window.

I suggested the date notes were captured, character count and recorded time might be handy to have for a heavy note-taker and would help visually finish off the main window in a way the plain window of Pear Note 1 hadn't.

sketch-infobar.png

Sketching Controls, Take 2

In the next round of sketches I focused on two control areas — record and playback controls and the playback time status controls.

After some research, I wanted to create more standard style playback controls with a bit of shine and even explored the idea of a rounded record button to help set it off from the other controls.

Pear Note 2.0 Sketch Wireframe v2

Chad wasn't a fan of the rounded button, so we moved away from that direction, though he really liked the idea of a unified record and playback control.

As for the playback time status controls, we wanted to try an idea that used the full width of the main window as squeezing this control into a single top row of controls tended to make it small, a potential issue on minimized windows.

I sketched out the idea of moving this control just below the record and playback controls, and making it wide and short, with iTunes influences. Small window sizes would limit space on this design, but to a lesser degree than had we tried to jam it into a single bar along the top of the window.

wide-scrobber.png

At this point both Chad and I were satisfied with the progress made in sketches, so I moved to Fireworks to create mockup screens.

Mockup Screens

In Fireworks, I was able to explore various styles for buttons, play with the elements in actual size and generally get a feel for how the UI might actually work.

I started with a very simple v1 mockup and dark controls, a stylized playback time control and concepts for the audio recording meter:

Pear-Note-UI-v1.png

In the next revision I explored controls that were dark, that had shine and some with no shine at all, referencing various controls in Apple's iDVD application.

I found it helpful to grab screenshots of elements for reference and drop them right into the mockup for comparison:

Pear-Note-UI-v2.1.png

You can see that these early mockups don't even feature the right column or footer ideas built yet — those came a bit later.

In this next version you'll see I've settled on a subtle shine for the record and playback controls have started exploring icons and the search bar appearances, filled out the right column and the footer area:

Pear-Note-UI-v3.5a.png

You'll also notice the idea of line numbers I proposed in these mockups. While Chad liked the idea, it wasn't critical to the app and was removed from scope to allow effort to be placed on more critical features.

As I progressed, more details were refined and finalized, until reaching the last mockup before extracting icons and elements as PNG graphics for Chad to use in the actual application. Note the subtle changes in this last screen, including details like the small icons in the status bar at the base of the main window:

Pear-Note-UI-v5.1-Playback.png

Production Art

I used Opacity for many of the graphic elements, an app Chad used and I'd heard of from Jon Hicks in his search to replace Fireworks. It's a different app, so it took some adaptation, but the nice part for Chad is, the graphics I created in Opacity helped Chad generate Cocoa code that he used directly in Pear Note.

In some cases it made more sense to stick with Fireworks and generate PNGs. Mostly these were cases where Opacity or my skills with the tool weren't flexible/good enough to produce elements in the way I wanted them to appear, or where it was simply quicker to export from Fireworks than redo graphics in Opacity.

Final Development

Here is the completed Ui design of the app itself after revisions, exported graphics and actual building of the app by Chad:

Final-Pear-Note-UI.png

Final record and playback controls:

Final-Controls.png

Right sidebar:

right-sidebar.png

Bottom info status bar:

infobar.png

You may notice the Share icon in the final UI, which we worked on later in the project. This feature allows a Pear Note user to share their synced text/audio/video/slides as an HTML page with playback for anyone with a browser — more on that next.

Designing the Sharing Feature and Web Player

My last UI design to tackle was the Share menu, which lets Pear Note users export Pear Note files to web players with text and embedded audio, video and slides that can be viewed on any computer with a browser.

First, we focused on the player, going through revisions until we had a design that worked and felt like an extension of the desktop app while still being a web player:

PN-Web-Player-FINAL-Available.png

Then we worked on a dialog box to show users how to setup sharing that could also take advantage of Dropbox, a web-based storage service:

Share-Menu-Dialog-v2a.png

Project Satisfaction

Now Pear Note 2 is released, and I'm excited to see all of the ideas, thinking and design coming together in the new version of the product.

It's funny, because as I've progressed through this experience I've moved from feeling like a designer hired to produce design ideas and elements to more of a partner in creating a revamped app — I really love that feeling.

It felt great being able to recommend friends Brian Artka to solve the challenge of a web-based player with many moving parts in HTML5 and Tyler Dunn to redesign the Useful Fruit website to coincide with the release of Pear Note 2.0.

Buy Pear Note 2.0

If you take notes often or even a little, please check out Pear Note. I've grown to find it an indispensable tool for capturing typed notes, graphics, audio, video and slides all in a single blended document.

I may be biased about Pear Note's UI design as the designer, but I was a user and fan long before I'd considered doing the UI redesign. It's simply a great application.

For $40 it's really a steal of an app that you'll quickly find indispensable too. If you have a family, check out the Family License for $55 and for small companies, contact Chad directly for great business licensing deals customized to your needs.

Thanks!

I hope this article has been informative and provides a small glimpse into the design of application user interfaces. It's challenging work, but very rewarding.

I'm happy Chad decided to work with me on the Pear Note 2.0 redesign project.

Thanks Chad!