Designing HelvetiNote

 Todd Berger of cypherB reveals the secrets of the studio's latest iPad offering - a note-taking app for designers with a penchant for that classic Swiss font, Helvetica

01 - cypher13 calfed on the skills of Rage Digital to develop the cypher l 3 HelvetiNote design.

We all take notes somewhere or somehow, and the iPad is the perfect device to collect our thoughts and organise those notes. But for those of us fond of type, averse to the font Marker Felt (used in Apple's own Notes app) and seeking a refined note-taking experience, the apps available leave something to be desired,

HelvetiNote was designed to fill a void and to offer everyone - type enthusiasts and designers in particular - a purist and more enjoyable means of collecting our thoughts.

We searched tirelessly on the App Store for an alternative to Apple's default app. Notes, but we couldn't find anything as simple and refined. So we decided to design our own app, and pitched it to ourfriends at Rage Digital (www.ragedigi.corn) as a potential collaboration.

Design and development

Most of our internal projects move from concept to identity quite rapidly. We performed an initial needs assessment, which all started with an inherent desire within our own studio. From there it took roughly two weeks to develop and refine the concept, design the identity and outline the core functionality. We created
a grid and user interface, developed and integrated various brand assets, and then considered and mapped out all of the interaction design.

The next part of the process was to hand over the design assets to Rage Digital to develop the fully functional HelvetiNote app.This took them around three weeks, and after lots of testing and debugging we finally submitted it to the App Store. From concept to release, the whole process took exactly 44 days.

Adapting to the platform

Designing for the touch-screen experience certainly threw up some hurdles. For starters, the tactile region that the finger uses to interact with the IPad is much larger than a cursor driven by mouse movement, so the padding and size of the individual Ul elements needed close consideration.

Designing for both portrait and landscape views whilst maintaining a consistent look, feel and functionality across both of them also proved to be a big challenge. Fortunately, our Ul design grid aided in this dual view process. We used the same number of columns across each view, and for the landscape.

 02-Designing for the iPad's large touch screen threw up one of the major challenges for cypher 13. The team  played particularly close attention to the size of HelvetiNote's various Ul elements

 03-To tackle the difficulties of designing for both landscape and portrait views, cypher! 3 used the same number of columns across each view, just widening the columns for the landscape view

 04-The built "n Themes panel enables HelvetiNote users to select from four themes, or customise their own

Interface analysis: The appeal of HelvetiNote 

1 Stripped-back interface

Intentionally iimited In functionality, the HelvetiNote app has just a few core features in its first release - with more to come.

2  That much-loved Swiss font

As the name implies, all notes taken within He'vetiNote are set in Helvetica.'the font suited the very utilitarian function of note-taking perfectly: "Being designers with a kive of type, we frequently rely on Helvetica for its inherent aesthetics, legibility and overall function'exola ins lodd Berger.


 3 Drawing arid erasingTaking full advantage of the iPad's touch screen, HelvetiNote incorporates simple drawing and erasing tools so that users can supplement words with simple visual sketches where required. All of this is Intended to make the HelvetiNote user experience more simiiar to the analog note-taking process of using good cid-fashioned pen and paper.

4 Seamless email integration

Note-taking is often a collaborative process, particulaiV In a studio environment when planning a project. Accordingly, KeivetiMote doesn't exist ih a vacuum. Both typed and hand-drawn notes are optimised for email as standard, to enable simple sharing of ideas between colleagues and collaborators.


 5 Intuitive navigation

It may be minimal, but HelvetiNote's  navigation hierarchy makes full use of the iPad's screen, whether In portrait or landscape. Notes are organised through a collapsible Notes Panel and padding, Type size, button size and the underlying baseline grid were ail carefully considered. "We designed the initial iteration of HelvetiNote in roughly six hours,  Berger reveals.

6 Customised colour palette.

The user interface is also easily Tweaked using the Themes Panel, with four built-in themes and the facility to create your own to suit your tastes "Our favourite feature, while the least utilitarian, s the level of customisation,"admits Berger."We wanted to cater to individual users' color preferences"

05-Testing took place in-house at cypher 13 and Rage Digital, the teams at which are notorious note-takers! Bugs were identified and removed within a fortnight

++++++++++++++++++++++++++++++++++++++++++++++++

About cypher 13 : 

Todd Berger, Alex Henry and Lucian Foehr founded cypher 1 3 in Bounder, Colorado in 2005 with a simple mission: to improve the human experience. "We choose clients carefully, like curating an exhibition; explains Berger.That handpicked list currently includes Intel, Herman Miller,,Adidas, Ford and Yahoo!

HelvetiNote is the studio's first iPad apps and while others are on the slate, this irvvogue field isn't set io dominate its workflow any time soon,"As our studio has evolved, it has focused on expert-only collaboration," Berger continues.In the case of HelvetiNote we consider ourselves the design experts, and Rage Digital the development experts. We have no desire to practice both design and development in house."

www.cypherl3.com