Portfolio archive
Quo Agency, Inc. 17 State Street Suite 4000. 10004. NY.
 •  
hi@quo.agency
 • 
Posts
Agency
Contact

Metaphors creation: Quo Stock’s icons design process

Icon design is essential. Deep down inside of it, there is a semiotic structure used by new technologies in favor of user experience.
By
Nelson

Quo is a very dynamic agency that offers a broad range of services like branding, web design, UX design for apps, and advertising. To be able to perform successfully, the agency displays a catalog with different kinds of products that includes logos, typography, illustrations and recently animations too. Nevertheless, Quo is always pushing barriers out of the comfort zone, this is why the agency is currently experimenting with a few ventures like Stock Quo, Alpha Quo, and Ars Quo. These brands are distinguished by pieces ranging from an icon gallery to clothing and decor products, developed with Quo's artistic imprint.

Each of these ventures has its features, but in the particular case of Stock Quo, the focus is on the icon, that conventional image that has been reborn from the past and that nowadays has gained enormous importance in the area of technologies due to its universal semic properties. Today, whoever works in this field, whether in web design or in app development, will need communicate messages to a large number of users all over the world. But, how can it be possible for most of those users, regardless of their language, understand an interface? The answer is: iconism.

Perhaps, only during the Middle Ages, this system of linguistic and visual representation has been as important as it is now, because at that time, his influence had an impact on arts even, permeating the work of artists like Bosch and many others, even influencing people’s communication system at a level similar to writing. This phenomenon may be better understood by observing chat conversations, line after line we find emojis mixed with writing to express something that otherwise would not have the same immediacy, the same semantic or expressive load and, perhaps more importantly, the same universality in the middle of the Tower of Babel that were Middle Ages and what the information society is today.

Unlike other symbols, the icon has a certain natural relationship with the object, this is the reason why its nature is oriented to represent the object pretty much universally, and this power has now extended to represent aspects as complex as the same expressive function of language, giving way to the iconic representation of psychological aspects as abstract as emotions, feelings or mood.

As can be seen, deep down inside the icon there is a whole semiotic structure, the new technologies that aim to achieve the effective, efficient and satisfactory use of different tools are based on this structure, that is why the icon design is essential.

At Quo we have become aware of this and through Quo Stock we want to venture into this field of design in order to exploit and maximize its potential. Having designers who create marketing materials and applications as our main target, our first step in this path has been creating a gallery of more than 3000 icons (fixed and animated) in order to commercialize their licenses. The brand covers this area that lacks potential competitors, at the same time it addresses a major consumer problem: moving graphics or GIFs, how is this done in Stock Quo? It is what we will reveal next.

The art of icon creation

First of all, when talking about the icon it is necessary to understand that we are entering the field of semiotics, the science of signs, in other words, we speak of a system of visual representation that tries to symbolize reality through images, their colors, their shape and texture, we do not talk about words, we talk about iconism.

This system is based on the principle of any symbol: the linguistic sign, the first act of symbolization of the human being. Its structure, according to Saussure, father of modern linguistics, is articulated through a set of sounds to which, conventionally and unmotivatedly, a concept is associated. The dynamics of the icon is similar, since in its image a meaning is associated, also conventional, the difference is that it has a natural relationship with the object, motivated by its resemblance to it, such is the case of the drawing of a tree that represents the real tree or the graphic scheme of a magnifying glass to signify the search concept.

Therefore, the icon is similar to the object it represents, but this similarity is relative, since it is presented in degrees that can go from the most exact to the least accurate, this is called the degree of iconicity. This is because the icon has certain minimal features that define it and differentiate it from others. This fact is an advantage, since it is not necessary to capture all its graphic characteristics, but certain features in particular, for example, the main feature of a tiger are its stripes, an element that would distinguish it from a lion.

In the design of icons, these distinctive features are the focus, since these can be highlighted or blurred by different design techniques, giving them greater expressiveness and printing an artistic nuance in their aesthetics through the use of colors, size or their geometry, of course, without altering them to the point of distorting the meaning.

Overall, the main objective of the icon is to offer, without distraction, a specific visual information, but in order to do so, it must be as simple as possible and must follow the conventional models of a community. In addition, it must be designed for the specific information it will represent. All these factors make its creation a complex process, since it is very difficult to condense an entire message into a simple image, for this reason, one of the ways to work in the design of icons is starting from those already established within a community, intervening in an innovative way the features that define them, but if a universally accepted model does not previously exist, it is necessary to create it, for which you must explore in search of the required information to then go to the graphic representation of it. In Quo this process is carried out in six consecutive stages, which we could expose in the following way:

  1. Exploration: In this phase, essential questions are clarified, such as: what will the icons be designed for? Which in turn leads us to think about those meanings that are intended to represent. Another element that we must clarify is how many icons will be needed? which is useful to establish a goal, a time. It is also necessary to establish the context, since this has a semantic determination that can change the meaning of literal to figurative, for example, the image of a supermarket cart outside a store or on a web page, in each case the meaning varies according to the context. Of course, it is impossible to ignore the type of audience to whom the icon's message is directed.
  2. Conceptualization: It is perhaps the most difficult stage, because we must amalgamate the concept conceived in the exploration with the image that will be the key of our icon and, depending on that exploration phase, its meaning can be literal or figurative. In the first case, a direct representation would be ideal, like the drawing of a telephone to indicate where there is a telephone booth, in the second case, it would be more appropriate to use images that represent rhetorical figures such as metaphor, case of the light bulb that represents an idea, or metonymy, case of the diskette for the action of saving. In this stage the association between image and meaning occurs when we can say: this image is metaphorical representation of such concept or literal representation of such action or object.
  3. Design phase: Once the concept has been established, the graphic execution of the concept begins. This is a complex phase, since it largely deprives aesthetics, however, this must be in line with the communicative aspect, since aesthetics must also communicate information, facts, ideas or values. This aspect is taken into account by our designers, who in each design initiate that semiological process in which images and concepts are linked to create signs that will give rise to visual metaphors. Overall, this phase begins with the creation of preliminary sketches of small size, fast and without much ostentation, whose purpose is to express ideas graphically. These sketches are refined through an evolutionary process through a morphological table to give shape to the first drafts that should be very close to the final art. This process allows to outline a great variety of design that is presented as a variety of possible options.
  4. Export of final arts: we refer playback support, in this sense, we must take into account that some icons are printed and others are reproduced on screen, depending on this fact must be designed in vectors or pixels. For example, if we have a perfect icon and we do not consider that it is going to be in a very small support, it is likely that, by saving it in a bitmap, the distinctive features will be lost. However, generally, in Quo, the matrix of all the designs is saved in a vector format, since it has the goodness to be able to return to its edition and, from there, generate other formats.

As can be seen, each format is oriented to a specific function: vector images may be more appropriate in the case of an enlargement, while bitmap images are better for web pages where a small image with photographic quality is required, this does not imply, of course, that in web design the vectors are not used. Overall, it is about guaranteeing the downloading of our icons in options that allow those who use them, transform them into bitmap files (JPG, TIFF, BMP, PNG, and GIF) or vector images (EPS and SVG).

The icon is more than an image

All creative process involves the metamorphosis of an input element through refinement techniques that make it more precious. In our case, that element is an idea that is wrapped like a chrysalis and finally springs up in a different state, more refined, colorful and impressive, is the phenomenon we call art. This process appears to us as something random and chaotic, and in a way it is, well, how could something as spontaneous and unpredictable as art be systematized? Despite this, for Quo, art implies a methodical and rigorous process that does not detract from its value, but, on the contrary, allows it to be.

On the other hand, creativity is not always an unprecedented proposal, it can start from an unexpected turn given to an established proposal, seen from a new angle, this allows us to think reality from a new perspective, giving it a twist and renewing it. The latter could not be possible without an exhaustive knowledge of the technique, and just as the poet plays with the rules of language, Quo designers play with different design techniques, with such skill that they can compose, decompose and put them in close relationship with the world of semiotics to give life to those visual metaphors we call icons.

It is evident that an icon is more than an image, it implies a language and, in its creation, there is a whole science that, contradictorily, mixes with art, demanding from those who design it a very high degree of precision, dexterity, but everything, of creativity.

Want more?
Portfolio
Look for a new angle.
And push barriers out from your comfort zone.
hi@quo.agency
+ 1 347 566 5547
17 State Street
Suite 4000
10004. NY
View on map
Copyright © 2018 Quo Agency, Inc.