GDPR compliance notice: my website uses cookies to improve and personalize your experience and to display advertisements (if any). It may also include cookies from third parties like Google Adsense, Google Analytics, or Youtube. By using the website, you consent to the use of cookies. If you do not agree, kindly close the tab! Thank you,

-Alex

Ok
Blog

Site Redesign!

Site Redesign!

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!

Before…

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.

I took some notes on the front page and as you can see that I wasn’t particularly fond of much other than the location of the social media buttons! Ha!

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

The flag of Alexania!

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.

Logo

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.

Conclusion

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!

4 Comments

  • Hi!
    I love the changes to your website as it seems like you reinvented the whole page. I also have ideas of what more I should attempt on my own blog post. I really like the idea of using almost a signature (first name) as your logo. Also, the simplicity and lack of crowding on the website keeps the reader focused.
    In addition, the top bar that has the links and contact information makes it easy for the reader to connect through various social media links. I may copy you on that!
    It is also great to show yourself working through your website with and actively thinking out the changes that you wanted to make. I have learnt more about potential changes that I can keep on making to my blog post.

    • Hi Saadia,

      Thank you for your reply! I’m glad my efforts could be of some inspiration to you!

      Alex

  • Hey Alex,
    I have to admit I’m a little jealous by your blog’s sharp new look. Way to execute the design principles presented in the week’s readings. I’m hadn’t honestly considered paying for an upgraded theme with more options because I’m not a fan of WordPress, but after seeing how yours is turning out, I might look into investing a bit more. In my new position, I’m dealing with a lot of back-end WordPress sites but the school uses Beaver Builder, a paid plugin that helps with streamlining the process. It’s been a lot easier to navigate and maneuver than my own COETAIL site and has led me to have a lot of mixed feelings. Do you think you will keep this site beyond the completion of the COETAIL course or will you look at other platforms like Wix or Squarespace? Curious to hear your thoughts on this and get an update on . how your new gig is going!

    • Hi Reyna,

      Thank you for your kind words! Yeah, I’m really not a fan of WordPress when working with others at all. I think that it took me a long time to get to the point where I feel comfortable with it and to encourage people to spend that much time in 2019 is almost seen as unreasonable; people want things done NOW.

      I will keep my site after COETAIL, for sure. You’re actually subscribed on an RSS feed to one of my categories for COETAIL. The rest of the site is for me. :). I’ve started with WordPress and just upgraded everything, so I don’t think I’m really willing to change in the foreseeable future…

      New gig is good. I really miss Vietnam, the food, the sun, the people… Korea is calm and quiet… hahaha… How about you? How are you liking the transition?

Leave a Reply to Saadia Munir Hammad Cancel reply

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

Related Posts