When people say ‘you can’t teach an old dog new tricks’ it’s not true, because you can reinvent yourself and learn new things whenever you want.
— Jonathan Van Ness, Queer Eye, Season 1: You Can’t Fix Ugly

 

I may not be an old dog, but I am however someone who has never learned a thing about graphic design until now. Although that is the case, I do desire to reinvent myself and my teaching in regards to the content I create for my classroom. I can tell I am really going to love this design course because when I started researching this week, I literally could not stop wanting to find out more about it. Just from this first week alone, I have ignited a passion in myself I didn’t know was there, and I already picked up some new tricks that will make my content creation more readable and engaging. In honor of my most recent Netflix binge, Queer Eye, I decided that I would give my blog a makeover that focused on 5 areas of web design that coordinate with the amazing Fab 5.

1. Interior Design=My Blog Overall Design

The first and most challenging area I knew I needed to tackle before I could do anything else was to choose a completely new design theme. This choice was pretty easy for me once I was sent the email about the Divi theme with visual builder as a new option. I immediately decided I would switch my blog to this so I could do some more detailed design work. Little did I know this would be a HUGE undertaking.

Seeing my blog change so drastically was quite shocking to me and got me really worried. Based on the most recent eye gaze tracking research from 2017, I knew at this point I needed to make some serious changes to customize my blog to the way I wanted it so that it was more visually appealing and engaging. So I started tinkering with it.

The process of learning the web builder was pretty time consuming. It was basically like this:

1. Find what I want to fix

2. Find and watch a few Youtube tutorials on it

3. Try it out

4. Fail miserably

5. Repeat steps 2-4 until getting it right

*I also asked for help from others who were more experienced with this kind of web design than me when I got really stuck.*

Since this whole thing was so new, I had to spend many hours watching tutorials or asking questions to get it where I wanted it. Even though it took so much time, I was really engaged and motivated to do it because my interest level and desire to learn it was so high. Here is how my blog ended up now.

Makeover Complete

In the next four sections I will go into more of why I chose the little detailed changes I did on this blog.

2. Grooming = Text Style & Size

The first thing that I knew I needed to do was change the text style and size. My original blog had a lot of serif fonts (fonts with feet) which, from this article, I learned can be difficult to read on web pages. In order to make my new blog better, I decided to only choose fonts that were sans serif (without feet). I did however leave my blog title with a serif font because I just liked the way it looked a little better. I also made sure to check that my letter sizing and word spacing was sufficient for ease of reading.

3. Culture = Personalization

The next section I wanted to focus on was to make sure that my blog showed a true reflection of me. In order to accomplish this I started by looking at the widgets I would add on my page. In my original blog, I had a lot of widgets in the side bar that became a little bit fuddled and messy. For my new design, I decided to remove all sidebar widgets so that the blog posts were more easily seen and I added them to the footer instead. I kept my ‘Other Blogs’ and my ‘CC Copyright’ widgets while adding my Twitter feed as well. I chose those things to be there because they show a lot more about me and who I am as a person and educator.

I also updated my ‘About Me’ page and added my personally created emoticon as a logo on my page and as the site icon in the browser tab at the top of the webpage.

 

4. Fashion = Images

When thinking about the images I wanted to use on my blog, I was very intentional. In an article I found by Trivantus it said,

“Your image should be more than just generic clipart. It needs to stand out and grab your learner’s eye. Use bright colors and detailed images to draw your learner in.”

So that is exactly what I did. I chose a header image I found on Unsplash by Viiktor Forgacs that I thought would catch the reader’s attention and had bright colors and details. I also was careful to make sure it was CC0 so that I was following all copyright laws.

The other thing I did in relation to images was to add featured image thumbnails to my blog homepage. I did this so the reader could get a better view of what each post was about and it would grab their attention more to read it. To do this I had to go back to every post I have ever made and upload a featured image to each post one by one. The one problem I am still encountering and trying to fix is to make my image thumbnails the same size. Right now they are all different so the columns are not aligned, however I would like them to be. I will continue to tinker with this to hopefully fix it the way I want it sometime soon.

5. Food = Color

I thought that the food area from Queer Eye would relate well to color choice when designing because both food and color can cause some strong feelings and emotions to occur in people. The colors that I stuck with on my page were oranges and yellows. I chose them because in another article by Trivantis I learned some interesting things…

YELLOW  “stimulates serotonin (the feel-good chemical) in the brain.”

ORANGE “invokes feelings of sociability, enjoyable connection and happiness.”

I stuck with those colors throughout my entire page while at the same time I tried to make sure they were not over used so that it was still easy to read.

Final Thoughts

After all is said and done, I feel as though the Fab 5 would be proud of my blog transformation makeover. It went through many phases of change this week but I think in the end it has turned out for the better. I am so very glad that I took the time to learn about how to use the Divi Builder as well as learn best practices for web design. I now have my page how I want it, however I plan to make some more changes to perfect it as I learn more throughout this course.

If you have any tips or ideas for me after viewing my new blog page, leave a comment so I can make it better for you the reader.