Vector Graphics

I was employed by EdTech entrepreneur Alastair Price to rebrand iSAMS. Alastair’s mission was always a simple one β€” to create the leading web-based management information system (MIS) for schools worldwide. Here’s an overview of the bespoke vector graphics I produced.

The Process

During my initial audit, I noticed iSAMS was not using vector graphics on any products, websites or marketing collateral. The quality of reproduction was poor, and each internal team had a disparate understanding of digital files, colour and quality control.

I began to construct a brand kit, which included various sets of icons and illustrations. I determined the metaphor for each item, and the vector graphics were created at specific sizes using consistent pixel grids.

Menu Icons

This collection of icons was designed for both product and website menus. Because iSAMS was active in over 90 different countries, I had to make sure all icons were clearly understood by all demographics. They were designed using a 16px grid.

Collection of menu icons

Module Icons

This collection of icons was designed for the individual modules that made up the MIS. The icons used bold geometric lines alongside a single primary colour. These module icons were used on the product UI, the range of websites and marketing collateral. They were designed using a 32px grid.

Collection of module icons

Wizard Bar Icons

This collection of icons was designed for the wizard bar, an area of the MIS that allowed customers to quickly action specific tasks. Due to their size, the primary colour was applied to the container, which had rounded corners (3px). These icons were designed using a 16px grid.

Collection of wizard bar icons

Bullet Illustrations

This collection of illustrations was designed for use on marketing collateral and the PR website. I asked all departments to supply a list of their responsibilities and each task was created as a vector graphic. These bullets became the foundation for a range of cover illustrations and the perfect accompaniment for key pieces of information on the PR website. They were available in 4 different colours and were designed using a 30px grid.

Collection of bullet illustrations

Website Illustrations

This collection of illustrations was designed for use on the range of customer service websites. They covered all modules and school-related job roles. They also included development and community metaphors. The illustrations were available in 4 different colours, and were designed using a 58px grid.

Collection of website iillustrations

Cover Illustrations

This collection of illustrations was designed for use on the front cover of documentation and marketing collateral. The bullet illustrations were used throughout and the metaphors covered everything from services, to products, to key partnerships. The illustrations were available in 4 different colours, and were designed using a consistent 100mm artboard.

Collection of cover illustrations
New logo design for iSAMS

Previous

New Logo
Developer sat at his desk

Next

Staff Photography