Viber, Line and Skype redesigns for iOS 7

A quick look at the future of new app interfaces

After the good response of the post on Dribbble designers mocking up a new WhatsApp interface for iOS 7 I thought I could just carry on with other popular messengers. Part of the appeal of the WhatsApp designs has to do not only with the app's popularity but also on how atrocious it feels on a current iPhone running iOS 6 already.

For a second post I thought I would pick competing messengers such as Viber and Line as well as adding Skype to the mix. Not that their design is fantastic but at least is way more palatable than WhatsApp. Any of them have updated the UI over the years to keep it a little bit more native to iOS.

Katarína Štefániková on Dribbble

Katarína Štefániková on Dribbble

The first on the list is Katarína Štefániková, who has chosen to mimic the style of iOS 7's lock screen on the login for the Skype app. What you get here is a blurred background that could use some slight parallax animation with some simple interface elements with white. The boxes to type your username and password seem to have rounded corners like buttons but they work fine. The thin border on the 'create new account' button seems borrowed from navigation tabs, which is nice on that setting. To complete the screen, Skype's logo is on white, leaving the blurred background to convey some of the colour.

Martijn Otter on Dribbble

Martijn Otter on Dribbble

Less keen on transparencies is Martijn Otter with a redesign for the iPhone Skype app. He has chosen to use the company's corporate blue for the navigation top bar instead of the default translucent one that iOS 7 favours. I like the solid colour here as it makes the app recognisable without any branding. Apart from the font choice, which appears to be a semi bold Proxima Nova instead of the thin Helvetica variant, the bottom bar uses a dark tray shade instead of translucent white. This gives a better contrast than having the thin icons on grey on top of a frosted glass texture and you will see is something other designers have chosen.

Tomohiro Suzuki on Dribbble

Tomohiro Suzuki on Dribbble

Moving on to Naver's Line, Tomohiro Suzuki also favours the use of flat colours on top and tab bars across his concept for Line's app on iOS 7. He has also gone for Line's recognisable lime colour and a shade of graphite, possibly to be consistent with the colour palette on the actual app. Rather than using tints to highlight buttons, he prefers to change the colour completely on the bottom bar to indicate a which button is active. Other parts of the app basically adapt the iconography and gradients of iOS 7 keeping the familiar layout you already know.

Keith One on Dribbble

Keith One on Dribbble

Keith One goes for a more aggressive approach on his quick update of the Line app to the iPhone's new operating system. The top navigation bar mixes a gradient and transparency, which combined with the black text and iconography, feels quite clashing. The effort to be a little original hasn't really paid off and reveals some legibility issues for not choosing white text over black so it could have better contrast on the green gradient.

Theo Mesnil on Dribbble

Theo Mesnil on Dribbble

Now with Viber, Theo Mesnil wants to go full purple with his redesign. The shade chosen is bluer than purple but I like the concept anyway. Again, this has a solid colour on top, text and icon accents in white for contrast, using rounded avatars on the Messages view that feel a little too big. It's a shame this mockup doesn't show the active state on the bottom bar, which uses solid colour and white.

Erdal Bejtula on Dribbble

Erdal Bejtula on Dribbble

A similar idea is used by Erdal Bejtula who has chosen the more traditional purple colour on his Viber design. The mockup doesn't make very clear whether the navigation bar is translucent or not but we can see it combines white and text with darker tones of purple for contrast. The bottom bar has the same dark style on white keeping very small text on Proxima Nova too.