chris.wong_Exercises3

 []
 * ** // Phase2 Design Studio // **

The Phase2 Design Studio website was created to promote their work (mainly website designs) and explain their design process in hopes of acquiring new clients. The content of the site is laid out vertically on one page allowing visitors to simply scroll down to find information instead of looking for buttons to other pages. There is also a sidebar next to every main section of the page, which permits visitors to jump to any of the other sections. The vertical arrangement of information enables the website’s designers to determine the typical order that visitors view their site. Most of the shapes in the website are soft and rounded and the colours are muted with the exception of the section headings which are slightly more vibrant. The type used is a mix of a light weight slab serif and a condensed sans serif with rounded edges, matching the other rounded vector shapes. There is clear hierarchy between the headings, sub-headings and body text created by size, colour and typeface. Between each section there are large amounts of space, filled with supplementary images and subtle animations, that moderate the pacing of information and add a bit of quirkiness that makes the site feel more alive. Additionally in the gaps between the sections, there are small links (like DVD easter eggs) that lead to additional information outside of their site (ie. twitter feed, Dribble account etc.) and add a level of discovery to the website experience. The studio’s logo sits fixed at the top left of the screen but it has been layered behind part of the main content so that it appears to be flowing through the network of pipes that runs throughout the website. Overall, the website is quite innovative in the way that they used graphics to create a warm and welcoming user-experience. ||  || ** // Hearts' Cry Inc. // ** http://heartscryindia.org/

The goal of the Hearts’ Cry Inc. website is to explain how they provide aid to an impoverished village in Southern India called Mattampally and persuade visitors to donate to the cause. The home page of the site displays a randomly selected image of the people from Mattampally in the background with a large oblique message along with buttons to the three main sections of the site layered on top to create a dynamic composition. The main message is in white to contrast the background image and the three buttons are in yellow and black to stand out even more. A pixilation filter has been applied to the background image and the photos always stretch to fit the screen but don’t lose their quality and don’t warp. When a visitor clicks on one of the section buttons, a large yellow band stretches across the page, revealing the content. In each section the black type stands out against the yellow band and typographic hierarchy is created through variation of size, form (oblique and roman) and typeface. In each section there are tabs on the left which indicate that there is more to read in the section. The sections use multiple pages because they want to keep the compositions of the yellow band against the background image static. Additionally, the top navigational bar allows for easy accessibility to any of the sections. This site is innovative with its clear and simple navigation and its reserved use of text and image but it also relies on conventional website designs for navigation. ||