Here is a small glimpse into the process I normally follow when approaching a new design for an app, or iterating on a current release or old idea. Of course, this is by no means a road map. Merely a process that works for me. It can be the most rewarding and frustrating time of the design process but I’ve found a few simple steps that help me get started.

Don’t think about it
The first thing I do is clear my head by working on something else while trying to suppress any ideas I have into the back of my mind. The first rule I have about mobile design is avoiding clutter. Ideas are easy. Execution is messy. By focusing on something else I can subtly think about what I want to do with a new app without over thinking it. I learned this from reading Archimedes. The best way to have a “Eureka!” moment is to separate yourself. Some people take walks, read, zone out. I code. I pick a singular task and I start coding around it. The clearness of logic helps me design by cutting away the approaches that won’t work. Code is clarity. Either it works or it doesn’t work. I bring this into the design while I’m still in the exploratory phase. Remember, you can’t debug a design.

Look past the obvious
When I am about to start sketching, I list out every possible approach that comes to my mind immediately. Sometimes I sketch them out. Then I throw them away. Well, maybe not throw away but I at least put them aside. This is a great exercise because it usually means I’ve cleared away the obvious. The low-hanging fruit. The standard approaches. We are constantly bombarded by design in our daily lives from advertising, other apps, and so on. This can serve as inspiration but it can also limit you. I like to start past the normal limits and work my way back.

Get dumb
Pretend you know nothing about design. You’ve never designed an app before and you’ve never even seen one. Good. Now design what you want. Design something that improves your life. Even if it’s just for you. Then, slap the grey matter back in your head and get to work.

Pull the limits
It’s a lot harder to start safe and then get dangerous. Complacency breeds conformity. The problem is, most designers start creating boxes within boxes within boxes so when a circle comes along the immediate response is to throw it out. Especially if you’ve spent tons of time building this solid foundation around a safe idea. Grids, modules, templates, etc. will find their way. If you begin by locking yourself in you’ll never be innovative. I like to start way out and work my way back. Screw pushing the limits. Pull them to your idea.

Seek out the uninvested
The best critics are the most ignorant. Asking the obvious questions and offering simple critiques are always going to happen. It’s necessary but it’s the easy thing to do. “I don’t like that color” isn’t going to help design a better app. “Why is that button there?” might. Those are the questions my wife, my mom, or a random person on the Metro might ask. Those are the type of questions I like. The questions that come from not knowing the app or product. Not being invested in the progress of the app or the deadlines ahead. That’s how the right questions get asked because they’re honest.

Kill your babies
This is a saying tossed around in creative writing classes. You have to know when you’re lost and when to start over. I’ve tossed out designs with 20-plus hours behind them. Simply because they weren’t working or they seemed forced. Designing is a lot like playing chess. Especially in mobile design. You have to think several steps ahead. You have a small amount of real estate to design in and every choice means you are left with less choices to make. Not having to make choices seems like a good thing. Until you don’t have any. Highly talented chess players can see they’ve lost or won after the first few moves. Or at least what their probability is. The ability to identify when to kill your babies, kill your designs, is a tough choice to make. But you’ll save yourself a ton of time in the end.

Walk away
This is the hardest and final step for me. Knowing when to stop. I am completely guilty of wasting time tweaking and perfecting when I know all I’m going to end up doing is rolling back to the original design. I know my designs will never be perfect. And they shouldn’t be. If it’s perfect then you can’t improve it. When I’m near the end of a design I take frequent breaks. As many as possible. This makes stopping much easier because at one point I’ll come back, look at the design, and know if it’s there. Then it’s on to the next one.

Gather a few people you know and ask them to help. Then, ask an actual automobile designer to join you.

Ask everyone to sketch out a car, except the automobile designer, and then share them with each other. You’ll probably get a lot of “I like that” or “I don’t like that color” or “Wow. Different.”. Once you’ve discussed let the automobile designer critique. He would probably ask questions like, “Did you take aerodynamics into account with your design? Fuel efficiency. Difficulty to build. Parts availability.”, “Why did you make the windows that shape?”, “How would you pitch this design to engineers?” and so on.

Who would be able to answer? And answer adequately? No one.

Now, I know nothing about car design. I know what cars I like and don’t like. If I was given a sketch pad I could probably draw an outline of a car with some detail. But I do drive a car regularly. Does that qualify me? Probably not.

When it comes to product design, especially with mobile applications, it seems everyone wants to be involved. Of course, certain people should be involved. You’re going to have project managers, product managers, developers, IT people maybe, managers, and so on. However, one key component is missing with all of these people’s titles. Designer.

Design Feedback

I love hearing feedback on my designs. I welcome it more than probably necessary. But with feedback, I like reasons. “I don’t like that color” isn’t going to fly with me. Within a few minutes of a feedback session or over email it’s glaringly obvious who uses mobile apps (drives a car) and who designs mobile apps (our automobile designer). And sometimes you’re not even lucky enough to have someone that actually uses apps or the device you are designing for in general. But they’re involved in this product. Probably because of seniority or fuzzy lines between departments. Good luck. If you can find a book on social engineering I suggest picking it up and reading it as fast as possible. You’re going to have to do a lot of convincing and compromising without upsetting said person.

‘We Want to Change, Add, Remove (This)’

These are the worst words a designer can hear. First because they used ‘we’, meaning everyone else but you wants to do and there’s no other option. Second, it’s probably something that totally disrupts the current design plan. Third, the savior item. The worst. The savior item is the, “The guys upstairs don’t think users will understand (insert option).” or “It’s too similar to other apps. We should stand out.” Now I might agree with the last one if the similarity is based on function and not design/UI. Otherwise, it’s probably something that will end up working against you and confusing the user. Remember, these statements are most likely coming from someone that doesn’t have user experience so of course it’s confusing to them. I’ve found that if these ideas go through somewhere down the line they will try to make it look like it was your idea and that it’s bad. Keep notes. Save emails. Especially your responses. Especially the ones that say, “I think you’ll find as we progress with this app that this function will become confusing and unnecessary.”

One Step Ahead

One thing most non-designers aren’t thinking about is impact of function. Maybe the developer or IT guy is thinking about this, but the manager-esque crew probably isn’t. Impact of function is what I like to call the Butterfly Effect of Design. Think back to the car metaphor. Remember the questions about aerodynamics, fuel efficiency, et cetera? That’s impact of function. A cool looking modern, blocky car is most likely going to have terrible wind tunnel results. Since we weren’t car designers though we didn’t think about that. The same applies to mobile design.

The biggest problem I see during a design by committee process is product ignorance or UI ignorance. How this is usually presented is when someone wants everything to fit in viewable area of the device ignoring that scroll exists or that pagination exists. Why? Because that’s the way they are viewing mocks and wireframes. They are unaware of this whole other world behind or below the current screen. This ends up causing clutter. As soon as you try to explain and take pieces away you’ll receive a firey email when you send out the next round of mocks. “Where’s this?!” “Where’s that?!”

Designers are creative. With creativity comes imagination. When someone can’t imagine certain items existing in a non-viewable area because you’re looking at a flat image of a screen, they’ve become toxic. Get them out of there. Either don’t include them in the regular meetings or dismiss them from the project all together if you can. They will do nothing but hinder the product.

‘If You Can Dodge a Wrench, You Can Dodge a Ball’

This post is in no way a solution to the design by committee problem. It will always occur. Simply, I’d like to share the experiences I’ve had. I can say this though. It gets easier. You’ll learn to deal with these committees as you progress. The subtitle says it all. If you can get through a really rough design by committee situation, you can get through the rest. You’ll be better for it as well. Just know when to pull rank, when to say no, and when to go to your boss. Don’t do any of these too often or you’ll look like a rookie and you’re supposed to be the expert.

As a mobile design director, I’m preaching HTML5 and all of it’s glory as I work to bring rich online graphics into the mobile space. Specifically tablets. So, let’s get started.

Dive Into HTML5
A great resource for quick start information in the basics of HTML5. Setting up a document, handling video, etc. Read through the contents and prime yourself.

How to Make an HTML5 iPhone App
A little off of the data visualizations path, but this is a fantastic tutorial to learn why HTML5 is so powerful in the mobile space. Learn about simple offline caching, manifests and more

20 Fresh JavaScript Data Visualization Libraries
HTML5 and Javscript, specifially jQuery, are the happy couple that bring stunning data visualizations to life. Check out these libraries to see what the capabilities are for graphing complex data in standard forms.

jQuery Visualize
Here we go. A great way to turn tables of data into beautiful graphs in the HTML5 space. And here is a quick demo on how to use it.

HTML5 Maps: Cartagen
Maps are a huge part of interactive graphics and data visualization. The days of hover over Flash maps are dying. Might as well stop the coffin dodging and do it up properly with Cartagen. But, there is always the native maps functionality in the HTML5 API so you should explore that as well. Here is another example.

HTML5 and CSS3
Of course we want our data visualizations to look awesome. So, we’ll need some style through CSS3. Check out this introduction into the basics of how the two play together. We’ll get into more specific CSS3 techniques later. Here’s an example of using HTML and CSS to display the solar system.

This post will be updated with more resources as the class approaches. Also, follow the tag HTML5 Data Viz for future tutorial posts and how-tos.

TapFancy

A great showcase of iPhone and iPod touch app design. Cool way to see screens without necessarily having to download the app.

Useful Design Tips for your iPad App

A great article from Smashing Magazine. It focuses on the iPad but has great tips throughout. Something I like to read and re-read before I start a design. Good reinforcement.

34 Inspiring iPad Application Websites

Sometimes it’s great to start at the end and see how the promotion of the app on the developer’s Web site looks. I enjoy these sites to see how the design of the application influenced the design of the site.

Apple Design Awards

It’s good to know who’s winning awards out there. Especially when the award is from Apple!

20 Examples of Stunning iPad App Interface Design

The title kind of says it all. Again, always good to gather inspiration from others work.

Inside the design process for NPR’s iPad app

A wonderful story about NPR’s design approach for their iPad app. Bask stories can be great inspiration as you find others have probably struggled with the same things you are.

These are links and resources from a presentation Matt Mansfield, professor at Northwestern University, and I gave at the American Press Institute on “Designing the User Experience”. We focused on a brief history of design and how it is changing in the new media landscape.

Download our presentation as a Keynote file and as a PDF.

Links we mentioned:
The SND Toolkit.
Online News Association
Hacks and Hackers

Readability – Installation Video for Firefox, Safari & Chrome

Readability – Installation Video for Firefox, Safari & Chrome from Arc90 on Vimeo.

Survey: Print Publishers Capitalizing on Opportunities Offered by Mobile Market

Audit Bureau of Circulations

RockMelt: Your Browser Re-Imagined Video

http://www.rockmelt.com

Flipboard for iPad – The Social Magazine App

Flipboard for iPad

State of the App Industry 2010 Report

From ReadWriteMobile

The Mobile Developer Journey from App Design to Monetization (Infographic)

Also from ReadWriteMobile

iPad as the new Flash

From Jeffrey Zeldman

Applications we mentioned

The Washington Post for iPad
Allrecipes for iPad
The New York Post for iPad
Esquire for iPad
NPR for iPad
Untappd
Instapaper
Flipboard
RockMelt

1. Inspiro – $3.99

A great app for sparking creative juices. I like the word randomization that gets my mind thinking about new directions, names, logos, colors and more. Very cool. (Also, available for iPhone)

2. Phaidon Design Classic – $19.99

This is a pricey one but well worth the iconic, classic design images. Beautifully done and great for inspiration.

3. Pages – $9.99

You might not think this is good for designing but it’s awesome for laying out quick ideas. I’ve cut down a lot of the individual GUI elements (device shells, icons, images, toolbars, etc) into iPhoto and pull them on to the page. Great for creating quick, high-level mocks on the go. And the best? You can export and share it quickly.

4. Penultimate – $3.99

Simple sketchbook. That’s why I love it. Simplicity. Easy for jotting down a child-like sketch of an idea. Also, decent for taking quick notes. By far my favorite of all the apps like it.

5. Adobe Ideas – Free

Such an intuitive app. Great for creating cool illustrations on the go. And, it’s free! (Also, available for iPhone)

6. iMockups – $9.99

Pretty cool app for doing quick and dirty mocks. Whether for Web, mobile or whatever you need. The interface could use a little more work though.

7. GoDocs – $3.99

Awesome for syncing up Google docs. I keep guideline PDFs, requirement spreadsheets and more in the cloud. This app allows me to check them and sync seamlessly as I’m working on designs. (Also, available for iPhone)

Have an iPad app you love? Please share in the comments below!

iPad and iPhone

iPad Icon PSD Template

iPad Views

iPad Icons

Teehan & Lax iPhone 4 GUI

Glypish iPhone Icons

iPad Stencil for Omnigraffle

iOS Design Stencils for OmniGraffle

iPad Wireframe Template

iPhone Wireframe Template

App Icon Template

Open Source Vector Icons from GCONS

iPhone UI Vector Elements

iPad Vector UI Elements

Android

Android GUI Template

Google Android GUI

Android GUI Widgets and Toolbars

Mac OS X Plug-ins

Interface Guidelines

Photoshop Style Plug-ins

My iOS Photoshop Styles

More coming soon. Please check back!

Resources:
Google Font Directory
Google Font API: Getting started
Google Font API: WebFont loader Javascript library
Google Font API: Technical Considerations*

* Of course browser compatibility is important. And, as usual, Internet Explorer is the dunce.

Anyway, let’s get on to the cool stuff…

1. Choose your font
Hit up the Google Font Directory and decide which one(s) you want. Yes, you can have more than one. Then, click on the font and check out the different levels and variants. The most important piece here though is grabbing the code. Click on the “Get the code” tab and copy that CSS link.

Looks like this:
<link href=’http://fonts.googleapis.com/css?family=Cantarell’ rel=’stylesheet’ type=’text/css’>

You can also select different styles (regular, bold, italic, etc.) which will add on the extra parameters to the link.

Looks like this:
<link href=’http://fonts.googleapis.com/css?family=Cantarell:regular,italic,bold,bolditalic’ rel=’stylesheet’ type=’text/css’>

And if you’re feeling the @import, feel free to do this:

@import url(http://fonts.googleapis.com/css?family=Cantarell);

2. Let’s build a simple Web page for testing
Here is a link to a very simple design utilizing the Google Font Cantarell from above. Feel free to look through the code and try it yourself. You can download the code package here.

I’ll be updating this post with a few more examples as time goes on. I very much believe Google Fonts is in super beta right now. Fonts are a little messy but, after all, they are Web fonts. I’m hoping they will add a few more variations and families in the future.

Stay tuned.

As a Web developer/designer I’m on the go all the time and my iPhone and iPad are attached at the hip. I’ve used many of these apps on the iPhone but the iPad really unlocked their potential with more space and more processing capability. Check ‘em out and leave some comments. I know, I know, no freebies. Sadly most of these productivity apps are pricey. But support your colleagues, right?

1. FTP on the Go Pro ($9.99)
Connect to all of your servers and edit code live. This app saved me on the iPhone a few times. Now it’s even easier on the iPad. Sure, it’s not free but how cool is fixing that controller on the fly when the boss calls pissed off and you’re at the Girl Talk concert? That didn’t really happen. Just sayin’.

2. Keynote ($9.99)
Yep. You might need to present that new dev plan. Now you can do it on the iPad. Then. Look cool when you plug in and say, “Did that on the iPad.”

3. Sketches 2 ($4.99)
Great for sketching up ideas. I love the graph paper background. Very useful for building out ideas on the go.

4. iDisplay ($4.99)
Your iPad as an extra monitor. What! Yeah it’s pretty cool. Requires software on your desktop, which is a little clunky but not too bad. Then you can test tablet browser views right there. Think about it. Yep.

5. Markup ($9.99)
A little more intuitive than FTP on the Go but more buggy. Nice environment for coding. Code Monkey is also available but it’s messy. I’ve found FTP on the Go is quick for good edits but Markup is for real coding.

6. Analytics HD ($6.99)
You spent all that time on your site don’t you wanna know how it’s doing? Of course you do. I have the Analytics app for my iPhone and use it every day. I like the HD interface more and it allows me to see more data at once. A must have.

7. Things for iPad ($19.99)
Kinda pricey but it pays for itself over and over again. Keep track of everything in your life. If you’re like me, you have multiple projects in the air at one time. Things is your backup secretary. Sort lists by project and order them by due date. It’s easy to find what you need to know on the go. Also, if you have e desktop software for Things, you can sync your iPad with all of your Things.

8. iSSH Console ($9.99)
If you spend as much time in Terminal as you should be then this app is a must have. Full xterm support with color as well. SSH into server easily with multiple active connections. Also import RSA keys and much more. Great for any developer.

9. Class Browser for iPhone Developers ($1.99)
When you’re in the middle of Objective-C and you forget a class, this app is there for you. Sure you can always Google it. But this app, not free but cheap, sorts all SDK classes alphabetically. Very useful when you know what you’re looking for. Good reference but probably not a must.

10. Code – Source Code Viewer ($1.99)
Love this app and it’s cheap! View the source code of any site within the app. Or, use the Safari bookmarklet to view code. Great resource when you’re curious what’s under the hood.