BCIT
British Colombia Institute of Technology
COMP 1950 | Intermediate Web Design and Develpment
Rationale
The group project required a web site redesign for the COMP 1950 Intermediate Web Development and Design course. The existing site has an outdated, minimal style and information architecture. Due to the content amount and organization of it, it requires long vertical scrolling which slows down the information finding process. Adding to that is the small font size, inlcuding in the navigation, with little hierarchical distinction. The right sidebar navigation is small and doesn't stand out as the obvious main navigation choice.
From a design point of view, we chose a css3, right sidebar navigation with a discrete background neutral green/red logo and a hierarchical visible menu, in black and white. On the righ content side, the white space helps distinguish the page elements. The h1...4 tags are used semantically for SEO and add hierarchy.
The course has quality content for the purpose. We chose to place it in collapsible pannels organized by the main sections and kept the existing labeling. This creates a visibly hierarchy and a quick overview of the main titles for easy information finding, avoiding long page scrolling.
Troughout the site, the color scheme is an analogous black and white for the menu, a complementary neutral green and red for the logo and titles and a medium grey for the text.
We used Helvetica Neue for the h1...2 tags and Lato for the rest of the text, including the logo and the menu.
There is a normalize_v7.css stylesheet in the header to start with. We then imported bootstrap, jquery stylesheets and script libraries for the collapsible pannels functionality, and the w3.css for the css3 layout.