Icon creation – Surprise Me app

In follow-up to the previous post on the UI design of an application for iPhone, i come now show you the result of my work for the icon of the app.

Develop an iconic symbol it not easy at all. The big issue is how compacted our idea and the concept of an app in few graphics.

I already had the idea and the next step was to transfer it to paper and after to vector.
I knew I had to include the aircraft element, since it is an app to find flights. I also knew that the element of surprise had to appear, because the main functionality of the app was to find flights, whatever they were, but within a budget and in the dates that had available to travel. In short words, plane and surprise were the keywords to wokr to .

Here’s the first sketch I did for the icon. I mad in the first paper that  I caught… a post-it. It began with a plane profile and external elements around him, the same idea used in cartoon.

fotografia (7)

I could represent the “surprise” in various ways, such as a box of surprises, a splash element as is used in cartoons … But I preferred graphically something similar and did remember exclamation points.

These elements of surprise, also remind movement, speed and dynamism. As should be the app.

With the idea of drawing, I started to desing in vector … I already had in mind what colors to use, they would be the same as used in the own app design.

I build mentally a color range;

palete

From here i just to had merge harmonious colors and shapes within a square.

Up, down, right and left, the icon was taking shape, to get where I imagined. I also  thought tha was a good idea to create a lettering, besides an iconic symbol, to turn to some kind of logotype.

icon-process               icon-process-02

I used a simple, clean lettering, like i used for the app. Simple and straightforward.
And finally I finished Icon.

Here it is.

icon-web

My UX/UI Weekend

Last weekend I had the opportunity to attend a workshop UX / UI Design for Mobile app. In renowned digital school in Lisbon.

It was really great, get to know the methodologies and best practices to design a mobile app. Because drawing an app for mobile is very different to a  designing a website.
Over the next days, I will share with you some of that knowledge I have acquired and share to the exercise that I did.

app-surprise-me-katia-amaro

Some points to remember:
– The idea is critical and we need to know the concept and who will be the audience for the app;
– Do mockups on paper. Yes, despite to seem a little old school, it is important to organize the ideas and have a basis for designing to digital;fotografia
– Make digital mockups:
and test … test over and over till is perfect;

Well for now is all .. Wait for my next posts!

My creative process to create a logo or symbol

Sketches

Despite not having much time lately, I am currently a creative process to create a logo and / or symbol to a application for mobile devices. And I can say that I love the process! I like it !!

Before you start scribbling, a lot goes through my head …

Step 1 – Create and choose the name! It is not easy! I know the importance of a name may have and know that sometimes the name can decide whether something will succeed or not. Points to consider: short names or frequent use, funny names or taken from expressions;

Step 2 – Find what exists in the market. Either by type of business or by the association to the name. For example if the name contains the word “frog” and is a business of “cars”, do a visual search of the two and find what exists in the market. From there I begin to create in my head a series of images and combinations that will give rise to one thousand ideas.

Screenshot_1

Screenshot_2

fotografia (6)Step 3 – Time to sketches . The best part is here. I’m old school, I need to have a pen handy to first make some sketches on paper, before moving on to the action. ok, I confess I also use my ipad …
These initial sketches are the base for a future log soon. In this stage  i see if the ideas may have legs to walk or not.

Step 4 – Make a selection. After a thousand and one scribbles you need to choose the best to transform to vector. What are the criteria of my choice? Well, in addition to my personal taste, the most important is to see whether the logo is suitable to the public or business that you will serve.

This requires some analysis, “see” through the eyes of others, and if you have time, leave standing for some time, later to return to work on it, with a coolest head.

fonts31Step 5  Start drawing digitally. After choosing candidates, comes the stage of passing them to vector. In the past i used the freehand , but Illustrator is my beloved choice to create any logo. In addition to designing forms, choose the colors, the lettering is sometimes not easy to choose. From thousands of fonts to our choice, the choice of font is as important as the symbol. So we need to be sensitive the appropriate choice for a logo.

http://www.standingdog.com/blog/what-the-font-choosing-the-right-font-for-your-project

Step 6 – Some of them die on the way. Any designer knows that not all the sketches result in vector and sometimes are left with few have quality to continue.

Step 7  Before finalizing the proposals should be to test the black and white and various backgrounds to assess their good adaptability.

Find the persona and you will find you public.

Persona

When you start woking or to study UX, you know that the persona analyze is process to know better the future user of your device.

In a simplified way, you have to take account of that audience was intended (public target) and creating a persona, that is a fictional character who will be the user model that will use our device.

Creating the persona you will find the common points, the strengths and the areas for improvement. Knowing that you be able to make an appropriate framework.

A persona is a role to be iinterpreted to see how we are seen by others. If each persona act differently in each environment, in the case of a device , we will se that he respond differently on different devices.

How to define a persona?

  • Who is your potential user (physical and psychological characteristics of the user)?
  • What kind of contents interested him on the device?
  • What are the tasks / most common activities he performs (both personally and professionally)?
  • What is your level of education? What are your challenges and obstacles?
  • What kind of information usually consume and by what means?

Benefits 

  • Faster and cheaper;
  • Easy to understand;
  • Easy to produce;
  • Help to create empathy for the user;

Disadvantages

  • It’s not precise;
  • Based in suppositions;
  • The wrong guess, can compremise the design and architecture;

After doing this analysis you will have a good base of information about the user and the first step to start thinking about the architecture of the device.

Here a example of a Persona template and its completely free in:

http://fakecrow.com/free-persona-template/

persona-template

Photo credits: Pixabay

In few words…What is it UX and UI Design?

Well…i should i begin? When i was a student in visual, i don’t remember the concept of UX and UI design. Maybe i had my head in the clouds, but sincerely this subjet was never be talked with depht. When i started to heard about that i became curious and make my own search to learn a little more about this area.

After some search, i realize that in my years as webdesigner,  I was already doing that job, this kind of analysis, but in a way more intuitive and base at common sense.

The wikipedia definition:

“User experience design (UXD or UED) is the process of enhancing user satisfaction by improving the usability, accessibility, and pleasure provided in the interaction between the user and the product.”

In other words, User Experience is how the user feels when is using and interating with a system. It could be a app of a mobile device, a website, a desktop app or a software. Is the interation human-computer (HCI).

Ux-areas

User Interface Design or UI Design,   it’s the way how the person interacts with and controls a device , software or application. This control can be done by buttons , menus and any element that provides an interaction between the device and the user.
A good UI design anticipates the user’s needs and ensures that the interface contains elements of easy access and use. It will provide what is called a user-friendly experience , that is, an experience that is friendly and does not cause the user frustration.
Example of UI Kit – From http://designmodo.com/flat-free/

http://designmodo.com/flat-free/

Let’s start..!

Hi..this the first post of my blog…so Welcome!

I don’t have real talent to write, my thing is more pictures. Yes… I’m a designer and sometimes I have to make a draw to make myself understood. I love everything about visual world and everything is related to that. I start my career as a graphic designer but my interest in web design, make me what I am today. In the last years I worked as a web designer and now I’m making my first steps into User Experience area.

This blog will be related about that… and everything that I eventually want to share, everything I had learn and what I’m working to.

So…less words…and more action! Let’s start!

Make me a draw!

Credits: Photo wikihow