Notespark
October 29 2010
Current Projects, Post

notespark primary

Notespark is a popular note-taking, sharing, and syncing app for iPhones, iPads, and the web. The brief: We have a good product but our mark is meh, please make it awesome.


The mark needed to convey notes and syncing. The existing Notespark brand (lockup, aesthetic) was open for reconsideration although there wasn't going to be a big investment in redoing the pre-sale web site. The existing brand wasn't particularly strong, but did distinguish from others in the market. The goal: create differentiation in a well-defined competitive space with a strong and unique mark that communicates function and character.

notespark primary
(Apple Notes, Notespark, Awesome Note, Penultimate, Evernote, Simplenote)


Concept work... this was my first iPlatform app, so naturally I wanted to see what we could get away with. How much can we bend the rules in the context of the iphone ui and its convention of little rounded-corner squares? One thing i wanted to do was create more form dimension and play with the boundaries of the icon grid - possibly create the illusion of depth or of breaking the periphery of the square.

notespark primary

"Notes a flutter" was an approach which would put a dramatic (jagged) form into the iPhone desktop.
However, given all the different contexts the mark would live in (textured dock, various desktops, different places in the iTunes store and websites), abandoning the icon background entirely was ruled out as probably a bad idea. The only real form decision left was whether to go the picture-on-a-tile route or to incorporate the full ground of the icon.


notespark primarynotespark primary


notespark primary


As far as visual metaphors go, the stack of notes seemed obvious though could be fairly unique if drawn nicely. Tweaking the common 'sync' arrow symbol just a bit created a strong graphic with a distinctive S counter-form. If the MetaSpark guys expand their product line, it's conceivable to imagine a system built around this S. Further nuances in the page rules and edges added texture and detail to bring the icon alive.


Notespark 2 is due to launch in November. Go to their blog for more info.


notespark primary

This was my first opportunity to really challenge Ai CS5's new pixel working mode. Similar to working in Fireworks, I was able to get sharp on-pixel geometry and carefully-tuned anti-aliasing tweeks (to keep the soft bits soft) across the individual icon sizes. Pixel mode is still a little buggy but promising; I ran into issues particularly switching in and out of the pixel-snapping mode, and some very frustrating oddball issues where Illustrator refused to let me make even-pixeled circles concentric or let vector points stay where I put them, regardless of working mode.


Apple proscribes some bizarre icon sizes, many frustratingly close but clearly different; 29, 50 trimmed to 48, 57 with rounds and 58 without, 75 & 175 scaled down from 512. You want us to shine that for you? Can we round your corners for you? Despite the detail, the developer guidelines still have some vagueness. Little things like the edges of the sheets in the stack proved challenging across the icon sizes; how much detail is just enough changes with scale so the marks aren't simply resized from one to the next.

Leave a comment

HELLO.
Notespark
October 29 2010
Works 2.0 nearly done
May 27 2010
Inu Not For Anyone
May 25 2010
CS5 Desktop Brand
April 28 2010
Silence Television
April 23 2010
Adobe.com Transformation
April 14 2010