My work for the capstone project of CodeCademy Pro Intensive course "Building Websites From Scratch" in which I've learned HTML5, CSS3, responsive design, accessibility, and Git.
In this capstone project, students were asked to code the landing page for Colmar Academy, a fictious school just newly founded. The layout design was given in the design spec, but the choice of color and typefaces was up to students (see below for how I have chosen the color and typefaces).
The reviewer (a professional web developer) gave me the following comment: "You went so far above and beyond, I am very impressed. It looks great and is very responsive. ... One thing that really stood out to me was how well organized and commented the CSS was. It made it really easy to understand and evaluate. ... Great job going above and beyond making this website accessible with the aria attributes and descriptive alt tags."
Click here to see the webpage I have created for this project.
To choose typefaces and the color palette, I have first developed the design concept: The School of Everyday Life. It is inspired by the messages from Colmar Academy on the webpage such as “Learn something new every day” and “It doesn’t hurt to keep practicing”. The Academy aims to make learning as part of everyday life.
To represent everyday, I have chosen the sky blue as the main color. We think of the blue sky everyday: when it's sunny, we see it; when it's cloudy, rainy, or snowy, we still imagine the blue sky when we say, "Oh no, it's overcast/raining/snowing."
To choose the exact hue and shade of the sky blue, I have sampled the color from a photo of the sky.
For typefaces, I have avoided serif fonts because (1) Colmar Academy is a new school: the serif fonts indicate tradition, heritage, and history; (2) most courses offered by the Academy are computer-based (Data, Computer Art, Software Engineering), and the serif fonts are historically not recommended for screen display fonts; (3) the webpage does not have any long paragraphs for which serif fonts are suitable.
Among sans-serif fonts, I have narrowed down my choices to humanist sans-serif fonts. These fonts have been preferred due to superior legibility on screen displays, which are associated with the computer-based courses offered by the Academy.
Other types of sans-serif fonts are disregarded for the choice for the following reasons.
- Geometric sans like Futura is not an option because it would give a feel of theoretical, brain-centered approaches, going against the Academy’s philosophy of “practicing everyday”.
- Late 19th-century grotesques, even though it’s popular on the web right now, would give a sense of disorganized school curriculums, which could be fatal for a newly founded school.
- Neo-grotesques like Helvetica feel a bit outdated in the 21st century.
Due to time constraint, I restricted my search for humanist sans-serif fonts to the Top 40 Google Fonts listed by TypeWolf. The lion logo on the top-left corner of the webpage goes well with Cabin 600, with its tail for lowercase L resembling the legs of the lion. This font is used for headings. For paragraphs, Raleway Regular is chosen as Google Font website recommends pairing it with Cabin.