Buy my Books!


The Sketchnote Workbook is a fully-illustrated book and video, showing how to use sketchnotes in new ways, along with advanced tips and techniques.
Learn about and buy the book →
Download a FREE chapter →
Watch a FREE video sample →


The Sketchnote Handbook is a fully-illustrated book and video, designed to teach regular people how to create sketchnotes.
Learn about and buy the book →
Download a FREE chapter →

Mike Rohde (Color - Square)

ROHDESIGN is the website of designer Mike Rohde, who writes on design, sketching, drawing, sketchnotes, technology, travel, cycling, books & coffee.
Read more about Mike →

SIGN UP! Get the Rohdesign Newsletter.

« Fusion + Carbon Ads Productivity Bundle | Main | A Clean Start »
Friday
Sep092011

Pear Note for iPad UI Design

Pear Note iPad 200

FOR SEVERAL MONTHS, Pear Note developer Chad Sellers and I worked through concept sketches, mockups and development builds of Pear Note for iPad, prepping it for app store approval.

Last night I was excited to hear Pear Note for iPad was approved and is $4.99 for a limited time. Check out Chad Sellers' Pear Note for iPad post and TWiT's iPad Today #62 Podcast at 13:00, for more details.

In this article I'd like to share a selection of sketches and screenshots of the application with a few notes for some reference on the development process.

Concept Sketches

As with other projects I work on, sketches are an important way to capture and explore ideas that can be shared with clients, like Chad.

From an initial phone call, I began exploring ideas about how the main UI might work, capturing the ideas and notes with ink on paper:

Pear Note: Early UI Concept Sketches
Pear Note: UI Concept Sketches

Later in the process, I sketched concepts for icons and formatting menus, exploring ideas of how these items might work and look:

Pear Note for iPad: Icon & Menu Sketch

These kinds of sketches are great for getting ideas out in the open, and worked well for Chad to review and comment on.

From these loose sketches, Chad was able to see several options quickly and I was able to take that feedback and my sketches to create Photoshop mockups.

Final Screens

Here are samples of final Pear Note screens, with elements in place.

Horizontal Recording - Pear Note in recording mode, capturing both audio and text entry via on-screen keyboard. Note the added keys along the top of the standard keyboard to provide quick access to common actions in Pear Note:

Recording

Horizontal Playback - Playing back the captured text and audio, which is synced. Had fun connecting the light blue color in the play button and playback scrubber handle on this one:

Playback

Vertical Notes Playback - This shows Pear Note for iPad playing back a Pear Note recorded with video, audio and slides on the Mac version:

Pear Note for iPad: Video Notes Playback

Vertical Rich Text - A sample of the rich text options in Pear Note:

Pear Note for iPad: Rich Text Features

Final Thoughts

I'm pleased with how the interface of Pear Note for iPad turned out. Chad and I were able to attain a clean, simple to use app and I think our working through ideas and communicating throughout the process made the difference.

Currently the app supports text and audio recording, with text/video/audio/slide playback in version 1.0, though Chad has goals to add features over time. This was a big project, and I applaud Chad for limiting scope to get the app out, rather than holding it back for every feature.

Buy Pear Note for iPad

For a limited time, Chad has priced Pear Note for iPad at $4.99 - a great deal for a tool that can record audio and sync it to your text notes. Pear Note works great with or without a bluetooth keyboard and can sync files via Dropbox. In testing I've found the app a great tool in meetings. Check it out.

Resources

Fruit Blog: Pear Note for iPad
TWiT: iPad Today #62 Podcast
App Store: Pear Note for iPad
Macworld: Pear Note for iPad
App Advice: Pear Note Arrives On Your iPad

Reader Comments (7)

Mike,

This is great, good work & well done.

I hope that they have commissioned you to do a similar job on the the Mac version? It really needs it as the UI is very poor, though of course the functionality is great.

John

September 11, 2011 | Unregistered Commenterjohnwin

Thanks John! Actually I did the redesign of Pear Note 2.0 a little while back:

http://rohdesign.com/weblog/2010/8/17/designing-pear-note-20.html

What about the UI is bothersome for you?

September 11, 2011 | Registered CommenterMike Rohde

Mike,

I guess I should update my software more frequently! It's been well over a year since I fired up Pear Note. The upgrade from V1 to V2 does a great job of levelling the Mac and iOS versions.

September 12, 2011 | Unregistered Commenterjohnwin

Ah, makes sense! :-)

I do want to revise the UI a bit (if Chad's OK with that) to be more Lion friendly. There may be some opportunities for that in the future - we'll see.

September 12, 2011 | Registered CommenterMike Rohde

That would be really good. I see more and more apps (and web apps) styled to mimic the iOS (specifically iPad) interface, see https://simple-note.appspot.com/ as an example.

For me Pear Note would fit right into this space.

I'll be sure to keep checking for updates!

September 12, 2011 | Unregistered Commenterjohnwin

I don't use Mac, so, I'm not very familiar with Pear Note. But it's amazing how you really start your designs from scratch. Very nice!

September 12, 2011 | Unregistered CommenterHalley

Thanks Halley! I find starting with drawing important - helps me focus on the ideas and not the software (Photoshop) until the time is right.

September 14, 2011 | Registered CommenterMike Rohde

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Post:
 
All HTML will be escaped. Hyperlinks will be created for URLs automatically.