A Minimalist Approach to Weather Icons using Illustrator

Your Audience

Have you ever wanted to take something that could be described as over complicated piece of work to a more simple approach? Than you may be striving for a more simple minimalist approach. That is the kind of audience that I was going for in my minimalist approach to my weather icons. Instead of adding some over the top graphics and abstract design, I went for more of a simple and stripped down version with my icons. This target for my audience is looking for something that can be easily incorporated into their current designs without distracting from the rest of their design. It only includes the essentials and gives the user basic design of the elements.

Design Analysis

There are several design principles being used with in my design. You may want to used some or all of these principles when building your own icons. You have heard me talk over them before in earlier posts with proximity, alignment, repetition, and contrast. Lets look a little more closely at these principles with in my design. Take proximity for example, which groups relevant items close together. In my design it was important to put the type of weather close to related elements. Like the clouds being close to the lighting, rain, and snow. Whether you look at these icons from a  far, or close up you get the impression that they are related to each other.   Now take alignment, notice my elements are equally space, take the rain for instance, each sheet of rain follows the same alignment, and notice my wind icon all flowing in the same direction. In the case of repetition I first wanted to make sure all my elements match a similar theme. I used the same similar color pattern, repeating colors throughout the theme like the moon, rain, and snow all sharing the same color. I used the same style of cloud but just contrasting colors, and soft curves and sharp edges. This contrast helps make the icons stand out more and gives clear definition to the icon.

Send a Message

When you are creating your icons you want to be able to send a clear message to your audience without having to use typography or even photography in your icons. If your icons can convey to your audience your message without having to use real photos or words, then you have accomplished the universal message of your icon. This often translate to your audience using your icon without having to say the words. For my case, if someone wanted to say it is sunny outside, they could use my icon for the sun to convey the same kind of message. In my design the color and contrasting elements help give that message. I used colors that were within the same shades and hues.

Size of your Icons

The size proportion of your icons will help defined if your icons can be seen from afar or up close. They should be able to scale up without losing quality, and it should be able to scale down without losing its message. Below is an example of my icons in a 60 x 60 pixels layout. Can you still make out each of the icons message? Now contrast that to the below icons that have a 400 x 400 pixels layout. Can you still see the quality?

                     

Conclusion

Creating great icons start with a good theme for your audience. If you can design a theme that conveys a message to others without having to use symbols, words, or even original photos then you are on the right track. Make sure you still include the basic design principles for your icons. Think of how the colors will match your theme and how they will add contrast when looking either up close or a far. Then your sure to create stand out icons that will make your audience want to use them instead of their own words.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s