A tremendous amount of data has been presented to the public about Covid-19 infections rate, vaccination, deaths, etc. It is easy to get lost and become un-informed or misinformed only because of the complexity and abundance of the data.
My challenge is to create a visually appealing and engaging infographic about the impact of Covid-19 on Canadians, from a social and economical aspect.
The main topics is split into 3 sections: HEALTH, POPULATION and INFLATION. An interactive pie chart allows the viewer to access the section he wants to access. Each part of the pie chart increases in size on hover. Each section is split into different sub-sections presented in a different format, such as cards, inline text, and dropdown menu. Some of the datas are presented in bar graphs with a hover state allowing us to see the exact data when hovering a specific bar.
The wireframes and low-fidelity prototypes are achieved as the first step. A good headers/ sub-headers hierarchy is established and all the design aspects are created in Figma, and illustrations in Adobe Illustrator. Once this part is complete, I identified each HTML container, that I need in each section, in order to construct the bone structure of the web page and allow the transition smoothly into Webflow.
To begin with, the first step involved establishing the style of the web page, which included deciding on the overall look, color palette, and typography. After careful consideration, I opted for a sleek and professional color palette with shades of blue, green, and gray, complemented by a bright red for small details. The reason for choosing red was its symbolic significance to Canada. Additionally, I incorporated a drop shadow effect with rounded edges for the icons and graphs, which adds a touch of sophistication and futurism. Circular lines were also used to convey a sense of progression, as the data displayed on the website are likely to change over time.
For the typography, I selected Montserrat as the main typeface for its elegant simplicity and geometric form. This typeface looks great on websites and perfectly complements the overall design. To ensure readability, I used Open Sans for the body types, which goes well with Montserrat and offers high legibility. I found it pleasing to use two sans-serif typefaces for this project, as they interact with the viewer in a straightforward way.
