iPhone application design and the righteous retina display App design is pretty new ground for us at Frontend, but damn we're loving it! Here's a few tips and useful resources we've picked up so far.


Application design is huge right now. Whether you're designing for the relatively mature iPhone market, slightly greener Android market, or adolescent tablet market theres a lot of fun to be had!

Our experience at Frontend with apps has been an exciting and challenging one. Web is our bread and butter, but those web things we're so good at don't necessarily translate to a good user experience on-device. The first place to start is here: the iPhone Human Interface Guidelines. There is a lot of usability material in here that comes in so handy at all stages of app design. When you are squeezing so much into such a small area, usability and user interaction define the line between a frustrating user experience and a brilliant one. These User Experience guidelines are especially valuable.

The iPhone's retina display displays a whopping 640 x 960 pixels. Thats wider than this blog column, but on a 3.5" screen. This really opens up a new level of detail for designers. every pixel difference you make may seem small, but combined they form such a sharp and polished interface you just can't get on a computer screen (yet...). Consider a texture that is usually too fine to be seen on a phone screen, this is a perfect example of there you can really push these tiny details to your hearts desire.

Tip 1 - Use Adobe Photoshop! We are big fans of Adobe Creative Suite here at Frontend. Illustrator is an invaluable tool, but when you want to form a pixel perfect, easily dissectible group of graphics without vector output being required - photoshop comes out on top.
- Apply all your styling through the styles panels, you will change things over and over again to get it exactly how you want it. Even colour objects using the 'color overlay' style. It will save you tons of time!
- Keep your layer structure organized! If you don't already, make the effort.
- Set up a nice boiler plate which you can iterate to add new views to your application design
- Save a selection of 640x960 pixels at the perfect place for screenshots (read below)!

Download the Retina Display version of this iphone mockup template Tip 2 - Use the excellent resources available to you - There are excellent resources available for designing on the iPhone. A prime example is the Teehan + Lax interface sheet. This contains a bunch of vector based standard iPhone elements for you to use during mock-up phases! This file provides you with actual size elements you can drop into your own file and rapidly prototype with. Just keep in mind that its only for Mock up purposes.

Tip 3 - Test your designs on the iPhone as plain images. It's so simple to see how your interface will look at its actual size and colour. Simply load up your 640x960 selection (mentioned earlier..) and copy a merged version of your design. Email this to yourself and opening it with your iphone. hit 'Save image' to save it. Go into your iPhone's photos section, open up the screenshot, tap on the screen to dismiss the top and bottom bars. Voila! perfect representation.

Be open to the challenge that app design brings. It brings with it bucket loads of strategy, thinking and innovation which can often be put on the backburner in web. We're looking forward to more!

That's all the tips we have time for this week folks, please tune in for a later post on app design. Any questions, comment below or flick us a message on the contact page

#happyweekend!

Kelly


Comments

Blog post headline image The success story that is Michael Hill Jeweller today began in 1979… and I was born in 1979! Ok, so that’s just a coincidence, but there are many factors that lead me to write this post today.


Michael Hill Jeweller is on my personal list of top five goal clients.
Why? I absolutely relate to his passion to achieve the goals he sets his mind to.

I purchased Michael Hill’s book, Toughen Up, when it came out in 2009. It really is an interesting read, his dedication and passion for his business and personal life is inspiring, and it’s encouraging to see a Kiwi not get taken down by the dreaded tall-poppy syndrome. He stands tall, and people respect him.

As a company, Michael Hill Jeweller is a “poster boy” for successful business. Whether large or small, it’s great to see a strong employee focus and betterment scheme in place in a company. Frontend also instill this philosophy, which makes an amazingly creative and productive environment to work in.

What do I think Frontend could do for Michael Hill Jeweller?
I think the MHJ site should be a reflection of their market-leading position – the site needs to be at the forefront of web technology, pushing the boundaries while ticking all the ecommerce boxes – because the site is essentially their web-based store front.

To do that, Frontend would hit the drawing board to get back to the basics. A structured approach to site and business research and analysis will allow the scope to be properly defined, KPIs to be documented, check points to be set up; the ultimate goals being top site performance, longevity, wide audience appeal and increased online business and customers for Michael Hill Jeweller.

There is a lot of potential to push the web site in new directions, particularly with the emergence of new technologies and new devices. There are iphone apps that let you try on jewellery, Blue Nile has an interesting app specifically targeted to couples finding the perfect engagement ring, James Allen have created “an online simulation of the magnifying lens used by jewellers to see diamonds up close”.

With a strong focus on user experience (UX) design, Frontend can identify the issues that are potentially impacting conversion goals, brand loyalty, and site usability.

This is the perfect time for any business to do a current situation analysis and start working on their plan for future internet progression. So much is happening, it’s such an exciting time to be involved with the web as it reaches out in new directions.

Yes, this is a wee bit of a nudge to see if Michael Hill Jeweller are interested in fulfilling one of my goals and working with Frontend. We have the same passion for our business, our success and our clients as Michael Hill Jeweller have for theirs.

Why should Michael Hill Jeweller (or anyone) check out Frontend?
I have had the luxury of working in UX strategy and design for clients such as Vodafone, State Insurance and NZI and I love being able to vicariously take part in as many different industries as we have clients. I’m keen to take on new challenges; I have the experience and the expertise and I’d be excited to explore the potentials with any new client.

Our methodology has been tried, tested and refined into a smooth process throughout our ten year existence. We’re not a one size fits all outfit, we design and customize each and every solution to our very individual clients’ needs.

Frontend have a proven user-centred design process that meets objectives and delivers results.

Frontend are a team of talented people, specialist experts in the web space, and can work as the web partners to help any business drive and maximize their online success.


Comments

Post author avatar image

Blog post headline image This delicious new website is brought to you by Frontend Design


We are extremely pleased to have our exciting new design online. Please come on in, take a look around, and drop us a line on the contact page.


Comments