WebdesignerDepot redesigned!

And here it is… After way too many delays, countless mock ups and ideas, the new WebdesignerDepot.com is finally here! This was an incredibly complex redesign process for the entire WDD team but we’re extremely proud of the results and we hope that you love it as much as we do.

We launched the new design yesterday and the Twittersphere has been giving us great feedback and helping to identify some bugs. We’ve been fixing bugs for the past day and are still doing so, so please excuse some tech glitches that you may still come across over the coming days.

It was important for us that the new design keeps the old site’s soul so to speak, while at the same time inspiring our visitors and bringing it up-to-date to current web design standards and techniques.

The new homepage, in particular, does a better job at introducing new visitors to our site. You’ll notice that the navigation and information structure is much cleaner and clearer now.

In this post, we’ll go into some more details about what’s new and what went on behind the scenes to bring you this new version of WDD. So, let’s dive right in!

If you’ve been one of our 40 million visitors (!) over the past few years, you’ll notice that the design is, well, how to say it? Radically different! In fact, none of the old design has been kept. We threw it all away and started fresh from the ground up. This is as radical as you can get with a redesign and it carries certain risks for us as we lose our previous branding benefits in favor of what we believe is a better choice for our site, its content and most importantly: YOU, our amazing readers!

Let’s starts with some credits to see who’s behind all this…

So here’s what’s new in this design:

Hybrid layout: Magazine & traditional blog style

While the old design had a traditional blog layout, with the latest posts always appearing on the top, the redesigned version is a hybrid between a magazine style and a traditional blog layout. We find that this works quite well for our content. The wider layout allowed us to bring a lot more content into the homepage, while the 2 columns in the homepage, makes it easier to read than some traditional magazine style blogs where the content can at times be overwhelming.

Featured content

The blog posts are interspersed by three featured areas: 2 vertical and 1 horizontal. The vertical areas feature some of the hottest topics right now on the site (responsive design, jQuery, etc), while the horizontal area is used to showcase the latest deals from our site MightyDeals.com. In total, we can feature 10 more posts than we used to in the previous design without overpowering our readers.

Balance and weight

Homepage: Due to the heavy imagery, we tried to keep an even balance between text and images by displaying sufficient preview text content for each post. For the actual article pages we chose to have images and code snippets at full width, while the text is displayed centered at a narrower width to the images. This makes the site quicker and easier to read (or scan) and displays the images at their largest possible sizes for maximum impact. For the images in older posts and other narrower images, we chose to display grey bars on the side, reminiscent of the black bars you see when watching a standard definition show on an HD TV. This was the best compromise we could find to integrate those older posts into the new look of the site without retrofitting hundreds of posts!

Responsive design

The new site is now fully responsive and looks great whether you’re on a desktop computer, laptop, tablet or smart phone. Check out the smart phone version as it looks and feels more like an app than a website and we’re really proud of the way this one turned out. It loads fast too!

Retina graphics

With Apple rolling out more retina devices, higher resolution displays are becoming more relevant for websites. The new WDD is serving retina graphic wherever possible. The site’s design looks perfectly crisp on retina devices. Going forward, we will have retina optimized graphics in all our posts wherever possible. This is easier said than done as the web isn’t quite retina ready yet, in fact, very few sites are serving large high-res graphics at this time. Some of our latest posts are already partially retina ready and some will carry this in the future. We also heard that retina ads may not be too far in the future.

Enhanced navigation

You’ll notice a plus sign on the right side of your browsers (not on mobile devices) when viewing articles. When clicked on, this opens a mini browser that allows you to navigate through the current article, like browsing through the table of contents of an eBook. You can also share the current article via the mini browser, or see related articles, as well as reading the next and previous posts.

The art

Once again, we collaborated with über talented illustrator Radim Malinic to create the art for our new site. Radim is an award winning art director and graphic designer, based in London, England. Under the name of Brand Nu he works with leading household brands. Since the original WDD website design, he has gone on to working with Goldman Sachs, Bacardi, Blistex, London Film Museum and many more. His style of work is one of the most diverse in the industry. His bold and colorful designs inspire a lot of people that see them. We asked Radim to focus his design on circles this time, as this is a timeless shape that is extremely popular and favored in current website designs.

Parallax

The new art and logo on the header are brought to life with a 5 layer parallax effect (moving at different rates) in the header section of the website. To see it, simply move your mouse around the header area (not on mobile devices). We think it looks pretty cool and adds an element of fun to the site! [UPDATE] The parallax effect was loved by most, but some people didn’t like it, so we added the option to turn it off by right clicking on the effect area.

Logo

Although, the old logo served us well and was well liked, as this was a complete redesign, a new logo was in order! We collaborated this time around with Steven Bonner to redesign our logo. He’s a very talented typographer based in Scotland with an enviable portfolio of type-led illustrations for some of the biggest brands in the world. We think it turned out great and balances the site well with a personal hand drawn touch, while looking professional and polished at the same time.

Typography

We finally ditched the old boring system fonts in favor of Typekit web fonts, used exclusively throughout the site. We use Kulturista for the all headers which looks great and has a nice personality and unique feel. For the body text we chose Proxima Nova which has superb readability and is great for large chunks of text. For headers, we also considered Adelle, and for body text we also considered Museo Sans, Adelle Sans, Myriad and Helvetica.

Pictos Icon font

We use lots of icons in this new design. The icons are part of the awesome Pictos icon font designed by Drew Wilson. We even use it for our animated social icons at the bottom of the site.

Footer

We have 2 footer areas at the bottom of the site. The first one highlights some areas that we feel are important to emphasize and then you have a more traditional looking footer at the very bottom with mostly text links and some animated social icons.

Social integration

We wanted to showcase our readers in a bigger way, so the new WDD is way more social than before. We now feature your comments and retweets right under each post in the homepage. So, if you want a little bit of fame, you can now get your avatar right there for all the world to see! Well, that’s a bit of an exaggeration!

Fewer ads

Alright, some good and some bad news. Some of our ads got bigger, but we have also cut down on the number of ads running on the site. We admit that over the years our site got a bit too bloated with ads, so this was a great opportunity to clean things up. This has made the layout cleaner and more aesthetically pleasing to navigate, while still being able to able to pay the rent – don’t forgot to support our kind sponsors :)

Depot.ly

This one is actually a couple of weeks old: we started using the depot.ly short URL for our tweets, so you can recognize our posts in any social channels that you use. Pretty useful we think!

More content

As you may have noticed, we recently started posting more articles each day. Although editorial posts have been and continue to be the essence of our content, we now also cover relevant news and mini posts that will be a good fit for the designers and developers visiting our site. We feel this keeps the site more current and in touch with what’s happening in the world right now without resorting to full editorials for every post.

We encountered lots of issues getting this design to work across all browsers and devices (and still do!). In fact, this was the cause for some of the last minute delays that we experienced. We were meant to launch last week, but many browser issues slowed us down. Sorry for that! Firefox was particularly challenging, but IE 8 proved to be the worse and the cause of many headaches and frustrations for our coders. Since our launch yesterday, we have received a lot of extra info via Twitter of issues that still need to be be resolved. Thanks for your patience while we address these.

What you see today is the new design, but that’s not all. We’re planning to add some new stuff soon. You’ll learn more about this in the coming weeks.

We all personally love the new design and we expect it to keep evolving based on your feedback. We will really appreciate it if you could still let us know about anything that you’d like us to improve on. Also, please let us know if you happen to find any browser compatibility issues, or issues on any particular mobile devices that you use so that we can address them quickly.

As always, we’re deeply and immensely grateful to all of you for supporting WDD for all these years. From the entire team here at WDD, a big thanks to each of you and we hope that this new design inspires you and serves you well while you browse our site.

What do you think of the new WDD redesign? We welcome your feedback!

0 shares
  • http://twitter.com/warstwydotcom Adam Majchrzak

    Great layout. Congratulations on a successful transition. Success is guaranteed.

  • Shanks18

    Great redesign, love it. Very clean and methodical, while be fun and visually interesting!

  • http://twitter.com/1stwebdesigner Dainis Grāveris

    Congratulations Walter, this is really big step forward! :) Great job, big changes and love that top bar for usability! It’s definitely pain to do such big redesign – love fresh looks especially header!

  • http://learningcn.com/ Yongning Liang

    COOOOOOOOOOOOOOOL!

  • http://twitter.com/franciscut Francesco Cutolo

    Boy, that escalated quickly. =)

  • http://twitter.com/lplohmann Luis Paulo Lohmann

    IT’s very, very nice! Congrats!

  • http://www.webdesignalley.org/ MIke

    Good Work! I like your website. Clean design, i like the motion at the top of the page when you move mouse.

  • http://www.facebook.com/alexey.koshevoy Alexey Koshevoy

    Great design! But it is seems like very slow page ((

    • http://www.webdesignerdepot.com/ Walter Apai

      We’ll be optimizing page speed soon as we finish addressing some bugs. Thanks for your feedback Alexey!

  • jy_Nl

    Congratulations, what a great design! And love the responsiveness. One note though, the italic font in the code blocks looks a bit restless to me. Besides that, great work!

    • http://www.webdesignerdepot.com/ Walter Apai

      Restless? In which way you mean?

  • http://tweak2.com Gouri

    I like the New design. Nice work :)

  • masada

    Header sucks big time.

    • http://www.webdesignerdepot.com/ Walter Apai

      You mean the art or the parallax effect?

  • http://www.blackbookoperations.com/ Black Book Operations

    As stated in another comment somewhere, I like all the nifty new tech that has gotten into this site (and of course, the icing on the cake like the parallax effect in the header.) Site feels smooth, easy to navigate and is very inviting to explore more. The “plus sign” will need some getting used to because this is more of an interface design element. Either way, all in all, a great refreshing design here!

    • http://www.webdesignerdepot.com/ Walter Apai

      Thanks for the detailed feedback, very useful indeed. We’ll keep tweaking and improving!

  • Madan Patil

    It looks awesome!!. Many Congratulations to WDD team for the great design. Your site is already do great things with quality content. It gives me very good feel, specially the logo and the footer details.
    NICE!! Great work!

  • Foxinni

    Epic redesign. This site has been a pretty big inspiration for me these last few months. Good job all around!

  • Ehhwhat

    love it

  • http://www.savthecoder.com SavTheCoder

    love the redesign!

  • M. ten Pas

    Still have to explore some more, but LOVING it so far! :-)

  • http://twitter.com/Ivanisawesome Ivan Colic

    Absolutely incredible work. I’m blown away by your attention to details! Congratulations to the team.

  • http://www.lucidfanart.com Dee

    Amazing Layout!!! I love the new header and the footer information is so smooth! and I have to say less ads is great xD I’m saving a link on my phone as I type. Great Job!

  • CoryRs

    Aah! The mobile site doesn’t work in Internet Explorer… which is exactly what Windows Phone has! I would suggest maybe looking in to that, even though we all know that developing with IE in mind is a real pain.

    • http://www.webdesignerdepot.com/ Walter Apai

      Will do, thanks Cory!

  • Richard

    This is nice!!! Good Work

  • http://twitter.com/tummyl0ver Pasha zik

    Soooo trendy and precious! Glad to find new features again and again :)

  • Brian

    The redesign is great and thanks for your support in design industry WDD
    Just one thing i personally do not like.There are too many social share buttons(fb,tweet),i mean on homepage: below every post,below posts in featured content; at the sidebar: popular posts below every post,under every single post(fine),in the header,in the footer…

    • http://www.webdesignerdepot.com/ Walter Apai

      I know what you mean. We’re trying to make WDD more social as this is a very important aspect of our blog. I’ll keep an eye on this if it’s being used or not enough and I may then remove some of them. Thanks for the constructive criticism!

  • creativebeacon

    Excellent! I love the new layout and the site looks absolutely wonderful. You guys did a great job and the site looks much cleaner and more inviting now. I look forward to coming back here regularly!

  • Aidan

    Nice re-design idea and concept. Can’t wait for more updates and new stuffs. Congrats.

    • http://www.webdesignerdepot.com/ Walter Apai

      Many thanks!

  • http://www.fatihtasdelen.com.tr/ Fatih Taşdelen

    Excellent..

  • jef

    Very nice !

  • Hassan

    It looks awesome! great job.

  • Kinda Atieh

    The new website design looks amazing! Congratulations! Very modern and clean :)

    I loved the old website VERY MUCH but not until I saw the new one!
    (The prettiest thing to happen to webdesignerdepot since webdesignerdepot) ;)

    Can I say just one small little thing? I always find it confusing to read through the blocks next to each other, I mean the blocks in home page which are the main blog articles, I prefer it below each other.It’s like Facebook timeline,very confusing ;)

    Other than that its soooooooo PERFECT :) Good job!

    • http://www.webdesignerdepot.com/ Walter Apai

      That sounds like a slogan made by Apple! I got your email and replied directly. Basically, you can resize your browser window to have a more traditional look, but I believe you’ll end up liking the 2 columns on the homepage. Who knows? :)

  • Heywood

    Like the redesign, dislike the parallax header. Gets old fast and feels gimmicky.

    • http://www.webdesignerdepot.com/ Walter Apai

      What if we give an option to turn it off?

    • http://www.webdesignerdepot.com/ Walter Apai

      We now added the option to turn parallax off, so simply right click with your mouse over the effect to disable it.

  • http://twitter.com/mhendersonco Mike Henderson

    Great link treatment. Surprising and subtle.

  • http://about.me/jdesignz Jhay G.

    The new layout is so awesome!! Loving the footer. :)

  • Daniel Faria

    Effects and menus a bit slow on chrome (not sure why) but the design is great! congrats.

    • http://www.webdesignerdepot.com/ Walter Apai

      We’re working on optimizing and cutting down the code as we finish addressing some bugs. Will be addressed.

  • http://twitter.com/dhemley Debbie Hemley

    Wonderful new site! Congratulations Walter and WDD team. WDD is always setting the bar higher and higher for content and design.

  • http://dzine-studios.com/ Dan

    One thing, the related posts links are pretty weird when you hover over them, the block rollover style carries over to them, and it doesn’t really fit with the related posts, I think a more simple rollover still for the related posts would be more appropriate, because right now it just looks buggy. Overall a great redesign though, once the bugs are smoothed out it’ll be perfect :)

    • http://www.webdesignerdepot.com/ Walter Apai

      Well spotted. Something got messed up with the code, it was supposed to be a simple underline. I’ll fix it shortly. Thanks!!!

  • http://www.webdesignerdepot.com/ Walter Apai

    Many thanks to all of you for your great feedback. There are still some bugs out there, especially on mobile devices. We’re working hard to fix these as soon as possible. I’m also listening to the constructive criticism and ideas for things that may need some improving. Keep them coming! ;)

  • Adrian

    Congratulation Walter, very good responsive webdesign.

  • http://www.facebook.com/ojacko Chris. Jack

    very nice! love the logo and the typograph

  • http://twitter.com/KyleChicoine Kyle Chicoine

    Nice redesign!

  • http://www.webdesignerdepot.com/ Walter Apai

    Yes, this will be implemented in the coming days, keep an eye out for it :)

  • Konstantin

    I LOVE IT

  • Shaunyk

    OK the next post I want to see on WDD should be titled “How to add a paralax header effect to your blog”

  • http://www.umairp.com/ Umair H. Peracha

    A little slow to load (I have 256kbps line) but the footer is worth every single bit!

    Congratulations!

  • Paul Corbett / MyPostcardFrom

    Really love this new design – always feel if a design makes me want to go and redesign my blog then it must be good and this one fits the bill

  • Benpoulax

    Please no paralax… it is really annoying when navigate on the site

    • http://www.webdesignerdepot.com/ Walter Apai

      Right click to disable.

  • http://webdesignmash.com/ Gabriella Sky

    Wow! I used to love the old design but this redesign is awesome.

  • Sivakumar

    I love this redesign

  • http://twitter.com/dizajnmagazin Josip Vrbic

    Great redesign, very clean and content oriented. Like it very much…

  • Affan

    Sweet. Btw, what jquery plugin are you guys using to add the zoom effect to the featured image?

  • cristogi

    i think this is one of the best redesigns i’ve ever seen. although the site is really heavy, and viewing it on “slower” connection is not that confortable… if you could cut some weight it would be awesome!

    • http://www.webdesignerdepot.com/ Walter Apai

      Thanks, will do!

  • Alireza

    Oh! It looks well.

  • ch_bordeck

    incredible nice work, i love the aditional plus navigation, it’s very well-conceived concept behind.

  • KC Rajput

    yeah.. LOVE it.. Cool colors in header and effects are great.. :)

  • SDwebworks

    What more can I say? You guys are definitely great! I love the header banner, very colorful, awesome design! What tool did you use for your mobile web app?

    • http://www.webdesignerdepot.com/ Walter Apai

      Thanks. The mobile is just the same site, not an app :)

  • http://www.americostech.com/ Website Development Companies

    Amazing upgrade although you could definitely experience the bloat here, I would destroy the paralax for sure.

    • http://www.webdesignerdepot.com/ Walter Apai

      Thanks. Right click on the header to disable parallax :)

  • Sanvi

    Really fantastic post and very nice layout.

  • http://twitter.com/rpk103 rpk103

    Lots of new features. Nice job. However, the mini browser feature needs works (layout clips on Chrome 23). Also need a way to dismiss it without going back to the minus sign.

    • http://www.webdesignerdepot.com/ Walter Apai

      Thanks. There is a close button for the widget top right.

  • http://www.ddigangi.com/ Dan DiGangi

    I wish Chris Coyier would collaborate with you on his next redesign. This is what a good redesign with some forward thinking results in.

    • http://www.webdesignerdepot.com/ Walter Apai

      Oh :)

  • http://twitter.com/GreerWeb Greer Web Solutions

    looks really cool.. not sure about functionality but I love the concept.

  • Danyel Perales

    Great redesign!. It looks great on all devices. Anyway in my honest opinion it needs a bit more work for mobile version specially in top menu and load speed. Nice job!

  • http://www.webdesignerdepot.com/ Walter Apai

    Will become slimmer, promise.

  • http://www.webdesignerdepot.com/ Walter Apai

    Thanks!

  • http://www.webdesignerdepot.com/ Walter Apai

    Right click to disable parallax.

  • http://twitter.com/monirom monirom

    Love the new design though there are issues with performance. 18secs to load on a 105Mbps WiFi connection is ridiculously long time to wait.

    Also the bloat just keeps navigating between pages — difficult. Last, on smartphones (i.e. hdpi Android devices and Retina Display iPhones — esp iPhone 5) the layout falls apart (pictures don’t load, the hidden parallax effect graphic makes an uninvited appearance obscuring content in the footer. Just thought you guys might want to know.

    But Kudos none-the-less for pushing forward where other sites fear to tread.

  • alekmar

    I love the new design and all the little details. The header, the logo, typography, everything is great. Superb job!

  • TJACKSON

    Great redesign!!! Good use of color, layout, and responsiveness. After reading some of the other comments I’m surprised to see some of the negativity. Everything seems to function great without any delay or lag. I like the logo redesign, kept it simple with a little bit of flare. Overall, GREAT JOB!!!

  • http://twitter.com/mikesensei Mike Sewell

    I agree, the header and the parallax are both great!

    • http://www.facebook.com/edd.biel Edd Biel

      Did some of these people not read the article? They kept the header with a very illustrative feel because that’s what the previous design encompassed, and objectively speaking here, i think the clean vector images and subtle interlinking typography on the logo form a very nice first impression.

      It screams quality and detail, and that’s what good design is all about (or should be).

      Overall nothing less than an AMAZING redesign, and you should all be very proud of the work you have put in.

      Edd

  • Monkgogi Samson

    For a moment, I thought I landed on the wrong website. Great redesign. Impressive User Interface with a much cleaner look. Well done!

  • Scuttlecog

    It’s pretty rare that I’ve seen such a radical redesign of brand that has worked as effectively as this one–the new website is just great! You can really see the focus on the user experience!

    On a technical note (and one I’m ashamed of asking, but…) how did you pull in content like your featured items sections? I love the way it looks on the homepage but there’s not a lot of examples out there in the wild that I’ve found and I can’t work it all out. :[

  • dedide

    Pretty but for me, it kinda sucks. Waaaaaaaaaay too busy and hard to scan now. Pity as your content is top notch and this design distracts from it rather than features it.

  • http://www.facebook.com/supriya.sahib Supriya Malhotra Sahib

    Although the site is heavy but I did love the overall look and feel…Just the kind of design I would have expected from WDD !! And I really appreciate the way you have described the attributes of your design. But having shared with pals…I agree on the part that earlier design was easier to grasp for a newbie at least :-)

  • http://www.vectorss.com/ Vectorss

    one more time WDD is perfect!

  • http://twitter.com/marcwhitbread Marc Whitbread

    Parallax header should be deactivated by default if CSS3 transforms are not supported by the browser. Looks great in Chrome/Safari but Firefox cannot handle updating 6 elements on mousemove at the same time.

  • http://www.neogrey.com/ Ivan Filipov

    the heavy header is absolutely pointless and busy. Other than that, nice update.

  • http://twitter.com/R_DSGN ♥ RDSGN ♥

    discussions were interesting and very inspiring .. I saw this blog very comfortable to visit and when to read feels comfortable .. in love with this :)