This is a part of a open letter to someone who wanted to know more about my process with the new save icon project. (http://twitpic.com/2ims19/full)
I'm more than glad to share my thoughts about this project. As it was extremely challenging to solve an issue that the majority of people i interacted with didn't recognize.
I have a kid brother who is part of the 2nd generation of people growing up with computers and internet. And when confronted with the old floppy disk symbol for save, he has no recognition of it's meaning.
Motivation behind creating the new save symbol.
Current floppy disk symbology is outdated. Physical storing is outdated. (even apple is now phasing out optical drives. And they where first with scrapping the floppy disk from their product line) in 15 more years people will completely forget why the symbol for save looks like it does. Symbols should not have an expiration date.
Requirements for the new symbol.
Should fit modern day use of save. Have to fit any device and application. Should represent the action of saving not the result as save could be tied to any kind of medium. (code, sound, video, picture .. )
about 1 year ago
I went thru many iterations of the icon could spend several hours just thinking about save and all the things associated with it. (had long commutes back in the days). Snapshot of my mind map i worked with to sort the associations. http://cl.ly/image/273K0Y1l0z0K
I excluded the physical storage fairly quickly in the design process. At the same time github started to explode among my co workers who worked with programing. And i liked their view of save which is just a state in a timeline of the codes existence and can be retrieved at any time. And this trend had just started to be noticeable among the mainstream with Apples application time machine where you can retrieve any file from any time from the backup.
Dictonary definition of save
"2 Computing an act of saving data to a storage location, usually the hard drive: the recovery feature enables you to retrieve most of the edits you made since the last save." I saw it as storage location is now unknown to the user i.e. Cloud computing. This view of save was not to any use for me when designing this concept.
That made me focus on a more technical view of save. Instead of thinking of common everyday associations of save which i fairly quickly noticed had many flaws in their concepts of save. As i was researching existing technical symbols i found power and escape. And escape is the opposite to save.
Escape, leave current state without saving.
I had found a opposite symbol and it was available and recognized as a global standard. I saw it as an obvious path to continue on.
An arrow and circle was the obvious elements for the symbol. Iterated it a few times and the design was set.
The circle is associated with a container of the data. And the arrow is indicating the process the movement of the data in to the container.
The two strokes is the timeline of the data. it has an begging and a end. This association with also worked with the escape symbol as it refers to leaving current state to a prior state. A visual guide to the design http://cl.ly/image/3X121X363i0G
Also the circle could be associated as a bookmark of the state in the timeline.
This concept works with all the desired requirements I had set up.
Download was a strong influential symbol to my process with save. Download is a downward pointing arrow. And it has many different executions but the most common way of represent download is an downward pointing arrow and that was the unofficial standard on the internet. As Download is strongly associated with save because its basically the same thing technically. Only the locations are different and I wanted to move away from location associations. Thats why I want it to remind of download but not be the same thing.
My programing coworkers approved of the new symbol and its concept, it had a place within the modern metaphors of save.
I was satisfied with the result and published it in a twitpic 2009. (http://twitpic.com/2ims19/full) Could have done some more noise and written the whole process like i have done here about it. But i just wanted to get some outside reactions without all the background information about the concept.
Save is not used like it used to. Many people pointed out that a new symbol is not needed. As the symbol for how save was used is dead or is going to phased out fairly soon. I accepted this fact and recognized that a save button will not be useful anymore as applications nowadays strives to be stateless. Like iOS Apps.
Now looking back after three years I feel the symbol is prefect and it could be used like the old save button as well as a visual indication of that the process of saving is active. Or for back up purposes to find a old save state to revert to. It is flexible and works with all kinds of uses of save and that the best part of the symbol.
On a side note when the project was finished. I started to think about auto save and if it would need a visual representation did not decide if it was needed as it's so closely associated with save.
Love challenging symbol design. It's really hard to do well and it takes time.
I would love to attack the problem of marking the sites where humankind will be storing nuclear waste for a long time. How do you communicate with people several thousand years in to the future? Is visual communication the best solution here? Should it be a symbol? Here In Sweden they are currently working with these issues.
Sorry for the wall of text if you have any input or questions I would love to hear them.
I might've stared at typography-based logos for too long in the past, but I can't help but see Y in this. Or perhaps it might be because of this particular logo.
Seriously though, while I appreciate the reasoning, what I think you are glancing over is the fact that there's always a Load/Open/Restore icon that pairs with the Save. Since it's a closely-related, but functionally reverse process, it would be natural to use the arrow in a reverse direction. But this however will conflict with the Escape icon, which is already just that, except it points at an angle.
Third comment I have is that a circle for a container is not the most obvious choice. Saving on a physical media is far from being outdated. I mean I just don't even know how to argue with this point, because it's just wrong. Over-abstracting concepts is a road to hell. Saving typically involves storing data on some sort of media and pretty much all conventional media is of a rectangular shape, most notably - the USB keys, disk drives. Also, even if we consider a more general concept of saving to "a computer", it will too involve a rectangle, and not a circle. Moreover, the circle implies rolling around and the instability, while a rectangle is something that stays put where you place it. So implicitly a rectangle makes for a better association for "saving" than a circle.
All in all, I think you got carried away here in a wrong direction. The floppy is dated, but this replacement could use few further tweaks and changes.
I should add that I'd rather see more posts like yours on Dribbble than another batch of "Keira Knightley is calling" mock-ups. Don't take my criticism too personal, it's just there's rarely an opportunity here on Dribbble to talk about concepts rather than pixels. I really appreciate the brain dump and it makes for an interesting read. Thanks for posting it, Maximilian.
@Alex Pankratov You have very good points but the one thing you loose with your argument is the common visual elements with escape. Would love to know the design decisions behind the escape symbol and if it resonates with my concept of save. I have several iterations with box shapes but they never made it further due to escape. And more posts like this. Design is not only what you can fit in 400x300 px.
I've been messing with computers professionally for over 20 years now, and the Escape symbol you described is something that I've never seen used commonly, leave alone consistently. In my opinion it's absolutely not a visual metaphor to use as an anchor for redesigning the Save icon.
by Alex Pankratov
This is in a reply to The New Save Icon shot by @Maximilian Larsson. See there for details.
I would do something like this.
The Load icon needs some work, but the Save I think is pretty neat and it looks usable as is. It basically shows something being put in a right place.
An obvious option for Load is to just flip the arrow in Save, but this won't work because both icons would differ in minute details and therefore would look the same at a glance.
The Escape/Reset/Reload icon is a bonus. As I said before I don't think it's that common of an icon, but it's pretty easy to piggy-back on an Undo metaphor and extend the Save/Load visuals. The shape of the Undo arrow can also be interpreted as back to back Load and Save actions, so this might be a bonus.
about 1 year ago
Great thread! Lots of good ideas here.
Here's another abstract icon concept for saving:
8 months ago
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter