![color_3840x2160.png](https://ipfs.busy.org/ipfs/QmYQxhcaYL1LmfoyMXLMcvtMHHWTxz7nb2hD6K56GBe253)

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

# Details:
[Nuage](https://github.com/mickael-kerjean/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.

![image.png](https://ipfs.busy.org/ipfs/QmTxpqshutLr5QVacYQBDSbtoAJJiq7P8JwMMQt7qZrB4P)
#
> ***Making the cloud***
#
Next up I made the folder. I experimented with various methods of combining a cloud and a folder together:

![image.png](https://ipfs.busy.org/ipfs/QmTBZ4Bc4vq32fWbZB4DNyshJrjsrSbhUQGDeyksxv26zW)
#
> ***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;

![g6253.png](https://ipfs.busy.org/ipfs/QmZeB8ir5GRwRBM9Q2UBEf9Wzku13rdASy3sKkeLEcB7Ht)

### Subtle Variations:
I experimented with slight variations of the main logo:

![flowRoot4717.png](https://ipfs.busy.org/ipfs/QmRLuzRo4BkKHAvMGFmb3SAGbK6gjwmEhcBRAy7isHHu58)

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.

![text6401-2.png](https://ipfs.busy.org/ipfs/QmbenmUoqmNy9K8c9B34ns4jWVa8kEaiy37MeeugKXcSNQ)

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

![text641-2.png](https://ipfs.busy.org/ipfs/QmbDpYi7yEFyN23qB2aDCv5HAcctGSoDoHqjxj1GJVrVoQ)

# Mockups:
#
![color_3840x2160.png](https://ipfs.busy.org/ipfs/QmYQxhcaYL1LmfoyMXLMcvtMHHWTxz7nb2hD6K56GBe253)

![blk_3840x2160_wht-bg.png](https://ipfs.busy.org/ipfs/QmTjBv2bVqPKKCv1ZWUMHxAzqhxR3tXne8pfGDRFpAoZei)

![wht_3840x2160_blk-bg.png](https://ipfs.busy.org/ipfs/QmNjrMbwgXZhPqEmFzGthhWJS2Fwj8gsjLMnBtEmJJc9HM)

# 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](https://inkscape.org/en/)
- Dtube Video: https://d.tube/#!/v/arkhamknight/8aupx1jv
#
#### This work is licensed under CC0:
<p xmlns:dct="http://purl.org/dc/terms/">
  <a rel="license"
     href="http://creativecommons.org/publicdomain/zero/1.0/">
    <img src="http://i.creativecommons.org/p/zero/1.0/88x31.png" style="border-style: none;" alt="CC0" />
  </a>
  <br />
  To the extent possible under law,
  <a rel="dct:publisher"
     href="steemit.com/@arkhamknight">
    <span property="dct:title">ssnjrthegr8</span></a>
  has waived all copyright and related or neighboring rights to
  <span property="dct:title">Logo for Nuage</span>.
</p>