These are pretty well documented on the Apple site, but if you’re like me, you had a really hard time finding them. I decided to post the most useful ones here for easy access.

General

First you need to know how to add and manipulate values in the info.plist file. The file lives under the resources bundle in XCode. When you select this file, the contents of the file will appear on the right. Highlight an entry, and a ‘+’ will appear. Click on the ‘+’, and new line will appear. Now enter the name of the key that you want to set.

To set the value type, right click the key name, and highlight ‘Value’. The options will appear on the right. The default key type is String.

UIStatusBarHidden

This is a boolean value that, when set to yes launches the application with the status bar hidden. Another way to do this is under the method ApplicationDidFinishLaunching method in the application delegate. In this method, you can add the line

[UIStatusBar setHidden:YES];

This will hide the status bar, but only after the application has, well, finished launching. Meaning your splash screen will come with a status bar for the majority of its appearance.

UIInterfaceOrientation

This is a key with a String value. The available options are the orientation options for the iPhone. This is the key you need to set if you want the application to launch in landscape. The default value here is standard portrait

(UIInterfaceOrientationPortrait)

If you want to launch the application in landscape, use UIInterfaceOrientationLandscapeLeft or UIInterfaceOrientationLandscapeRight.

You can also launch upside down using UIInterfaceOrientationPortraitUpsideDown.

These values are the available orientations for the phone throughout the application.

UIPrerenderedIcon

When you put your 57×57 icon in the application, you’ll notice that when it gets to the springboard, it has an added shine effect and looks glossy. Well, sometimes you don’t want that. Rami (the designer) can probably explain why better than I can, but you basically sometimes want to control what will show up on the springboard. This is a boolean key that when set to YES, turns off that render effect.

UIRequiresPersistentWiFi

This is a Boolean key that when set to YES, will operate a WiFi connection when the application launches. Use this if your application doesn’t work without WiFi. This is especially helpful with displaying an error to users when no WiFi is available. Apple are careful that you notify your users of WiFi (read - they’ll reject your app if you’re not), and as this key opens the connection on launch, it takes care of user notification for you. If this value is set to NO, which is the default, the OS will close any active connection after 30 minutes.

UIStatusBarStyle

This is quite easy to set up using the Interface Builder, but its an option, so I’ll cover it. The value is a String type, and it defaults to UIStatusBarStyleGray. The other options are UIStatusBarStyleDefault (Gray), UIStatusBarStyleBlackTranslucent, UIStatysBarStyleBlackOpaque. You can see what each one looks like in the Interface Builder.

There are more, but I think that these are the most useful ones. For more info, check out the full documentation at the iPhone developer center. Thanks for reading.

Breaking it down, Wabi Sabi 侘寂 is a view of the world which embraces the concept of transience. The idea that, simply stated, that which isn’t done is still beautiful.

For designers, I think this is a very important concept to grasp because nothing we do is every, truly, done. There is always a line in the sand, a point at which we must accept the child birthed before our eyes, from our hands, as a final form.

There are seven main principles behind Wabi Sabi. I want to use them as a framework to talk a bit about design as a field and moreso, designing for the iPhone which can be a very limiting platform.

FUKINSEI imbalanced, uneven

Fukinsei describes the beauty in chaos. Odd numbers, wood grains, pebbles in a stream.

It is important in a design to break out of the box. The world we create in these computerised boxes can be overwhelmingly rigid. A line is a line, accurate to the most tiny measurement. Beauty can lie in a crooked line, a broken grid, mis-laid text and even something created without any rules at all. I have taken inspiration from the chaos in a teenager’s myspace page design and if that isn’t imbalance, then I don’t know what is.

KANSO simple, basic

Kanso is the elimination of the ornate.

All that Web 2.0 shine, those drop shadows and fake Photoshop bevels won’t make a poor design look better and more often than not they will make it look much worse. Often times I find myself at the end of a project taking a design and ripping out the bits and pieces that distract the user away from that which truly matters.

That often repeated mantra ever applies: Keep it simple, stupid.

KOKOU austere, aged

Kokou is about respecting maturity for the wisdom and maturity that it brings.

A funny thing about design is that mostly people can take a look at something and see intuitively whether it has been developed and evolved to a sufficient extent.

Taking a design and working on it over and over until it feels finished. Stepping back, sleeping on it, working on it again with fresh perspective, these are all steps in creating a good product.

SHIZEN natural

Here it is all about the forces of nature and allowing them to take shape without interference by us. We don’t really know better and it is a folly of imposition for us to try.

In design this is about letting the idea shine through without trying too hard to give it a veneer or polish. Sometimes rough is good enough. As hard as it is for me to admit, sometimes the roughest and least appealing design can be incredibly successful.

YUGEN subtly profound

Yugen is suggesting hidden layers of meaning in a simple way.

Designing subtly is a dificult task. Some information screams to be brought to the fore while others do not. The idea here is to allow a layout to bring out that which is needed in a way which isn’t overly direct and distracting. Allowing the user to explore and learn on his own can be a great way to give them the information they need.

DATSUZOKU unworldly

Transcending the conventional and the traditional.

It’s easy to fall into the trap of going with what works. Standards, guidelines, grids, rules - these things will help you get to a certain level of design but beyond that you have to learn to listen to your intuitive self and create new paths which others have not walked before. It’s OK to be different and try new things. It’s OK to make mistakes.

Be different. Take risks.

SEIJAKU calm

This is probably the hardest thing for me. Being calm, keeping it together even under stress.

The simple fact of the matter is that I have a fun job and I am incredibly grateful for the opportunity to do what I do. I take great strength from that. It’s easy to get lost in the work, the pressure and the high expectations that clients can have. It is important to sometimes take a step back and have a little perspective.

Finishing

This really isn’t stuff that I know that much about. Writing this has been as much an exercise for me as anything else.

Before I go, I wanted to give a big thanks to AENUI for his great site.

Thanks for reading. As always, feedback is very welcome.

Introduction:

This is the first installment in my series about iPhone User Interface Design and Usability.

The iPhone has brought a revolution in the way modern smart phones work. The iPhone interface is seen as defining what a cool UI should look and feel like these days. There is no question that the iPhone has brough about a major improvement in usability and user experience on the mobile platform. But not all is perfect about this UI.

In this series I’ll be looking at various aspects of the iPhone UI and tell you what I think about them. Sometimes I will bitch about a missing feature, other times I’ll look at typography, and other times I’ll look at technical aspects of UI design implementation on the iPhone

So on to the first Installment:

Do we really need to Implement MouseDown Effects on the iPhone?

Anyone designing and implementing GUI interfaces in the last 15 years knows that there are a number of functional states for buttons that have a related visual state. An important example is the MouseDown functionality that allows the user to press and hold on a button. This is especially important in direct manipulation interfaces where you press and hold an object and then move the cursor- in this state the object that has been pressed moves with the cursor and a MouseUp allows you to release the opbject and leave it at that spot. Another use of MouseDown is to give a user visual feedback that they are in fact pressing on an object and helps in lowering mistakes in clicking objects.

Enter the iPhone with its wonderful direct finger interaction. The iPhone supports MouseDown functionality, but in certain cases I think that it is superflous. I raise the issue because of a discussion I had yesterday with one of our designers. He was spending a lot of time with one of our developers in getting a MouseDown implementation to work like he wanted it to work. In the big screen world with Mouse and Cursor I agree that such attention to detail is important. However, my feeling is that on the iPhone there are cases where MouseDown interaction is either not really important to implement, or if implemented, can be done in a simple way.

Why do I say such appocryphal things and what are the cases in which this is relevant? Well- since on the iphone there is no cursor, except for our fingers, then the rule of thumb (sic.) is simple: any target object that is smaller than a finger tip (and therefore when touched/pressed will not be visible to the user) does not really need a mouseDown state. In this case it is nice to have- but is not a Must have.

Opinions?

Next time: when should an action be triggered?

More than once while designing our applications someone said the sentence, “Ok, now we need a color picker.”‘ More than once means we need a generic, reusable bit of code.

Decisions, decisions

The first thing we needed to decide was which method we wanted to use for selecting a color.

1. A predefined set of colors that the user selects from

Pros : This would be very easy to program. We’d show the user a predefined set of colors, and there are several ways we could do this programmaticly. Each color would be represented by a UIColor , and we would return that color whenever necessary.

Cons : Giving the user enough options while at the same time keeping a clean and good looking design proved problematic. Also, it seems less fun to limit the user to an arbitrary set of colors.

Decision : We dropped this option quite quickly since it was limited from the user’s point of view.

2.RGB sliders

Pros : Allows the user freedom in color selection. Very easy to code. All you need is a UIView to show the selection, and three UISliders - one for Red, one for Blue and one for Green. Then, you’d need to hook up a function to value changes in each slider that would create a color from the RGB value. To create a color from RGB values, use the

UIColor colorWithRed:(CGFloat)red  green: (CGFloat)green  blue:(CGFloat)blue alpha:(CGFloat)alpha

Cons : We felt that the mixing red, green and blue is very much a ‘computery’ concept. For people who don’t work with design or computers it feels akward and is very difficult to visualize.

Decision : While this is an option that we’ve seen in several places, we felt that it wasn’t a good fit for our applications, and would not be intuitive for the average user.

3. HSL (Hue Saturation Light)

Pros: Intuitive for users. Clear selection of colors from a palette.

Cons: More difficult to code than the RGB method.

Decision : After looking at regular desktop applications like Photoshop, We decided to use Hue, Saturation and brightness to select the colors. We felt that this would best communicate the color selection to the user.

After deciding on the method, we decided which parts of the selector would remain the same in every application , and which would be interchangable to fit the look and feel of each application.

We decided in the end that only the background mask would be something that can be changed.

These decisions were all made in cooperation with Rami, the designer.

Basically, we have something that looks like this :

Explanation: When using HSL for selecting colors, Hue and Saturation are selected with the middle matrix of color, and brightness is selected using the brightness bar below. The brightness bar shows a gradient of the color from white to black, where brightness moves from 0 to 255 - white to black.

Now, we’re ready to code it.

Programming The Color Picker

The Color Picker code will fit into the modal view controller pattern (as do all things cocoa touch). Basically what we’ll need is a view - henceforth the ColorPickerView, and a view controller - the ColorPickerViewController. The ColorPickerView will be formed by a nib file for the design, and a corresponding ColorPicker.h with the code.

When developing these apps, one of the questions you’ll often find yourself asking (or at least I did) is: Do I need the code file? Or is the nib enough? In this instance, I’ll be needing to recognize touches, so I definitely need the added code files. There are many other considerations for whether to make just a nib file, just a code file, or both, when making a new view for your app.

OK - So we have a ColorView.xib, ColorView.h, ColorView.m and ColorViewController.h, ColorViewController.m

This set will be easy to put into any project, but for development stage, I kept it in its own project, so I wouldn’t get stuck with other programs’ bugs.

ColorView.xib

This is where I set up the design - how things will look over all. The xib has in it :

• Current Color - This is a UIView* whose backround color will change according to the selection being made. Obviously, it must be an IBOutlet, so that this color can be changed programatically.
• Images - there are two images here - the crosshair for selecting a color within the matrix, and the bar for selecting the brightness. Both of these images will be animated and moving around the screen. Exciting ! These images can also be exchanged to fit the designs of different applications.
• Backround - A UIImageView * the size of the screen. This is set as an IBOutlet, so that it is generic and I can change it from program to program. The background image itself is a mask with clear holes for the color selection matrix, the color display, and the gradient view.

ColorView.h

This is where I’ll describe the programmatic additions that I made to the view.

• Color Matrix - I added the image of the ColorMatrix programatically. This is because I’m interested in being modular. The background mask that I put in the nib file can have any kind of sizes and frames, and the when setting up the picker, you set the value for the size of the color matrix image. For example, in one color picker, you might want to add the color in hex or RGB values. There’s not a lot of room on this screen for that, so an easy way to make room is to make the color matrix smaller. So by adding the color matrix programatically, I left the size of it modular. The size of the frame is something that we’ll use when implementing the touches.
• Gradient View - Like I stated earlier, when you change the hue and saturation using the color matrix, the brightness bar show a gradient of that hue and saturation ranging from brightness = 0 to brightness = 255. This gradient was acheived using built in Quartz methods. I’ll get to that in a minute
• Touches - All of the touch implementation is taken care of in the code for this view.
• Calculations - Calculations for all of the colors are also made from the code for this view. This might have been pushed out to the viewController for purist Modal View Controller, but I think we can forgive it staying here.

Gradient View

The gradient view is a separate class with a 2DQuartz implementation for gradient. When the hue/saturation values change, the gradient view is updated according to the new hue/saturation. To create a gradient, you need to decide on the source and dest colors - I chose White to Black. You can also select colors to go through. I chose the hue and saturation from the main view with the middle of the brightness scale. This gave me a pretty accurate gradient.

The Interesting parts of code

Setting up the gradient with the right colors

- (void) setupGradient {
 
const CGFloat *c = CGColorGetComponents(theColor); CGFloat colors[] = { 255.0/255.0,255.0/255.0,255.0/255.0,1.0,
//WHITE c[0],c[1],c[2],1.00,
//THE COLOR 0.0/255.0,0.0/255.0,0.0/255.0,1.0, //BLACK };
 
CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();
 
CGGradientRef   gradient = CGGradientCreateWithColorComponents(rgb, colors, NULL, sizeof(colors)/(sizeof(colors[0])*4)); CGColorSpaceRelease(rgb);
 
}
 
Draw Rect
 
- (void)drawRect:(CGRect)rect { // Drawing code CGContextRef context = UIGraphicsGetCurrentContext();
 
// The clipping rects we plan to use, which also defines the locations of each gradient CGRect clips[] = { CGRectMake(0.0, 0.0, 300.0, 60.0), //self.frame, };
 
//The Gradient Will be drawn along a line parallel to the start -> end coordinates you give it. This way you can achieve any //linear gradient start =   CGPointMake(0,0); end = CGPointMake(300,0); CGContextDrawLinearGradient(context, gradient, start, end, 0); CGContextRestoreGState(context); CGContextSaveGState(context); }

And that’s it for the Gradient View!!

Touches

For the final trick, you want to give the user control over the crosshair and lightness bar. I did this referencing the ‘Touches’ Source code example from Apple.

Remember - we have two regions of interest -

• Is the user touching the color matrix ? If so - move the crosshair and change the hue + saturation, and gradient bar, and the window containing the current color.
• Is the user touching the brightness bar ? If so - move the selection bar, and change the brightness value, and the window containing the current color.
• Otherwise - do nothing.

So the user can touch anywhere on the screen, and we read all of it, but only react to certain areas.

There are three functions for touches - touchesBegan, touchesMoved, and touchesEnded. I used only began and moved.

// Handles the start of a touch
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
 
{
 
UITouch *touch = [touches anyObject];
[self dispatchTouchEvent:[touch locationInView:self]];
}
 
// Handles the continuation of a touch.
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];
[self dispatchTouchEvent:[touch locationInView:self]];
}
 
-(void) dispatchTouchEvent:(CGPoint)position
{
if (CGRectContainsPoint(colorMatrixFrame,position))
{
[self animateView:crossHairs toPosition: position];
[self updateHueSatWithMovement:position];
 
}
else if (CGRectContainsPoint(gradientView.frame, position))
{
CGPoint newPos = CGPointMake(position.x,kBrightBarYCenter);
[self animateView:brightnessBar toPosition: newPos];
[self updateBrightnessWithMovement:position];
}
}

The animate view method just takes care of changing the center of each of the images so that its in the new place.

That’s almost it ! There’s only one more thing

Calculations

1. Color Matrix - Hue and Saturation are values between 0 and 1. To calculate, we need to take use  :

Hue = (position.x-kXAxisOffset)/kMatrixWidth;
Saturation = 1.0 -  (position.y-kYAxisOffset)/kMatrixHeight;

2. Brightness -

Brightness = 1.0-(position.x/gradientView.frame.size.width) + kBrightnessEpsilon;

And that’s it! You now have a color picker.

Congratulations

Questions and comments are very welcome! Thanks for reading.

Update with source code link

Thank you all for your patience. We have released hue under the BSD license. You can get the source from here.

So you can see screenshots of what we are working on here.

I wanted to add to the introduction previously posted. I’m Gilly, the more technical programmy part of the Vevent team.

I will be putting up posts with some iPhone programming tips , as well as problems I’ve come accross with (hopefully) solutions.

I have never had a Blog before, so I’m practicing exercising my new voice.

I’ve been learning and developing for the iPhone for about 6 months now. I feel like I’m getting there, but there is still so much to learn! As with any development these days, one of the challenges in learning the platform is not lack of information, but an abundance of it.  It takes time to go through the mountains of forums, blogs, documentation, tutorials, etc. It is very easy to get lost. I find that its good to take some time and find resources that you trust and then keep coming back to them.

Also, its amazing how addicted to Google I’ve become. When approached with a new problem, I sometimes find that I Google the question before I try to think of an answer. This is a terrible habit that I’m trying to break. Many times, spending ten minutes with a pen and a piece of paper will beat two hours of searching and clicking and reading.

So, I’ve learned a lot over the last few months. Mostly about how exciting it is to be involved in developing for this platform.

I guess that concludes my somewhat odd introduction to myself.

I’ll be posting a code sample over the next couple of days, I want it to be nice and clean and organized before I share it with the world

– Gilly

The contract with apple, according to this article from The Washington Post, states:

“In the event that Apple (NSDQ: AAPL) receives any notice or claim from any end-user that: (i) the end-user wishes to cancel its license to any of the Licensed Applications within (90) days of the date of download of that Licensed Application by that end-user; or (ii) a Licensed Application fails to conform to Your Specifications or Your Product warranty or the requirements of any applicable law, Apple may refund to the end-user the full amount of the price paid by the end-user for that Licensed Application. In the event that Apple refunds any such price to an end-user, You shall reimburse, or grant Apple a credit for, an amount equal to the price for that Licensed Application. Apple will have the right to retain its commission on the sale of that Licensed Application, notwithstanding the refund of the price to the end-user.”

In short, it means that users can get a refund for their apps up to 90 days after purchasing a license. The user gets 100% back, but Apple reserves the right to keep their commission and demands the 100% from the developer, effectively giving them the shaft. This has the potential to bankrupt small firms, which make up the vast majority of Apple iPhone developers.

As one of those developers, it is my first and foremost desire to create and sell high-quality applications. I want my end users to be happy and satisfied with the app they buy from me. I feel that this is a joint venture of sorts with Apple and they should value us small-time developers for the products we provide. Keeping commission like this is just down-right greedy.

I think this needs to be talked about far and wide until Apple takes it out of the contract. The question, I suppose, is whether the risk outweighs the potential gains and comfort the platform Apple provides. For now, it is on Apple’s side and we will keep developing for the iPhone happily and productively. But you can only abuse your developer’s trust for so long before they back out and go somewhere else.

I suppose it is important that I stress how fortunate that I feel that I get to do the kind of work that I do and moreso that I get to do it from the comfort of my own home. Design work is a creative process and in the past when I’ve worked in hitech or in a studio I’ve consistently felt boxed in and unable to function to what I feel would be my highest level. That can be a very frustrating feeling.

For me, the solution has been to work from home. It hasn’t always been easy and over the last two or three years that I have been doing it, I’ve developed some methods, some tips and some general ideas that I’d like to share. These apply to both the freelance individual and those that work from home either full or part time.

Organize your Time

I can’t stress enough how important it is to get yourself organized. You will find it incredibly easy to constantly find other things to do besides working. Cooking, cleaning, reading, Facebook, Reddit, the beach, friends and family will distract you and keep you from focusing on the tasks at hand.

Solution: Make lists, set personal deadlines and stick by them. Make sure that you have a certain time that you start working and a certain time that you stop. Stick to it!

Set Limits

For workaholics, working from home can be a dangerous beast. You have so much to do (if you’re lucky!) and knowing when to stop or back off for a bit just doesn’t happen when it should. The ultimate danger here is one of burn-out. It is easier to do than you think. Frustration, anger, depression are all side-effects and honestly, who wants that?

Solution: Stop working after a certain hour. Put weekends off-limits. Take vacation. These all sound like easy things to do, but once the work starts up it can be very difficult to actually do them. Exert your will and shape your life into one which allows for some down time.

Push!

I have a simple rule: if it takes less than fifteen minutes, it gets done now. Having a large list of little things can be overwhelming and every little bite-sized piece of work that you can knock off will really make the difference in the long-run, especially with complex projects. It also helps with making sure that things don’t fall between the cracks.

Solution: Do it now if you can!

Stay Connected and Online

It sounds almost silly in this day and age of high connectivity, but working from home necessitates a good connection. Pay the little extra and get fast internet if you can get it. I am impatient by nature and hate waiting for downloads and uploads. I hate it even more when what I am trying to do gets bogged down by technical limitations. Keep your computer hardware working and up-to-date as much as fits reasonably within your budget.

Stay Focused

It’s very easy to go off-track when you work on your own. I think that by nature, those that thrive in a work-at-home environment are the ones who have an independent streak. This doesn’t mean that you can go your own way as much as you like, for better or for worse. You will have to build your own framework and stay on the ball as much as you can.

Solution: Set daily tasks and do your most to achieve them. I like to use a little todo list application to organize what I will be doing each day. This leads me into my last little piece of advice:

Break your Projects Up

No project is really just one monolithic piece. They are composed of many little projects which fit together as a whole. In my case, as a designer, I can break each project up into design phases — creating a brief describing the functionality, the design phase, the implementation, etc. Each of these tasks themselves can be further divided into smaller ones.

Solution: Make many little tasks out of a bigger project. This helps immensely with organizing yourself, avoiding feeling over-whelmed and most importantly for me: with a feeling of daily accomplishment.

That’s about it. Working from home is a wonderful thing and if you can, I highly recommend it! I’d love to hear your ideas as I’m always looking for ways to make my days more fun and more efficient.

- Rami James

I just wanted to take this opportunity to introduce Vevent, talk a bit about the objectives of this blog and tell a little about myself.

About Vevent

Not to repeat myself too much, Vevent is a small development house for iPhone apps. We sit in beautiful Tel Aviv, in Israel. Working from home, we use the internet, good music and too much coffee to drive this ambitious project forward.

Some of the apps which we have created include MimoPlus, Akimba, Momints and Eventcorder. Our newest addition to this family of apps is a very fun little toy app called Lush which allows you to recreate the effect of making musical sounds on the rim of a glass.

What’s this all about anyway?

This blog is really something new for us. None of us have ever really kept up an online and public face and we are all really excited about it. We have two main objectives for this:

1. Create an avenue where we can talk to our users, get feedback, let them know what we are thinking, etc.
2. Be a part of the larger iPhone dev community.

We think that these are righteous causes ( ) and can’t wait to hear back from all of you out there.

About Rami James

As the author of this first post, I’d like to take the opportunity here to say a little about myself, my prior experience and what I do for Vevent.

I’ve been working as a designer here in Tel Aviv for the better part of the last ten years. I’m 29 years old, have two cats and pretty much live for the work that I do. I really like my job! You can see some of the work I’ve done at my company’s website, Uboodu.com.

With Vevent, I see a great chance to be very creative and to create unique user-interface experiences. It should be a fun ride.

I intend to write about my experiences both as a designer for the iPhone, which I haven’t seen much input about on the internet, and my general experience working from home, which I’ve been doing for the better part of the last two or three years. I feel I have a lot to say and would love to share.