Community post

Logo Design for Nuage [Contribution] [Graphics]

Repository: https://github.com/mickael-kerjean/nuage

Details:

Nuage is a a web client for FTP, SFTP, Git etc. It's a nice web app for managing files. As I checked out this project I realized that it lacked a proper logo. I don't actually remember the original logo now. I believe it was just a folder. Anyways I thought I could do better than that and asked the project owner permission to do so. He/she told me to give it a shot and this was the end result. The conversation:
https://github.com/mickael-kerjean/nuage/issues/70

The Concept:

The word "Nuage" means "cloud" in French. Which explains the cloud in my design. I seamlessly combined this cloud with a folder, a symbol used extensively to represent file managers, representing that Nuage is a "Cloud File Manager" which would be an oversimplified explanation of what Nuage is.

Benefits:

The project now has a unique logo to distinguish it by.
Improves the overall visual identity of the project.
Improves the legibility of the project.
The project now has enough matching graphical assets to use across a wide range of platforms.

Design Process:

As usual I started making the logo in a vector application called Inkscape. I started with the cloud.

Making the cloud

Next up I made the folder. I experimented with various methods of combining a cloud and a folder together:

Different methods of combining a folder and a cloud

Video on making the iconic mark of the logo:

https://d.tube/#!/v/arkhamknight/8aupx1jv
As usual I polished up the logo and combined it with an appropriate font. I chose Nexa Bold as the font, since it went along so well in lowercase with the logo I made. I experimented with the wordmark a little and everything looked elegant when the wordmark is aligned horizontally with the iconic mark. Hence I decided to forgo a vertically aligned wordmark version of the logo.

Choosing Colors:

Choosing the colors was easy since the project owner said I had to use colors from the web app itself. He/she provided me with all the necessary hex codes:

--bg-color: #f2f2f2;
--color: #626469;
--emphasis: #375160;
--primary: #9AD1ED;
--emphasis-primary: #c5e2f1;
--secondary: #466372;
--emphasis-secondary: #466372;
--light: #909090;
--super-light: #f4f4f4;
--dark: #313538;

Subtle Variations:

I experimented with slight variations of the main logo:

Mainly played around with the colors the project owner gave me and I chose design viii as the final one since the PO did not reply what he/she wanted.

Icons:

I made app icons which can be used for iOS, Android and Windows applications. For the iOS version I made a simplified version with just the logo in a white background as iOS has certain restrictions on styling elements of app icons. For the Windows version I removed the shadows as they will be useless/invisible on PCs. For Android there is a version with bg shadow and no shadow.

I also made favicons. These have a thicker stroke to improve legibility at really small sizes:

Mockups: