Mfthing.com
This is my old website, to see my most updated work, check out my new website where I share stories and work: www.mfthing.com


Archivies
Inspiration

    tips
    Little Store
    Purchase vector assets
    twit
    Web
    « Recreation: I'll get well, don't be worried! | Main | Macedonia #13 »
    Tuesday
    Nov032009

    Squarespace iPhone app UI

    The past few months have been very exciting here at Squarespace, as we've been working hard on the UI design for the iPhone app. And now it's finally arrived

    The app allows Squarespace customers to control all the contents of their website right from their iPhone. 

    From the beginning, our focus was to maintain consistency with the established graphic style of Squarespace, without straying too far from Apple standards. While the app is not very complex in terms of navigation, we thoughtfully designed the flow map and every single screen with usability needs in mind.

    The design of the icons was probably the most challenging part of the project. Particularly in cases where I needed to execute a complete redesign of existing icons. It was our hope that the icons would all display the good form and balance required to correctly view and interact with them.

    In the end, it truly was very exciting to create new icons for the iPhone -- an interface that, though it is a bit stiff with its guidelines -- offers a lot to designers by giving them them the freedom to create new tools and new ways of looking at things.

    The interface adheres to Apple's design guidelines, and each graphic element has been customized in color, style, size and status. There are some interesting advanced interactions, which have all been created and designed from scratch (i.e. the posts option and Stats screens).

    The interface has been designed entirely with Fireworks, which I found had excellent resources for UI designers, such as their: iPhone GUI PSD 3.0, Fireworks toolkit for iPhone UI mockups, and iPhone UI Vector Elements.
    All the individual icons were created in Adobe Illustrator.

    I also used an application which I love so much: LiveView by IDEO, which is a little app that helps designers to test pixel-perfect prototypes on their iPhones. It's amazing!

    I would like to thank our developer, Chris Cox, who really breathed life into this interface. And, of course, all of the Squarespace guys and beta testers, who all helped so much during the course of this project.

    After a long approval process with Apple, the app has finally arrived!

    So, if you are a Squarespace user (or just simply curious), check the new iPhone app in the App Store!

    For more screenshots, take a look at my portfolio and Squarespace website.
    Stay tuned and follow @myfavoritething (me) and @squarespace on Twitter.




    Reader Comments (12)

    Rock On Bro! This app looks stunning ;)
    November 7, 2009 | Unregistered CommenterStephan Wetzl
    Signed up for a Squarespace account after playing about with the app. Know it's the wrong way round, but it's just how I roll, I guess

    Beautiful app, beautiful site ... a winning combination!!

    ... if only I could something to blog about ;)
    December 4, 2009 | Unregistered CommenterYaelD
    Awesome work.I find it cool and very interesting as well.
    February 17, 2010 | Unregistered Commenter2012 Iphone Icons
    cool article
    February 23, 2011 | Unregistered Commenterskalotskiy

    PostPost a New Comment

    Enter your information below to add a new comment.

    My response is on my own website »
    Author Email (optional):
    Author URL (optional):
    Post:
     
    All HTML will be escaped. Hyperlinks will be created for URLs automatically.