F. Heller, C. Hermle, S. Saral
Programmiertes Entwerfen 1

Our final concept, the 'Sector' weather app. We decided to continue on working on a circular design since it matches well with visualizing weather data in an appealing way. We sticked to a minimal design with the focus on three sectors: temperature, precipitation and cloudiness. Each sector has its own detailed submenu which can be reached by clicking on the desired one.

Animated advertisement for the 'Sector' weather app.

main

Main menu The main menu has three basic segments: the location, the time period and the actual weather representation. The user is able to change the location via dropdown menu as well as the time period from 'day' to 'month' or 'year'. Since the temperature should be immediately visible, we centered it into the three sectors. If the user wants to have a detailed view of one of the sectors, he can click on them which leads him to the according submenu.

submenu

Submenus There is one submenu for each sector. All three submenus have in common that the current value, for example the current temperature, as well as the highest value of the day / month / year is displayed. The navigation between the submenus works via left or right swipe. To get back to the main menu, the user simply has to press the back button.

Menucolor

Representation of temperature difference To have an understanding of how the sectors visually change, we made a representation of three different climata locations. The closer the single curved lines in one sector are to each other, the higher the value is, for example the temperature. To emphasize this and give the user an even quicker understanding of the current value, we worked with additional colors: the more red the hotter, the more blue, the cooler the temperature is.

weather_sector

Cloudiness, precipitation & temperature On the one hand, we wanted to have a uniform circle on the first look, but on the other hand, we also had to separate the three sectors from each other. Each sector has its own representative icon, and each sector is bound to the timeline on the top. Since temperature is the most important value, it has the additional celsius degree value in the center.