Sitediff
Sitediff
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.