arrow_back
all projects

Nexthink Iconography

Icons are a powerful tool for emphasizing important messages and content in our communications. A well-crafted iconography can really help a brand or a product stand out. Our primary objective in this project was to develop an iconography that embodies Nexthink's brand attributes with a colorful and playful style that would provide visual consistency across all the material we create.

my role

Branding

Researching and creating various sets of icons to reinforce Nexthink's brand presence.

Illustration

Creating custom illustrations using Adobe Illustrator to develop the new iconography.

Documentation

Redacting guidelines to help other teams at Nexthink use our icons effectively.

team

Amanda Murrin • Creative Direction

The Project

Step by Step

Goals & Objectives

Sketch

Build

Design

Sketch

Build

Design

Document

Progressive Icons Step by Step

Research and Brainstorming

We first took stock of the existing assets and identified the types of icons required. To help us determine a visual direction, we looked at the company's core values, which were at the time: "positive attitude," "one team," "continuous improvement," and "getting things done." We wanted our icons to convey a sense of friendliness and approachability without compromising on a techy and clean look.

Progressive Icons Step by Step

Sketching and Prototyping

After establishing a list of all the necessary icons, I could finally begin with the fun part! I started with rough sketches before experimenting with different options in Illustrator. During the early stages of design, I preferred using grayscale to avoid getting distracted by colors and focus on usability. Although the first drafts were not perfect, they provided a good direction for further improvements.

Icons created during the project
No items found.
Progressive Icons Step by Step

Refinement and Production

A critical phase when creating progressive icons is ensuring that all the assets can scale on various materials (digital, print) without losing quality or legibility. After removing all unnecessary elements, simplifying shapes, and playing around with colors, we decided to create two sizes of icons with different levels of detail. The smaller size would be displayed at 64px on the website, while the larger (128px) and more detailed version would be used in Powerpoint presentations, print documents... etc.

Once we finished developing our primary collection, we moved on to the project's next phase: creating a secondary set to complement the duo-tone icons. This low-detail set of icons can be used when a simpler and cleaner look is needed, such as small UI elements on the website, print documents, or presentations.

progressive icons examples
No items found.
Progressive Icons Step by Step

Document

Finally, we have created a set of guidelines to help other teams use our icons effectively. These guidelines include a color palette, spacing, and usage instructions. We have also ensured that our icons appear consistent across different materials and platforms by providing links to the relevant collection on all corporate templates.

iconography guidelines

Progressive Icons Step by Step

Research and Brainstorming

We first took stock of the existing assets and identified the types of icons required. To help us determine a visual direction, we looked at the company's core values, which were at the time: "positive attitude," "one team," "continuous improvement," and "getting things done." We wanted our icons to convey a sense of friendliness and approachability without compromising on a techy and clean look.

Progressive Icons Step by Step

Sketching and Prototyping

After establishing a list of all the necessary icons, I could finally begin with the fun part! I started with rough sketches before experimenting with different options in Illustrator. During the early stages of design, I preferred using grayscale to avoid getting distracted by colors and focus on usability. Although the first drafts were not perfect, they provided a good direction for further improvements.

Icons created during the project
No items found.
Progressive Icons Step by Step

Refinement and Production

A critical phase when creating progressive icons is ensuring that all the assets can scale on various materials (digital, print) without losing quality or legibility. After removing all unnecessary elements, simplifying shapes, and playing around with colors, we decided to create two sizes of icons with different levels of detail. The smaller size would be displayed at 64px on the website, while the larger (128px) and more detailed version would be used in Powerpoint presentations, print documents... etc.

Once we finished developing our primary collection, we moved on to the project's next phase: creating a secondary set to complement the duo-tone icons. This low-detail set of icons can be used when a simpler and cleaner look is needed, such as small UI elements on the website, print documents, or presentations.

progressive icons examples
Progressive Icons Step by Step

Document

Finally, we have created a set of guidelines to help other teams use our icons effectively. These guidelines include a color palette, spacing, and usage instructions. We have also ensured that our icons appear consistent across different materials and platforms by providing links to the relevant collection on all corporate templates.

iconography guidelines