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.

Entries in Design (96)

Wednesday
Jul112012

UX Mad: A New User Experience Conference in the Heartland

Uxmad

I'M TAKING A LITTLE BREAK from Sketchnote Handbook news to tell you about a new conference you might like to check out. I'll be back to book updates in a week or two.

If you've followed me for a while, you know there are two things I'm passionate about — design and the beautiful state of Wisconsin. As it turns out, this summer both worlds are aligning at UXMad — a brand new user experience conference in Madison, Wisconsin happening July 19th through the 21st.

Escape to Wisconsin

The Capitol, Madison, WI

I was involved in helping brand the extremely popular Madison Ruby conference last year and through the process got to know Jim and Jen Remsik, who are just as passionate about Wisconsin and love to throw amazing conferences in Madison, their hometown.

Jim and Jen always say that Madison is a city that's easy to fall in love with, all they have to do was play matchmaker — I agree. Summer is especially glorious in Madison, from the restaurants and bars to the farmer's market surrounding the state capitol building. it's a superb spot for a summer conference.

Learn Stuff, Meet People, Have Fun!

But beyond a beautiful, fun setting, UXMad is about learning new things in user experience design and connecting with others in the field. That's where Jim and Jen's experience with MadisonRuby, BizConf and LeanStartupMachine events come into play — they know how to organize events for real people.

Personally, I find smaller conferences more inviting and interesting, because it's easier to meet people. Connecting and gaining new friends is a big part of a good conference for me. Some of my best friends were made at conferences.

Even better, Jim and Jen know how to throw parties, so you'll have lots of opportunities to meet like-minded UX people while in Madison.

Speakers

They've brought together a wide variety of voices to UX Mad, presenting ideas being discussed right now in UX communities around the world.

Speakers include Russ Unger, Andrew Maier, Jina Bolton, Dale Sande, Peter Corbett, Jeanne Carpenter, Jeanne Carpenter, Nathan Greenawalt, Jessie Shternshus, Carl Smith, Chris Coyier, Andrew Wintheiser, Shay Howe, Susan Weinschenk, Jonathan Baran, Joshua Garity, Jon Hadden, Craig Culver, Craig Culver, Hampton Catlin, Michael Parenteau and Todd Larsen.

Whew, that's quite the line-up!

Pricing and $50 Off

UX Mad is a steal — 3 days of conference and a workshop in Madison for just $399. If your time is limited, you can do the workshop alone for $149, and if you just want the conference, that's $299.

Jim and Jen have given me a code to save you $50 on whatever combination of conference or workshop interests you — use code rohde50 at checkout to save some money for pizza and some good stuff at the farmer's market!

As I write this post I'm bummed, because I've already got a family vacation planned for that very weekend, or I would be going to Madison myself. At least I can help others to experience UX Mad in my place.

Now, go check out UX Mad and register!

Photo: Steven Fettig

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

Friday
Aug262011

Madison Ruby Logo & T-Shirt Designs

IT'S ALWAYS FUN to see a logo and t-shirt design in use. Last weekend I had the pleasure of paying a visit to Madison Ruby conference, where the logo I designed and t-shirt I illustrated were in heavy use.

Here are samples of the logo and shirt graphics:

Madison Ruby Logo Madison Ruby T-Shirt (Ashe)
Madison Ruby Pin & Sticker

I've created a Flickr set for Madison Ruby, with all of my sketches and in-progress vector art if you're curious how a logo is created from concept sketch to final art.

Madison Ruby Logo Sketches Round 1

Thank You

Thank you Jim and Jen Remsik for the opportunity to help brand Madison Ruby. I had a great time working with you and heard great things about the event.

Well done!

Photo: Ashe Dryden

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!

Monday
Dec072009

Linnea's Baby Room Design

img_1354small-200x300.jpgWhen Gail and I found out we were going to have our 2nd child, a baby girl, we knew we wanted to hire Aga Artka to design and guide us through the process of making it Linnea's room happen.

Hiring Aga has been an excellent decision in so many ways. Let me share them with you.

About Aga Artka


Aga Artka and her husband Brian have been friends a bit over 2 years. In that time I've watched Aga make a huge transition from full-time interior design employee to an interior design business owner.

It's been exciting to watch her take charge of her life while doing great design work for clients.

The Design Process


The process began with Gail and I sharing aesthetics we liked and were contemplating for the new room design with Aga, and a visit to the space she would be designing. Aga took our input, made measurements and created a plan for our review.

The plan included colors, furniture suggestions, and drawings Aga made of the room to give us a better idea how the space would be used and look.

I created a Basecamp project for the room design, which really made it easy for Gail, Aga and I to share ideas and links in messages, to create to do lists and manage the milestones of the project from start to finish. Basecamp was especially handy for accessing information (e.g. paint color, product URLs) when we needed it most.

We took Aga's plan and suggestions for paint color and other details and began to build the room out. Initially we thought about re-using Nathan's crib but in the end decided to upgrade to a new crib and changing table/dresser with better functionality and a look that better suited the room design.

Linnea's name graces the wall, from Chatty Walls, a small company who creates custom vinyl names. They did a great job creating the lettering, which was pretty easy to apply on the wall.

Our family also added a personal touch with hand-painted art to match Linnea's bedding and window treatments. I drew out the shapes in pencil, then Nathan, Gail and I worked together to paint 3 canvases that hang above the changing table.

img_1360small-300x200.jpg

Why Hire a Pro?


Having Aga there to set direction and take our random thoughts and make them into a cohesive direction was wonderful to experience.

Rather than slapping a coat of paint on the walls and buying some pieces and parts, we felt there was a direction to refer to as we went along.

Also, being able to ask questions as we built the room out was invaluable. On several shopping trips for chairs or cribs, I took photos of items with my iPhone and uploaded them to Basecamp for her review and commentary.

An important detail to note: when hiring a design specialist like Aga, having her available for questions and direction through the project is in my view, nearly as valuable as the initial design thinking and work is.

Experiencing this process was especially good for me as a design consultant. I was able see the design process from the client's perspective and understand how to better serve my own clients on design projects.

The FInished Room


This weekend Aga and Brian stopped over to see and take photos of the finished room. We're incredibly pleased with how the room turned out. It's comfortable and flows well for such a small space.

IMG_1350-500.png

We love the new space and are confident Linnea will love it as she grows up.

Read the details of the process from Aga's perspective on her blog. She shares more on the technical specs and talks about the before and after aspects of the project.

Go Hire Aga!


If you have a space that needs design and some direction from a professional, contact Aga Artka. She listens and knows her stuff. She's amazing!

Find her at @agartka on Twitter, on LinkedIn, on Facebook or on her company blog or website contact form.

Thanks Aga!

Photos: Brian Artka

Related Links
37signals Product Blog: Interior designer and client use Basecamp to collaborate on design of new baby room