Humber Impact

Web Design and Development

A multidisciplinary collabrative project with Humber web design and development students and Humber journalism students.

main

What is this project about?

It is about having an interactive web for humber students to view Federal election’s results and read articles writen by humber Students.

What is Humber Impact?

A collaborative multimedia and data-driven team comprised of students from the postgraduate Journalism and Web Design & Interactive Media programs at Humber College.

Who is creating this web platform?

A team of web design and development students including Alyssa Galinato, Mihoko Schick, Olexander and Saher Jawaid.

What is my Role?

My role is to design this platform, listen to the journalism team requirements, analyze last year’s work and perform jonior web developer’s duties.

What is the duration of this project ?

12 days in October 2019

C H A L L E N G E

Our client ( Humber journalism team ) wanted a responsive interactive website which show article written articles by humber students. More specifically aclean, minimal page where users can determine the elections results quickly, and can visually see which election party candidates belong to. When user click on the map, then the results (candiates, votes and article) must also change. When user click on canditate then a page shows all of election results. When user click on article then more recomended article must also be show. User can filter search articles depending on party and province. Also want an about page introducting the Impact team.

S O L U T I O N

Visual

Must keep the design Clean and minimal. Show a complete white background and avoid all colors for design or branding for humber. Using balck and White for typography. Using slight gray color for backgrounds if needed. For full visibility showing a full map on the screen. Use right side for articles and election results.

gray election wireframe

Colors

All the colors must represent each party. Liberal (red), Conservative (blue), NDP (Orange), Green party (green) and for Quebecios is skyblue. Overall highlight the winning party color on the province or the city when zoomed in. Also any written articles related to specific party must represent their color.

Interactive

The results on right are interchangeable. Must be able to click on the map to see the of the provice on right. Map also has the capabilty to zoom in and out. As the user click on the map, news articles on the right also changes. It shows the most recent articles at the top.

W E B - D E S I G N

election home page election article page election single article page election modal  page about page

R E S U L T S

As a team we were able to accomplish the interactive part of the web in very short period of time. Some changes to the design were made for the devolopment. Click on humber logo to see humber impact 2019 site.

humber logo

Disclaimer: Please note that I do not own any of these images. I have only used them for school project. All the map images are taken from Cbc News. Also all the Candiates images taken from wikipedia.

© Saher Jawaid 2020. All rights reserved.