Overview
As part of the Digital team at IPA, I was brought on board to help identify UX and UI improvements for the IPA website and had the responsibility of applying these updates and changes with a website re-design.
To assist with the site re-design I also created components, assets, and a Design System for IPA. I was also responsible for developing UI mock-ups and prototypes to clearly illustrate how the new website functions and looks would be.
Colors (Tints & Shades)
3 Primary Colors (brand colors)
Using the 3 company brand colors, I provided the client with 5 tints and 4 shades for each of their 3 Primary Colors. Along with these, a color Hex Code was provided, as well as a numerical value from 50 to 900 for quicker color identification when passing on designs to the developer. Using a numerical value also allows for new tints/shades that can easily be added to the Color System.
6 Secondary Colors
The client also has 6 secondary brand colors which they use on both, online and print collateral. Tints and shades were also allocated for these secondary colors.
Neutrals
Using the primary/brand blue color, I overlayed it over a pure grey, lowered the opacity, and created a neutral grey that had a slight blue tint, to better match the website scheme. As the primary and secondary colors, the Neutral range of colors was also given 5 tints and 4 shades.
Dark Mode
The same technique used for the neutrals was used to create the dark mode color scheme.
Gradients & Shades
Gradients were added after the color system was designed due to them being used for other design projects.
Shades were included in the original design which is made up of pure white/black to make designing projects easier by having these 2 shades saved in the color system.
Typography
The client had already chosen a typeface family, which they used in all company collateral however, no clear guidelines were ever introduced in relation to the typography to be used online and on printed material.
I created a simple typography guideline using the company typeface that included, displays, headings, sub-headings, paragraphs, captions, and footers.
Starting from paragraph 2, at a 16 point font, I calculated the line height by multiplying the font size by 1.2 (and rounding off to nearest whole).
Buttons
I created a series of button options for my client, however before I started to work on the button designs, I went through and looked at my client’s entire site, and found that it had over 40 styles of buttons and Call-to-Action items.
I wanted to simplify this by introducing, one set of buttons that could be used throughout the entire site.
I created examples of all states of buttons (Default, Hover, Selected) and made them with a neutral grey (from the color design system) that could be used throughout the site. I also created a second version of buttons made with the client’s company colors, so that these could balance out the use of the grey buttons, to give the site some splash of color.
The client used 2 square buttons, which I took the opportunity to update so that they were cohesive and in the same family font.
Page Grids
Shadows
I also created a simple but effective Shadow guideline.
