← Take Me Back HerokuWeb DesignAPI

FancyWeather

An open-source Heroku application which gives weather information and pulls corresponding images via Unsplash API.

fancyweather.herokuapp.com

Role: Designer 🎨, Developer 🛠

iMac Mockup

The Problem

The end goal with this project was to create a Heroku app which delivered accurate, location based weather information and provided visitors with a unique experience. This site also needed to be able to access and properly utilize the Unsplash API.

The Users

There were no specified users and there was no audience we were particularly trying to reach or identify with for this application.

As such we aimed to include as many users we could and incorporate everyone into the design of the application.

We accomplished this by incorpoating features such as the City/ZIP search, in the instance that the aproximate location identified by the user's IP address didn't match their exact city. Furthermore, the Unsplash API was built to display background images based upon the weather conditions rather than location for fear of leaving out visitors living in less photographed areas.

The Process

Inspiration and Differentiation

The creative process began on Dribbble and seeing what people had and hadn't done with weather applications. The search not only gave inspiration on what direction to take the site, but also revealed how we could differentiate ourselves from other similar projects.

We identified that photography was not a prominent feature in other projects, which had instead opted to use illustrations and gradients for their backgrounds, similar to the stock Apple weather app.

With this in mind we turned to a favorite resource for completely free photos, Unsplash, and their very own API.

Libraries + APIs

Kyle Hall, gifted engineer and another Showpad intern, worked to incorporate the API and perform all the necessarry calls across the various APIs and library's necessary for the application to run and query the appropriate data.

Design & Front-End Development

In order to shorten the time between ideation and deployment of the application, we opted to skip the usual work in Figma and move directly into code.

The information displayed on the page is relatively dense and as such we opted to prioritize visual heirarchy and opted for a font with various weigths, to better break up the text and enforce the heirarchy via weight, in this case Montserrat.

We used smaller, lighter elements to signal less important data, such as the humidity, whereas larger thicker elements are the most immediately important to the visitor ie. the current temperature outside.

The front-end markup of the site contains a variety of flexboxes, lists, absolutely positioned elements, and empty HTML tags which are then dynamically populated through a series of AJAX calls.

Deployment

After linking a GitHub account to Heroku, the process was surprisingly simple and allows for the site to update after each and every git push and within a few minutes our project was live for the world (or at least our parents) to see.

The Result

At the end of a single day we were left with a project that we were both very proud of and had tons of fun building out.

The final result of our efforts can be viewed here at fancyweather.herokuapp.com. I'd invite you to go ahead and refresh the page a couple of times, Unsplash hosts some *beautiful* photos.