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.

An Amazon reviewer grasped the exact concept we had in mind when designing The Great Forgetting:

There is a bit of artistic tension between the book’s numinous subject matter and its design. The format is that of a child’s picture book, with short passages of text next to images. This is a novel idea that works well, since images can engage parts of us which words can’t reach. Plus the format takes us back to our early years, when the world was alive, and “read me a story” often led to frightening, wonderful experiences which further enlivened that world. The designer, Cecilia Sorochin, has placed imagery within every pair of facing pages – except in one place, and there is a message in that omission.

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?

Everyone wants an engaging book. Creating that engaging book is never a solitary endeavor.

Fiction narratives in print are generally all about text, unless it’s a graphic novel, a children’s book, or a novel by Sebald. (Actually, we recently did the illustrations for a work of literary fiction to be published by Holt in June 2010, but that’s another post). In designing a book of fiction, the book designer’s job is to present the text on the page in a way that is highly readable and without interrupting the reader’s experience of the story, or, in John Gardner’s words, “a vivid and continuous dream”.

But non-fiction almost always benefits from making the narrative more visual. Absent the hands of an extraordinary writer, non-fiction books often transport the reader not into a glorious dream but to a snoozefest (where the dream is probably something other than the book).

Making the narrative more visual doesn’t necessarily mean the use of images. It’s also about the use of white space & visualizing blocks of text on a page. (You’ll notice that writing for the Web is about much the same thing). Of course, decisions about chapter lengths, section sizes, etc., are the domain of the writer & editor, but book designers have a lot of latitude in how to present the text.

A friend recently gave us a set of three great books by Edward Tufte that came out in the 1990s: Envisioning Information, The Visual Display of Quantitative Information, & Visual Explanations: Images and Quantities, Evidence and Narrative.

Tufte gets to the heart of what book design is all about without talking specifically about book design: the arrangement of information on the page (or, increasingly, the screen as in the case of e-books).

Have you ever felt some unstoppable desire to do something? I get that once in a while and I let it grow until one day I just can’t do anything but that that I’ve been craving for: it could be to paint, to draw, always something handmade.

Lately, I’ve been feeling the need for handmade stuff (stuff = letters, miscellanea, doodling, etc) to maybe start introducing it into my usual designs, I think that it could produce some interesting results.
So I started a Fileteado Porteño workshop. The maestro fileteador is Héctor Rapisarda and here a couple photos of the class & his beautiful letters on the blackboard.

& some of the letters I’ve done during the class:

If you want to see some more Fileteado Porteño, there’s a flickr group with very interesting pieces.

*The star ornament on the side of this post is from the free font Lucky Charms by Blue Vinyl