The recording showed me just how many things I need to work on to be a better presenter. That will come with time and practice.

Also check out my iOS Design Newsletter for more tips and tricks.

Designing iOS Applications

My video recording turned out alright for this talk, so I will do some editing and post it online soon. In the mean time here are a few links I talked about.

• Clear
• Calcbot
• 25 Free iOS Design Resources
• Subtle Patterns
• Apple HIG
• Commit
• OneVoice
• Fluent

Designing with CSS3

Unfortunately I had technical issues with the audio recording for this talk, so I cannot post a recording. But I will redo the talk in the future and post code samples and a new video then.

Demos

Templates & PSDs

Icon Template

Michael Flarup’s icon template is the best one available. Very useful Photoshop actions along with some great textures.

UIButton Pack

By default UIButtons are my least favorite element in UIKit. So I made a simple button pack to fix that.

iPad GUI PSD

iPhone GUI PSD

Free App PSD

iOS Style Popover

Free Game Art

Textures & Patterns

Subtle Patterns

This is my favorite patterns website around!

Tileables

Apple iOS Linen Texture

High Resolution Fabric Texture Pack

20 Repeatable Pixel Patterns

Icons

Function Icon Set

WooFunction: 178 Amazing Web Design Icons

Fugue Icons

Not necessarily in an iOS style, but it is a huge icon set that has come in handy for me many times.

FamFamFam Silk Icons

Glyphicons

Glyphish

The Noun Project

The quality and volume of icons in The Noun Project is very impressive! They are often great to get ideas of what to represent in your icon.

Pixicus Icon Set: 106 Pixel Perfect Icons

Shock iPhone Icons

 

Other

Function Brush Set: 33 Subtle Grunge Textures & Effects

42 More Subtle Grunge Textured Photoshop Brushes

iOS Design Cheat Sheet

Printable iPhone Wireframe Templates

***

Signup for my iOS Design Newsletter for more app design tips and articles.

If you don’t cringe when looking at something you made six months ago you aren’t learning fast enough. So, below is a collection of some of my early work.

This is the very first thing I made in Photoshop. The original photo is of two horses, each looking different directions. I just combined them.

The first website I was paid to design ($100 for the logo, $200 for the site). Still active today.

An early, unfinished attempt at painting in Photoshop. Unfortunately it isn't a skill I continued to practice.

Something I made while learning to use the pen tool in Photoshop.

I always really liked the quote from Braveheart.

I've always been fascinated by objects created entirely in Photoshop. This watch was one of my attempts.

This is a collage of about 50 different images. I learned so many more Photoshop techniques while creating this.

This is the website for Sparrowhawk Creative Studios, a small design company I started with a couple high school friends.

***

Do you have any early work to share?

In my iOS apps I’ve tried a couple different methods of styling these buttons to get a more desirable look. While I know you can design buttons entirely in code, my Photoshop skills greatly exceed my programming skills. So my buttons are all designed in Photoshop, then imported as PNG files. Also iOS does such a good job with PNG optimization that I see it as the best choice.

Option 1: Using an Exactly Sized Image

 UIImage *buttonImage = [UIImage imageNamed:@"orangeButton.png"];
 UIImage *buttonImageHighlight = [UIImage imageNamed:@"orangeButtonHighlight.png"];

 // Set the background for any states you plan to use
 [saveButton setBackgroundImage:buttonImage forState:UIControlStateNormal];
 [saveButton setBackgroundImage:buttonImageHighlight forState:UIControlStateHighlighted];

You can also do this in Interface Builder by setting the button Type to “Custom” and then add the image name to the background property.

Option 2: Using resizableImageWithCapInsets (iOS 5 Only)

This is my current preferred method (in most cases). It allows me to use the same images for most of the buttons across an application.

 UIImage *buttonImage = [[UIImage imageNamed:@"orangeButton.png"]
 resizableImageWithCapInsets:UIEdgeInsetsMake(18, 18, 18, 18)];
 UIImage *buttonImageHighlight = [[UIImage imageNamed:@"orangeButtonHighlight.png"]
 resizableImageWithCapInsets:UIEdgeInsetsMake(18, 18, 18, 18)];

 // Set the background for any states you plan to use
 [saveButton setBackgroundImage:buttonImage forState:UIControlStateNormal]

;
 [saveButton setBackgroundImage:buttonImageHighlight forState:UIControlStateHighlighted];

Pretty straightforward. Here you can change the button dimensions without having to create a new image. In Interface Builder (or with code) you will need to set the titleLabel color as well as the shadow position and color.

Final Tips:

• Leave the text out of your images. This will scale better for the retina display and allow you to change it dynamically. No one wants to have to open Photoshop just to tweak some button text.
• Always include @2x versions of each image.
• If you prefer most of the customization (color, background, shadow) can be done in Interface Builder. Writing it in code is only required if you are using the second method (resizableImageWithCapInsets).

Whichever method you prefer, you can use some of my sample button styles to get started. Both methods still seem rough, so I would appreciate feedback and ways to better create buttons.

Download All the Button Files

Signup for my iOS Design Newsletter for more app design tips and articles.

###

In October 2011 I quit my job to spend more time with my family and working on things I care about. It is the first major step in my quest to live different. Now I don’t mean to be different just to feel unique, but instead to live different in a way that makes my life better. Remember that these are the things I have chosen personally. You should create your own different life.

Be debt free.

Debt is crippling. It limits your options, forces you to keep working at a job you don’t like,  preventing travel, and adding considerable stress. It is also often a symptom of caring too much about possessions. Seriously, if you don’t have the money, don’t buy things.

Jobs are optional.

It’s time we started thinking about jobs and careers differently. At times they can be great: meet new people, work on great projects, and learn a lot. But if your job is holding you back from the life you want to live get rid of it. If your finances are in order and you have money in the bank quitting that job isn’t quite so scary. Especially if you can work on a side project that makes some recurring income on the side.

Chris Guillebeau, an author and blogger, started traveling and writing extensively a few years ago. Now he finishing up a quest to go to every country in the world (all 193). He travels almost continuously and does it on less than $60k per year. All of which he earns from writing for his blog and related guides.

If you really try you’ll find there are so many more ways to make money than going to an office every day.

Focus on family.

Over the years I always heard people say “kids grow up so fast”, but I never internalized it until recently. Watching Oliver grow and change in the last four months has shown me just how true this phrase is. No one wishes they spent less time with their kids.

Travel frequently to unique places.

“One’s destination is never a place, but a new way of seeing things.”
– Henry Miller

The most remote place I’ve ever been is the mountain village of Ketane in Lesotho (inside South Africa). Someday I’ll write more about the experience, but for now I’ll just say that travel can change your outlook on life.

Spend some time seeing things close to home as well. If you live in a city anywhere near as great as Boise there are many things you have yet to discover.

Learn continuously.

If I had to choose one thing to shape my outlook on life it would be a continual desire to learn both physical and mental skills. Even though I dropped out of college, I value learning very highly. Just choose the setting that is right for you. I hope to teach Oliver to share the same desire.

Create.

Take what you have learned and used it to create great things. Whether writing, woodworking, software design, knitting, or painting; start creating.

Value experiences over possessions.

On a trip to Hawaii with my some of my family a couple years ago we spent nearly $1,000 on a helicopter tour of the island. Since it was mostly my money I thought hard before spending the money. Ultimately reminding myself that a great experience is better than whatever objects I would purchase with that money. It was an unforgettable time and I will show photos from the flight for years to come.

###

That’s all I have for now. Go write your own story.

I see it all the time with designers who know how to use Photoshop and Illustrator, but fail to understand what makes a design great. Video editors who can create any complex transition you want, but don’t know how to make a video feel timeless.

If you watch the newer Star Wars movies pay attention to the transitions near the end. When they are switching between each of the battle scenes they use Powerpoint style transitions. Dissolve, blinds, swipe. It’s an amateur effect in a movie that is otherwise very technically difficult and visually impressive. The skill is there, but taste is lacking.

The contrast between local and national television commercials is a perfect example. The local commercials are loud, poorly written, and are more in-your-face. Painful at times in their lack of quality. Blaring messages about sales, quickly spoken copy, and flashing graphics are not going to make anyone look fondly on your brand.

Most of having good taste is knowing what to leave out. Slow down. Remove content. Rewrite your script. Never use phrases like “4 easy steps.”  Focus on the details. Keep it simple.

Don’t just learn the technical aspects of your craft. Focus on creating well-formed art.

—————————————————-

Signup for iOS Design Weekly for articles, tips, and tutorials around iOS Design.

Fluent is a new memory system app I recently wrote for the iPhone. It is a twist on the traditional flash cards application in that it has a system to ensure you learn every card you add. For me Fluent is significant because it is the first iOS app I have written entirely on my own. Without having to hire out any of the development. One more milestone met on my journey to become a programmer.

To learn more about Fluent you can view Fluent on the App Store.

Guidelines

I started with a few guidelines to shape the process:

• Build the app I want to use. Many people have asked for more features, Fluent to function a different way, or some other change, but if it doesn’t fit with the app I want to use then I don’t include it. Hopefully a few other people will share my vision for a memory sustem application like Fluent.
• Release as soon as possible. I focused on what I felt was the minimum necessary to launch and nothing more. I could have spent months or years tweaking the code and design before feeling like Fluent was complete, but instead I decided to release it quickly. Since it is a side project I needed it to have a feeling of completion so I could move on to something else. Many features are missing, but it is still an application that I will use every day.
• Be able to review cards immediately after launch. Launch the app, review flash cards. Once the cards are loaded that is the workflow. No need to worry about what you should be reviewing that day or navigating screens to find the right cards. I wanted to be able to stand in line at the grocery store and quickly review French vocabulary.

The interface

Wireframes

I start every project with sketches. As you can see above they aren’t very detailed or even very good. But the important thing is that they convey the ideas of the application. Each thumbnail is accompanied by notes about features and design elements I want to include. I even sketch out icon ideas and try names. Whatever comes to mind I put it on paper.

Version 1

The first design direction helped get the screens figured out and a better feel for the application. But ultimately I didn’t like where the design was headed so I scrapped it and went in a different direction.

Version 2

The next version started around a blue color and a dark fabric texture. They looked really good together and I designed the rest of the style around those two elements. The application was better organized by using a tab bar to move between sections.

When I first start designing a simple application like Fluent I always underestimate how many screens are required to fulfill the features, especially on devices with small screens. That was very true with Fluent. What I originally thought would have 3-4 views ended up with 12.

Everything in this version is more precise and focus is drawn to the most important elements.

The Icon

App icons should meet a few basic requirements: communicate application purpose, stand out in a crowded store, match the style of app, and look excellent. I tried a lot of different concepts (a few sketches shown with the wireframes), before I decided to go with a basic shape. I’d like to give credit to whatever inspired the shape, but I can’t find the source (maybe it was original). Though the color wheel idea comes from Kaleidoscope by Sofa.

This icon meets all the requirements except for conveying the application’s purpose. Oh well, I guess I can’t insist on having everything. To me it represents fluid, continuous, and dynamic.

The Name

I hate naming products. Though I am really happy with the names of my products (OneMotion, OneVoice, and now Fluent), I didn’t come up with them. David Wheeler named OneMotion, and I named OneVoice to match that style he had already setup. At first this project was just called “Flash Cards App.” Then in keeping with the previous style I started calling it OneMemory. Not great, but I thought it was good enough to launch.

OneMemory stuck until my mom came over for dinner one evening (the memory system is based on something she created years ago). Though she was thrilled to see that her ideas were going to be available for so many more people to use, she hated the name. Dinner conversation moved on to other topics as she was quiet for a few minutes.

“Why don’t you call it Fluent?” she said. “It’s short, simple, and it implies mastery of the topic.”

Wow, great name, but I never thought it would be available. Amazingly enough the name was available on the App Store. 500,000 applications and no one had taken the name Fluent. Cool.

That’s it. If you are interested Fluent is now available on the App Store for $1.99.

“I don’t know the secret to success, but the secret to failure is trying to please everyone”

- Bill Cosby

First know that your customers won’t understand your vision, and just because they purchased your product, doesn’t mean you need to accommodate their requests (in almost all cases). If a feature idea doesn’t match with your vision for the product, feel free to say “No.” Be patient, listen, truly consider it, but don’t feel obligated to build it.

If you aren’t interested, just say so. You should never string a customer along by saying “Great idea! We’ll build that in a few months.” If you don’t have a solid timeline for the feature being built, don’t tell the customer you are going to deliver it.

With OneVoice my vision was for usable software that did less than the competition. So I have to be extra careful since it is very likely a new feature will go against my narrow vision. Though since I am not an expert in the niche my software serves, I must listen carefully to know if an idea is useful. Otherwise I risk not serving my customers needs.

Find the balance for your software and don’t try to be all things to all people.

If you’re interested in iPhone & iPad design checkout my iOS Design Mailing List for more tips, inspiration, and tutorials.