9 iCon Design characteristics and Styles

Simple and minimal. No gradients, shadows or colors besides the template recommendations for each style. It is important to follow the order of the styles in the creation of the illustrations in order to be efficient (creating more illustrations with each passing day).

This is the visual and stylistic approach in illustraStock design system. The style is intended to offer a range of flexibility while maintaining a consistent brand approach. The various styles in the system add attributes to these base guiding principals, which create a system of related illustrations. The attributes are not flexible, and differ from one style to another.

Remember, the illustrations are created for 1:50 scale and for 1:250 scale but are mutually interchangeable.

The order with the creation of the styles is:

  • First Step:
    • Doodle style
  • Second Step:
    • Basic style
  • Third Step:
    • Coming soon

Main Styles

– Hand Made (Doodle)

Doodles are simple drawings with concrete representational meaning, generally thoughtless drawings with simple and minimal recreations. Less is more, but we don’t need to be afraid of adding some components to make them look more charming.

It is very important to check the size of the illustrations during the work to know how they look in real size. Maybe a draw requires stroke in more than one size.

Stroke size

1:50 scale = 1px

1:250 scale = …

– Basic (Outline)

Outlines are simple drawings in which objects are delineated in contours without shading.

The Basic style or Outline is made after the Doodle by copying the Doodle file and changing all the lines into the Basic brush from Adobe Illustrator. Also it requires changing the stroke size as following:

Stroke size

1:50 scale = 1px

1:250 scale = …

Child Styles

– Mono Color, Restricted and Full Palette (Colorful)

The style distinction is derived through the use of palette, such as applying a limited vs. extended palette (Soon).

 

 

  • Use established concepts where possible, to ensure consistency of meanings for the icon and its relevance to other uses.
  • Consider how the icon will appear in the context of the UI, and how it might work as part of a set of icons.
  • While revising an existing icon, consider whether complexity can be reduced.
    Consider the cultural impact of your graphics. Avoid using letters, words, hands, or faces in icons. Depict representations of people or users as generically as possible, if needed.
  • While combining multiple objects into a single image in an icon, consider how the image will scale to smaller sizes. Use no more than three objects in an icon (two is preferred).

 

  • Use even numbers for the stroke thickness. Uning non even numbers will result in blurry icons after resizing ( 4, 8, 12, 16, 20, 24, 28, 32 etc.).
  • We create the icons with our 1.024 px artboard template, but the icon have to be readable at 64 px (just in case, zoom out till you reach the minimum in illustrator)

 

The illustraStock Style Production Guide provides an overview of the various icon types and context that define the illustraStock icon approach.

Having a system based design ensures a unified brand expression. It also enables us to provide a variety of icon styles that are flexible and complimentary.

Icon Type

This is the functional purpose of an icon. For instance, icons used to provide access to major application/functional modules are called “iConic Icons” or icons used to represent objects/content are called “Realistic Icons”.

iConic

With our iConic style, we try to offer simplified representation of a subject or concept.

Realistic

Whit our Realistic style, we attempt to represent subject matter truthfully, without artificiality and avoiding artistic conventions, implausible, exotic and supernatural elements. Have additional attributes added such as palette and lighting attributes.

It is important to say that Realistic icons are not really icons, but they can be used like that. That is why we do create the Realistic iCon Style not just with templates, also at scale.

Style

This is the visual and stylistic approach in our icon design system. The style is intended to offer a range of flexibility while maintaining a consistent brand approach.

The various styles in our system add attributes to these base guiding principals, which create a system of related icons. The attributes are not flexible, and differ from one style to another.