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


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

    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)

    This looks really good. Nice work!

    It's amazing what some attention to detail can do for the UI. :)
    November 3, 2009 | Unregistered CommenterJeff Teschke
    You rock, mister!
    November 3, 2009 | Unregistered CommenterKrystyn

    First congrats and great work! Did those six icons (in the 4th picture from left of all the iPhones) not make it into the final version of the app? I don't see them when I use it. It looks like they would have been used to just add a picture, link, or audio.
    November 3, 2009 | Unregistered CommenterRob Ungar
    Awesome post. You might want to correct the spelling of the @squarespace twitter account at the end.
    November 4, 2009 | Unregistered Commenter@ledlow
    Thanks everyone!

    @Rob Ungar: It will be a new future features... no more words ;)

    @ledlow: Oh! Thanks man, I did it!
    November 4, 2009 | Registered CommenterTeddy
    Great job! Downloading it right now, and can't wait to plug it to my clients!
    November 4, 2009 | Unregistered CommenterStephen Bates
    Awesome! Can't wait, thanks!
    November 4, 2009 | Unregistered CommenterRob Ungar
    Your spelling of @squarespace at the very end of the post is still incorrect. You left out the "s" in space. Just a heads-up since you stated you had corrected it.
    November 6, 2009 | Unregistered CommenterPaul

    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):
    All HTML will be escaped. Hyperlinks will be created for URLs automatically.