Partly Sunny: Design Notes

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.

locationsList

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.

locationView

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.

features_hourlygraph

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.

dayByDay

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.

iphone_ipad

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:

Icons

For the navigation bar, I made a system of icons using a dots-and-dashes theme.

Dots and Dashes

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:

locationViewDrafts

The list view went through a few explorations and largely ended up with version 4:

listViewDrafts

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

darktheme

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!

Partly Sunny

For the past several months, I’ve been learning Apple’s Swift language and how to build iOS apps. Learning this has been something I’ve wanted to do for a while, so it’s been both a fun and rewarding challenge.

To bring together everything I’ve learned, I built a weather app—not because the App Store doesn’t already have enough of them but because the apps I like don’t do exactly what I want them to do. So I made my own because now I can.

Meet Partly Sunny:

intro

Partly Sunny shows your weather in quick glances and detailed looks.

Some of the features of Partly Sunny:

Locations List
Quick glances of what’s happening in the sky at your current location and your favorite locations.

locationsList_black

Location View
Detailed looks at what’s happening throughout the hour, the day, and the week at your locations.

locationView_black

Day-By-Day
Swipe up in location view to show a day-by-day graph with the week’s high and low temperatures plotted.

dayByDay_black

Day View
On the day-by-day graph, tap any day to see a detailed forecast for that day.

dayView_black

iPhone and iPad
Partly Sunny runs natively on both devices.

ipad_right

Dark Theme
Toggle between Partly Sunny’s light theme and dark theme in the app’s settings or with a handy gesture.

darktheme

Hour-by-Hour Graphs
Tap on any hour-by-hour graph and choose to plot temperature, chance of precipitation, cloud cover, humidity, wind speed, or more.

features_hourlygraph

Rain Graph
For U.S. & U.K. locations, a rain-intensity graph for the next hour will appear when it’s raining.

features_raingraph

Pollen & NOAA Links
For U.S. locations, links will appear for pollen forecasts and the local NOAA weather office for winter-weather predictions, tropical forecasts, marine forecasts, and more.

features_pollen

Widget
Partly Sunny includes a widget to show both a quick glance and a detailed look at your current location’s forecast.

features_widget

3D Touch
3D Touch the app icon for the widget and shortcuts. Peek and Pop in the locations list; the location view’s severe-weather alerts, pollen-forecast, and NOAA buttons; and the day-by-day graph.

features_3dtouch

Dark Sky
Partly Sunny forecasts are powered by Dark Sky to give you super-accurate data.

While you may not always enjoy the weather, hopefully you enjoy checking the weather with Partly Sunny.

Of course there are things I want to tweak and more features I want to add, but I’m proud of what I’ve accomplished so far. I set out to do a thing, and I did it.

You can visit Partly Sunny on the web at partlysunnyapp.com and follow @partlysunnyapp on Twitter.

Partly Sunny will be available on the App Store tomorrow for $2.99.

Hroad Trip Photos

I finally got around to uploading some photos from my Hroad Trip from OH to LA a few months back.

You can view them on Flickr.

Enjoy!

Hroad Trip: Zion

The list of favorite places I’ve been to has a new member: Zion National Park. Red sandstone canyons, turquoise snow-melt waters, imposing mountains, and grand vistas. While we didn’t have time to see and do everything, this park with much to offer is worthy of a return visit.

We spent most of our day hiking the Zion Narrows following the Virgin River through the canyon. There is no trail on this hike; the river is the trail.

For about 70% of the hike, we were in water anywhere from ankle deep to waist deep.

I don’t like to describe things too often as amazing or awesome because those are two overused words, but hiking the Zion Narrows was both.

360° view of the river (click for larger version):

And what visit to water would be complete without this:

Afterward, we toured some of the stops along the scenic drive. The view under the Weeping Rock:

Evening shadows:

If you ever have a chance to visit Zion, do it. You won’t be disappointed. We weren’t.

Today, we’re headed to Los Angeles. One more state, one more time zone, and one more destination.

Hroad Trip: Bryce Canyon

With only a couple hours to spend in Bryce Canyon National Park, we took the auto tour. No hiking yesterday. Here are a few shots:

Panorama (click for larger):

Hey hey, I’m in a photo:

And today, we’ll be exploring Zion National Park:

Hroad Trip: Arches & Hikes

arch (noun)
a curved symmetrical structure spanning an opening and typically supporting the weight of a bridge, roof, or wall above it.

hike (noun)
a long walk, esp. in the country or wilderness.

pooped (adjective)
exhausted

Those three words described Day 7 of the “Hey Joe, Where You Goin’ With That Camera In Your Hand” Hroad Trip as we hiked 15+ miles around Arches National Park in Moab, Utah and its magnificent sandstone structures.

We started the day with Double Arch:

Inside:

Outside was a lone, little prickly pear cactus. So of course I took a picture:

Or two:

Out hiking:

…to Broken Arch:

Underneath:

We hiked the 4-mile-round-trip “trail” to Double O Arch:

I say “trail” because most of the trail is climbing up, down, and over rocks and steep paths with drop-offs on both sides:

A break from the arches:

Back to arches. Partition Arch:

We ended the day with perhaps the most famous arch in the world and the arch I wasn’t leaving the park without a photo of: Delicate Arch:

People lined up (me included) to take turns going under the arch. When one couple took their turn, the guy dropped to one knee and proposed to his girlfriend under the arch for all of us to be a part of.

Today was exhilarating—and exhausting. But all the miles and all the sweat were worth the magnificent sights we saw.

Tomorrow, we’ll have a little rest as we drive to Zion National Park by way of Bryce Canyon National Park. And more picture taking.

Hroad Trip: Grand Teton? Nope.

Day 5 of the “Hey Joe, Where You Goin’ With That Camera In Your Hand” Hroad Trip turned out to be a bust.

We were concerned last night that the roads out of Yellowstone would be closed because of the snow. Fortunately, they were open. But this was the scene when we entered Grand Teton National Park:

Throughout the park, we had low clouds and a mix of rain and snow. That led to views like this:

…and this of the mighty Tetons:

Unfortunately, all the majestic beauty of the Tetons will remain hidden to us. But we did see a moose:

Instead, we did a little walking around Jackson, Wyoming (which reminded me of Old Town Scottsdale (for the few of you reading this who know what I’m talking about)):

But it was raining, and we’re not much of shoppers anyway. So we went to see
The Avengers.

Tomorrow, we leave the cold and head for warmer lands of southern Utah and Arches National Park on Sunday.

Until then, gunslinger squirrel says, “I’m your huckleberry.”

Hroad Trip: Yellowstone, Day 2

Hello again from sunny and snowy Yellowstone National Park. Most of today was spent exploring some of the park’s thermal features as well as the park’s Grand Canyon.

The Grand Prismatic Spring:

Upper Falls:

Lower Falls and the Grand Canyon of Yellowstone:

Panorama (click for larger version):

Mud Volcano (that smelled like rotten eggs):

And we ran into more snow:

What do you do with snow? Build snowmen!

…down by the lake:

And what else do you do down by the lake? That’s right, stick your feet in. Add this to my collection:

Yes, the water was cold. Very cold.

Back to thermal features. Black Pool:

Detail:

Needle drop (not a thermal feature):

Morning Glory Pool:

And if we didn’t have our Phil of thermal features, here’s another with a little less Fury. S.H.I.E.L.D. Shield Spring:

(Sorry, mom, you won’t get that joke.)

And finally, while this wasn’t a park attraction, I couldn’t pass it up:

Tomorrow is Grand Teton National Park—provided the pending snow doesn’t close roads!

Hroad Trip: Yellowstone, Day 1

Day 3 of the “Hey Joe, Where You Goin’ With That Camera In Your Hand” Hroad Trip was in Yellowstone where we experienced a variety of weather: sun, clouds, rain, sleet, and snow. What follows is a sampling of our day (still only iPhone photos until my laptop gets internet).

Sunshine down by the Firehole River:

And sunshine by Gibbon Falls:

This is a common occurrence (yes, that’s the mirror on my car):

And then we hit some snow:

But we were back to sunshine at Mammoth Hot Springs:

And when we arrived at Tower Fall, we found more snow:

Back to sunshine for some more bison encounters:

(We did also see elk and a black bear, but those photos are on my DSLR camera.)

And finally, we ended with some clouds at Old Faithful:

See you tomorrow!

Hroad Trip: Quick Update

Yello from Yellowstone! 27 hours and 1700 miles of driving in seven states brought us here.

Monday was all driving (save for the stops I had to make because I was sick—the first time in I can’t remember how long), and yesterday was mostly driving with a stop at Mount Rushmore.

I don’t have Internet access on my laptop, so I can’t upload camera-camera photos, so here are a few from iPhone camera.

Driving through South Dakota:

Mount Rushmore:

Driving through Bighorn National Forest:

Entrance to Yellowstone:

They have snow here:

More later.

The “Hey Joe, Where You Goin’ With That Camera In Your Hand” Hroad Trip

(My thanks and/or apologies to Jimi Hendrix for the title of my
road trip, err, hroad trip.)

After driving from Connecticut to Ohio to spend a week with family and friends, I start the next part of my journey to Los Angeles tomorrow. But instead of driving straight through in the three days it would normally take from Cleveland to LA, my dad (who’s driving with me) and I are taking 10 days—and making several stops along the way. Here’s the route (click for larger):

A. Cleveland
B. Mount Rushmore
C. Yellowstone National Park
D. Grand Teton National Park
E. Arches National Park
F. Bryce Canyon National Park
G. Zion National Park
H. Los Angeles

I’ll be keeping this space along with my Twitter and Instagram feeds (@joehribar on both) updated along the journey if you’d like to follow along.

Two things are certain on the “Hey Joe, Where You Goin’ With That Camera In Your Hand” Hroad Trip. I’ll be taking a boat load of pictures, and my butt will be sore from driving. Huzzah!

Moving On

Four years ago tomorrow, I started at ESPN. Today, though, is my last day. Next month, I’m heading west to Los Angeles for a new job with Reality Check Systems.

My departure from ESPN is bittersweet as I am saddened to leave many of the people I met here. Over my four years with the company, I have met and collaborated with a great number of talented, enthusiastic people—developers, designers, producers, directors, studio crew, and on-air personalities. Together, we achieved successes on-screen and behind the scenes—from integrating touchscreen graphics in live SportsCenter broadcasts to creating efficiencies in the graphics-development process that saved developers time and improved our on-air product.

As I look back on what I accomplished and how I grew at ESPN, I remain proud of what I achieved and pleased to have worked with so many great people. As I depart for new experiences and new challenges, I sincerely thank those I worked with for all their hard work and for challenging me to stay hungry and stay foolish.

The View from Here

Hurricane (and then Tropical Storm) Irene came and went, and with it my power as did the power for almost 722,000 other customers in Connecticut. Here in West Hartford, the storm didn’t seem that bad: steady rain and moderate winds with a few gusts. But apparently a tree and several utility poles along my street couldn’t handle Irene.

irene damage

irene damage

irene damage

irene damage

irene damage

irene damage

irene damage

So yeah, I imagine I’ll be without power for a little while. Good thing I prepared.

NBA Free Agents

On SportsCenter yesterday, my NBA free agents touchscreen graphic debuted with NBA analyst Chris Broussard:

I still have a few tweaks and updates to work on, so the graphic isn’t finished, but after spending two months working on it, finally seeing it on TV is a great feeling.

What’s special about this graphic is the on-the-fly calculations of NBA team salaries based on several factors: signed player salaries, free agent cap holds if they have Bird rights, and team roster charges if the team has less than 12 players.   Each time a player is moved to or from a roster or a team renounces all or individual free agents, the graphic runs through a series of calculations to determine the team’s new salary total and their available cap room.

Because of this graphic, I now know more about the NBA free agency process than 1.) I care to know and 2.) I ever thought I would all thanks to this year’s big story: LeBron James.

Here was my view in the studio yesterday:

free agents graphic

free agents graphic

And the Emmy Goes to…

Last Monday (26 April), I had the honor of attending the 31st Annual Sports Emmy Awards in New York City for the first time since I started working at ESPN two years ago.   I was nominated for two Emmys along with the graphics team for the SportsNation show.   As the phrase goes, it was an honor just to be nominated.

emmy awards

The awards were held in the Frederick P. Rose Theater. Our pre- and post-show receptions were held in the Time Warner Center overlooking Columbus Circle and Central Park:

emmy awards

The reception room:

emmy awards

For the category “Outstanding Graphic Design,” MLB Tonight won. But so did SportsNation (and the post-announcement video clip featured “Walk the Plank,” one of my touchscreen games!):

emmy awards

So now I’m an Emmy winner!

emmy awards

A terrific honor, for sure, and I’m proud to share the award with the rest of the SportsNation graphics team. I work with some very talented people.

Post-show reception over, waiting for the buses to return us to ESPN:

emmy awards

Congratulations to the entire SportsNation graphics team on the Emmy win!   And congratulations to all the other winners!

emmy awards

emmy awards

Winners Bracket

On Saturday, ESPN Sports Saturday on ABC launched.   Included was a new show called Winners Bracket, created by the team behind the ESPN show SportsNation.   Winners Bracket is hosted by Michelle Beadle and Marcellus Wiley.

For both shows, I create the touchscreen games the anchors and guests play during the show.   On Saturday, I was on-hand for the launch and snapped some photos (I tweeted most of these on Saturday, but here are a few more).

Check out Winners Bracket on Saturdays at 5p ET on ABC!

winners bracket

The studio crew discussing their plan for the show:

winners bracket

Director Chris going over the shot list:

winners bracket

An hour before Winners Bracket launched, I was still making updates to the touchscreen game:

winners bracket

Director Chris doing his thing:

winners bracket

Michelle and Marcellus:

winners bracket

Playing the touchscreen game:

winners bracket

Marcellus fixing his earpiece:

winners bracket

Playing the touchscreen game with Jalen Rose:

winners bracket

Reaction shot with Alexi Lalas:

winners bracket

Jalen Rose watching the show:

winners bracket

The winner of the first-ever Winners Bracket was a Dwyane Wade dunk.   Marcellus and Mike Greenberg guessed correctly.   Michelle did not:

winners bracket

After the show, the entire crew gathered for some cake and celebration:

winners bracket

My souvenir from the launch:

winners bracket

Michelle wrote, “The Genius rules all. Michelle Beadle” Marcellus wrote, “The Genius BROTHER! M Wiley, Dat Dude 75.” My nickname amongst the SportsNation crew and others at ESPN is “Joey the Genius” or just “Genius” for short.

Being part of a team launching a new show is one of the best aspects of working in the television industry. Congrats to the entire Winners Bracket team for a successful launch and a great show!

Brackets

After about four months of development time and a few very long nights last week, my NCAA touchscreen brackets graphic debuted on SportsCenter yesterday. ESPN college basketball analyst Doug Gottlieb revealed his bracket using the Perceptive Pixel touchscreen.

Here are a few short videos of Doug in action yesterday:

Part of my fun with this project was working with all the anchors and analysts who will be interacting with the touchscreen. Yesterday I was in support mode making sure Doug was comfortable with the graphic.

Doug making a pick:

doug gottlieb ncaa tournament brackets

Doug tossing away two teams’ stat panels:

doug gottlieb ncaa tournament brackets

Doug and others will be using the touchscreen throughout the tournament, so check it out on ESPN!

Road Trip: MoMA

A couple weekends ago, some coworkers and I traveled to New York City to visit The Museum of Modern Art (MoMA).   This trip marked the first time I had been to the museum.   Here are some of the photos I took.

Road trip? More like a rail trip:

train ticket

Walking from Grand Central, I ducked inside St. Patrick’s Cathedral:

st. patrick's cathedral

st. patrick's cathedral

Parked:

parked

MoMA:

moma

Museum-goers:

moma

Claude Monet’s water lilies:

monet

monet

The Starry Night” by Vincent van Gogh:

starry night by vincent van gogh

Museum-goers:

museum-goers

“Cinema Redux” of Alfred Hitchcock’s Vertigo. A frame was captured every second in the film, and each row represents one minute of the film. More here.

vertigo

In the same section of the museum, there was this amazing touchscreen application called “I Want You to Want Me.”   The application pulled together information from multiple dating websites and created this interactive display of what people want and who they’re looking for.   Read more about the project here.   The official video:

Post-MoMA, the Chrysler Building in reflection:

chrysler

Back at Grand Central:

grand central

grand central

Headed home:

grand central

Wintry Walk Around West Hartford

Last week during a snowstorm, I needed a mind-clearing/creative exercise after work, so my camera and I took a stroll around West Hartford for over an hour (and I think the cold I have had for the last week was because of this excursion!).   Here are a few shots I took:

west hartford

west hartford

west hartford

west hartford

west hartford

west hartford

west hartford

west hartford

America: F**k Yeah! Road Trip – Conclusion

route

My America: F**k Yeah! Road Trip: 10 days; 1,914 miles; 2,495 photos. I compare my journey to that of a tribesman journeying up the mountain and returning a different person. Having spent so much time by myself over as great of a distance as I did and having experienced places of awesome historical significance and places for great personal reflection changed my outlook on myself. I have an altered opinion of life, one, I think, that will make me a better person.

My road trip was an amazing journey. I cherish the experience I had, the memories I made, and the photographs I took. Looking back on my journey, while the drive was at times long, I will be forever thankful and grateful I was able to make the trek. Having seen all these American treasures makes me reiterate “America: F**k Yeah!”

My “America: F**k Yeah!” Road Trip:

America: F**k Yeah! Road Trip – Liberty State Park

My final stop of my America: F**k Yeah! Road Trip in October was at Liberty State Park in New Jersey.

route

The park is directly across the harbor from New York City, so I was afforded a great view of the skyline:

liberty state park

The view down the pier:

liberty state park

And of course, to top-off my jingoisticly-themed trip, the Statue of Liberty:

liberty state park

liberty state park

Lady Liberty at dusk:

liberty state park

My “America: F**k Yeah!” Road Trip:

America: F**k Yeah! Road Trip – Trenton

Stop #3 on my return trip from DC this past October was in Trenton, New Jersey at the site were General George Washington and his troops crossed the icy waters of the Delaware River to make a surprise Christmas Day attack on Hessian forces in Trenton.

route

The crossing, of course, was made famous in Emanuel Leutze’s painting:

washington crossing the delaware

I stopped at Washington Crossing State Park on the New Jersey side of the Delaware:

trenton

The Delaware today:

trenton

trenton

My “America: F**k Yeah!” Road Trip:

America: F**k Yeah! Road Trip – Philadelphia

For anyone who was following my photos from my road trip in October, my apologies for not finishing the series.

As noted earlier, in October, I took a 10-day, almost 2,000-mile journey to North Carolina and back, stopping at several historical places on the way from and to Connecticut.   The last day took me from DC back to CT with stops at Fort McHenry in Baltimore, Independence Hall in Philadelphia, Trenton NJ where Washington crossed the Delaware during the Revolution, and Liberty State Park in NJ.

route

The Liberty Bell with Independence Hall in the background:

liberty bell

Forged in 1753:

liberty bell

The clapper:

liberty bell

In this room, the Declaration of Independence, the Articles of Confederation, and the Constitution were all signed:

independence hall

independence hall

The guide mentioned the only original item in the room was the chair (with, what was said by Benjamin Franklin, was a rising not setting sun) used by George Washington during the Constitutional Convention in the summer of 1787:

independence hall

Independence Hall:

independence hall

And since I was in Philadelphia, I had to stop for a cheesesteak!

philly

My “America: F**k Yeah!” Road Trip:

America: F**k Yeah! Road Trip – Fort McHenry

Day 10, the final day, of my road trip back in October was a spent driving from DC back to Connecticut and of course I had some stops planned!

route

First stop on the return leg of my trip was to Fort McHenry in Baltimore MD.   Interestingly, Fort McHenry is the only site in the National Park System that is designated as an Historic Shrine.

fort mchenry

The fort from a distance:

fort mchenry

Looking out to the harbor:

fort mchenry

Cannonballs:

fort mchenry

Inside the fort (several years after the War of 1812, the second story and porches were added):

fort mchenry

The guns of war:

fort mchenry

Rampart (as in “o’er the ramparts we watched”) #4:

fort mchenry

An interesting bit of historical trivia I learned at Fort McHenry was that in 1861, several members of the Maryland state legislature were imprisoned in the jail cells at the fort to prevent them from voting to secede from the Union.

fort mchenry

My “America: F**k Yeah!” Road Trip:

America: F**k Yeah! Road Trip – Washington, DC (Part 2)

And now for part two of my Washington DC photos from my road trip.

I loved the ceiling and the perspectives offered by the DC Metro:

dc metro

Flag above the Department of the Treasury building:

treasury department

North portico of the White House at night:

white house

I saw this device on the south gate of the White House grounds.   I’m curious what might have happened if I pushed the button:

white house

South lawn of the White House:

white house

Lafayette Park just north of the White House:

lafayette park

The eternal flame at John F. Kennedy’s grave in Arlington National Cemetery:

eternal flame

Onlookers:

eternal flame

Brothers (Bobby, Jack, and Teddy):

kennedys

A sea of white:

arlington

The U.S. Constitution at the National Archives:

constitution

The Washington Monument from the Jefferson Memorial:

washington from jefferson

The U.S. Capitol, glazed with rain water:

capitol

I only spent two days in DC, but I probably could have spend two weeks there.

My “America: F**k Yeah!” Road Trip: