IXD304: Creating an Icon Set

During our final group critique session, I was advised to create an icon set for my website. These would be used on the “read more” page in the facts section. The benefits of doing this include:

  • It will help to visualise the fact information.
  • They can be used as a shorthand for the text which means less reading for users.
  • They are visually appealing.
  • They help break up the text.

Designing the icons

I went into Figma and came up with ideas for how each icon should look.

Launchpad icon:

Rocket icon:

Altitude icon:

Distance icon:

 

I ensured that these were consistent in colour and style. Any stroke that was used as a stroke of 3. I kept them all as simplistic as possible which means they can easily be used on a small or large scale. I then made sure they were consistent in size by using the ruler tool.

Final icon set:

 

I then took these into Webflow and you can see how they were displayed below:

Overall, I am happy with the outcome. I think it breaks up the content well and adds a nice visual for users. This makes the content more enjoyable to consume.

 

Update!

After looking at all the icons together on my website. I realized that the altitude icon didn’t match the style of the other 3 icons and looked out of place. This is because it just used lines and wasn’t filled in like the others. Therefore, I decided to change this to a more bold, upwards pointing arrow.

Here is how it looks on the website. I think it is more consistent with the others and looks much better.

 

Leave a Reply

Your email address will not be published.