Layout Critique

This is an assignment I completed for a course called Design & Authoring for Online Media as part of MRU’s Technical Writing certificate program. The first assignment was to complete a layout critique of two WordPress blog themes. The instructor gave us the option of writing this as a traditional assignment (i.e. essay format) or posting it on our own blog. To take advantage of the opportunity to write the critique in the context of a blog post, the comparison follows below. I created a dummy blog called YYC Tech Writer. I then applied the two themes I chose and took various screenshots to use in the comparison.


Overall Theme Design Comparison

*click on the images to view full size

The first theme I used is Escutcheon, described as a big, bold, beautiful theme for writing. The overall aesthetic is minimalist with a dark background contrasting against the blue header text and light grey body text. This design allows the content to be the star as theme images and other embellishments are not used. Both the header and base fonts, which are the defaults set for this theme, are sans-serif; Oswald (in uppercase) is used for the header text and Alegreya Sans for the body text. Although both fonts used are sans-serif, the simple block-shaped letters of Oswald complements the more calligraphic-style of Alegreya Sans. As the intent for this theme is to be used for writing, setting a sans-serif font for the body text is ideal to aid in faster reading, especially for text-heavy blog posts.

The second theme I used is Button, described as a stylish, lighthearted theme for crafters, hobbyists, and creatives. In contrast to Escutcheon, the Button theme – while still maintaining a minimalist aesthetic – opts for a light, patterned background and a center-aligned main content area in white. Unlike Escutcheon, this theme’s default fonts are a serif font, Lora, for the header text and a sans-serif, Lato, for the body text. The calligraphic nature of Lora suits the intent for this blog, with the sleeker look of Lato for the body text being a visual complement.

Overall Impression

Escutcheon Theme

The Good: The minimalist aesthetic lends itself well for this theme as it’s meant to showcase writing. Without a lot of the flashy embellishments of a more visually-centered/image-heavy theme, the text becomes the main star. I think Alegreya Sans is a great choice for the base font because of its readability; it also has some calligraphic flair so it doesn’t end up looking boring or stale on the screen. This font guides my eyes across the text quite fluidly.

The Could-Be-Better: I’m personally not a big fan of light text on a dark background as I find it harsh on my eyes after a period of time. However, the text does stand out against the background which provides good contrast for readability and some readers may not be bothered by the light text/dark background scheme.

Button Theme

The Good: The aesthetic matches the intent of this theme as the use of the light patterned background and font colours give this theme a lighthearted feel. The serif font (Lora) for the header text gives this theme its stylish flair, while the colour provides a nice visual pop in contrast to the light grey pattern and white background of the content area. The choice of the sans-serif font, Lato, works well here because of its readability and it complements the calligraphic nature of the header text.

The Could-Be-Better: The light grey of the main body text may be a shade on the “too light” side, as I find text that is light in colour to be harsh on the eyes, similar to the effect of light text on a dark background. Again, some readers may not be bothered by this.


Blog Post Style Comparison

A featured image was set to see how it would be displayed in both of the themes. In the Escutcheon theme, while it’s not visible on the main page, the image spans the full width of the content area in the blog post. The generous spacing between the site title and the featured image highlights the blog title Hello, World; this use of white space provides a visual break. The blog post information, such as the author and the publishing date, grouped together and aligned left above the featured image, provides some white space as well.

In comparison, the featured image is displayed on the main homepage in the Button theme (refer to first screenshot), however it is not displayed in the actual blog post. Similar use of generous spacing between the site title, navigation menu, and the blog title in this theme also provides a visual break between these elements. The blog post information (author and publishing date) is also grouped together, but center-aligned below the blog post title. This use of proximity provides cohesiveness and allows the blog post information to be easily found by the reader.

Both themes default the main body text to left alignment, which is most ideal for blog posts with large amounts of text the aid the eyes in scanning the page from left to right, top to bottom. An appropriate amount of white space separates the image set within the paragraph – also left-aligned – from the text; visually it appears that the spacing between the lines and the padding around the image are similar.

A numbered list was added between the paragraphs to see how it would be formatted. The spacing between each item of the list is identical to the spacing used in the paragraphs. This provides repetition that is visually pleasing for the reader and clearly indicates that this is a numbered list.

The limited width of the main content area in both themes aids in the scanning of the text because the eyes don’t have to travel the full width of the screen to read the post. This is an important design factor due to the variation in screen resolutions and sizes.

Unlike the Button theme, which uses a consistent content width for both the homepage display and the blog post display, the Escutcheon theme restricts the width of the content area for the main text of a blog post (see screenshot below for reference). Although the featured image spans the full width of the content area, the main blog post text is shifted to the right; the padding on the left appears to be about a third of the width of the full content area.

escutcheon02

A right-aligned image was embedded to see how the theme would set the spacing; the padding appears to be similar in both themes.

Images were embedded as a circle thumbnail gallery in the above screenshots; the galleries appear to be similar in both themes. A block-quote was also added in the text for comparison. The Escutcheon theme left-indents and italicizes the block-quote; the font size appears to be the same as the main body text. The Button theme also left-indents and italicizes the block-quote, however the text is larger and lighter in colour than the main body text. In both themes, it appears that there is double the spacing padding the block-quote from the other text, which provides generous white space to represent a visual break and a distinct look and feel to differentiate it from the main text.

Overall Impression

Escutcheon Theme

The Good: The extra padding in the main content area to decrease the width was a great choice for readability as I can scan easily from left to right, top to bottom, without having to go back and forth between the full width of the content area. The generous use of spacing between the lines of text also increases readability as the blocks of text are visually separated.

The Could-Be-Better: None specifically. As a general note, the light text on the dark background became hard on the eyes after a few paragraphs, which is more of a personal preference.

Button Theme

The Good: Limiting the width of the main content area was a great choice for readability (similar to the Escutcheon theme) as I can scan easily from left to right, top to bottom, without having to go back and forth between the full width of the content area. The generous use of spacing between the lines of text also increases readability as the blocks of text are visually separated.

The Could-Be-Better: The lighter grey of the block-quote is difficult to read against the white background.