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