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.

Weather OnDemand dashboard

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.

Mind map and concept sketches for the Weather OnDemand widget

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.

Weather OnDemand dashboard

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.

Weather OnDemand colour selection wheel interface

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.

Layout option sketches for the Weather OnDemand widget
Weather OnDemand dashboard responsive layout options light
Weather OnDemand dashboard responsive layout options dark

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.

weather-ondemand-apple-watch-1
81-status-update
weather-ondemand-browser
37-weather

Let's collaborate

If this sounds like the way you like to work, get in contact to tell me a little about yourself and your project and I'd be happy to help. Send me an email at hello@richmcnabb.com.