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)!

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

---

One of our team recently gave a talk on the use of grids in web design

---

During the course of this talk, the term 'golden section' inevitably came up and how it played an integral part in calculating the grid. Like most of us, I know a little about this 'golden section' but decided to try and find out a little bit more...

Firstly, it seems that the purpose of this 'golden ratio' is to give a sort of harmony and beauty to what ever art form it is applied to. It's application can be found in art, sculpture, photography, design and even music. It is said to naturally appear in nature (although this has been disputed) and has recently been found to exist even on a molecular basis!

---

It is said to have been “discovered” by the greeks back in 500BC and can be found in their architecture and sculptures. Along the way, it has also been utilised by the Egyptians and Aztecs in their pyramids, and Renaissance artists and composers such as Leonardo Da Vinci and Mozart. It has also recently been made famous in movies and programmes such as “The Da Vinci code” and “Num3ers”.

---

So what exactly is this golden section (also known as 'phi') and why all the fuss? Basically, 'phi' can be described in a mathematical formulae where 'a line that is divided into unequal segments will always (when calculated) equal the sum of the length' or '1.6180339887...' for short. This formula can then be applied proportionally to 2D & 3D objects and space. Of course for those of you keen to investigate the intricacies of this formulae, there is a wealth of information out there on the internet...

---

For those of us more interested in it's practical applications, it seems that you can apply this formulae to practically any artistic endeavour you are working on and we sometimes intuitively do it without even realising. It does however appear that when you consciously apply the golden section, you will achieve a more harmonious outcome which will evoke a more emotive and aesthetically pleasing reaction in your audience... Strangely enough, it doesn't appear that we know exactly why it causes this emotive reaction, just that it does.

---

So before you start your next artistic endeavour (whatever that may be) it might be a good idea to think about your old friend 'phi' and what it can add to your project. :-)

[With thanks & acknowledgment to Tony Xia and of course the interweb!]

---

Browser wars, first there were none, then one, now many.
Can't we all just play together nicely like our mums told us to?

---

The web has a long history of browsers competing for market share. Many of us will remember the old Netscape vs IE browser war. Early web pages were often designed to look correctly in one or the other, rarely both.

The solution to solving webpages looking different across browsers was to implement industry standards for how browsers should display/render HTML and CSS. Unfortunately many of these standards were not finalized by the time IE6 was released in 2001. Leading to some of today's biggest cross browser headaches.

Lack of competition during IE6's life-cycle allowed it to dominate the market share of browsers. This started to change in 2004 with the release of Mozilla's browser Firefox. This heralded the next round of the browser wars (which is ongoing). This new competitor in the browser market prompted Microsoft to update their browser, releasing IE7, IE8, and most recently IE9.

Mozilla and Microsoft aren't the only players in the modern browser market. The modern web landscape is viewed by a multitude of browsers such as the previously mentioned Firefox and IE, but also includes browsers such as Chrome, Safari, and Opera.

The web is constantly evolving and currently the industry is finalizing the next set of standards for HTML5, and CSS3. All major browsers are going through and implementing these standards, with vendors preferring to prioritize between getting more of the standards implemented, rather than waiting till the standards are completely finalized before adding them to their browsers.

What does this mean for the future web developers and web users?
With stronger adherence to standards it means web developers will spend less time working on getting webpages to look and work correctly across multiple browsers, and focus more on pushing the boundaries of what's possible with the web.

Ultimately it means getting the best experience from the web regardless of what browser you're using. No longer will some users miss out on content and functionality from website simply because they use one browser over another.

So who will win the browser wars? Besides rendering the pages correctly, browsers will still complete for speed and extra functionality that adds to the user experience

In the end, if all browsers render webpages exactly the same as each other, isn't that a win for all of us?
If you want to learn more or want to have a chat about something in this blog, drop a comment or contact us through the website and we can have a good ole chit-chat (fish and chips not guaranteed, though likely).

James

The fantastic illustration at the top is from,Galit Weisberg you can see more of Galit's artwork at: http://shoze.blogspot.com

---

This weeks catch-up topic was about film title design, a much loved topic which made me reminisce a wee bit about my uni days.

---

Film titles designs were kicking off again in the 90s in a big way. You'd almost go to a movie just to see the amazing title designs that were produced by the likes of Kyle Cooper. Se7en, of course, being a talking point for weeks for most in my class. People in Type in Motion 1 would try and replicate the effects (with varying levels of success - this was around the same time when I decided type in motion was too much of a laborious process for me to indulge in).

---

Gattaca is one of the first titles that clearly stuck in my head, particularly after watching the movie a second time and realising what the elements were. The title is cleverly based on the initial letters of the four DNA nitrogenous bases (adenine, cytosine, guanine, and thymine) and during the credits the letters G, A, T, and C are all highlighted.

---

I love looking back at pre-computer generated sequences - to me they have a lot more mystery and awe. Soylent Green is a classic one. Sequence editor Chuck Braverman, known for his flash frame kinestasis montage/films, opens director Richard Fleischer's film adaptation of Soylent Green with images of the building up and crumbling of society. Fantastic scene setting for the movie, which has had a significant cultural impact, and many parodies and mockeries stemmed from it.

TV series title designs

---

Lately, TV series opening sequence design has really been hitting the mark. Just take a look at this years Emmy nominations for "Outstanding Main Title Design" - it's great to see Imaginary Forces (founded by Kyle Cooper) is represented twice in this category, with Boardwalk Empire and Rubicon.

---

Game of Thrones, my personal favourite opening sequence, is also on the list. GoT is actually the first sequence i've heard non-designers talk about recently – if you don't know about GoT, seriously, get into it.... "Winter is coming."

Want more?

---

I've been a bit lazy, just posting a few screen caps instead of videos... mainly because I have to get this post up by 5pm, or buy the crew lunch on Monday. One day i'll go back through and hook up the videos.

However, if you want more, make sure you visit the art of the title site, where you'll find the complete compendium and leading web resource of film and television title design from around the world. They honor the artists who design excellent title sequences, discuss and display their work with a desire to foster more of it.

On a slight tangent...

---

Threadless put out one of my favourite tees ever a few years back - Spoilt by Olly Moss. Still available on their site.

---

A tool which is gaining a lot of speed at the moment in the web world: PhoneGap allows front-end web developers to publish native apps to most smart mobile operating systems. But is it a true replacement for native languages?

---

PhoneGap is EVERYWHERE right now. You can't read a tech blog without its name popping up somewhere. Is it really as good as it sounds? I aim to find out. Here's my initial understanding of PhoneGap. Stay tuned for more detail as I test the process myself.

Phonegap - quick and dirty
PhoneGap is a JavaScript accessible API implemented on multiple devices (source). It allows rendering of local web language content (HTML5, CSS3, JavaScipt) inside a native application container, and provides hooks for linking JavaScript calls with the native language. Through these hooks, it can utilize device features (camera, accelerometer, etc.) just like a native application. For web developers, this means Native iPhone, Android, etc. apps, deployable to the AppStore's, without having to learn Objective-C/Java!! Too good to be true?

How it works
The typical PhoneGap application is a packaged version of a webpage/website that runs from the phone. What this means is that all html/css/js files are bundled into the application and run from the file:// protocol (source). The web-based content does not display through the internet. On iPhone, the application content is displayed through a web browser container, with custom hooks to transfer JavaScript calls to Objective-C and back.

What can I do with it?
It would seem I can build an application using the HTML, CSS, jQuery-Mobile knowledge i already have. No learning Objective-C (proving to be quite a feat!), Java, or other Native application languages. And deploying my single build to 6 different smart mobile platforms. I can even leverage the devices' functions which make the SDK for that device so powerful. I could have the app use the camera on the phone, respond to touch gestures, and achieve otherwise distant functionality for an online web-application.

What issues could I see there being?
From what I've read, there are a couple.

• Speed: Everything on the device is rendered through the devices native browser (on iPhone, that's mobileSafari). These native browsers currently render JavaScript animation extremely badly, hows this going to work in an application? Things as simple as page transitions might become a sluggish mess.
• Efficiency: As anyone who has used Objective-C can attest to.. Memory management is a HUGE part of the language. Theres plenty of stats out there that tell you, an app which doesn't meet peoples load, run, and close speed expectations can be considered in dire need of attention.
• Future Support: Will apple start rejecting PhoneGap packaged apps? they aren't at the moment.. (e.g. this, this and this), but will it last?

For me, getting things pixel perfect is paramount in projects. Can we achieve the same level of polish on a PhoneGap app?

If you have knowledge of PhoneGap, and can help answer some of these questions, please comment! I look forward to digging deeper and adding more detail in a future blog post.

Cheers!

---