Design Principle #4: Contrast

"Contrast is created when two elements are different" (65).

"[C]reate some contrast ... their eyes will be attracted to certain parts ... as they skim ..." (72).

I am playing a bit of a contrast joke with my color choice for this principle. I chose blue as an accent color last semester on my first Google Sites page. Dr. Rodrigo kindly pointed out that this was not the best choice as most hyperlinks are in blue, so I was risking tricking my readers into thinking my blue words were hyperlinks. Blue therefore is a terrible example of contrast because "[i]f two items are not exactly the same, then make them different. Really different" (65).

I can see why Williams chose to discuss contrast as the final principle because it has the least rules and allows for the most play. This is exciting for me ... except that most publishing platforms (like Blogger, Google Sites, and Wordpress ... all my platforms) are set up so people do not have to play too much to produce effective design.  So, to get strong contrast in, you need to know how to code - how to get into the backend and change the defaults to make visual impact.  

If you revisit my repetition post below, you will see an example of this.  I wanted to apply what I had learned about alignment and proximity in that post, but I did not like my pictures and the quotes I paired with each all lined up down the left or right side.  I felt this negated the variety of the pictures, and I was trying to achieve a variety within the unity of repetition with those pictures.  Basically, alignment was getting in the way of my repetition goals.  So, after I read the contrast chapter, I went back into this post to create some contrast in my left-alignment by adding code that put a left margin of 10em on every other picture while keeping the proximity of the picture/text pairs.  10em is a big margin, one that is clearly different than the flush left margin and therefore achieves contrast within consistent alignment.

I also did not like the top image and opening text left-aligned. When I originally published it right-aligned, I liked it but felt like I had broken the alignment rule for no reason. Williams was in my head reminding me, "[Y]ou can break [the rules] consciously" (49), and I was not sure why I had done it.  I went with it anyway (there is some Delagrange in me!), and it was only after reading about the contrast principle that I could explain why I had broken this rule.  The opening picture is the "mother" picture to all the smaller ones, and the opening text is the overall definition explored in the later text.  Therefore, I wanted this proximity pairing to stand out as different, and choosing a right-align (congratulate me on not going center-align!) achieves this through contrast.

I have not applied much contrast to my Wordpress site (I do think my choice of right-aligning the essential questions is also contrast).  This is mostly because I am waiting to have my students complete the pages with me.  In my overall design, I have focused more on repetition - looking for a consistent design for the structure of the page.  Contrast can come as we fill in the content, and I look forward to seeing this happen as I work with my students.

I have two final design thoughts that this post has helped me to define ...

• Because I consistently highlighted the design principles in their own colors over these 4 posts, I can see clearly how I am now using them together, as there is just as much orange as blue in this post and a fair amount of green and purple.
• Repetition is my favorite principle.  I liked making that post the best, and noticing as I looked for contrast in my class site that I had really focused on repetition when creating it shows that I design with that goal in mind.

PS - I hand coded to remove the white border around my yellow dots, which required me to add code to the CSS in my blog template then code each image to activate the CSS coding.  It worked the very first time. Woot! 

References
Couch image source 
Dot image source
Williams, Robin. The  Non-Designer's Design Book: Design and Typographic Principles for the Visual Novice. Third ed. Berkeley, CA: Peachpit Press, 2008. Print.