I had some ideas to bring into this project but I still wanted to analyze the market to see how this product would stand up if it were ever released (which is not my intention).

Below are some examples and my thoughts on how they deal with two criteria: a) the information on display and b) how they present it:

BBC Weather

I though I would start with the big one. Ever since I was a little boy my primary way of finding out the weather forecast has been via the BBC.

The vision of those perfectly conceived icons displayed over a map of the British Isles reminds of happy days in the summer sun / rain and actually not caring what the friendly weatherman said. I’m not sure if it was the BBC who invented the visual ways of displaying temperature, wind speed / direction and pressure but those icons have been with me as long as I can remember.

I have seen attempts at different ways of displaying this information but they never seem to quite have the same impact.

In recent years the presentation has progressed to allow more of the country to be featured and some of the icons changed to make certain information clearer.

The most notable difference is the way rain and cloud are displayed. No more icons, just  (depressing) areas of local precipitation. The temperature icons still exist however with the main difference being they are now square compared to the yellow discs which used to make us feel happy. They also change colour depending how warm or cool the value they are representing is.

With the rise of the internet as the primary source of everyday information an important question was then raised: how to display this data once again?

Although there are weather maps on the website which look similar to modern television presented weather (above), for quick consumption of the data those familiar icons made a comeback and now feature as the primary method of display for the “at a glance” weather information.

For me, this is the standard by which all others are judged because the same icons have been in use for over 50 years and coincidentally they fit in very well with the trend of flat graphic style which I will discuss later.

Weather Apps

Given that the majority of everyday information is available on smart phones and other mobile devices, I’m going to focus my attention on mobile apps as this is the platform I have decided to design my interface for.

I’ve noticed also that there is a growing trend to be increasingly experimental with the presentation of weather data on these devices so this is a good portion of the industry to investigate.

I’m going to classify the examples considered into one of two categories: functional (F) and experimental (E) as they are very different in their approaches and it would be unfair to compare them directly.

Met Office Weather Application (F)

This is an app from the official supplier of meteorologic data to the UK. The Met Office are a government agency and as such you would expect that accuracy and breadth of data are high on the priorities list.

Unfortunately, as you can see from the images above, it’s not a particularly nice looking app with hideous cartoon style weather icons and awful colour scheme. This is not patch on the BBC’s interpretation of the weather and a prime example of function over form which one would expect from a government agency. But it doesn’t have to be that way.

Yahoo Weather (F)

Don’t be fooled by the styling of the Yahoo Weather app. Whilst it looks contemporary with its elegant font and smart icons it’s actually just a well-presented standard bunch of weather data with background photos shared by Flickr users of the city the device is currently located in.

It is a vast improvement visually over the Met Office app but is still information overload with little thought into how to represent all the data at its disposal.

Weather° (F)

How can the same app look so different between display modes / widget configurations? The minimal display (right) is fine but again, information overload (text) and has little thought to the allocation of screen real-estate.

The ‘full on’ display (left) is just incredible. They have managed to turn something as natural as the weather into a sci-fi movie with an apocalyptic approaching time display. Just plain inappropriate. Don’t get me wrong it’s quite beautiful in its own right, and there are people who will like this sort of thing, but for displaying the weather it doesn’t quite get it right.

Apple Weather (F)

This is the app that all iOS users have pre-installed on their Apple devices and although a little uninspiring (and inaccurate at times), it does work very well. This is mostly due to only the important data being displayed and this is good enough for most of us.

It does lack detailed information and although slick, the imagery is a tad dated now. Still, it is clear to read and easy to understand so a perfect example of a blend of form and functionality even if it is a little uninspiring.

Authentic Weather (E)

Tobias van Schneider also decided (probably) that there is too much information on display with weather apps and also injected a sense of humor to this potentially depressing subject, although probably not the Apple App Store moderators, with Authentic Weather.

Great design, interesting approach to information presentation and a fun experience. A bit ‘bold’ however and I believe there has to be a happy medium between form and function. This leans a little too heavy towards the ‘form’ and functionality is limited to local weather, but again, that is only to be expected.

Blue (E)

Blue uses coloured bars to inform of temperature, humidity & sunrise/sunset times for your location only and is a perfect example of abstraction of data.

It’s a pleasure to look at but mixes very obvious data with very abstract methods of displaying related data so not quire got the correct balance in my opinion.

Flat vs. Rich Design

Thus far, the examples explored clearly fall into the two categories of current contemporary design of Rich design (in short: gradients, shadows, photo-realistic elements, textured/reflective/shiny surfaces, skeuomorphism, etc.) and the increasingly popular trend of Flat design (in short: flat, solid colours, high contrast text and icons, no drop shadows, gradients or shading).

Coincidentally, it’s the experimental examples which opted to use a more trending style of Flat Design and it’s obvious why. Abstract and minimalist (of which Flat surely qualifies) design go hand-in-hand and the simplification of data just wouldn’t work with a Rich Design scheme.

I’m not going to discuss the merits of these two distinct styles of design as part of this post but I will create a separate post just for that soon!

Some Conclusions

To wrap up this post I just want to summarise a few things I’ve discovered which have helped shape my ideas and narrowed down the brief I’m going to set myself:

• Platform – Definitely an iOS (and/or Android) app. If I ever get around to creating this I really want the fixed screen luxury of a native app. Maybe there is scope to create a responsive version using native web technologies, but that will come a while after the design process.
• Visual Style – Again, this is a given considering the examples considered above. I’m going to go for a flat (or flat with VERY subtle gradients and drop shadows) to fit in with my hopefully (slightly) abstract way of displaying weather data.
• Content – I want to try and balance enough information to be useful (and intuitive) whilst moving away from information overload featured on many of the examples considered.
• Presentation & Deliverables – I am going to create a series of screen designs in Photoshop and an animated prototype in AfterEffects. Optionally I may choose to create a housing website for the product and maybe, just maybe, I might actually consider creating a full-screen web-app version for my own development.