1. Successful Grid-Based Design 

This web design borrows its idea from Mondrian’s mosaic-like painting called “Composition with Red, Yellow, Blue, and Black” which was made in 1921. I’m sure you know this painting which is known for its heavy color contrasts between the individual tiles. The web designer uses the idea of Mosaic as a design grid which allows for the best possible usage of the given space of rectangular screens. At the same time, the contrast colors such as the blue and the red, the white and the black grab the vistors’ attention immediately. Most importantly, the web designer connects tile designs with animations which create some dynamic and impressive layouts.

2. “Breaking the Grid”

I believe this website is a good example of the web design which breaks the grid rule successfully. This website has a video background which immediately attracts me. Sometimes, I think a big and bold image says more than thousand words and complicated arrangement. These concise animation and allow movement to be created which without taking too long to load, while the short sentences engage all-encompassing statement about its services. Therefore, it creates a clear, unified message to visitors that what they design is always human centered. In this new digital information age, we are information-overloaded, but these kinds of concise yet powerful web designs promote clear and effective communications.

 

3. Unsuccessful Design

This is a screenshot from a website which provides decoration services for driveway gates at home. Although this website do follow the gird rule, the visitors cannot obtain any useful information at first glance. We can tell that this is an unsuccessful web design because the information is overwhelmed and too much contents are listed below which distract our attentions. Also, the website has font sizes that are too small and not reader-friendly.