Designing the AccelaStudy iPhone application website

The Renkara Media Group contacted me to create a website for their AccelaStudy iPhone language learning application. I was pretty excited by the opportunity and after playing around with the application a bit jumped right into it.

Renkara wanted to imitate the slide-to-use functionality of the application on the website, so I kept that in mind when working on the design (we decided to use the Coda Slider Effect from JQuery for Designers – it was really easy to implement and customize to suit our needs).

At first we decided to go with a dark background and display the highlighted features using icons. As always, the Icon Drawer Classic Icons came in really handy as their Mac-like look and feel really suited the site. I also decided to use Lucida Sans for the body copy and Myriad Pro for most of the headings to further emulate the Apple look.

I again used a 940px wide grid with twleve 60px wide columns and eleven 20px wide gutters. I felt that this unpolished first iteration was a little unbalanced so I changed things up a bit.

Moving the logo to over the phone really helped to balance it out. And the right and left edges of the logo also curved down a bit to follow the curve at the top right and top left corners of the phone. I also added a texture to the background and used a very large soft round brush to further highlight the area behind the logo.

At this stage the decision was made to use a white background instead of the darker one, and to reinstate the entire iPhone instead of cutting it off at the bottom.

I also decided to move the Current Languages into the middle column with center aligned text to match the centered iPhone. I used a light gray colour for the heading of that column because I felt it was already attracting enough attention with the use of the icons for the languages and there would be too many competing contrasts in that area if I used black like the other columns.

I left the main navigation for last because I had to be very careful of having too much contrast in that area as it would compete with the iPhone – we needed the phone and its slider functionality to be the center of attention. I decided to go with something really simple and it worked well with the rest of the site.

I added a separator below the iPhone with a slightly thicker bar above the Current Languages to add emphasis and link it more closely with the iPhone. In this final iteration we also decided to switch the colours around and make the tabs blue and the additional area green for two reasons:

1. The iPhone icon for AccelaStudy had a blue sky and green lawn, so we thought it would be better to keep the same order of colours on the site.
2. The default and most common colour of links on sites is blue, so giving the clickable tabs a blue background would help to indicate their functionality.

We also decided to have the entire tabbed area run underneath the phone so we made each tab less wide. The grid was flexible enough to allow us to implement these changes easily.

I wrapped up the footer area by having a very subtle green-into-white gradient along with some additional navigation items. You can have a look at the live site where you can see the slider effect in action (site design has since been changed). It was a very fun project to work on! If you need any help with a similar project feel free to contact me.