Themify has come a long way since its launch 3 years ago, and I thought it was finally time to redesign the Themify website. The goal of Themify is to make it easy for anyone to build a beautiful, responsive website using WordPress and Themify themes. This means that we need to stay ahead of web design trends, and I thought that the redesign should reflect our desire to incorporate the latest and greatest practices found in the design world right into our website. This post will take you behind the scenes around our planning and decision making process, as well as some of the work that didn’t make the final cut for the Themify website.

First Version of the Redesign

The redesign process started about a year ago, and below is the first version of the redesign. I tried to update the style from the existing designs, but after a few mockups, the project had to be put on hold due to the overwhelming work load at Themify.

first version of redesign

Second Version: Flat & Colorful

After several months, I decided that the redesign should take priority and pushed for completion. I felt the first version was not really what I envisioned for Themify, so I scrapped the idea and started toying around with the idea of a flat design style.

Flat design was completely new to me, as I was so used to illustrative design, working with a very high level of detail.

redesign mood board

I started the mood board by collecting the fonts and colors that were suitable for flat design. Below is the home mockup of the second version.

second version - flat

Abandoned Splash Animation

Intially, I wanted to show an animation, made entirely in CSS3 and Javascript, to advertise the functionality of the Drag & Drop Builder on the homepage, but I decided that the animation generated too much unnecessary overhead with respect to markup. Below link is a prototype of that animation.

bulider splash animation

Final Touches

After completing the static design, I added transition effects to spice up the presentation of our beautiful imagery, emphasize the marketing copy, and really catch the user’s attention.

Shrinking Fixed Header

The header is a great way for our users to quickly navigate around the Themify website, but I didn’t want it taking up so much screen real estate. The end result was creating a fixed announcement and menu bar that shrink smoothly as you scroll down.

shrinking header

Parallax Scrolling

The nifty parallax scrolling section at the top was accomplished using CSS3 transform.

parallax scrolling

Fade-in and Fly-in Animation

As you scroll down the Themify homepage, images and text fade-in or fly-in to the content area. This animation was made completely reusable by simply entering its class name. (For example: .fly-in, or .slide-up, etc)

fly in animation

Color Morphing Background

With Flat design, color plays a vital role in the look and feel of the overall design, so I thought it would be a nice touch to create a color morphing background by animating a set of pre-set colors from one to the other. The end result turned out to be very nice, and I have received quite a bit of positive feedback for it.

morphing background

27 Comments

ben
Mar 17, 2014 at 3:23 pm

Can you share some javascript plugins you’ve used to spruce up your site?

Nick La
Mar 17, 2014 at 5:58 pm

Sure, perhaps next tutorial. :)

Dafian
Mar 18, 2014 at 12:47 pm

Yes, please share the techniques you use for new design. JQuery, CSS3 and other you use to built that new design.

That’s cool I like the new design!

Sorry if my english is bad. Thanks so mush before…

R G
Mar 20, 2014 at 1:20 am

The design is very eye catchy.. Hope you will share the core techniques (if possible) so we could also get a good knowledge..

Tim
Mar 20, 2014 at 8:47 am

Unfortunately, by using a flat theme, the site looks like every other site out there today. Nothing sets the design apart from any other theme site. Maybe that was the idea behind it?

ben
Mar 25, 2014 at 2:21 pm

Yes, but thats the nature of web design apposed to any other kind of design. Web design is tech driven therefore particular trends are easily spotted in this kind of design. I’d like to think of web design as kind of being like a new car. The new car always looks and functions better than the old. The question is, is it bad to adhere to trends in web design? I suspect not, since all sites get redesigned every 6 years or so as the new ways and methods of building sites emerge and set the standard and raise the bar.

I don’t know of any awesome/cool site that was designed 6 years ago to which I always point and say “that’s the way all sites should be designed.” Because all six- year-old sites look outdated, clumsy, and unfashionable. And even if you look at all the latest shiny websites designed today, flat or not, its hard to pick one out and say, “this site does not follow the trend, because it looks so different from anything out there” And the reason is, because it’s not the flatness that makes all sites kind of look the same, but the responsive/adaptive nature of all sites. Responsive layouts, that are carefully crafted on grid, is what gives the sites the look they are getting. Usability trumps everything else at the moment. Your site has to work on multiple screens and be usable, and we do not have too many flexibility to work with when it comes to responsive site design. Maybe in the future we’ll have something better, but in the mean time, lets enjoy all sites looking the same.

On the plus side, web trends = job security. Every agency wants to redesign their site after six years, lets sell the trendy and shiny stuff to them.

Tim
Apr 7, 2014 at 10:51 am

“The new car always looks and functions better than the old.”
Highly disagree with this statement. It depends on the model of car, and I’m not going to get into that discussion here.

“Your site has to work on multiple screens and be usable”
That is true, but that doesn’t mean it has to be responsive. Websites can function just as well on a phone or tablet whether they are responsive or not. In fact, there are many sites (particularly portfolio type sites) that never function well on mobil devices as responsive sites, because images are meant to be viewed large. You cannot get a sense of details or the full image on a phone.
A theming site typically shows thumbnails of themes, which you cannot confidently view on a phone to get a feel for the theme. There is no way I would purchase a theme for my website without viewing the theme on a desktop computer.

Websites don’t need to be trendy to be popular. MacInTouch.com has had the same site design since the late 90’s and is one of the most popular Mac sites on the internet. Content is more important than looks and it should drive how you design (and develop) the site.

ben
Apr 11, 2014 at 11:50 am

Sure, sites don’t have to be trendy to be popular, but being trendy is sure the fastest way to getting there. You either follow the trend, or you set the trend. Pick one.

I never heard of MacinTouch.com, but I can name you couple of more, even more popular sites, namely: craigslist.com and drudgereport.com. Both sites look aesthetically from the 90’s. These sites are popular only on the virtue of popularity. Their aesthetic has been branded and frozen in time. These kind of designs will not work if designed today. If you try to design something similar to those sites, in terms of aesthetics and functionality, you’re not going to propel to success.

Tim
Apr 24, 2014 at 10:12 am

Well, I can tell you that Themify won’t be getting more popular because of their design. It will only be because of online advertising.

Sue
Mar 25, 2014 at 2:01 pm

I agree with Tim. It’s a beautiful theme, but it’s not that different from the other flat themes out there. The animations and color changing features are nice though. The site feels lighter too and loads faster I believe. Props to taking into account the performance in terms of page loads.

Gary
Mar 27, 2014 at 10:24 pm

The new design is absolutely beautiful. Love what you’ve done with the animated background and text colors.

Kiraz Fidanı
Mar 28, 2014 at 4:02 pm

I definetly liked new design but can we add some additional animations ?

Kelco
Mar 29, 2014 at 9:37 pm

It looks amazing, the colors are brilliant!

Amit Singh
Apr 3, 2014 at 10:29 am

The Themes are beautiful , but it’s not that different from the other flat themes out there , its flat but more vibrant themes are needed.but still i love these designs nice work..

Humayun Hashmi
Apr 8, 2014 at 1:11 am

I don’t know why but i liked the first version. This might be because i am not a technical person so i don’t know the technicalities, but as for a reader or audience i will prefer to give first version 8 out of 10 and rest of the redesigns would be.. ah… let say just 6 :) Hey, you are not using the first version anymore? Will you please write a tutorial to design it? I know i seemed to be an Alien among you all dev folks, but i liked it. :) BTW i liked your blog too.

Theo
Apr 8, 2014 at 2:14 pm

Great job!!!

gamis ifah
Apr 9, 2014 at 11:29 pm

responsive flat and metro style.., but the color is annoying for me.., but overall is great..

Saji John
Apr 10, 2014 at 2:43 am

I love the new design and its appearance is beautiful. Animations and color features are excellent and you have used it wisely. I believe, this site would load faster in browser.

ijja
Apr 10, 2014 at 6:07 am

The new themify website is well done, good choice of fonts and well spaced, the only problem i have with the new version is the use of color, i think you are using so many colors, i prefer to keep it minimal and clean, with only two or three color choices maximum, otherwise good job.

Website Design Calgary
Apr 12, 2014 at 5:29 am

A creative new design, I agree with others that sharing the techniques used would be beneficial. Great redesign.

Bailey
Apr 15, 2014 at 1:29 am

themify themes are very nice, animation and colors are very good.

Tom
Apr 15, 2014 at 3:41 am

Looks awesome. Great job!

Benjamin Marc
Apr 25, 2014 at 6:11 pm

Love the new layout, looks supper easy and fun.

Suri
Apr 28, 2014 at 1:58 am

Great design. colors are beautiful. designs are simple and professional.

Danny
May 6, 2014 at 5:51 pm

I like the animated background and text colors. Something that can be added to simply to designs.

S Roy
Mar 29, 2018 at 1:33 am

Yeah!! amazing. Thanks for sharing such animations.

Joydeep Banerjee
Mar 29, 2018 at 1:35 am

That was very nice.

Post Comment or Questions

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.