C3W1: Design, the Visual Hierarchy

I have changed my blog theme a few times. I thought having some limited site functionality (can’t embed videos or G Docs) was because of the theme I was using, turns out, it’s not.

Something I would like to change on my blog but don’t know how: 

  • In the Home page (get there by clicking my website’s title in green), under the slider there are snapshots of each post. I would like to add more snapshots to the page. Currently, only 5 snapshots can be shown at a time. This is the same on every page.

Changes I made to my blog theme:

<span>Photo by <a href="https://unsplash.com/@fabster74?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Fabian Fauth</a> on <a href="https://unsplash.com/s/photos/design?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></span>

Photo by Fabian Fauth on Unsplash

  • I changed the blog post date to month/day/year because this makes sense to me.
  • I added a social media tag (Twitter).
  • I added a manual post slider and set the timer to 2 seconds. It took me a few seconds to understand what a manual post slider was.

Why did you make this change?

  • I read the date by month/day/year
  • I could build my Twitter PLN more
  • I like the manual slider as it shows what I’ve been doing

How might it positively impact the way readers interact with your blog?

  • quicker to find posts when the date is month/day/year
  • readers can follow me on Twitter and I can follow them
  • readers can easily see the most recent blog and any photos I have created or used

Visual hierarchy: I think many visual hierarchy principles are included in the layout templates of  build your own websites (like Google Sites, Wix, Weebly, etc.). For instance, the theme I am using for this blog:

  • the blog title is huge and aligned left (big size gets noticed first, left side gets the most attention)
  • twitter tag and the search bar are in the upper right corner (follows Z pattern of scanning a webpage)
  • site menu runs along the top of the page but under the blog title (follows Z pattern)
  • slideshow of most recent blog posts, some have photos (shows content of blog quickly)
  • when clicking on a blog post, there is a large comment box at the bottom with a bright green comment button (bright colors get noticed more)
  • post text is aligned left (gets most attention

What I’m doing differently:

  • chunking information, using whitespace more
  • using bullet points and shorter sentences
  • adding a photo to each blog post

How will you change your blog posts or lessons after reading about visual hierarchy principles? 

Moving Forward: I think knowing more about visual hierarchy principles will help me to create online presentations that better hold student attention long enough for them to scan information and to find keywords. I’m also going to share Simple Media Group’s infographic: How People Read Online that Joel posted with my colleagues and students.

2 comments to “C3W1: Design, the Visual Hierarchy”
2 comments to “C3W1: Design, the Visual Hierarchy”
  1. Hi, Melanie. Welcome back to COETAIL. I love the revamp on your blog. I was also frustrated with the embedding of videos and Google Docs within WordPress, but eventually, we find our ways. For embedding Google Slides or Docs I go to File and Publish to the web and get the Embed code from there, to be honest, it is very random, sometimes it works perfectly sometimes…

    Maybe we can collaborate, I can help you with adding more snapshots and you can help me figure out how to actually link my social media, I also added that on my blog and it only shows a Link icon (not the twitter logo) and I can’t find where to input my social media URL.

    I totally agree with you on posting more pictures. I am trying to do the same. Looking forward to learning from all COETAILERS. Take care.

    • Hi Luis,

      Thank you for the tip for embedding videos! I’ll keep trying as I haven’t been successful yet, sometimes would be a good change.

      I’m sorry the Twitter logo isn’t appearing on your blog. Regarding how to link your social media; I have the theme Magazino and all I have do is sign in to WordPress, view my blog webpage and click Customize (in the top editing menu) > Social Media Icons > then copy/paste my URL to the social media box of my choice (Twitter).

      I’m doing better with posting more pictures in my blog, especially how the last couple of weeks have been about visual hierarchy and making infographics! Yay!

      Thanks for your reply,

Leave a Reply

Your email address will not be published. Required fields are marked *