Visual Design Best Practices for Blog Posts

It is a new thing for my students to be visually designing their homework. Here are some guidelines and some tips for avoiding common problems:

Fonts

  • Font size
    • Use the default font size for the main text of your blog post. (Headings/subheadings are another matter. ) We want consistency in font size from post to post. Yours should not appear larger or smaller. 
    • Keep the same font size across all parts of your blog post. Learn to use Control-Shift-V (Command-Shift-V on Macs) to paste unformatted text into the Blogger composition window. You can also select weirdly formatted text within editing mode and use the Tx icon in the tool bar to remove all formatting.

    • Do not mix up font sizes within your text, even for block quotations (instead, use the  "quote" feature found in the tool bar to set off a block quotation:



Paragraphs

  • Length
    In a blog post, your paragraphs should not be overly long. When reading electronically we find long paragraphs to be tedious. You may need to break them up more than you would in producing a document for reading on paper.
  • Separating paragraphs
    Double space between paragraphs to separate them. Do not use tabs to separate paragraphs


Photos / Embedded Media

  • Find and Use Images. Blog posts seem naked without them. We need to learn to find and appropriate use visual media when publishing online, including photos, illustrations, charts, videos, etc.

  • Size. Be certain that the image or photo that you insert ends up an appropriate size relative to the surrounding text and to the blog as a whole. Also, make sure an initial image fits "above the fold" (fully within the visible screen without scrolling and before the jump break).

  • Beyond Others' Photos
    You have lots of options for a visual component to your blog posts besides finding and using other's photos. Consider including photos that you have taken yourself (which can up the personal appeal, obviously, but double check on quality). Or, look at using other kinds of visual media: videos, animations, charts, etc. You can also make and use graphics using an easy online service like Canva.com. That's how I made the graphic at the top of this page.

Integrate Visuals

  • Don't let pictures just hang there on your post. If it isn't immediately clear how the image relates to what you are saying, then be more explicit. Sometimes, you may want to interpret a picture, or use a picture as part of making a point (as Peter Cable does in this post)

Links and URLs

  • Use links (sparingly) to connect to related content, or to link to a source, or as part of an attribution. 
  • Link from text that is meaningful. For example, consider the differences among the following:
    • "Enlightenment skepticism is evident in this essay by David Hume refuting Christ's miracles" [Poor: it links from very general text, gives the skimming reader nothing]
    • David Hume's "Of Miracles" refutes Christian beliefs using Enlightenment skepticism. [Better: it links from meaningful text, and gives the skimming reader something]
    • "Even more evidence of Enlightenment skepticism can be found in David Hume's essay "Of Miracles" (https://www3.nd.edu/~afreddos/courses/43811/hume-on-miracles.htm) [Poor: visually ugly. No need to make the URL explicit; it should be contained within a link that is made from meaningful text]


No comments:

Post a Comment