SAAS Website Design

FileShare

Web Design Concept

A mockup image of each screen on the website
A graphic of an angle bracket to represent web design and coding

The Overview

Here's what we're working with

FileShare is a file hosting service that allows users to backup, store, and share their files using a cloud-based approach. The target market for this particular service are users that are accumulating larger than average quantities of files, and small business owners.

The Mission

To established a clear brand identity to convince the user of the effectiveness of the product, and keep users engaged while browsing the website by creating a seamless interface.

The Ideas from my Brain

Sketching sketches

The layout was, the most important aspect of the website. I started sketching out each of the four pages with an open feel; just to give the content some breathing room since SAAS websites tend to be very content heavy.

An image of the sketches for the SAAS website

Since I had to establish a brand from the ground up, I wanted aspects of the brand's logo to be incorporated in elements throughtout the website. This is illustrated in the website's iconography and image treatments.

An image of the logo for the website

I illustrated the icons to be straight forward, yet intriguing to look at. Each icon has a design in the background that is brought over from brand's logo. This was done to unify elements all throughout the website, while also helping the brand become more identifiable.

An image of the icons made for the website

The Process

Colour Palette

Swatches An image of the swatches used in the design

In order to establish a clear brand identity, one bold and distinct colour was chosen to be worked throughout the website while being grounded by various muted greys. Its treatment on buttons, icons, borders, and the logo make the website more identifiable and memorable to the user as they browse throughout.

Typography

Typography An image of the typefaces used in the design

NanumGothic is used for the headings, and is paired well with Open Sans for the body copy. These fonts read well on all screen sizes and work well with the website's professional tone.

The Outcome

Here's what the finished product looks like

The final result of the website is a clean and unique design. Each piece is carefully thought out in terms of how it's identified as a brand. I wanted this design to not only mirror a well-planned SAAS website, but also create a brand identity out of nothing.

An image of multiple screens of the website displayed on a mockup
An image of multiple screens of the website displayed on a mockup
An image of multiple screens of the website displayed on a mockup