Redesigning SAVE symbol

Standard

After checking some updates on my phone I came through an interesting Twitter post which discussed about “Redesigning SAVE symbol” and when I clicked, it redirected me to one of the interesting branch on branch.com. Many people had already shared their ideas/thoughts which helped lot to make this subject interesting and convinced me to take some time to think on this interesting subject.

It is very much true that the age old floppy symbol to signify save icon is very much out dated. New techies are not too much familiar with floppy disks and their working. Time has come when we should try to design something interesting, something unique which stays there for very long.

I thought it is interesting challenge and accepted this very energetically even when I was checking the post on my bed that too on LAZY Sunday.

Many geeks of Experience Design put their thought forth which are really great and makes achieving this challenge interesting. When Andrew Crow of GE says “Let us do it” I said “Why not!”

Many had shared their designs and I would frankly say that those symbols which had been designed in circular shape resembles to that of reload symbol, data pre-loader symbol & refresh symbol.

I grabbed my grid book, pencil, eraser & sharpener and started to design. SAVE was echoing in my mind repeatedly and I came up with this design which is saved state of save symbol.

First Try

First Try

Second Try

Second Try

I created symbols for states

  • Saved State
  • Unsaved state
  • Auto save
  • Cloud save
  • Cloud unsaved

and respective wire-frames

Wireframe 3

Wireframe 3

Wire-frame 4

Wire-frame 4

Let me show you the mock-up which I created in Illustrator and symbols with respective description.

Illustration 1

Save symbol Illustration 1

And some changes in shield.

Save symbol Illustration 2

Save symbol Illustration 2

Best work has not been started — Best job has not been done 

The search of excellence never ends here, the struggle will continue and the future updates will be updated on this post accordingly.

About these ads

2 thoughts on “Redesigning SAVE symbol

  1. NIce.. .Everytime you have to design you should start thinking about the key that is SIZE… Can you try to see how these iCons will look in a 16×16 px?

    Designing iCons is a very challenging taks, and i feel the above concept are nice… but may not work well because of the outer sheild…..

  2. It took me a while to figure out where the visual difference between ‘saved’ and ‘unsaved’ was. I’m not at all the dotted box would be visible at 32×32 or smaller, on a toolbar.

    Instead of having saved + unsaved, wouldn’t the usual “enabled if save if needed and disabled if save not needed” work? The saved (so disabled) icon is faded/greyed, and the unsaved (so enabled) icon is coloured/ungreyed. Depends whether you’re designing it to work on a toolbar that would need to match the operating style of the other buttons, I guess…

    (I’m ignoring the obvious “why change it in the first place – even if it’s no longer linked to the original hardware [floppy disk], it’s ubiquitously understood as ‘Save'” question. :-))

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s