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

SSRD_sketch.png

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.

ssrd icons.png
 

Now that I’d chosen a direction, I created a central illustration to highlight the main services the company provides:

ssrd main graphic.png

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.

ssrd font.png

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.

SSRD_colours.png

Hi-fi Wireframe

Once I got the final content I created a high-fidelity interactive prototype for web and mobile view in Adobe XD.

Landing Page - Web.png
 
Landing Page - Mobile.png