Stacja pogodowa / Weather station
https://stacja-pogodowa-dbadd.web.app/
Weather station is a project displaying weather information for Wroclaw city. Data is provided by OpenWeather.
Process
Process took into account design and development phases.
Design phase
- Research: similar solutions
- Information architecture: how to display most important information
- Paper prototypes: for mobile and tablet devices, vertical and horizontal views
- Look & feel: layout, typography scale, fonts
- Detailed screens in Figma
Lato and suplementary Libre Franklin were selected to give the UI lightness and maintain legibility. I chose 1.414 scale as it perfectly fits for temperature displayed at the top part of the layout.
Paper prototypes
Monochrome version
As background of the widget was supposed to reflect the part of the day (morning, afternoon, and evening), the following color schemes were created:
- Morning
- Afternoon
- Evening
Accessability was taken into account—colors have best possible contrast ratio. Ratio was tested with Contrast ratio tool.
Development phase
- Static version (with Webpack)
- Angular version
While working on the static version, styles were splitted into modular parts. Project does not use any CSS framework. It’s been built using Atomic design methodology. Finally the project was implemented using Angular 9 and deployed to Firebase. For the MVP only mobile version with vertical layout was delivered.
Have fun and visit the project: https://stacja-pogodowa-dbadd.web.app/
Development notes
Installation
nvm use --lts --default
npm i
ng serve --open
Prod
ng build --prod --aot
ng deploy