ffont / freesound-explorer

Visual interface for exploring Freesound content and creating music in a 2-dimensional space
http://labs.freesound.org/fse/
MIT License
19 stars 3 forks source link

Propose Logo/Icon #67

Open mirzazulfan opened 6 years ago

mirzazulfan commented 6 years ago

Hi. I'm a graphic designer and an open source enthusiast. I would like to contribute to your awesome project by proposing a logo/icon design for it if you allow me. I'll be doing it as a gift for free to your awesome project. Best regard. Mirza Zulfan.

ffont commented 6 years ago

Hi @mirzazulfan , Thanks for opening the issue. That really sounds fantastic! How do you want to go about it? Maybe you can post proposal here and @giuband , @noVaSon and I (the 3 people that have been involved in the development) can provide some feedback?

This will help us close https://github.com/ffont/freesound-explorer/issues/16 :)

mirzazulfan commented 6 years ago

Hi @ffont .. thank you for your response. I'll do my best. If you have an idea please share with me, it would be better for me. :) ..i'll start my design. Thank you

ffont commented 6 years ago

Hi @mirzazulfan , I think we want something square-ish so that it can fit in a favicon and can be added in a corner of the screen without taking much space from the map. I don't really have any specific idea other than playing with the idea of the circles. Also I'd avoid showing the Freesound classic waveform as it has been used too many times in the past in other Freesound related projects. Thanks!

mirzazulfan commented 6 years ago

Hi @ffont .. I've designed a logo for your project... If you need something else, i'll make it. give me your feedback. Thanks fs

ffont commented 6 years ago

Thanks you @mirzazulfan ! I like more the idea in V.2. Maybe you could try to do the color gradient more inline with the current colors of Freesound Explorer maps so it somehow resembles the timbre space of the map? What do you think @giuband @noVaSon ? Also maybe you could try adding points instead of "bars" inside the diamond shape (to resemble the map)? Not sure if it would work well, but just to try...

giuband commented 6 years ago

I really like the direction of V.2. I agree with @ffont that using some of the elements that resemble our app would be even better: graphs, points, circles, spaces, sounds, edges, just to say out loud some ideas. Anything really connected to our space of sounds. Thank you very much for this @mirzazulfan!

noVaSon commented 6 years ago

Hi @mirzazulfan!

Thank you for your contribution to our project! It is just amazing, that you come around with this gift :)

I like the typography used in V.1 - looks modern and simplistic, attributes I think we aim at for the freesound explorer experience :)

I also opt for version 2. I would also like to see a version with circles inside the diamond shape with colors closer to the ones seen in the original map view.

The circle in red and black from V01 reminds me too much of a spinning vinyl, what implies a classic media player image - and that’s what the freesound explorer is certaily not.

I most remarkable visual aspect of our app is the circle view and it’s corresponding coloring that often drifts towards green/yellow, sometimes more towards red, sometimes with a few blue circles. This strongly depends on the content of the sounds. Violet won’t often be seen as a circle color as the underlying analysis would have to be performed on a very weird and unnatural sound.

For choice of colours my suggestion would be to either find out which colours appear often in the map or to stick to a monochromatic icon. (black?)

Best Regards!! Eric

mirzazulfan commented 6 years ago

Thanks for all the responses. :+1: ... how about this? fs- Thank you.. @ffont @giuband @noVaSon

giuband commented 6 years ago

I like very much the last three concepts! Especially the second to last, that looks good and recognizable also when small. 👍

ffont commented 6 years ago

I think the last one is a bit too crowded inside the diamond shape, maybe I like more the second to last (number 6). Regarding the colors I like more the idea of a single gradient than spans over all shapes (like in 3, 4 and 5). I'd try with the shape from number 6 and a gradient similar to that of number 4, but with colors that resemble more those in this screenshot:

freesound_explorer2
mirzazulfan commented 6 years ago

Thanks @ffont ,, like this? 3

ffont commented 6 years ago

yes, I think number 5 is the best!

mirzazulfan commented 6 years ago

What kind size do you need for the logo? Should i make a pull request and upload the files ? Thanks @ffont

ffont commented 6 years ago

lets wait a bit and see if the others have something to say. you could make a PR with folder called "logo" in the root of the repo. I don't know about the size, maybe you can add high-res and we can generate smaller sizes on demand. A vector version (without the gradient I guess) would be helpful as well. Also versions with and without the title (only the diamond shape). I propose the following:

mirzazulfan commented 6 years ago

Thanks. I'll make all the required files immediately.

giuband commented 6 years ago

Number 5 looks great :)

noVaSon commented 6 years ago

Hi @mirzazulfan!

You are pretty fast! I am on vacation right now, please excuse my occational delay :)

Guess we could make a monochrome version out of the vector graphic if ever needed...

I really like number 5 too! Very dynamic. Maybe we could try to make the mouse pointer look like our little explorer spaceship at some point ;) We should probably adjust our styling after this.

Well done!

@marzazulfan: btw - how did you find our project? Is there a search engine for websites without favicon finally? ^^

mirzazulfan commented 6 years ago

I uploaded the files and updated the readme file. You can get the other version in Gdrive Here's the pr #68 . Thank you @ffont @giuband @noVaSon .. Have a nice day. Best Regard.

mirzazulfan commented 6 years ago

Monochrome version already exists in gdrive. I found in github search. I think it's done with @ffont and @giuband. If you need anything change i'll fix it. with pleasure. Thanks @noVaSon

ffont commented 6 years ago

Thanks @mirzazulfan ! I merged the PR, the readme looks great, we have to add the icon in the app now :) Would it make sense to upload all contents of the gdrive folder in the logo/ folder so it is all in one place? I think I'd be good. Then in the readme you could add a section called "logo" where you can add recomended versions of the logo (with link to the file) and also credit yourself :)

mirzazulfan commented 6 years ago

Thank you @ffont .. i've added all editables files. :+1: Have a nice day. Best Regard.

ffont commented 6 years ago

Thank you very much @mirzazulfan! Any ideas for integrating the logo in the app? Some ideas I had:

@giuband @noVaSon

noVaSon commented 6 years ago

I'll have a try soon to check your ideas - just think the favicon is top triority right now. Do you know how to pass it to flask @ffont ?

ffont commented 6 years ago

To do the favicon thing right a number of files need to be generated (using this icon generator for example), placed in the repo and served under a specific path (some in the root some in a subfolder). You will probably need to configure flask so that it serves the files accordingly (see this example http://flask.pocoo.org/docs/1.0/patterns/favicon/, although this one is for the most simple version of favicons). Should be easy!