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.
