Basic and Boring
One Blogger’s Attempt at Reflecting and Redesigning
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
- 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!
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
- 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!
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!