UI Design Tutorial: interface icon Creative Design

Seen many designers on the Internet icon production process, the basic is the introduction of biased techniques. In fact, in the icon design process in addition to the most important thing is the icon creative, but this aspect of the system is very few online. With this actual interface design project, To share my own understanding of the method of creating the creative phase of the interface icon. And the rich illustrations to explain their own ideas! To the second as a graphic interface designers to communicate the introduction! Welcome you to come in exchange!

This process is relatively long, they can only be prepared in stages, sent up! It's a lot of things, so forgive me!

Put some sketches on the table today! The preparation of the creative notes follow up.

Part I: Icon Creative stage

In fact, there is an important step before this stage, that is, creative preparation.

According to the project requirements, determine the style of the icon, in the process of interface design, there is a style evaluation method to determine what style of the project is going. This is also the project Prophase user research content, has the potential company to develop "the user role", uses to instruct the interface visual style direction, the interface content construction and the interactive design and so on!

When we receive the design task, how do we start to design the icon? First of all, we need to understand the interface requirements, the definition of each function icon to be very clear, otherwise we design results will lead to users difficult to understand, this is the icon design concerns usability issues! It's a quote from Jakob in my blog class. Nielsen ' s website inside the article "Icon usability", we can go to see. Poor icon design ultimately leads to an experience of the user interface's failure to operate. But the visual aesthetic and usability sometimes contradictory aspects, we can not go to extremes, only and usability but ignore the design of the beautiful side, also can not pursue the design of the beauty of the demand and forget that this is a very powerful interface icon, it is best to achieve a balance between the two!

Understanding functional requirements, we need to collect a lot of "words-graphics" can be transformed between the elements, with the life of objects or other visual products to replace the expression of the functional information, or operational tips. Such as music: we would think of notes, CDs, music players, headphones and so on. But what do you choose to express? In principle, the closer the user's psychological model is best, the most common visual elements are not to express the message to be conveyed. Metaphor is a necessary way of thinking in the design of icons! Find the intrinsic meaning between the object and the finger, which requires the designer to have a subtle observation of life and a rich associative ability. Of course, this is the design of the difficult point, do an icon design no less than good product creative design, including the final icon production is also embodies the ability of the designer, especially now high resolution display equipment a large number of applications, a good interface to get the user's approval, high-quality icon design than the need! (Difficult!) Now the understanding of GUI design is limited to graphic artists, the consciousness of managers is often related to the normal development of an industry. Our work to be recognized, we need a common effort!

Here is a sketch of the icons I draw:

Figure 1

Figure 2

Figure 3

Figure 4

Figure 5

Figure 6

Part Two: Sketch drawing stage

This stage is to draw out our ideas, test the visual relationship, that is, in the visual aspects of the sketch, so more efficient, to avoid in the rendering end later regret. (Regret what!) First of all to determine our icon perspective, which is related to a set of options in the perspective of each icon, which is in the design of the logo consistency of the basic requirements, perspective of unity. Then add the details step-by-step. As shown in the following illustration:

Figure 7

At this stage we have to check the composition of the elements between the way (there is text, we click to see it, typing very tired ah!). The following figure:

Figure 8 (+ click to enlarge)

Icon Visual Analysis:

Often an icon to express a certain meaning must combine different forms, with the help of a single form of the internal information conveyed, together to convey another message. For example, when designing the navigation function icon: Our first reaction is satellite-related, but it's a single satellite shape to convey the meaning of navigation I'm afraid not dog, then Lenovo and navigation-related information icon: "Coordinates" "banner" "Land" and so on. And then through the designers to the visual balance principle of reasonable arrangement between their primary and spatial relations. To be aware of: do not use it to express functions related to the graphics or objects, to be carefully selected, it is best to be familiar with, easy to remember the object or shape, after all, our goal is to help users more image understanding of the inherent functional meaning of computer programs, to easy to remember, easy to understand as a prerequisite. Also can not use too much graphics to express the meaning of the icon, too complex to affect the user's understanding.

The above diagram is the analysis of the relationship between morphological combinations, explore the best combination of methods. form the unity of vision and function.

Part III: Sketch Rendering Stage

When we have finished the process ahead, the heart of the bottom. I felt that the sketch had clearly expressed my thoughts, and also can be closely with the function information, (I usually make a picture of the icon as a field test, to the students or colleagues to see, and asked him whether he can understand the meaning of the icon I painted) then start the Great rendering project! Here's the question of tools, and a lot of people are asking, What tools to use to draw the icon, my answer is, as long as you can draw out, to achieve the goal, anything can, even if it is hand-painted after the scan and then edit. Generally we use Photoshop, Illustrator, firework and other software to draw, it depends on your habits, as well as the degree of familiarity with the software. I use is relatively biased software Xara Xtreme Pro, this is a vector software, powerful, fast. But the software volume is very small, the function is more focused on the drawing, the drawing way is free, as long as you have the artistic foundation, can draw the beautiful icon. Below I will describe the process of Xara drawing icons in a procedural way.

Time tight, simple to the front of the sketch icon design with Xara to make a final effect! First, put a simple process, later fill the complete!

Figure 9

Figure 10

Figure 11

Figure 12

Figure 13

Figure 14

Figure 15

Figure 16

Figure 17

Figure 18

Figure 19

Figure 20

Figure 21