Self-initiated: Custom weather widget
A personal UI design project for Weather OnDemand, a configurable weather widget with multiple layout and colour options, a live preview dashboard and Apple Watch integration.

Mind maps, concepts and sketching
I had a few different ideas I wanted to try and incorporate into the final design. A mind map helped me quickly capture concepts, layouts and ideas to explore in more detail later in the process.

Create and preview
The simple dashboard allows you to configure various colour and layout options to easily adjust the look and feel of the widget. This generates a code snippet which you can then copy and paste into the HTML of your site.

Colour selection experiments
I experimented with various colour selection options but in the end settled on predefined colour themes to avoid people creating colour schemes that looked like something from a 90s MySpace page.

Different layout options
Here are a few of the weather widget layout options. A live preview is always visible during the creation process so you can find the right colour palette and layout for your website.



Show the weather in your product
Here’s an example of the weather widget displayed as part of a site’s header navigation. Given the various layout and configuration options, it could also work well in a sidebar or footer.



