©2020 Built with love by Nick Howland.

TYPE 1: Blog Redesign, Part 2: Live Mockups

TYPE 1: Blog Redesign, Part 2: Live Mockups
September 28, 2012 nick howland

The next part of the blog redesign project called for mocking up two live examples of our blog layouts.

For both designs, I chose to utilize the single column post layout with the header on top. This was simply because I could not find any single column themes with a sidebar that I liked. Most of the sidebar themes I found would have had to be drastically gutted in order to achieve the design I wanted. Maybe one day, but there simply wasn’t enough time to do a full on redesign.

One thing that I should mentions is that, in order to jump in and create the live mockups and have access to my page’s CSS, I downloaded WordPress, bought hosting, and transferred over my old WordPress site to the new one. Not all too complicated. This will allow me to host as many sites as I like as well.

I really wanted to implement a hand drawn aspect into the design. I chose to do so within the Header of the mockups. While the header didn’t turn out exactly as I wanted, it gave me a place to progress from. The color pallet I chose eventually simplified down to pink (#ff99cc) and blue (#33ccff).

With the first design, I placed the menu with my current classes on top (created through a custom menu that included categories), created a custom hand drawn header, changed the date color to the #ff99cc pink, changed the rollover color of the post headlines (as well as the rollover colors for the rest of the menu titles) to the #33ccff blue. I added a drop down menu for my classes on the right sidebar.

Blog-Live-Mockup-1-1

For the second design, I used the same hand created masthead but made it fit the dimensions of the new theme’s specific masthead window. I placed a menu of my classes with a search bar at the bottom. The menu bar is fixed, so it stays with you as you scroll. I changed the rollover color of the menus as well as the “date” bubbles to the #33ccff Blue, changed the “Edit” button to  #ff99cc pink. I attempted to give more space between the header and the back banner underneath it, but I could not figure out how to do so. I did manage to find a solution to this using an alternate route. There were many, many changes made after these initial mockups.

Blog Live Mockup-2.1 Blog Live Mockup-2.2

Process:

Live Mockup-Process-2 Live Mockup-Process-2 Blog live mockup-3