Out with the old and in with the new! I’ve had this website since 2018 and I started things off simply with a minimalistic theme that made things easy to find. But it seemed somewhat under-designed in some ways. After doing a bit of reading on the elements of good design I felt like it was time to rethink the ol’ website. I wanted to keep things focused on the content, but somehow make it look more polished. So using some ofthe rules of design that I learned, I rethought how things look. Let’s jump in!
Below is what I started with as my main page. The design principle that it demonstrated fairly well was the Z-pattern hierarchy. I overlayed a large Z to demonstrate this below.
The eyes would probably move from the large “Welcome!” down to the picture, and finish with the social media links. While it has its own strengths, I was able to dissect the minimalistic theme’s layout.
Based on my Google analytics, I was also seeing that my audience was reading my website for a single deep dive and not often returning. I felt that this might have to do with it looking static and never really seeming to change; that is with a static page such as this, it gave the impression that it hadn’t changed much unless you were to click on “blog” and see what I had been up to lately.
This sent me on a long journey through the WordPress theme searches. I tried on 10. Easily. I think that the frustrating thing was that I didn’t really feel like I had a whole lot of options with these free themes. I decided to look into paid themes. It wasn’t something I had considered before, but man, they had so much flexibility and visual appeal! All of the ideas of design that I had been reading about seemed possible! White space and “padding” could be manually controlled down to the pixel, fonts could be selected and their sizes could be carefully considered to create a visual hierarchy, color and contrast were right out of the box (maybe I added a little flair here and there). Hey this thing looked like it was well designed while still keeping the simple and minimal feeling that I liked. I bit the bullet and paid the fee. Hey, it’s an investment.
Dynamic is the name of the game.
The first scary part done: I bought it.
Now time for the second: learning how to navigate and control this gigantic beast of a theme. This thing had so many menus, I spent 5 hours going through them all and testing each one out one by one. One of the first things I focused on was the landing page settings. As I mentioned above, I didn’t want it to be a static page anymore. It needed to be dynamic and look fresh with each new post. It was time to move the blog to the center stage and the “about” page to the back. That was a huge improvement that I didn’t necessarily see designers talking about in the reading I did this week. Granted the designers discussing visual hierarchy weren’t necessarily talking about the design of blogs. I have to say that through this process, blogs become interesting and engaging when they are updated with frequent, and interesting posts.
Color and White Space
As you might notice from the picture above, there are really three colors in the new theme: white, black, and an orange accent. I think that that is something I will always have on my site, as I believe the content should be king and the theme should promote it. I chose white and black because the easiest thing to read. Ogilvy taught me that. Orange was something to make it all kind of come to life. I like the way that orange and black go together without any particular association of say, yellow and black (i.e. Halloween).
When it came down to white space, I started playing first with the idea of having a Twitter feed like Matt Broughton mentioned in his post. After experimenting with it, I found that it crowded my site and gave less room for the main column of text that I was really trying to feature. So I made the decision to have a single column website. My thinking is that Twitter is linked above in my main nav and it will serve a different purpose. In the end, white space won out and again helped to serve the purpose of content.
I didn’t have a logo yet, but after reading Matt’s post, I have to say that he made it look so much fun and it came across as quite effective. I turned to a few different logo creator websites for inspiration. One that I liked was tailorbrands.com. I tried out a few ideas with their algorithm that produced an option that I quite liked, however, it’s a paid website and I just spent all my pocket money on this glorious, new theme! I turned to Photoshop and recreated one of the logos with with some available fonts from DaFont.com. I used one of the visual hierarchy principles of mixing fonts to make my first name stand out and my last name to almost underline the first. I felt like my first name had personality while my last name showed formality. It was that whole idea of holonomy– being an individual and a part of a group simultaneously.
At first, I wanted to add some sort of fascinator, some color, something to make it pop. But when I tried out the logo in the context of the menu, it looked distracting and when I removed it and put in just my name, it felt almost like a signature that added a feeling of intimacy– like this is my site and these are my stories.
There are countless other changes that I made to the site that I didn’t list above, for those are the salient, major changes. Some of the other smaller changes include:
- the color of hyperlinks
- the icons in the social media page
- the type of highlight the main navigation shows when dragging one’s mouse over an item
- updating the navigation to my more intuitive with a “portfolios” section” & updating the music page with more content that I worked on over the summer. Hey, they’ve all got to be living to be engaging, right?
- Choosing specific fonts for blog posts, Headers (H1-H6), and the title of the site.
- A loading animation (pac man!)
The list, surprisingly goes on. Changing themes is a large task, but in the end, I believe this theme illustrates a more professional, organized, and pleasing website. Probably the biggest design element that I have utilized in this new version white space. Things feel like they have their own space and nothing is too crowded. The color palette is high contrast and there is a visual hierarchy established with font size, weight, and typography.
I hope you dig the updates and they create a more pleasing reading experience! Let me know in the comments!