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:

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:

Proof/s:

The assets that I gave the PO are added to the project: https://github.com/mickael-kerjean/nuage/tree/master/.assets and they are used by the project's web app currently.

Links:

• Repo Link: https://github.com/mickael-kerjean/nuage
• Original Files: https://drive.google.com/open?id=1qt9HvLEDCy8e2EwLkTyWfgfpgTVKYFZX
• Font Link - Nexa: https://www.fontfabric.com/nexa-free-font/
• Github issue: https://github.com/mickael-kerjean/nuage/issues/70
• Applications Used: Inkscape v92.3
• Dtube Video:

This work is licensed under CC0:

To the extent possible under law, ssnjrthegr8 has waived all copyright and related or neighboring rights to Logo for Nuage.