Blog and Website Design
The Project
An existing blog focused website had an outdated look and had become rather clunky with slow load times and broken links. The goal was to give it an overhaul with a new, responsive design, reorganize the content, and clean up the clutter.
My Role
I was given a written outline of page contents and some examples of similar pages. From this, I created a wireframe, selected images, utilized the logo to create a color scheme, and built the new website.
Outline to Wireframe
Creating a Wireframe
With only a loose verbal outline, I needed to wireframe the new website to determine pictures, sizes, and grasp the information architecture.
High Fidelity Design
Logo
Brand Colors
Colors
With an established logo, I selected website colors based on it—and after getting a feel for the existing website.
Fonts
From cover design work, I knew Cinzel was a popular fantasy font and the plain version was selected as the primary font for important descriptions and most titles, Raleway was selected for the blog posts, and the sketchy font Frederika the Great was used for some stand-out titles and headlines.
Images
With a strong fantasy and writing theme, stock photography was purchased from Shutterstock to provide high caliber images.
Website Design
Sticky Menu
Templates Created
Platform
The previous website was built on WordPress using the Highend theme. The new website was created using Divi as the WordPress theme, taking advantage of this powerful theme.
Staging Site or Under Construction?
Usually, I re-build websites with a staging website. However, with the website experiencing a lull in traffic due to early holidays (and the previous design), the decision was made to move the website to Under Construction status for the week it took to redesign it.
Sticky Menu
Divi offers a sticky menu feature for websites viewed on laptops. I added to this with a transition from a white menu and full color logo to a dark purple sticky menu with a white logo and menu options.
Post & WooCommerce Templates
With Divi, templates can be built so that all future posts, pages, or WooCommerce items are formatted automatically. I created templates for blog posts and specific WooCommerce categories as the website sold courses and ebooks using off-site platforms to complete and fulfill purchases.
Responsive Design
Divi is a powerful theme that comes with an editable view of a computer screen, tablet, and phone, allowing design changes based on each device. This makes construction of a responsive website flow easily.
Blog Template & Post
Responsive Design
Website Speed-Through
Launch & Results
Launch
The new website was launched in early December 2020 after being down for a little over a week.
%
Increase in Visitors (first year)
%
Increase in Referrers
Average Views per Vistor
Visiting Countries
Lessons Learned
This was my third time using the Divi theme and while I thought I had a good grasp of it, boy, I learned a lot more on this website. This is the first time I utilized template design for posts, pages, and categories, which is a great feature and I’ve used several times since.