Several weeks ago, Yahoo! released their new Weather app, Yahoo! Weather. The app is quite lovely, featuring full screen photos overlaid with the weather information. When you scroll down, the photo blurs and shifts upwards. You can switch between locations by dragging from left to right, and there is a parallax effect as you do so. If you haven’t seen it, you owe it to yourself to check it out. If you don’t have an iPhone, here’s a pretty good YouTube video that demonstrates the app.
I fell in love with this app immediately after installing it. It’s visually appealing, and everything moves with the silky smoothness we expect from the best iOS apps.
Playing with it one day, I decided I should try to see if I could replicate some of the core design features. I also realized I had the perfect testbed for such an experiment: BabyGrow. I spent some time over the next several evenings and weekends seeing what I could do. The video below demonstrates the results (if you don’t see the video, click here to see it on YouTube).
This is not a complete implementation of BabyGrow, and I don’t know whether it will live beyond this experiment, but I think it turned out pretty nice. It mimics the background photo, including the various effects applied to it as you scroll around. The table view will snap to the header, charts, and top of the main data section. I spent more time than I care to admit making that snapping feel just right. And, of course, it runs silky smooth on the iPhone 5 (I confess I have not yet tried it on any other iOS device).
The experiment was really enjoyable. I got to solve some interesting challenges and hope to apply things I’ve learned in the future. However, there is a lot of BabyGrow that would need to be rethought to make it fit this design. Plus I have another project I really need to finish and ship. At this point, I really don’t know when or even if I would ship a version of BabyGrow using this design. I just wanted to show off what I’ve done, plus send a big “Thank you!” to the Yahoo! Weather app team for inspiring me to do it.