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:
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/conce... - I like this, because of the neat interactivity.
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:
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?
What is your industry?
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
Style and Concept
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?
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?
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.
No Files Added