Over the past year, we worked with Kronos, a time management solution company that focuses on human capital management. We were tasked with redesigning and reimagining the future of their web presence. Thanks to Kronos's complex and expansive platform, we accepted the challenge of telling a better story of how their software works harder for managers and their employees. I worked closely with a strategist, UX designer and fellow senior designer to craft a flexible digital home to their brand message. To further establish this product ecosystem, we evaluated their chosen web taxonomy and went to work on establishing a visual language that would stitch together their product offering and their overall competitive advantage.
I wanted to share some of the overall thinking and template setup for these icons. We established a defined, yet flexible icon grid that was applied to a 100 artboard designer template. We established a visual hierarchy, starting with color, stroke weight and ultimately defining every detail that got carried throughout every single icon.
Each icon should be designed within a 64px. grid. To ensure no elements crop out of the artboard, set the maximum lenghth/width at 58px. to account for the 2px. centered stroke weight and the 2px. gutter within the arboard. (1px. stroke on either side of the icon)
58 + 1x2 + 2x2 = 64px.
Primary stroke weight is 2px. Intricate details (noses and mouths for people) is set at 1px. strokes. All strokes are centered within the path.
All strokes should use round caps and corners for consistency.
Rectangular icons (horizontal or vertical) should align within a 46px. space. They should scale no more than 44px. wide or 44px. high.
To maintain a modular look and feel to this family of icons, rectangular icons should scale down to no more than 34px. wide/high. Examples of these icon types include a mobile phone and the people icon sets.
Filled in dots should be 3 x 3px. Examples include text bullets on a tablet screen, eyes and shirt buttons.
Stroked dots should be set at 4 px x 4px. Examples of these include buttons on a device.
To ensure the right balance of size of icons, square icons should be scaled at 52 x 52px.
Corner radii is set at 3px. for large elements. Hard edges should be used sparingly. Non-rounded corner elements would include anything that is scaled at a small size, with a 3px. corner radius causing the icon to lose its square shape.
To get the best results, use Rounded Corners (under the Effects menu) to set corner radius. Don’t use the rounded rectangle tool.
The use of supplemental icons for additional context can be used. They should stay within 24 x 24px. and primarily align to the bottom right corner of the icon grid. The parent icon should align to the center of the grid for consistency.
In extreme cases, the supplemental icon can shift depending on the layout of the parent icon.
People are all a fixed width of 34px. wide. The widest part is the shoulders, which is the same for all people. Height is variable depending on hair type. The maximum height is 58px. within the 64px. square grid. All people align to the bottom edge of the artboard, within the 2px. safe area.
The critical difference between male and female paper dolls is face shape and hairstyles.
Ultimately, the success of this icon system was a result of the chosen visual style. With the use of 4 colors and lines instead of fills, we were able to essentially create an illustration driven icon library with a focus on modularity and consistent design patterns.
Additionally, we are already seeing how these guidelines are helping to shape the visual story of Kronos and the overall strong branding consistency of this icon system with the recent launch of kronos.com. Kronos's internal design team has taken our guidelines and have effectively used them to establish a strong brand message.