Icon Systems

UI
Adobe Illustrator
Design systems are integral to a cohesive visual design experience existing in typography and icons. Throughout the semester I explored icon systems by way of experimentation creating my own guidelines to adhere to.


Doticons


Dots. A round form. Though, due to the 10 x 10 linear grid system, it was like designing with a line. Each icon alludes to having rounded corners with a lack of. 
1  Doticons Set
2  Dot System
3  Profile icon 



Doticons 2.0


4  Doticons 2.0 Set
5  Doticons 2.0 Dot System

Doticons 2.0 increase from a 10 x 10 grid to a grid of 19 x 19 though there are still 100 dots. Each is equally spaced.



Doticons 3.0

Further extending on Doticons, this set developed a spatial sense. Rows arranged horizontally increase in size by 10%. The axis of the dots are center aligned in their respective columns and rows.

6  Doticons 3.0 Set
7  Doticons 3.0 Dot System



Straight Line

Moving away from system icons and into weather. This is set that breaks the rules of the grid. 45° angles are still in use, however they don’t start at the grid points. Using an octogon instead creates a more whole shape.
8  Straight Line Icon Set
9  Octogon vs following grid points
10  Moon




Continuous Line


This experiment came out of the concept of continuous line drawings. I set out to create visually recognisable line icons without lines touching, or overlapping. Some work, some don’t, and some just look darn silly. As an iOS user, a lot of these icon concepts are easily recognisable to me. The photos icon pushes the concept to the limit.
11  Continuous Line icon set
12  Clock icon with Grid System
13  Mail icon
14  Photos icon