Before and After
When you look at the updated layout, you’ll notice that it is still based on the same frame used for the old theme. I wanted to keep the same basic form from the old design, and not loose the “DeviseFunction” feel. The redesign came because I saw flaws that I felt needed to be attended to, and believe the redesign was a step in a positive direction. Along this path, you will notice that I added a greater deal of detail, while keeping the simplicity I was going for originally.
You will notice that the colors used in the site have not been changed much from the original. I wanted to stay with a similar palette, while making the current colors deeper and more visually appeal.
The New Design
This has to be one of the more tedious designs I have created. I kept going back and changing little things here in there trying to make each element perfect, while keeping its simplicity intact. While I will generally sit down and get most of a design done in one sitting, I took a much slower approach on this project so I would not rush into it. You will notice that the design is slightly wider than the previous as well.
Logo and Header
At first glance everything looks brand new, but in comparison to the old design you will see how the new layout is just a step up from the previous. For the logo I changed the font face to Chunk, and added more detail to the transparency behind it. Adding deeper grays and reds cause the header to have a cleaner and more polished look than before. I also wanted to put the advertisements in their own section below the header to allow for a wider logo, and to provide a more spacious feel for the header. The search wasn’t in the most ideal location to begin with, as it was located in the sidebar. To fix this issue, it was moved to the header to make it stand out and easy to find. You shouldn’t have to search for the search box.
When going to update the post listings, I realized I loved exactly how they were and didn’t want to make to many changes. So instead, I refined what was already there. The comment bubble wasn’t alway showing up correctly in all browsers, so I felt it would just be a better idea to loose it all together. To make up for this I added a new area for the author, category, and comments under the article title. To tie everything together you will notice a light line on the left that connects all the articles together.
This didn’t change drastically, but it was all about adding just a little more detail to tie the theme together. The subscribe area got a little bit of a makeover, and you will now be able to view more stats about the site. I have removed the featured tutorial from the sidebar, as well as the Latest Articles. I decided all that was necessary was the Most Popular listings, as well as an area for Other Resources I enjoy.
The previous footer was dead simple and didn’t draw to much attention. This is exactly the way I wanted to keep it. I put the basic things you would need in the footer, without adding a bunch of unnecessary fluff. To add a little from the old layout, I added a bit of flannel texture to the footer to match the background from the old layout. Tacky? Maybe, we will let you decide.
Posts and Comments
Lets face it, there wasn’t much to the posts originally. I wanted to take a step back and fix that. Now we have more detailed lists, as well as better visual hierarchy with the use of more detailed headings.
For the comments we wanted to keep the simple style we were using before, but make the boxes larger and easier to read with the use of larger fonts. They were also rather mono-toned, so we introduced better styling to links as well.
Author Area and Social Media
This is something new for DeviseFunction. Since I plan on opening up DeviseFunction to contributing authors in the future, I wanted to implement an author area to provide a description about the writer (as most blogs have these days). We also added a new social media area that reflects the stylings of the rest of the theme.
The Future of DeviseFunction
One thing we plan on rolling out soon is PSD to xHTML tutorials. We know this has been a major request from the community, and it only seems fitting to give you what you want. If you are interested in becoming apart of DeviseFunction and helping add some of these tutorials to our line up, please visit our contact page as we will be looking for qualified writers.
What do you think?
Id like to hear what the community has to say about the changes, as I will take everything into consideration for future updates. Thanks for all the support over the last few months!
This was written by Matthew Heidenreich