Logo Design for Nuage [Contribution] [Graphics]

in #utopian-io6 years ago

color_3840x2160.png

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.

image.png

Making the cloud

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

image.png

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;

g6253.png

Subtle Variations:

I experimented with slight variations of the main logo:

flowRoot4717.png

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

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

text641-2.png

Mockups:

color_3840x2160.png

blk_3840x2160_wht-bg.png

wht_3840x2160_blk-bg.png

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:

This work is licensed under CC0:

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

Sort:  
Loading...

Congratulations @arkhamknight! You received a personal award!

Happy Birthday! - You are on the Steem blockchain for 2 years!

You can view your badges on your Steem Board and compare to others on the Steem Ranking

Do not miss the last post from @steemitboard:

SteemitBoard Ranking update - A better rich list comparator
Vote for @Steemitboard as a witness to get one more award and increased upvotes!

@arkhamknight, go and place your daily vote for Steem on netcoins! http://contest.gonetcoins.com/

Hi @arkhamknight!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server

Congratulations @arkhamknight! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

Award for the number of upvotes received

Click here to view your Board of Honor
If you no longer want to receive notifications, reply to this comment with the word STOP

Do not miss the last post from @steemitboard:

SteemitBoard Ranking update - Resteem and Resteemed added

Support SteemitBoard's project! Vote for its witness and get one more award!

Hey, @arkhamknight!

Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

Congratulations @arkhamknight! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

You made more than 4000 upvotes. Your next target is to reach 5000 upvotes.

Click here to view your Board of Honor
If you no longer want to receive notifications, reply to this comment with the word STOP

Do not miss the last post from @steemitboard:

Saint Nicholas challenge for good boys and girls

Support SteemitBoard's project! Vote for its witness and get one more award!

Congratulations @arkhamknight! You received a personal award!

Happy Birthday! - You are on the Steem blockchain for 1 year!

Click here to view your Board

Support SteemitBoard's project! Vote for its witness and get one more award!