Promotional Icon Set

Ethan McGonigle
4 min readJul 4, 2019

Orbit

To help me to develop an entrepreneurial mindset, I was tasked with creating a set of 12 icons that were all interconnected with one another. The 12 icons had to then be showcased on a promotional website where the icons would be available for users to download (or bought) for their own personal use.

Platform: Desktop

Project brief ‘Through a focus on companies and individuals that have built digital products from the very large (for example, global tools like Facebook and Twitter) to the very small (for example, sole designers developing products like icons and typefaces) students are encouraged to develop an entrepreneurial mindset.’

Skills: UX Design, User Research, Illustration, Branding, Interaction design, Iconography, Web Design, Responsive Web Design, Promotional Strategy.

Project Goals

  • Create and illustrate an icon set of twelve (or more) icons.
  • Build a promotional website to act as these icons’ vessel, where they will be available for download.

Design Toolkit

Obstacles I Overcame

How To Promote The Icon Set

I took pen(cil) to paper and began mind mapping out some ideas for icon and website themes. I narrowed my brainstorming down to my two favourite ideas; an interactive kitchen teaching users how to cook 12 different exotic dishes or a space themed website showing an illustrated timeline of the history of space travel.

I developed both the ideas out further to give me a better idea of which one I felt would work and look best. I decided on the space-themed website in the end as I felt this particular icon set met the needs of the brief more and served better as a promotional website.

After I had decided on the space-themed site I began to consider how I would visualise the icon set digitally. When I decided I was going to be showing a timeline of the history of space travel, I knew the icon set would be fundamentally made up of various space crafts and shuttles. I decided that the best way to showcase this was in a literal timeline as each piece of history happened so users would be able to physically see the evolution as they switched through the years.

When I selected the 12 space crafts and shuttles I wanted to include in my timeline, I began sketching them out so that I had a basis for creating my digital vectors.

Timeline Sketches

Understanding JavaScript

For this project, I wanted to push my coding capabilities a bit further aswell as my illustration skills and try and build on what I could already do. I wanted to incorporate a bit of JavaScript into my promotional website and use fullpage.js scrolling to improve the user experience.

Because each section is 100% of the viewport size when using fullpage.js and I had a minimum of 12 icons to make, I figured that 15 (or so) sections would be too many and it would create too much work for the user. This was an obstacle for me because I had to learn and have an understanding of how to add an additional horizontal slider into the fullpage.js.

Finished Icon Set

--

--