Design Principle #1: Proximity

Proximity

"Items relating to each other should be grouped close together ...

This helps organize information, reduces clutter, and gives the reader a clear structure" (13).

My Class Homepage

You have already seen proximity in action in this post.  On its default text sizes, Blogger puts spaces after all sizes except "normal."  Therefore, if I want larger text, my small text is automatically moved away like this:

Proximity

"Items relating to each other should be grouped close together ...

This helps organize information, reduces clutter, and gives the reader a clear structure" (13).

My proximity is taken away, and this is really interesting to me.  Blogger's auto-design does not easily allow for actual design.  However, if you know HTML coding, you can change your font size without the automatic breaks being added.  One line of code - span style="font-size: large;" - with its matching end code did the trick for me.  Now my main headline is in proximity to the definition, showing that the definition is for the title, but it is clear that proximity is the main topic of this post.

UPDATE:  After publishing this post, I saw that the space I am seeing even now between my title and definition in the now crossed out example does not show when published. Why in the world would Blogger do this??  Spaces between paragraphs show here in composing mode as well as when published.  Why would they show other spaces that do not actually appear when published?  That is just dumb default design to me -- as if I should not care if the spaces are there or not.

Wordpress, like Blogger, also handles a great deal of proximity based on the theme you choose.  Not that you cannot change proximity in a theme, but when choosing a theme, proximity for me is one of the main reasons for my choice.  Do I want just a main title or a subtitle in proximity?   How close do I want my header to the title?  To the text?  How do I want the main content of the page grouped?

So, I made overall proximity choices by choosing my theme, "Twenty Eleven."  I liked a title and sub-title so I could have a little tagline for my students to see right away.  I also wanted a header image that stretched all the way across the page to have proximity with all possible alignments I would choose in the subsequent text.  I also wanted this header to be narrow so its proximity to both the title and the content below were evident without having to scroll down the page.  I find that I want to see something about web pages that I visit at first glance, so having tight proximity at the top allows for viewers to see more right away.

I also wanted a navigation bar running horizontally under the header image versus down the side because the navigation is the most important thing about my site (since I want my students truly using the site). Its proximity to the title and header shows this.

When I started to add content, I made specific proximity decisions beyond what the theme defaults too.

• I chose to move my sidebar from the default of the right to the left (which is alignment, I know! But I did it for proximity reasons ...).  I want the rotating literary quote to catch the viewer's eyes right away, and having it in proximity to the header as well as in the natural entry point for traditional text reading achieves this.  But I like how the quote is not actually a literal entry into my site.  Instead, it sets a literary tone while also, through its rotation, shows that new things will appear with new visits.  The quote got lost when it was on the right and when it was not the top item of the sidebar.
• I chose to center my essential questions because I want them to stand out by not being grouped with the  rest of the left-aligned text.  [There comes alignment again, but even Williams herself writes, "Although I discuss each one of these principles separately, keep in mind they are really interconnected. Rarely will you apply only one principle" (13).] These are the questions we will think about each day, so they should stand out and make someone wonder about their importance.  
• I tried a fair number of different font sizes and effects for the questions.  I got rid of the double space that happens in Wordpress when you hit enter (using the same coding as I explain above) so they stay in proximity with each other.  I made the first question larger because it is the overarching question, so the next two are clearly sub-questions, yet still clearly part of the overall question group.
• For the remainder of the content on this page, I matched the left-align of the sidebar to show that this information is not grouped with the questions.  I matched the heading sizes to the smaller questions' fonts, but I spaced them down lower so it is clear they are not questions and are not as important.

Before I move from proximity to Williams's next design principle, alignment, I want to push back.  Susan Delagrange pushes back against the assumption that hyperlinked reading should be laid out like traditional alphabetic text in that it should be clear through proximity what path the author intends the reader to take through the links (108). She offers an alternative, "But what if designers of interactive digital media imagined a more engaged reader ...? If we were designing for that reader, then we would want to create a digital Wunderkammer, a hypermediated thinking space that would allow us and our reader to explore, to move things about, to seek out curious and unexpected connections, and to defer closure and certainity while we consider the possibilities for rhetorical action that different arrangements of our evidence might suggest" (108). That is, the traditional definition and application of proximity need to change for digital media.

What I have learned is that in order to do what Delagrange proposes, I needed to know the traditional views of proximity.  With this knowledge, I can see if a choice I make is truly my own choice or something embedded in years of consuming traditional design.  I have loved playing like this -- embracing traditional uses of proximity when they work for what I want to achieve and flouting them when they do not.  My placement of the rotating literary quote, which I explain in the first bullet above, is one example of this.  I use traditional proximity (the content that is closest to the title and is left aligned is where you "should" start reading) to know where my readers will naturally look first, and I place something unexpected there.  I also apply these ideas on my other course site (see my post).  I am having a ball with design.


References
Delagrange, Susan. Technologies of Wonder: Rhetorical Practices in a Digital World. November 2011. June 23, 2012. Web.

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