SSRD
Designing a catchy webpage is just as important as its being informative and clean. This case study documents the process of designing the webpage for SSRD, a software development company based in Maribor, Slovenia. Their services include secure web and mobile application development, code revision, penetration testing, secure coding trainings, blockchain, etc.
Webpage:
https://ssrd.io/
The challenge
The Problem:
The task for this project was to design a webpage for a software development company that presents different services. The challenge was to create a unique, clean and minimalistic design that showed the services they provide. The webpage had to stand out from similar ones and be easily noticeable for their clients.
My role:
As a contractor I was working closely with the CEO and product lead to understand the business and their main vision. I was hired to design a new simple, clean and unique webpage.
Research
I started out on this project the classic old-fashioned way – sketching my ideas on paper. Working by hand can bring creative ideas to life quickly. My early iterations featured three main elements:
simple navigation bar.
short description about the company and easy access to contact them..
more detailed description of their services.
Whilst the user is navigating I kept the new logo, which I had previously designed, visible in the upper left corner of the page, without stealing their whole attention. I aimed to draw their attention more toward to the action points in order to reflect the three main goals: inform, contact and services
Design
Once I’d decided on the structure of the page, the next step was to draw the illustrations. I used the illustrations as components to help users understand the idea of the services the company provides.
Now that I’d chosen a direction, I created a central illustration to highlight the main services the company provides:
After presenting my client the illustrations and the concept for their company webpage, it was time to start designing the webpage. I finalised the style guide based on my sketches. Since I was designing for mobile first, I wanted to make sure the fonts were well readable by using a different style of Rubik font.
For the colour pallet I included two colours that would work well together and colours that would also contrast each other. I also included examples for the actions buttons.
Hi-fi Wireframe
Once I got the final content I created a high-fidelity interactive prototype for web and mobile view in Adobe XD.