Apr 10th

Redesign: DeviseFunction gets a Facelift

Matthew Heidenreich in News with 17 comments

With this first update we wanted to address some of the flaws we have noticed over the past few months, while keeping the same “feel” DeviseFunction had initially. After the break I will give you a detailed explanation of what has changed and what is to come for the future of the site.

Before and After

Why Redesign?

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.

Color Scheme

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.

Content Area

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.

Sidebar

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.

Footer

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!

Written by Matthew Heidenreich

Matthew Heidenreich is a freelance designer from St. Louis, Missouri. He enjoys teaching others how to create interface and web design tutorials. Find his work on his site, DeviseFunction. You can follow him on Twitter @Spicypepper.

Share Your Thoughts17 Comments

Richie April 10th, 2010 at 11:18 am

The redesign looks great Matthew. It hasn’t lost the old DF touch, making it unforgettable I would love to see tutorials on PSD to xHTML. Good luck, pal

Reply
- Matthew Heidenreich April 10th, 2010 at 11:39 am
  
  thanks Rich! And we are still working out a few little things here and there with the update, but i’m pretty happy with the results so far.
Unique Design April 10th, 2010 at 11:49 am

Great work Matthew!

I like the new menu-bar in the head, it’s well done and also the logo it fits better in the layout.

I also really love the footer. The new simplier way you have designed it makes it stand out and looks cool!

Reply
- Matthew Heidenreich April 10th, 2010 at 12:03 pm
  
  thanks, Appreciate your comments
melek April 10th, 2010 at 4:28 pm

new look. great!

Reply
Roei CPO April 11th, 2010 at 9:05 am

Nice, thanks!

Reply
h1brd April 11th, 2010 at 9:09 am

Its lookin pretty cool, nice job

Reply
Chris April 11th, 2010 at 4:22 pm

Great redesign! love it… I’ve had a play around and it’s really looking great… good job man

Reply
Matthew Heidenreich April 11th, 2010 at 4:38 pm

thanks for all the kind words so far. Glad everyone seems to be enjoying the changes.

Reply
Saud April 12th, 2010 at 12:09 am

Good redesign.
Cheers!

Reply
julio April 12th, 2010 at 8:18 am

really nice and great new look. =)

Reply
Timothy Blake April 13th, 2010 at 2:53 am

Very well designed some awsome improvements, im loving the logo keep the good work up.

Reply
Lee Fuller April 22nd, 2010 at 6:17 am

The redesign is brilliant, smart, easy to use. Just grabbed your RSS Feed!

Reply
limewire April 30th, 2010 at 4:01 am

lol sweet stuff man.

Reply
patrick james May 3rd, 2010 at 3:18 pm

The redesign looks fantastic man. Really like the change with the header.

Reply
Fairy Gnome Statue Sculpture October 22nd, 2011 at 1:54 am

Thank you for this tutorial, very helpful, at the beginning I thought it was the sea, I didnt read the page name :S.

Reply
49ers Jerseys Authentic January 5th, 2012 at 1:09 am

Quite insightful submit. Never considered that t had been this simple after all. I saw it spent an advantageous deal of my time seeking out somebody to explain this subject clearly and youre man or woman that ever did that. Kudos in your direction! Continue the good work.

Reply