Principles of Design: Composition

The end result of a visually decipherable website is often at odds with the piecemeal process of its composition. Designers put in incremental creative effort - using aspects such as colour, typography and layout - that, once integrated, must cross the gap instantiated by the graphic user interface: the gap of the producer and the consumer/viewer/reader. Furthermore, visual composition tends to hit us all at once: the overall effect of the individual design components working together is important.

The difficulty of describing visual stimuli and their impact naturally carries over in the narration of one's design choices. One thing we definitely learned in the collaborative space of DHSI is that to work on creating a website requires having a vocabulary to communicate what desired effect you want to achieve, and through what constitutive parts and processes.

So bear with me!

From the earliest stages of brainstorming, our group found itself employing the vocabulary of visual communication almost unconsciously as we talked through the principles we wanted the visual composition of DHSI Design to achieve. One of the first words used in conversation was "subtle", then followed by the idea that we have one piece of bold design or color. We were enacting in our design process the subtlety-boldness binary of strategic visual composition. Similarly, while discussing the affective impact of the website, Emily suggested that we work with lots of negative space to allow for easy legibility of the blog posts. Here, she was tweaking Alexander White's notion of space as one of "The Seven Design Components". After going off to design the various elements of colour scheme, logo, fonts, and layout, we met to discuss rendering these parts into an overall aesthetic. This was where visual composition had its last say.

Emily and Verena discussed the importance of keeping the negative space of the logo header in sync with the rest of the background. They also coordinated the purple "d" in the header (#8E008E) with complementary colours.

Similarly, they used a monochromatic color scheme to coordinate the blues of the CSS in the balloon with those of the dates, label tags and hyperlinks.

These last-stage negotiations resulted in the consistency-variation and subtlety-boldness principles that undergird the published website.