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

26 Comments

  1. ben
    Mar 17, 2014 @ 3:23 pm

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

    Reply

    • Nick La
      Mar 17, 2014 @ 5:58 pm

      Sure, perhaps next tutorial. :)

      Reply

  2. Dafian
    Mar 18, 2014 @ 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…

    Reply

  3. R G
    Mar 20, 2014 @ 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..

    Reply

  4. Tim
    Mar 20, 2014 @ 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?

    Reply

    • ben
      Mar 25, 2014 @ 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.

      Reply

      • Tim
        Apr 7, 2014 @ 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.

        Reply

        • ben
          Apr 11, 2014 @ 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.

          Reply

          • Tim
            Apr 24, 2014 @ 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.

  5. Sue
    Mar 25, 2014 @ 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.

    Reply

  6. Gary
    Mar 27, 2014 @ 10:24 pm

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

    Reply

  7. Kiraz Fidanı
    Mar 28, 2014 @ 4:02 pm

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

    Reply

  8. Kelco
    Mar 29, 2014 @ 9:37 pm

    It looks amazing, the colors are brilliant!

    Reply

  9. Amit Singh
    Apr 3, 2014 @ 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..

    Reply

  10. Humayun Hashmi
    Apr 8, 2014 @ 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.

    Reply

  11. Theo
    Apr 8, 2014 @ 2:14 pm

    Great job!!!

    Reply

  12. gamis ifah
    Apr 9, 2014 @ 11:29 pm

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

    Reply

  13. Saji John
    Apr 10, 2014 @ 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.

    Reply

  14. ijja
    Apr 10, 2014 @ 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.

    Reply

  15. Website Design Calgary
    Apr 12, 2014 @ 5:29 am

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

    Reply

  16. Bailey
    Apr 15, 2014 @ 1:29 am

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

    Reply

  17. Tom
    Apr 15, 2014 @ 3:41 am

    Looks awesome. Great job!

    Reply

  18. Benjamin Marc
    Apr 25, 2014 @ 6:11 pm

    Love the new layout, looks supper easy and fun.

    Reply

  19. Suri
    Apr 28, 2014 @ 1:58 am

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

    Reply

  20. Danny
    May 6, 2014 @ 5:51 pm

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

    Reply

  21. test
    Apr 30, 2014 @ 11:47 pm

    test again

    Reply

Leave a Reply