During my internship with Inovat, they were creating a blog. I designed a series of wireframes and comps to define the style of their blog that would go into production.


Wireframing

I started with wireframes. 7 different variations were created before coming to this solution. This design is heavily focused on content, as the blog was intented to be. The use of imagery is simply a secondary element, only to reinforce the content. I also chose to represent the content in compartments, using color as a signifier for the category of the content.

View Full Wireframes: Home, Post, Profile

Comps

After the wireframes were approved, they were created into comps. These comps were reflective of the content areas in the wireframes, but showed the actual aesthetics of the design. The wireframe design posed a few problems, such as the category tags displayed in the header, which was sorted out in the design. Color as a signifier is still represented, but toned down to only hovers which also slide out slightly to signify which article the user's mouse is located.

View Full Comps: Home, Post, Profile

The Little Things

To compensate for the lack of categories in the header, I decided to tuck the categories away into a side menu that would open up upon click of the "hamburger" icon in the top nav. In this blog, there will be certain articles which are more thought and research based, and more emphasis was wanted on these, which means that they would stick to the top of the blog roll. If there would be another published, the last featured article would fall back into the blog roll, but retain an image hover to show it's importance.

View Full Comps: Unstuck Feature, Sidebar

The Final Design

Although their blog today isn't a verbatim copy of my design, there are elements tied into the final product. Post pages retain the most resemblance to my design, but the main blog page is another take on their brand.

View Inovat Blog