Our Way To The Final Logo Design

A while ago I wrote about how to design a successful app (to the post) whereby I referred to my own app project. I'm currently developing a recipe app for Android with my project partner Marlene Knoche (her blog). The basic concept for this app is about collecting personal recipes. Personal means that you got these recipes from other friends or your family (maybe your grandma). I personally wrote those recipes in a notebook (out of paper). typical problems with such paper books are:

• When you use them, the paper gets dirty or even wet (from cooking), letters get blurred.
• When the book is full you have to chose a new book or put in single sheets of paper.
• You cant reorganize your recipes.
• You typically document the instructions of a recipe only with words. There is no multimedia content

Maybe you know more problems, to me they are enough to build an app :-) So why build an own app, as there are a lot of apps for recipes out there? Most existing recipe apps don't meet my needs. Most apps let you capture your recipes, but you can't export or reuse them with other apps or tools. Other apps (like Evernote Food) give me that ability, but they are not providing me or any other user a fixed  data structure supporting at which contents to create for a recipe. Evernote Food especially is mixing up my recipe notes with traditional notes in the regular Evernote app, which I do not like. There are still more features that I want to realize in my own recipe app. But the most important is the export functionality. This export should be a high quality print layout. So that when you do a print export, you get a pdf file that contains a set of recipes arranged by yourself to be given to a print shop, that prints your own recipe book. This is a really great idea for a personal gift, too. So this is what I want to have.

 I already reached the end point of the logo design phase and currently I create the basic views and their design. The process of the logo design is what I want to reflect in this post.

Actually, the time to design the logo that finally is used in the recipe app was quite long and we've took a lot iterations to get clear of the base idea behind the logo design. To name it immediately at the beginning, it actually took that much time as the app name wasn't determined at all, too. This, as you will see, reflects in the variety of different design approaches.

Everything began with a spontaneous mind mapping session with my project partner. First we inspected names and design ideas of other recipe apps. The result of this overview was:

• Most logo designs contained typical cooking symbols like cutlery, chef's hat, dishes, etc.
• Often the logos are of a illustrative and iconic type.
• All kinds of cooking metaphors are used to much.

Then we started brain storming and mind mapping.

This mind map indeed captures quite good the essential idea of the app. For defining a name and the logo it is necessary to have this idea in mind.

Then we noted all name ideas for the app. There came lots of good and bad ideas: Cook Stories, Food Stories, Cook Time, Media Meal, Food Print / Printfood, Augenschmauß ... these names are just some of the many ideas we had. But there was not really a great idea.

Some time later we had a nice idea:

GREATFOOD - sounds like Grapefruit, so a logo idea was born, too

I really liked the idea of the logo. But unfortunately there is a quite subtle connection to the NBC logo and there are already quite similar apps in the Google Play store. So we dropped that thought of the name and went on.

Next we just tried to create a logo and maybe we would derive of this the name. Here are only some results of all iterations we took:

The top right logo draft should correspond to the German word play "Mahlzeit", which actually means meal, but in German consists of the two parts meal ("Mahl") and time ("zeit"). As you may see we came to this idea with the kettle, the magic stick and the recipe note. To me and my project partner the graphic design of the logo looked beautiful. The colors we have chosen are fresh which correlates with the whole cooking and grocery topic. And by chance green is my favourite color.

Then we had an idea of the name for the app: "RezepTour". The problem with the logo was, when I showed it to other people (with the size of a real app logo on a device) they could not figure out clear enough what this app should be for. They said something like: "Is this a magic topper?" - the magic stick matches to that interpretation, additionally. To me it was a bit surprising that only few of them interpreted this app logo as it was intended, first.

So, next iteration!

Actually the next idea was quite spontaneous and is about the export and print feature of the app. Falling late into sleep the night before and thinking about the app - there it was: Printzept! The name sounds unique, the idea behind the name corresponds with the most important feature of the app. Like the previous name this one also is mixed out of two words: Print + Rezept (German: recipe). The logo design was done immediately next morning. I drew the name and some styled letters of it to paper.

My project partner opened the vector graphic program, looked at some free fonts and just created the logo that until now is our very final version ;-)

Some days ago I read a really informative and great article: http://www.adhamdannaway.com/blog/branding/a-systematic-approach-to-logo-design

According to this article I would classify this logo as a typographic logo. This actually distinguishes very much from existing recipe app logos. As mentioned above, most logo designs are of an illustrative or iconic type. The simplicity comes from the flat design and the reduced color selection. Knowing the name "Printzept" it is still readable or recognizable when the logo is shown in app icon size.

Unique & simple - I love it!

Das OSIT-Modell

Beim Lesen des Web Magazins habe ich einen wirklich interessanten Artikel über das UI-Design gelesen. Beflügelt von den darin erläuterten Konzepten möchte ich ein wenig darüber schreiben bzw. überlegen wie man diese Konzepte auf die Entwicklung von (Mobile) UIs übertragen kann oder wo diese schon Anwendung finden.

In Ausgabe 1.2013 des Web Magazins stellt Prof. Wolfgang Henseler das Konzept NUI (Natural User Interface)  und als ein weiteres hilfreiches Modell für die Konzeption von UIs das OSIT-Modell vor.  Das folgende Zitat fasst recht kurz zusammen, was NUI ist und welche Intention dahinter steht:

"Von visueller Gestaltung zur Gestaltung von Verhalten. Dieser erste Einblick verdeutlicht sehr gut, wohin sich, neben den Geschäftsmodellen, das Design verändern wird. Nicht mehr die Gestaltung des Aussehens - Look - ist von entscheidender Bedeutung, sondern die Gestaltung des Verhaltens - Feel - rückt in den Mittelpunkt designerischen Denkens Spielte also bei den grafischen Benutzungsoberflächen die Grafik, das Visuelle, eine zentrale Rolle bei der Gestaltung, so verlagert sich dies bei Natural User Interfaces in Richtung Verhalten. Das bedeutet nicht, dass es in Zukunft keine visuellen Interaktionselemente mehr geben wird, nur ist eben deren Verhalten für den effektiven und effizienten Umgang mit der Software wichtiger als ihr Aussehen. ..."

Es geht also darum, das ein User Interface den Nutzer in seinen Arbeitsprozessen unterstützen soll. Es ist nur ein Vermittler in der Mensch-Maschine-Interaktion. Ein NUI fügt sich in das Verhalten des Benutzers ein und dessen Elemente halten sich dezent im Hintergrund. Erst, wenn der Nutzer ein Element für eine Aktion benötigt, erscheint es. Dafür ist jedoch das Verhalten des Nutzers von Bedeutung. Anwendungs- bzw. UI-Entwickler müssen dieses Verhalten analysieren, kennen lernen und dem entsprechend die Ui gestalten. Als ein Modell für das Beschreiben des menschlichen Verhaltens bzw. des Handels kann das OSIT-Modell herangezogen werden. OSIT ist ein Akronym aus den folgend aufgelistenten und erläuterten Worten:

• Orientieren: Der Mensch versucht eine Übersicht über bestehende Objekte zu erlangen. Er will Kontrolle über die Situation erlangen. Er orientiert sich.
• Selektieren: Der Mensch trifft Entscheidungen. Er wählt ein Objekt aus.
• Informieren: Der Mensch will mehr Details / Informationen zu dem ausgewählten Objekt. Er betrachtet das Objekt genauer, oder näher.
• Transagieren: Der Mensch macht mit dem Objekt etwas (Transaktion).

Das OSIT-Modell ist aus der Physiologie des Menschen abgeleitet und trifft deshalb auf alle Menschen gleichermaßen zu. Dieses gilt es bei der Verhaltensanalyse eines Anwenders oder einer Anwendergruppe zu nutzen. Eine resultierende Benutzerschnittstelle sollte diese menschlichen Verhaltensweisen berücksichtigen und unterstützen. Für die App-Entwicklung könnte die Anwendung des Modells auf die UI folgende Auswirkung haben.

Mobile Apps sind Programme und typisch für Programme ist, dass Nutzer häufig über diese mit Daten arbeiten. Neben den Daten als Objekte kann man auch die Funktionen einer App als Objekte betrachten. Diese gilt es dem Nutzer übersichtlich zu präsentieren. Der Nutzer muss einen Überblick über alle Daten oder Funktionen erhalten. Gibt es beispielsweise viele Daten, braucht der Anwender vielleicht eine Filterfunktion, die die Menge der Daten reduziert. Der Anwender muss eine Auswahl treffen können. Für Funktionen mag dies bedeuten, dass nur die Funktionen angezeigt, werden, die auch wirklich sinnvoll erscheinen. Die Funktionen werden kontextsensitiv angezeigt.
Der Nutzer trifft eine Auswahl unter seinen Optionen und wählt etwas aus. Dabei sollte dieser so gut wie möglich unterstützt werden. Im Bereich der Mobilen Systeme, wie Android oder iOS kann man schon häufig ein intelligentes Verhalten der UI feststellen. Diese brachten, denke ich, erst das Umdenken in Sachen UI-Design richtig in Gange.

Aktuell beschäftige ich mich mit der Entwicklung einer App, bei der ich solche hilfreiches Wissen gern anwenden möchte. Ich hoffe ich werde in diese Richtung gehend noch weitere interessante Ansätze, Modelle oder Konzepte entdecken.