After reading about the helpful web design visual tips found in Understanding Visual Hierarchy in Web Design, I decided to make a few changes to my blog design and layout. The changes weren’t major, but I think they help make the overall look more cohesive, readable, and visually appealing.
Banner
While I liked the image I created for the banner (it immediately gives viewers a clear idea of the blog content), I decided to darken the image in order to provide more contrast with the blog text title. Compositionally, the diagonals of the image provide some dynamism (this is not a boring business blog) and the two main converging diagonals form a triangle – a symbol of strength and stability.
Background color
I changed the blue of the background to more closely match the blue hue found within the banner as well as that within the body of the blog (text, dividers). This blue also felt rather calming. I also decided to make the value slightly darker, so that the focus was brought more towards the body of the blog, and not wander off to the background.
Sidebar Arrangement
By placing the Tags widget at the top, I felt it provided viewers scanning the page an immediate idea of the blog’s content. Although it is text, the varied size helps provide some variety. I would have liked to place a photo of myself with a link to the About the Author page, but I wasn’t sure how to do this. The Clustermaps provided a needed visual breakup of what would otherwise be a fairly text-heavy sidebar. Diagonal to this, the image found in the highlighted blog post provides balance. The highlighted blog post area, with its visual and animation, provides an initial place for viewers to focus after first seeing the banner.
Menu
Reducing the amount of text, I placed the various COETAIL courses into a pull-down menu. The secondary menu with its smaller font helps indicate that these websites are external. I may play around with this in the future.