Chillance has picked a winning widget and apps (uncoded) design

For $300 they received 51 design concepts from 8 designers!

  • Award 1
    File manager concept full view by DarkFox2236

Over 40,000 of the world's best entrepreneurs and small businesses trust crowdSPRING with custom logo design, web design and writing services. 96% of them recommend that you try us too.

Find out more
Dates

Starts:15-Aug-13 11:54 p.m. GMT

Ends:7-Sep-13 11:59 p.m. GMT

Awards

Award 1: $300, was awarded to DarkFox...

Formats

Vector EPS, Layered PSD, PNG

Contract

Preview: crowdSPRING Contract

Materials

File 1: screenshot_5.png (261.7 KB)

Uploaded on 24-Aug-13 8:54 a.m. GMT

Creative brief

The buyer added updates to the brief. Read them.

Business Name

Fileify

What do you do?

So, I'm working on a concept, where the idea is that folders/directories are rectangles, and files are circles. Circles size represent the file's size. I've let someone code up this using d3js which will show the gist of it:

http://ec2-54-246-129-115.eu-west-1.compute.ama...

And, as you can see we basically have two areas of the same location (orange header currently shows the location, so there are 2 of them there). Think of them as two different explorer windows. You are able to drag and drop the circles, to move the "file" to a different "folder". You can also click inside the grey area to zoom into it, and click on the top orange header to go back. The white area shows the files in the current folder (what is shown in the orange header), while the others shows inside that folder.

Please go to the URL and test around so you get a better understanding of it.

So, this is what I want redesigned to look great and make more sense.

For instance, it might not be obvious that the circles inside the grey boxes are files inside those folders, while the circles in the white are are files in the current folder mentioned in the orange header.

It's also not obvious that you can click in the area to go to that folder. It's also not obvious that you can click the orange header to go back up a folder.

If you hoover over a circle (file), you can see the filename and filesize. This can surely be made to look better. Or, to be shown some other way.

The circle turns red when moved, and it will stay red if an error occurred. It will fade back to green if all went well.

There should also be a way to show folders that are empty. Currently you can get them by double clicking but it's hard to do. Should be some other way.


Next thing (page) I would like designed has to to do with what I call "references". It's nothing new. What this is about is a neat way of showing relations between files. Such as if a file is for instance
"Newer than/older than", "Group of/Part of", "Similar to", "Parent of/Child of", "Dependent on/Required by" some other file.


Here might be something of inspiration:

http://www.findtheconversation.com/concept-map/# - I like this, because of the neat interactivity.
http://bl.ocks.org/mbostock/4062045

It's a rather simple concept, but I was hoping for some neat inspiring designs for this. Basically something that describes the relation, and then showing somehow what is in that relation. It should be clear what is what.

So, a design such as:
[Newer than]

might be confusing, as it's not clear which direction it is. Is it file1 or file2 that is newer than the other?


I can also add that I want a design for this to make it more fun working with files this way. :)


Do you have a desired widget or app screen size?

Well, look at the site. Size like that is what I'm going for. Maybe slight smaller. Also not that there are 2 of the same thing, as one can navigate in both and drop and drop between them. This applies to the other concept as well, but the size should then be like one of those on that site.

How many pages do you need designed?

2

What is your industry?

Internet

Describe the target audience for your widget or app

Novice to pro user I suppose. Most important is that the design makes sense and feels intuitive. Especially since it will most likely be interactive.

What are 3 things would you like to communicate to your audience through your widget or app design?

intuitive, easy to use, beatiful looking

What widget or app design styles do you like?

Simplistic, possible futuristic. Some subtle shading would be nice too maybe. Nice and clean. Feel free to add some way of showing your idea for suitable animations as well.

What colors do you want to see in your widget or app design?

Harmonic?

What colors do you NOT want to see in your widget or app design?

Colors that collide I suppose. Or something harsh I want to be avoided, although it would be fine to use many colors for grouping files for instance, as there are many different types of files.

What adjectives should best describe your widget or app design?

fun, easy,

What content must be included in the widget or app design?

Rectangles and circles as shown must be in the design as the code is made to adapt the circles inside the rectangles! That is, for a certain sized rectangle, the algorithm will adapt and scale the circle sizes inside. There also needs to be some way to navigate into the folder and back "up" from a folder. Currently one clicks inside the grey area where there is no circle to "enter" that folder. There also needs a way to show current location and a way to navigate back. Currently the orange header is used for both. Also note that the white area with circles indicates files in that folder (shown in the orange header).

One basic idea I had here was that for instance group the circles using the same color based on file extension for example.

Do you have additional requirements or links you'd like to share?

I would really love a design that makes this more intuitive and makes sense for a users that first arrives to this. I'm kinda blinded by it as I'm used to it, so new fresh eyes on this that can make a design that makes sense will be very appreciated. The second concept isn't really new, but that is exactly why I included it here, trying to get a new fresh design for it.

Brief updates

16-Aug-13 12:02 a.m. GMT
Also, about the "page 2" thing, note that there can be one-to-many (not only file to file, but file to files) relations as well, and the design needs to be able to handle that.
22-Aug-13 2:02 a.m. GMT
No entries yet, so extending time.
24-Aug-13 8:54 a.m. GMT
The buyer has uploaded a new file in this project. You can download that file in the DETAILS tab.
31-Aug-13 3:42 p.m. GMT
Some more examples for "Page 2", just to clarify what I'm talking about:

http://www.ukoln.ac.uk/metadata/cld/entity-rela...
http://www.databasedesign.co.uk/bookdatabasesaf...
http://en.wikipedia.org/wiki/File:ER_Diagram_MM...
31-Aug-13 5:01 p.m. GMT
Crap, I noticed that the URL is down. I messaged the guy behind it, so hopefully he will make it available asap!
31-Aug-13 5:52 p.m. GMT
http://ec2-54-246-129-115.eu-west-1.compute.ama... is online again folks!