Good Cop Bad Cop: The Rules of Layouts

Good example:

This is an example of a good layout because it clearly integrates the title, body text, images, and pull out quote.  The dark spaces in the photos are used to highlight the pullout quotes. The title is larger and bolder than the body text, but both are connected due to the fact that they are both the same typeface (a sans-serif). Bold, italicized, and regular versions of the same typeface are used.  The different sections of the article are all clearly defined by spaces and bolded text. The pullout quotes are also clearly visible due to the border of differently colored boxes surrounding them. Overall, everything works together to create a cohesive article that is visually appealing.

Bad Example:

http://www.bbc.co.uk/news/education-11287193

Though this article maintains some visual hierarchy by using bold, regular, and different sizes of the same font (a sans-serif), it lacks the ability to tie everything together.  The text is all the same opacity, which makes it difficult to distinguish between the bolded section dividers (which are the same size as the body text) and the rest of the text.  Both the pull quote and the image are off to the side of the text and not integrated into the rest of the article at all.  Due to the busy surroundings of the article with ads and other information from the site, it becomes unclear if the pull quote is even part of the article, or just a separate advertisement.  The image is placed at the top right of the article, failing to draw readers down into the text at all. I feel it would have been a better choice to place both the image and pull quote on the left side of the text, separating them from the advertisements that are all placed on the right.    However, the fact that they have chosen one typeface to stick to creates some consistency.