It is always a good idea to periodically change your website to keep it looking sleek, fresh, and modern so users can have the best possible experience when scrolling through your content. I’ve decided to take the past few days and change the look of my website until I was satisfied with the end result.
Here are the changes I made and the decision process behind them.
The home screen got a very major overhaul. The clearest change is the accent color of the featured blog posts. Originally, the accent was black with a lowered opacity so the title of the blog post and the corresponding image can both be seen pretty well. The accent color got changed to blue because it feels more welcoming and may encourage more users to click on the featured posts and read them.
The header got a much-needed redesign as well. The logo got changed from black to white for easier visibility (the logo redirects users to the home page, so if it cannot be seen, what’s the point?). The name of the site was removed from under the logo and replaced the word “Home” in the header. Since “Home” also redirects users to the homepage, I figured that placing the website name there would serve that function well and get rid of the unnecessary wording underneath the logo.
The “About Me” page was also changed to simply say “About.”
Lastly, instead of having all of my Interactive Media classes take up a space on the header as their own category, I decided to place them all in a drop down menu, all under the name “Interactive Media & Communications.”
Believe it or not, this part of the homepage got the most alterations. The font color for the headings got changed to blue, while the typeface for both the headings and the text changed to Museo Sans. I’m a huge fan of Sans Serif typefaces and I believe Museo Sans matches closest with the style I was intending.
The biggest change you’ll see, however, is the decision to swap the background colors from white to black. There are three different background profiles in this screenshot: the header, the intro text, and the blog post text. In order to change the background color, I had to add additional CSS into my theme and figure out the codenames for each of the profiles because I needed to individually change their color to black. I tried to view the page source of my homepage on Google Chrome, but due to my lack of experience in code, I looked up WordPress forums and found specific forums relating to my theme which gave me all the answers I needed.
I like to have black backgrounds on as any pages as possible. I have Dark Mode enable on my MacBook Pro and my iPhone XR, and before Apple released Dark Mode for iOS, I inverted my phone’s colors specifically to have black backgrounds on my pages. As soon as I found out I can customize the CSS of my theme to enable black backgrounds, I knew I had to do it.
Currently, every part of my site has a black background except for all of the pages and the posts. I don’t think black backgrounds are absolutely necessary for the areas that contain all of my content, but if any of you reading this feels that they need the black background in order to keep consistency with the rest of the site, please comment below and I will take your feedback into consideration.
The last major change I made to the homepage was adding a footer widget below the recent blog posts. This allows for extra flexibility for those who do not want to leave the homepage and go looking for my content. I added four extra areas in the widget below.
The first is a video that is playable straight from the widget. Currently, I have my recent animatic I made while learning Blender. I plan to replace that with a demo reel about my student film projects once that is completed.
I also added an archived blog post list, allowing you to search for blog posts by month. I thought it would be a neat addition for those who want to look through my older content.
To its right, I added some contact information, including my phone number and email address. This is the most necessary addition because it eliminates the hassle to try and search for my contact information using external sources.
Lastly, I added a translate option on the right side of the footer. I felt that the choice to automatically translate my text to a preferred language is not only beneficial to the user, but beneficial to me so my site can attract as many people as possible.
Those were all of the major design changes I made to my website. I appreciate any feedback on what you think of these changes. I want my website to look cleaner and have more functionality, and I believe I have achieved that.
Due to my decision to stick with the same theme, all of the other pages on the site were not changed nearly as much as the home page was. All of these pages do feature the black header and the footer widgets mentioned earlier.
Finally, I added my main social handles on the bottom right corner of my website (they’re on the bottom right corner of this page as well), so go ahead and give me a follow on those sites!