Blog Design 2.0

Basic and Boring

One Blogger’s Attempt at Reflecting and Redesigning

Image by Freepik from freepik.com

I know, I know, you don’t have to tell me.  My first blog was an example of the two B’s: basic and boring.  I guess if I want to be kinder to myself, it could be seen as plain and simple. If I was a reader looking at my blog, the first thing I would notice is the lack of color. There is only grey, white and black and in plain English, boring.   There are no images and it’s all text.  Once a post is open, you can see photos and images but they are small in comparison with the amount of text.  Blog posts are broken into smaller paragraphs for more digestible content.  A reader can tell what the paragraphs will be about by reading the short header or sub-header that is in a larger font.  In that regards, the repetition of this pattern gives the reader an idea that the header is a big idea and that the paragraph will go into further detail.  In the article 6 Principles of Visual Hierarchy, two different reading patterns are discussed.  My blog posts, although basic and boring, followed the F pattern. The headers are left-aligned on the left and allow readers to scan down the left side and move right for more information based on the headers on the right. Looking at it critically, the blog lacks color, space, and texture that would break the monotony of this text heavy pattern. 

My Dream Blog

My dream blog would have the following:

  • Z pattern
  • Color!
  • More visual representation or graphics

Even though my blog follows the F pattern in the blog post, I would prefer if the homepage would follow the Z pattern.  Important information and buttons would be along the top and the newest blog post would be in the middle.  In both the Guide to Visual Hierarchy and the 6 Principles of Visual Hierarchy, it stresses the importance of having a typographic hierarchy with both the size and weight of the font.  This allows readers to understand which text is more important and should be read first.  The newest blog post would have a larger typeface for the post title and then a smaller font for the post excerpt. I would place my previous posts as smaller photos with the same paired typeface, albeit smaller in size to match the photo.  I would move all of the things that were normally on the right as a sidebar as a bottom menu to go follow along with the Z pattern such as the categories or recent comments/posts. I would love to add more visual representation like charts and graphs but I struggle with creating my own.  If anyone has a great website where I can find these, please share! Sometimes I just don’t feel that my mind is creative enough to create something that can represent my thoughts. Although,  it’s not like anyone else can read my mind!  

My mock-up of the blog was not exactly what I wanted it to be because of the limitations of Pages but I thought it was a pretty close representation of what I think I might like.

Time for a Change

The first thing I changed was the color.  As much as I like the simplicity of the blog, the muted colors felt a bit disengaging.  After playing around with the customization, I changed the background to a green that reminded me of the sea and gave off calm vibes.  I also added a photo to the header to give the website more weight. I really wanted to give the blog a more Z pattern but I was limited with the themes that were offered.  I tried using Divi but I ran into some restrictions and trouble in adding images or getting rid of the divi logo.  I ended up choosing a theme that was the closest to what I wanted for my blog.  I wanted to have a menu running across under the header but didn’t know what I wanted just yet so I gave a button for different categories that I had already created but I did create an ‘about me’ page just for this menu.  I didn’t have control over the fonts that was used because it was part of the theme (or never figured out how to do that) but the theme that I chose followed the rule for typography. 

In addition to the design for the blog, I wanted to practice some great tips from How We Read Online for my content.  Cynthia Marinakos writes that these are the 6 ways we can help readers going through our content:

  • Active voice
  • Inverted pyramid
  • Front-load keywords
  • Microcontent
  • Chunk
  • Plain English

Even though I’m not a professional writer, it’s never a bad idea to learn from the pros!  For the most part, I write like I’m having a conversation with the reader but could do a better job of writing in an active voice as well as having shorter sentences.  I added some bulleted lists on this blog post and I look forward to trying more of her tips in my upcoming blog posts! 

Photo by Arnel Hasanovic on Unsplash

My biggest takeaway from this week’s reading is that websites are a combination of good content design as well as good visual design. Not only is visual design is another tool in our engagement with readers and good design helps communicate and get our information across.  This week’s reading was really great for my students as well because teaching good design to my students is actually something I struggle with.  I can point out which designs are good but have a hard time pinpointing what actually makes it good.  With my youngest students, the design elements are more obvious.  When using fonts, they are allowed to use any fonts that they can read.  When using background colors, the rule is that they must use one dark color and one light color (for the background or the font) to give it contrast. After learning more about visual hierarchy, I’m excited to share this information with my students as well giving my website a much-needed facelift! 

2 thoughts on “Blog Design 2.0

  1. Thanks for walking us through your blog redesign Boramy! I struggled with a lot of the same things that you did as I went through the process. The biggest thing was the limitations that the available themes put on us…so frustrating when you know exactly what you want and can’t figure out how to do it.

    I really like the colour palette that you chose. Its light and bright, but not so bright that it is distracting. Definitely an improvement on blacks and greys. You mentioned that you struggle with creating visuals. This is something I also don’t think I’m particularly good at, but I have a couple tools that I have found helpful. Canva, which has a million templates so that things start off looking good, and if I don’t change too much it stays looking good. The other is surprisingly Google Slides. I’ve found that for the quick creation of simple charts or graphics explaining something, it is actually quite flexible. It’s easy to create a custom sized slide to match what you’d like to create, and then the fact that I’m already using Google apps all the time means that the design process is a little more intuitive than with other apps. This is what I create most of my visuals and organisers for my students in.

    I love that you talk about passing this learning on to your students. There is nothing more horrifying than young students font colour choices. How can they possibly think that yellow text on a white background is a good idea! I like that you have basic guidelines that are teaching them good design principles and making life easier and more bearable at the same time.

    Thanks for a great post!

    • Mike – I totally feel your pain! My students always think yellow on white is a great combination and I tell them all the time that yellow is NOT ALLOWED (at least not in markers) ha. Thanks for the suggestions for canva and google slides! We don’t get to use google a lot at work since I’m based in China but I do use it personally. I just don’t normally make a slideshow presentation for fun 😛 I’ll have to dig deeper into canva, I found that it wasn’t as intuitive when I tried using it awhile back – I definitely find easel.ly easier because I have something I want and can create it exactly the way I want it. I agree that Canva has lots of great templates and designs though! I think if I’m looking for a design of something, canva would be it but if I have a distinct idea of what I want, I go to easel.ly. I ended up making lots of little logos for our slides via easel.ly because of the slide limitation.

Leave a Reply

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