Classroom Climate

The Weather App Challenge involved designing an assignment for students learning web development.

Image for post
Image for post

Project Overview

Background: Professor of Computer Science, Nina Amenta put out a call requesting weather app mockups for her students to reference as they studied web development. A small group of members from the UC Davis AIGA graphic design club, Pixel, volunteered to produce high-fidelity mockups for the course. After creating the mockups, we attended one day of the class to present and explain the rationale behind our designs to Professor Amenta and her engineering students.

Challenges: Creating an interface that, while still pleasing and useful as a mobile site, was accessible to various student skill levels. In addition, I set a personal goal of creating a site that would be friendly on the eyes for someone checking the weather late at night, i.e. a student.

Team: Each Pixel member/volunteer worked on their own concept of a simple and accessible weather app but provided each other with design critique as needed. The real collaboration was between each of us and the student developers who would build out our ideas.

Methods: Due to a strong mental image of the design I wanted and a desire to experiment with a digital-only technique I, very atypically, skipped preliminary pencil drawings and went straight to mocking up the app in Sketch.

Results: Only a few of the students sent me the results of their work, and I realized that their skills might not be as strong as our guest group had assumed. However, I am happy to point you towards the project of Disha Bendre. Check it out!

Project Story

Image for post
Image for post
The only photo we took the day of the presentation doesn’t show the students! (whoops!)

Prior to this project I was a heavy user of Illustrator and Photoshop, but had heard of Sketch and was itching to try it out more than my initial experience while building the 2016 Design Career Fair website.

Image for post
Image for post
Work-in-progress screenshot

It’s fun to take a break from research-heavy work and create an interface based on imagination and play. I wanted to ensure the students would have access to all the resources necessary for the project into the future, so I selected icons available from the Noun Project and Source Sans Pro, a typeface available from Google Fonts.

Image for post
Image for post
Desktop view
Image for post
Image for post
Callouts sheet for the class to reference

If you previously took a look at Disha’s project, you’ll see it’s not pixel-perfect. I’ve forked her repository and plan to work on my own development skills soon, too!


Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store