Sitediff

Sitediff

About the project

Date
2019
Client
Evolving Web
Category
Tags

About the project

I drew a lot of visual inspiration from the other SAAS sites that I found in my research. I tried to represent visually the concept of an automated and rule-based testing environment using both graphics and icons. I used contrasting colours to define sections, and typographic hierarchies to emphasize the important text while following the established brand guidelines.

Research

Inspiration & Style Research

With the wireframes and branding elements already established, I began my design research by looking at other SAAS websites to gather inspiration and insight and developed mood boards.

Some of the elements I chose to pull from the the mood boards was the use of gradient to establish a more dynamic background, and then alternating between gradient and white backgrounds to give visual separation to the different sections.

The gradient was a combination of the darkest and the second darkest blue from the colour palette for maximum contrast between sections

The Mockup

Wireframes & design Mock up

After the wire-frames were developed, I stared to implement the visual design inspired by my SAAS website research and mood boards. I followed the brand guidelines regarding the fonts and colours, only adjusting the sizes to further emphasize the typographic hierarchy

Illustrations

Desk Image

For the rest of the illustrations, I tried to use visuals that were in line stylistically with the original image and maintained the same colour scheme as outlined in the branding guidelines.

I chose to use an image of a person checking code on a computer because I felt it was important to add a personal element and to show a person using the software. Even in an illustration format, seeing a person using the product will make it feel more personal and user-friendly.

Main Image

For the illustrations, I chose one of the original images provided for the main product image, as I felt it reflected well the concept of the use different versions. The only thing I adjusted were the colours to have them fit with the blue and green colour theme, and I left the one pop of colour with the pink, orange, yellow and green levels to emphasize the different versions visually.

Computer Image

For the illustration of the computer with the different versions, I created a similar illustration to the one provided in the branding document, but I modified it to follow the style that was used for the main (and subsequent) images.