XO PIXEL Website Redesign 2018

The new XO PIXEL redesign is finally here! After several weeks of designing and developing the new theme, I’m so glad to finally release it. This time around, I really focused on improving the UX of the site. There are many great UX design books that I’ve read these past few months that have provided me with more insight on the importance of UX and accessibility on the web. Now, I want to share with you all of the changes and updates that helped create the new website.

The Design

The design phase is the fun part of the web design process. There’s no need to worry about a missing bracket in your code, optimizing your website, page loading time, etc. Sky’s the limit on how you want to design your site.  As always, I created a mock-up of the website design before I started the development phase. In the past, I would jump straight into coding, but it’s so so important to see what works and what doesn’t in regards to fonts, colors, layouts before you type any code. Since I’ve tried both methods (design to code and straight to code) and I highly recommend mocking up a design first and then code to your heart’s content. It will save you time down the road—trust me.

Also, whatever you mockup will likely change as your coding, but it serves as a general guide. You can see the influence my initial mockup had on the final website.

Navigation Menu

The top/main navigation menu has improved so much compared to the previous website design. The logo is now an SVG (before it was a PNG) and it looks great on all screens because it’s a vector. The actual menu items are more user-friendly; the font size is larger and drop-down menu items have a subtle down arrow indicates there is a submenu. On the right-hand side, there’s a log in/log out button which says either log in or log out depending on your member account status. Finally, the search icon, on-click, reveals a search field and without moving your mouse, you can easily click the ‘X’ to close the search field. This is a huge improvement since, on the old site, it required a whole page re-load on a new search page in order to get to the search field. A small yet huge improvement!

Featured Article

The featured article focuses on the most recent article on xopixel.com, each and every week. Instead of overwhelming a visitor with three to four articles as soon as they visit the website (which was on the previous site design), I wanted to only focus on one article. If they wish to see more, they can scroll down and explore our homepage topic sections or explore using the navigation menu.

Layout

The overall layout on the homepage and archive pages combine both large and medium-sized article cards. Similar to the cards on the previous design, but as you can see, there have been subtle changes. The font alignment is more to the left and the image alignment is more centered. The article cards are also the perfect way for me to display my special vertical featured images for all my articles. Special site topics  (i.e. Gold Membership, Freebies) have their own background images (i.e. Gold Membership, featured video). There’s also a freebies carousel at near the footer!

Typography

The site uses two new fonts: Futura PT and Georgia. Futura PT is a gorgeous web font from Typekit. I was debating whether or not I should use web fonts this time around since I wanted to reduce page loading time on my site. However, the design nerd in me just couldn’t accept being basic. Instead, compromised by finding other ways to optimize the site, and I also used a system font (Georgia) as the main body font and the web font (Futura PT) for headings, etc.

The Development

Languages

As with all WordPress themes, PHP, HTML, CSS and JavaScript/jQuery were used to develop it. What I did differently this time around, was use Sass instead of regular CSS to style the site. Sass is literally the best thing ever—CSS can get redundant after a while and Sass just helps reduce all the little repetitive things. Side note: Mixins are amazing—they’re basically entire declaration blocks condensed into one line rules which saves you a lot of time.

Optimization

This time around, I’ve also started using Amazon Web Services (AWS) to cache images on my website to help speed up page loading time. The images on most websites, including xopixel.com are so large and take up so much time to load. I was well aware that page loading time on the previous site was too slow for comfort. CDNs are a must for blogs especially since they usually host large media files (like images and videos) over time. I’m still exploring more ways to optimize the website, so I’ll be sure to keep you updated and share what I can in future.

Final Thoughts + Free Stickers!

Overall, I love the new site design! The theme colours stay true to the XO PIXEL brand (gray and pink) despite introducing two new colours (gold and blue). The layout is the perfect fit for my vertical featured images. I’m also glad that I was able to improve the UX and accessibility of the site. If you see anything that looks weird on the site or you have a suggestion, please leave a comment below so I can look into it.

In honor of the launch of the new website design, the first 10 entries (see form below) will win a FREE XO PIXEL Sticker pack. You can use these stickers on your laptop, notebook, anywhere! Be sure to enter as soon as you can, there’s only 10!

Like this article?

I'm a Content Creator, Front-End Web Developer, UI Designer, based in Toronto, Canada. I have a healthy addiction to the internet, technology, and digital media. I'm so passionate about all things design and tech that I write about it any chance I get on my blog xopixel.com!

Comments

    1. Thanks, Marisa! I really made sure that it was responsive since there are millions of mobile screen sizes these days. Redesigning your website is also a good time to go through all your content on your blog to see what’s working. Go for it!

  1. I absolutely adore your blog posts! They’re so inspirational! I love what you do, and the things you post is exactly the kind of things I’m interested in.

    1. Thanks, Dominique! It’s always nice to refresh the look of your website every now and then. It’s also a good opportunity to implement new website optimization methods.

  2. Snazzy! I like the colourful section under the featured article and the continuous autoplay on the Freebies carousel. It’s like ‘better catch me before I slide out the frame’ but alternatively you can just click on the section itself to see all the free goodies. Overall, lovely redesign!

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.