When I set out to make Partly Sunny, my weather app for iPhone and iPad, there were a few design and technical solutions I knew I wanted to include: things like making custom icons and using specific APIs. These solutions would go toward building the weather app I wanted to use and would help differentiate Partly Sunny from other weather apps on the App Store.
What follows is a sort-of behind-the-scenes look at Partly Sunny. I’ll start with discussing some of the design solutions and show some draft designs, and in a subsequent post, I’ll discuss some of the technical solutions. Select any image below for a larger version.
From the start, one thing I wanted to include in Partly Sunny was a view that gave summary information for both my current location and for any saved location. I wanted a way to quickly glance at the weather for these places. But I didn’t just want some basic information like the current temperature and an icon representing the current condition (e.g. “clear” or “light rain”). I wanted this view to be more useful, so in Partly Sunny, the list view includes the current temperature and condition for each location but also offers more: a sentence stating what’s happening over the next many hours at that location as well as the high and low temperatures and the chance of precipitation for the day.
Whereas some weather apps might declare this to be too much information, I wanted this view to be useful for understanding what’s happening. A simple icon stating it’s clear right now doesn’t help in understanding a couple hours later it’s going to be pouring.
From this simpler-but-still-useful view, I wanted to be able to select any location to view more detailed information—what’s happening over the next hour, the next day, and the next week at that location.
And the key to help visualize this information was graphing it. While this isn’t a new solution to weather apps, some do it and some don’t, and I wanted Partly Sunny to do it. So looking ahead in the hour-by-hour forecast, there’s a visual representation of how temperature, chance of precipitation, humidity, wind speed, and more are changing.
And looking ahead in the day-by-day forecast, there’s a visual representation of the high and low temperatures over the week. Reading, for example, that the high temperature will be 55° on Monday, 68° Tuesday, 75° Wednesday, 52° Thursday, and 48° Friday is one thing. Seeing it rising and falling on a graph is another.
This experience was something I wanted to have on both iPhone and iPad. Some of the weather apps I had been using previously were iPhone only, and some of the iPad-friendly apps weren’t the best. So for when my iPad is in-hand and I want to check the weather, having Partly Sunny run natively on both iPhone and iPad giving me the same experience on both devices was a must-have.
Also a must-have was making custom icons. I know of several apps that use Climacons by Adam Whitcroft. They’re great icons, and I could have used them as well. But I wanted Partly Sunny to use its own icons. So I learned how to use Sketch and made my own. Here they are:
For the navigation bar, I made a system of icons using a dots-and-dashes theme.
Sure, my icons aren’t going to win any design awards, but they’re unique to Partly Sunny, and that’s what I wanted.
Icon design wasn’t all I used Sketch for. I also, uh, sketched drafts of the various views in Partly Sunny. For example, here’s my first pass at the location view, a subsequent pass, and what it looks like in the app:
The list view went through a few explorations and largely ended up with version 4:
Sketch was also helpful in working out another design solution I wanted to include: a dark theme. I’m a proponent of having dark themes for apps so that in lower-light environments, the UI isn’t blinding me (I still wish iOS had some kind of system-wide dark theme).
Not all the design solutions in Partly Sunny were planned out from the start, of course, but these were many that were. My goal was to build the weather app that I wanted to use, and that goal included a few specific design and technical solutions. I hope those solutions are useful to you as well and help make Partly Sunny the weather app you want to use too!
Partly Sunny is available on the App Store for $2.99.
Next time, I’ll discuss some of the technical solutions built into Partly Sunny. Stay tuned!
/cdn3.vox-cdn.com/uploads/chorus_image/image/51771433/shutterstock_445452202.0.jpg)
