Custom CMS Theme design and development

In News by AlwinLeave a Comment

Project Description
We are a custom home builder looking to add a blog to our new website. Our goal is to achieve an inviting, comfortable, and friendly design. This design will be for the blog only, separate from the theme of the website.
Our website is built using a custom CMS. The blog features have already been built, including summaries, posts, comments, archives, tag clouds, recent posts, etc. We are looking purely for a theme to add to the CMS to style the display of these features.
• Responsive web design.
o Must adapt for all screen sizes and devices.
o Must provide progressive enhancement features (css, web fonts, image optimization & retina displays)
• Encouraged to use a framework such as Foundation or Bootstrap but not required
• Must be HTML5 / CSS3 / Javascript based.
• Create a separate css file for modifying colors. We are in the process of updating our color scheme and we will need to adjust the theme accordingly.
• Include 2 pages
o Blog summary page – the home page of the blog containing the most recent posts.
o Blog post page – the view for a single blog post
• Theme Features – design needed for the following features of a blog
o Navigation – We will have 5 high-level categories to navigate between
o Navigation between older and newer posts (pager)
o Icons for facebook, twitter, google+, pinterest, and youtube
o Comments – display all below post
o Comments – form to post a new comment
o Search
o Archives
o Recent posts
o Tag cloud
Our favorite blog by far is from Ryan Homes. We would like to achieve a design similar to this but not a replica.
We have created a markup of their blog indicating the particular features we like the most.

A mockup of our thoughts on a design is attached. The overall page should give the visitor the impression that they are looking at a wall. The page should have a subtle background pattern or a very light color, not just white.
At the top we have a floating shelf. In this picture the view of the shelf angle is not the same as the desk – these should be the same in the final design. The logo and social media icons should appear to be sitting upon the shelf. You can use a placeholder logo for now. The social media icons should be included as part of the design.

In the middle we have a pin board used to display the blog post summaries. This will flow through to the individual post page as well. The individual post should appear to be pinned to the pin board as well, in full width.
The pin board frame here does not match the texture of the desk. In the design the frame and desk should have the same color and texture. The pin board will need to be flexible in height to accommodate the length of blog posts.
Here we have replicated the white containers from the Ryan Homes blog for the posts. This time they are varying in size, similar to Pinterest. The varying size is optional. Either style is fine.
At the bottom we have a desk to contain the footer. The goal is to give the impression of looking at a wall in a home office.

brennan full

Leave a Comment