The other day I posted about how the design of lists (or UITableViews) could be improved with only a few changes. Today we’re going to look at designing a main menu screen for an iPhone app. (We’ll get around to talking about designing for iPad in a bit.)

An easy default main menu is using the standard UITableView. Return to the other post to see an example of what a bare table view looks like. Pretty bland.

Stop thinking about lists & tables

A main menu should only have a few options. The key to improving the design is breaking free of the concept that it has to be a list using UITableViews. Sure, each menu option may lead to a UITableView but you don’t need to start the navigational drilldown from a list. What else could you use? Buttons. And this might be where you’re going to need the aid of a graphic designer. Programmers: proceed with caution; you could go crazy bad with the design if you’re not careful.

With a few minutes in Interface Builder you can whip up a menu with buttons. Here’s an example:

Functional but not very attractive. It uses standard iPhone interface elements but it can be a whole lot better, especially as the first screen you see.

Think about what kind of buttons: shape, size, color, etc. Where will they be positioned on the screen?

With the 4 day app I thought about the overall concept behind the app. One of the striking aspects of some barrios in Buenos Aires are the cobblestone streets.

Since this is an app about getting around Buenos Aires I wanted to see if I could incorporate cobblestones as part of the design. At first I thought the buttons could be in the shape of cobblestones. “Cool,” I thought for a moment. Then I remembered a solid piece of design advice I learned from Ceci: discard your first idea. It’s usually cliche. Instead, take the underlying concept and view it from another perspective. Then keep thinking about it, which probably lead to a much better idea. (Eventually I learned that process is true in so many creative endeavors: acting, writing, painting, etc.)

Back to cobblestones, the streets of Buenos Aires, and the app. Figuring out what to do in 4 days in a foreign city is about making choices. On our shelves is the novel Hopscotch by the beloved Argentine writer Julio Cortázar. The original Spanish-language covers is very well-known.

That led me to wonder if the menu could be represented as a child’s sketch of a hopscotch game on a cobblestone street. I went to Ceci with the idea. She came up with a graphic that we finally used as the main menu.

Buttons in iOS can be transparent. Simply overlay a transparent UIButton on top of each of the areas of the graphic that you want to be touch points. For effect we also added a little to glow to each button as it’s tapped since it’s helpful to give people visual feedback on a touch screen interface.

Oh, that little “i in a cirlce” graphic (the info button) down in the lower right corner: that’s just the standard built-in button as “info” circle into iOS. It’s great for seldom used menu options like about this app.

With a dose of creativity and design you can easily enhance the aesthetics of your app.

On the iPhone a fundamental UI component is the list, which is known in iOS programmer-speak as a UITableView. The default appearance is rather plain but does have the coolness associated with all Apple interface elements. Yet, because it is so common that also makes somewhat boring and doesn’t bring anything special to your app. Your apps don’t have to be plain. Apps can look nice and well designed, but it might take the eye of a graphic designer to help a programmer get there.

Let’s examine one app we developed and the evolution in designing its list format. Here’s an example of the final result so that you have an idea as to where we’re heading with the design.

This app received a 5-star rating in the app store. Of course, as with all design, the best app designs are not apparent. Notice how the design is never mentioned in this review:

This app does the nearly impossible: suggest (successfully, I should add) a four-day itinerary for Buenos Aires. As anyone who has been there knows, the city is huge. Having been there twice, this guide is as spot on as it can possibly be. Be warned, no city is as easy to negotiate as a mobile phone app — there will be dozens of distractions, travel delays, and discoveries as you go. I wouldn’t want anyone to just stare at the app all day! However, this is a great app for helping cut through all the overwhelming information about BsAs — good, clear suggestions you can trust completely.

There’s so much more to developing and designing an app than visuals. Indeed, it’s very easy to get sidetracked in designing an app by trying out all sorts of variations. An essential part of managing the app development process is knowing when to stop experimenting and just get the app completed.

The day screen

Since this app provides a 4 day itinerary to Buenos Aires, the heart of the app is a set of 4 screens: one for each day. We’ll use day 2 (shown above) as our example in exploring how this design evolved.

The example uses a UIViewController with a UITableView rather than a UITableViewController.

Barebone

In its most basic level our tableview looks very plain. In fact, Apple even refers to this type of table as plain.

In iOS-speak plain actually refers to the fact that the table is one list without any sections. The other type of table is a group table and is divided into sections. You see this on many apps. For the 4 day app it wasn’t necessary to divide the listing into sections, so I started out with a plain table. (Another post will take a closer look at designing a group table.)

Give it some color

A background image is easily added and makes a lot of difference. A golden paper-like textured background was created as a jpeg at a size of 320×416.

To associate the background image in the code I created a property called “imageView” and made the connections in Interface Builder. (I’m leaving out a few steps, obviously. So if you’re new to iOS development then I recommend a book for you: Head First iPhone and iPad Development: A Learner’s Guide to Creating Objective-C Applications for the iPhone and iPad is a particularly gentle introduction, plus it has a fantastic book design.)

self.imageView.image = [UIImage imageNamed:@"background.jpg"];

Be sure to first set the background color of the tableview to clear in order for the background image to display. And you’ll also need to make the cell transparent by setting the background color of the cell to clear.

cell.backgroundColor = [UIColor clearColor];

Work the text

A number of excellent font choices are built into iOS, plus you can embed your own fonts. If you don’t know anything about fonts then stick with Helvetica. For this app we tried something a bit different and chose to put the main entry in Georgia-Bold.

And we deviated from the standard black and added a color that complements the background image.

cell.textLabel.font = [UIFont fontWithName:@"Georgia-Bold" size:16.0];
cell.textLabel.textColor = [UIColor colorWithRed:0.427 green:0.38 blue:0.314 alpha:1.0];

Specifying colors in iOS

If you’re a Web designer or work with any desktop tool, then you probably noticed something different about the way the color is specified in the above code. In iOS you don’t identify colors with hex or rgb numbers. Instead, you use a UIColor. The easiest way to figure out these values is just to plug in the results from an online UIColor converter.

Add a subtitle

Remember the early 1990s and Gopher? Don’t let your tableviews look like something from 1993. And don’t make users select an entry just to see what it’s about. Unlike Gopher, in iOS menus you can add a second line (a subtitle known as a detailTextLabel) to each entry.

cell.detailTextLabel.text = [[listOfItems objectAtIndex:indexPath.row]objectForKey:SECONDLINE_KEY];

Since detailTextLabel is a separate property from textLabel it doesn’t pick up the same formatting. That’s good. In the above code you can see how I’m pulling the text from an NSArray named listOfItems. Another part of the code not shown here actually parses a property list, which is a type of XML file for storing small amounts of data.

Here’s the screen with the detaiTextLabel added.

Give it some space

The screen looks very crowded. Not good. Let’s give some breathing room to the cells by just changing the row height in viewDidLoad:

self.tableView.rowHeight = 80;

Play around with that setting and see what works best.

I chose 80 for the row height because I want to add another visual element to each cell.

Images have meaning

Cells can have an image on the left side. Images are not just decorative but convey meaning about that menu entry. Since the available space for an image in a table cell is so small I recommend not to use thumbnails. So often when I suggest using a small image in a cell people jump to the conclusion that it’s a thumbnail: a miniature of a larger image. The response is usually, “The thumbnail will be so small that no one will know what it is.” That’s true and it’s why you don’t want to use thumbnails.

Instead, create a small image that is a detail from a larger image. Details are wonderful ways to enhance a project. Let the detail serve as a representative of the whole image.

I created a set of detail images 50 x 50 to go in each of the cells. (Note that you’ll also want to create a 100×100 detail image for use no Retina Display devices.)

As an example here’s a large image:

Here’s the detail used in the cell:

See the difference between a detail and a thumbnail miniature of the entire image? The detail works so much better.

Add the code to enable the detail image to display:

UIImage *cellLeftImage;
NSDictionary *dict	= [listOfItems objectAtIndex:indexPath.row];
NSString *fileprefix = [dict objectForKey:BACKGROUND_KEY];
cellLeftImage = [UIImage imageNamed:[NSString stringWithFormat:@"%@.png", fileprefix]];
((UIImageView *)cell.imageView).image = cellLeftImage;

Hmmm, looking good but look closely at those images. It needs something around that image. Add a border. Remember to import QuartzCore/QuartzCore.h in your header to get the border properties working properly.

[((UIImageView *)cell.imageView).layer setBorderColor:[[UIColor grayColor] CGColor]];
[((UIImageView *)cell.imageView).layer setBorderWidth: 2.0];

Careful use of images on the left-side of a cell can make a huge difference in improving the design.

Don’t forget to change the selected highlight color

You’ve gone to all this trouble to add a nice golden palette to your screen, so you want to be sure and change the color used to highlight the menu when touched. If not, you’ll get the default blue:

Yikes. Continue in the method where you customize the tableview cells

- (UITableViewCell *)tableView:(UITableView *)tablesView cellForRowAtIndexPath:(NSIndexPath *)indexPath

Add the code:

UIView *goldenColor = [[[UIView alloc] init] autorelease];
goldenColor.backgroundColor = [UIColor colorWithRed:0.824 green:0.749    blue:0.553 alpha:0.70];
cell.selectedBackgroundView = goldenColor;

And the final result:

That’s it. Remember this isn’t a step-by-step tutorial but assumes you have a working knowledge of Objective-C and the iOS SDK. That’s not the hard part. The trick is figuring out the design.

Can one say that designing a book can change your life?

Certainly.

We often hear that books change people’s lives. I myself have been shaped by the books I’ve read over the years. But that was reading. This time I had the experience of designing the book that would change my life.

Toward the end of last year we received a 4-page manuscript by an author bearing the improbable name, “Calvin Luther Martin.”

Reading the manuscript was not like reading 4 pages of a magazine, or 4 pages of Nietzsche. It was like entering a forest inside oneself to ask, “Who are we?”  Then opening the mind to discover the answer.

The text blew me away. Rich in imagery. The potential was enormous.

Let me add a footnote, here. Most authors & editors would find it hard to let go of a manuscript and give the designer this flexibility: it changes the book’s shape into a new one, it requires trust. Of course the work is a collaboration. Finding the right image and the right letter size for each word requires flexibility from both parties. Understanding that the voice is the manuscript’s and not anyone else’s is the first rule.

Cutting the text

I was given absolute freedom to design this book and cut the text into the appropriate pages and even paragraphs. After reading the manuscript a few times, the cuts became obvious. The breaks needed to occur every time I had to stop, breathe, reflect, think.

We didn’t have a page count at the beginning of the project (since it depended on where the text was going to be cut). Finally, it came out to a 72 page book printed in 120grm neo matte, full color — quite a beauty!

Layout style

The layout style required breathing space, allowing the mind to wander, reinforcing the line of text with images while not overwhelming the reader. A discourse where white space, letters and images play a part on each page to tell a story. Images can be used as words—and letters can be used as images—to deliver the message to the reader.

Images

The book ended up with about 40 images—photos & illustrations that range from the photograph of a sheet of paper to a painting of “The Wing of a Roller” by Albrecht Dúrer, to Jesus on the cross. Whatever conveyed the message, whatever propelled the mind in the right direction was used.

Typography

After designing a few pages, I realized we would be changing sizes, spacing, and using the letters as images. For this task I wanted a classic roman family, with clear letterforms, without much contrast between the thin & thick parts, not distracting from the words—or the images formed by the words. From a shortlist of transitional families, I decided to go with ITC New Baskerville.

Book Cover

Early in the process we agreed on the “missing ‘I’” for the title. Only later, after absorbing the book, does the reader discover the ‘I’  on the back cover, illustrated by the images of the book, just as letters were illustrated in illuminated manuscripts. For, like those, this book is illuminating.

Website

Uncluttered, with plenty of white space. The website keeps the essence of the book. A place not only to click to buy the book but to go back after reading it.

A few days ago we got a comment that made me think about the concept of inspiration:

“I’m designing a layout for books and need lots of inspiration. It’s hard to find it in google. Any idea where a good place to start?”

THE SHORT ANSWER:
it’s in front of you, in the manuscript.

 

NOW THE LONG ONE: how to find it in the manuscript?

I would start by forgetting about looking for “inspiration” in Google or examples of other book designs.
Why? Simply because nothing you may find there will be done for that particular book. You would have not being hired if the design was out there. Neither should you wait for something magical coming from beyond. But you must work towards finding something that strikes you from the manuscript.

In first place, reading the manuscript will give you a general idea of the kind of design the book needs:

• is it a manual? Ask yourself how could you make it clear where instructions begin and finish? Explore font weight variations or different typefaces. Think about what kind of indicators could help the users when troubleshooting.

• is it non-fiction narrative? Help people understand the concept better with a layout that aids the reading of the text. Think of spacing, letter size, white space, clarity, etc.

• is it a 400-page novel? Make it comfortable to read by using a typeface and layout for optimal reading. Give people space to hold the book in their hands, such as good margins to rest a thumb on the bottom of the page, and on the side to turn the page.

• a workbook? Allow the readers to breathe between exercises. Think of white space. Help them with simple typefaces, such as sans serifs, and give readers room to think and work their way through the book.

• an inspirational book? Inspire them with a wonderful harmony between image and text. Consider typographical images, watermarks, and beautiful capital letters.

When you have the general idea, work on each particular aspect. Here the list could be endless, for every book is unique and alive in its own right.

As designers, we must find the best graphical way to present a book for a good understanding and reading. Each book carries within it a unique space, color, and contrast that provides a rhythm. Like music. We designers also need to remember that the best book design is invisible: guiding the reader effortlessly through the book. That can only happen if the design emerges from the manuscript. No other way.

Looking at other people’s work may be inspiring. I am inspired by other designers, but also by writers, by constructors, by a perfect color palette found on a petal, by dairy workers, by calligraphers, by the sun melting the ice in the early morning. By people that love what they do. By seeing dedication. To me, inspiration is the movement that such a sight provokes the desire to improve.

What is inspiration to you?

Here’s a sneak peek at one of the major projects we’ve worked on during the first part of this year: The Great Forgetting by Calvin Luther Martin, published by K-Selected Books.

We’ll be discussing this book’s design a lot more but for a look at the cover go to the publisher’s page.