Design Principle #2: Alignment

Alignment

Nothing should be placed on the page arbitrarily. 

Every item should have visual connection with something else on the page (33).
 
I am a center-alignment user.  I admit it, and well, I can't deny it anyway because all you have to do is look at the post right below this one to see my center-alignment in action.  But that is about to change!

"A centered alignment often appears a bit weak. If text is aligned, instead, on the left or the right, the invisible line that connects the text is much stronger because it has a hard vertical edge to follow" (35). Before I could even apply alignment to my class site, my blog was in need of some serious help. Ironically, my "Designing for 'Wunder'" post had the worst offenses with center-alignment. 

Original Post

Notice the quotes, made even more noticeable by my font color and bolding choices.  The funny thing is, I hated how the quotes naturally spaced within this center-alignment when I first published it (the number left all alone on the second quote is a glaring example), but I did not fix it. I find the spacing in Blogger to be really finicky, so to be honest, I just did not have the energy to go in and add enters to even out the spacing.  And to be more honest, I did not even consider changing the center-alignment.

Revised Post

Now look at my post.  I chose to right-align the quotes so they stand out as different from my text, but both the quotes and my text have a strong vertical sight line to the header rule line ["Although these two elements still have two different alignments ..., the edge of the [right-aligned] ... text ... aligns with the right edge of the thin rule above, connecting the elements with an invisible line" (41).]  I also spent time manually "entering" to make the lines of quote somewhat equal within an overall quote.  Turns out, with these alignment changes, my quotes stand out even more effectively than before.  Clear results of alignment design!

And while I am now itching to fix all of my posts, I need to focus on my class site.  If you have been following along with my design practice, you might remember that in my proximity play, I chose center-alignment for my course's essential questions. When Williams wrote, "A centered alignment often appears a bit weak. If text is aligned, instead, on the left or the right, the invisible line that connects the text is much stronger because it has a hard vertical edge to follow" (35), I had to pause. What this meant is that I had put my most important text into the weakest alignment.  However, Williams also recognizes that rule-breaking is okay too.  In fact, I felt like I had read her mind when I wrote about rule-breaking in my proximity post because I had talked about how I needed to know the rules before pushing back against them.  Williams wrote,  "Robin's Rule about Breaking Rules: You must know what the rule is before you can break it" (49).  Maybe she and SusanDelagrange are more on the same page than we might think.

My Original Homepage

So, off I went to my course homepage to see if I was using the center-alignment intentionally as rule breaking or if I needed to change my alignment.  Here is my original homepage again (notice my choice to right-align all of my images in this post versus center-align them!). When I look with alignment eyes at this page, the questions seem to be floating without an anchor.

My Right-Aligned Homepage

So, I tried right-aligning plus adding enters to make the lines of text equal.  What I got was an incredibly large blank space.  The extra-long third question was the problem ... but I was stuck on this because I do not want to rewrite essential questions just for design reasons.  So, I revisited my questions with this in mind. Did they say everything I wanted them to say? Could I adjust the wording and keep the meaning - or even clarify the meaning?  Turns out, the answer to the first question was, "No," and to the second, "Yes."

My Revised Questions

I added a new third question because I realized that the link between my second and last questions was not clear.  I then condensed my last question so that it fits on one line, and I think this revision makes it clearer because the list of three items in the longer version required the reader to keep a fair amount in her head as she read the whole question.  I also like how the final question moves into the white space, making it the sub-question the reader focuses the most on.  Since it is the sub-question that brings the other sub-questions together, this focus is a good thing.

I do not want to accept traditional alignment design blindly though, just as I wanted to push back against proximity, so I want to end by thinking about Williams's reasons for alignment: "Lack of alignment is probably the biggest cause of unpleasant-looking documents. Our eyes like to see order; it creates a calm, secure feeling. Plus it helps to communicate the information" (43).  When I look at my three different homepage images, I definitely think the final one is more "[pleasant]-looking."  However, I do not necessarily think the final design is "calm[er]" or more "secure."  In fact, I think left-aligning the questions would do that ["Until you have more training, stick to the guideline of using one text alignment on the page ..." (40).], but this would also make the questions less prominent than I want them to be. So, bending the rules works for me here, but I am still not breaking the rules because I am not combining center- and right-/left-aligned.  I feel right now that I can play with proximity more than alignment - that is, the traditional rules of alignment are pretty effective.  Maybe this is because there are less options with alignment - left, right, center are pretty much your choices.  I wonder as I play more with design, with the next element being repetition, if I will continue to feel this way and if any of the upcoming principles will be ones I feel I can play with more.

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