Published
October 12, 2019
Category
Design \ Prototyping
client
Ulties

CASE STUDY

BRAVE FILE MANAGER

Engagement

Prototyping

Design Development

Logo Development

 

SERVICES

  • Branding
  • Logo Design
  • Dashboard Design
  • CRM Development

DELIVERABLES

  • 10+ Pages
  • 10+ Modules
  • Styleguide

OTHER

  • UX Research
  • UX Psychology Development
  • General Competition Research
  • Identity and Brand Research

01. About the Project

B

Brave file manager is a simple design prototype that we made for ourselves with no specific purpose of monetary gains. Its a design resource that will probably be freely redistributed in the future if it doesn’t fit any of our future projects.

The general premise of the design project was to create a  file manager template that would encompass multiple service integrations “Cloud Storage Providers” into one easy to use and manage application.

02. Design

The general design language of Brave was made to provide a soft, yet solid foundational feel. It was supposed to embody solidity and security within the visual representation.

The design we went with is an unorthodox dashboard layout design, which in long term view provides an easy Desktop app integration to the general service. That was one of the main key points we focused on and that’s why we didn’t chose a full width page design like most other services out there.

The branding and logo are actually temporary fixes and the brand identity wasn’t really fully developed, we left that after the project launch. In most cases we develop the general layout design based o the identity fundamentals, but on this specific project we decided to switch the model and do things in reverse. So the B letter logo is actually a concept that was made up within a day of work.
Content wise we made research on other similar services and generated a list of pros and cons that had to be covered.

 

Color Choices

#FFFFF

#F6F8FB

#242437

#1F1E2C

#33E1EC

SUPER CLEAN

Dashboard Design

We chose to go with a dashboard layout, rather than a full width web layout for this project, mainly due to the ability to transfer the general design language to a Desktop app in the future. The overall result was way better than we ever expected.

CREATIVE

General Design Language

The design language of the project had to follow some general rules of thumb. First one being that it had to embody the morals of the service itself. Them being security speed and reliability.

Therefore, we chose to use a White and light blue foundation background, and dark blue to near gray accents highlights and menus.

 

NAVIGATION

A Small and Powerful Menu System

The navigation layout design and system was one of the most fun things for me to design. I had to create something that was compact. packed a lot of functions and was really intuitive and smart.

The general menu itself is super lightweight and thin, but has expanding floats and a secondary contracting menu that is relative to specific pages, it being a simplified file manager. It is relative because it doesn’t appear on all pages and it is compact because it has a few less functions than the full page file explorer which takes up a 75/80VH page section.

We decided to ditch the hide and show button, and making the menu system automated, hence, the secondary menu automatically showing on relative pages and hiding on non relative pages. This way we ensured an easier layout for the development team and also a more fixed experience to the general user.

There is also 1 more additional side menu on the right, which is specific for global notifications and other notification related content.

CREATIVE DESIGN

Modular Design

Along with the full page settings, account manager and content manager, we decided to also add pop-up modules for some functions, like the example on the right which is relative to the linked accounts tiles on the main page. It shows some features that are relative to the linked account, but it doesn’t showcase the general account management functions which could be found in the general account management section. We did this for ease of use

FONT CHOICE

Typography Choice

Font wise, we chose to go with something really main stream, that being the Poppins, which is a geometric sans serif font.

Geometric sans serif typefaces have been a popular design tool ever since these actors took to the world’s stage. Poppins is one of the new comers to this long tradition. With support for the Devanagari and Latin writing systems, it is an internationalist take on the genre.