The dawn of the redesign

After two years, some odd months and endless hours of starting over from scratch, I’m excited to announce and display The Design Cubicle’s redesign! Not only did we give it a fresh coat of paint and some detailed body work, but we also worked with our friends at Paravel — Trent Walton (@TrentWalton) and Dave Rupert (@davatron5000) — to perform some outstanding under-the-hood development using HTML5 and CSS3. I’ve also added some new features and sections to the blog.

Also, in celebration of the redesign  launch we are giving away some awesome prizes that were kindly donated. More on the redesign, new features and giveaway below.

Many of you might be thinking, “Man, this is much different from its predecessor,” and you are absolutely right. A few reasons for this:

  1. When I first started The Design Cubicle I would have never imagined what it turned into today. I was more or less only  looking for a quick way to share my thoughts on a customized pre-made template.
  2. The previous version did not reflect my design sensibilities, which are inspired heavily by print design, typography and attention to even the smallest details.
  3. The previous version was just much too stark; color was needed!
  4. We all get tired of design at some point (as I’m sure I’ll eventually say about this design).
  5. After two years of running this site, digging into my analytics, and watching comments and tweets, I’ve discovered what interests people the most and how they interact with it. Thus, I’ve eliminated a lot (sidebar and its items in particular) and brought more focus to the content — which is the reason people visits blogs, right? You will even notice I’ve eliminated banner ads and junk along the old sidebars. I wanted more focus on my content, and aimed to achieve that through both the design and the quality of the articles I deliver.

On typography and color

Coming from a traditional print design background, it’s no secret that I have a deep love for typography and layout, so it was only natural that this design embodied this passion. Also, since the majority of websites are 90% text (this website about 98% text) I felt the most important function was placing emphasis on the typography and compliment it with subtle details, patterns and other special touch.

After sharing a few shots and teasers on Dribbble a month or so ago, many of you enjoyed the new ‘The Design Cubicle’ masthead, which I’ve decided to substitute from a site logo to more of a site masthead(?). Reasoning: The site is more of an information source than it is a brand or company (and personally I am registered under Brian Hoff Design, LLC for my work).

As for the typefaces used throughout, the italicized serif for the mastheads ‘The’ is set in H&FJ’s Sentinel while the DesignCubicle, and faint TDC utilize the beautiful Tungsten. Design also incorporates a subtle drop shadow that I created and saved as a pattern in Photoshop and was cut at the inset (the white border between the type and the patterned drop-shadow).

The body copy is set in FF Dagny Web Pro using Typekit, which renders amazingly — specifically at very small sizes — since it was optimized to read better for use on any screen (look for use of fonts withWeb Pro in it’s name for best optimized results).

The red / orange background color and grey textured body background was inspired by a book cover design a saw a few months ago in Princeton, NJ. The color scheme stuck out in my mind when redesigning the site, so I decided to go with it. I am also tinkering around with the idea of changing the color scheme and typefaces monthly, to give the site a special, personalized touch and encourage readers to visit the site more (not just read via the ugly formatting of most RSS readers), so stay on the look out for that.

On the layout

The layout was one of the toughest and most limiting factors when redesigning. Two-years of formatting over 200 articles would have caused an over-workout  to completely restructure the main content area — specifically images that were originally made to be 500px wide — so I decided to keep the content to 500px to avoid too many headaches later on in the development stages.

Since I decided to eliminate the previous sidebars (they were getting too lost in the commotion) containing Twitter, Facebook, RSS and Hiring instructions, I opted to place this at the very top, while the new Availability area will be updated frequently to let potential clients know when I am able to take on additional freelance design work. I often find myself responding to emails, unfortunately denying clients work because I am at my max workload at the time of contact. Hopefully this streamlines things a bit. Rolling over this link brings up links to my Project Worksheets which are my questionnaires I provide all of my clients prior to working together. This helps to improve the initial contact and my workflow of taking on new work.

The bottom area / footer now contains information about myself, as well as Topics which you can browse if you are looking for something particular. You can always check out the new Search to find what you want as well.

On the development

I’ve had the opportunity to work with the talented developers / designers and friends Trent Walton and Dave Rupert on the development of this site. They truly detailed some beautiful front-end and backend markup using HTML5 and CSS3. We all really had a great time collaborating on this and can honestly say that they are some of the most talented guys I know.

I was going to write about the development and technologies used on this site, but I thought who better to hear it from than straight out of the horses mouths. I’ve invited both Trent and Dave to write an upcoming article on the development process, technologies implemented, and HTML5 / CSS3 techniques used throughout this site. Come back to read about this very soon and in the meantime make sure you check out Paravel, and their nifty “pet project”, The Many Faces Of.

New feature: Notebook

You might have noticed a new link: Notebook. This will be replacing our Sweet Tweets weekend articles. I find that knowing and staying informed in the design community is great for growth and improvement for any designer — plus who doesn’t like to discover awesome “designery-links” and informative articles? The Notebook will be updated daily instead of once-weekly (like that of Sweet Tweets) with high-quality articles about web and print design, development, to helpful resources and useful applications, and more. We even created its own separate RSS feed so you don’t miss out on all the good stuff around the web. I hope you all enjoy this new section, and if you find anything of top-quality don’t be hesitant to send it my way.

Giveaway and prizes

If you have any other questions or curious about the redesign / changes you can always send me an email or even feel free to ask away on Twitter. I encourage you all to express your feedback and if you see anything wrong or showing up strange let me know about it.

Okay, enough about the new site. We have some really great prizes to giveaway via our very generous friends and sponsors. Let’s get started.

1- Subernova - (Two) free project management licenses

Our friends at Subernova have kindly offered two lucky readers the chance to win one of two free 1-year licenses (value of $149.99 each) to their awesome and beautifully designed project management tool.

For those unfamiliar with Subernova, it’s a web-based app that allows designers and freelancers to track projects and clients, time track, keep up with milestones, invoice, and much more. You can run it from the Web, Desktop, iPhone and even the iPad.

2- Ugmonk - (Two) free t-shirts of choice

Ugmonk is contributing two free t-shirts of your choice for two winners! If you haven’t checked out the Ugmonk shop you seriously have been missing out on some beautiful t-shirts by designer, Jeff Sheldon. I own 3 of them myself (And then I woke up, Path to Nowhere, and One Hundred).

3- Smashing Magazine book

Smashing magazine has donated their new book to one of our readers.

“The Smashing Book is a printed book about best practices in modern Web design. The book shares technical tips and best practices on coding, usability and optimization and explores how to create successful user interfaces and apply marketing principles to increase conversion rates. It also shows how to get the most out of typography, color and branding so that you end up with intuitive and effective Web designs.”

4- Billings for Mac - (Three) Time Billing licenses

Our long-term friends over at Marketcircle are providing three (3) free licenses to their Professional Time Billing software: Billings.

“Billings logical workflow and intuitive interface makes quoting, invoicing and time tracking simple.”

I even love the Billings Touch app for the iPhone and iPod Touch — great compliment to their awesome desktop app.

5- Uprinting - (Five) sets of 250 stickers

Uprinting is kindly providing 5 readers 250 stickers / labels for free. The stickers sizes can either be 2 x 3.5″, 2 x 4″, or 3 x 3″ printed in full color on 70lb Label Matte coating. Includes free ground shipping as well, but eligibility is limited to US residents only (must be 18 and above to enter).

6- Neenah Paper - goodies-n-knicknacks for 5 winners

Over the past year I’ve had the opportunity to meet many great new friends through Twitter and the team at Neenah Paper is definitely one of them. For those unfamiliar with Neenah Paper, they offer some of the most beautiful papers I’ve ever seen, felt and smelled (yes, I’m a weird designer like that). Not only do they offer a range of gorgeous papers, but they also run a helpful blog, Against the Grain, of which I was interviewed awhile back:

“Against the Grain is about creating conversation and building a sense of community.  Our inspiration was to create a space where designers could go for information, ideas and inspiration.”

Neenah was extremely thoughtful and put together a huge box of cool things that they sent my way to give out to all of you. Items include Neenah-branded laptop cases, water bottles, pens, flashlights, envelope cutters and more! I will be putting together 5 “gift bags” of these items and shipping them off to 5 readers.

7- UAO Agency - (Two) copies of A List Apart’s HTML5 for Web Designers book

UAO Agency is a remarkable creative content agency that helps businesses be creative online. To celebrate the redesign of The Design Cubicle we are offering two copies of the premier A List Apart book: HTML5 for Web Designers! The book is a must-have for web designers looking to design and develop beautiful websites using the latest in web standards. As the website states: “The HTML5 spec is 900 pages and hard to read. HTML5 for Web Designers is 85 pages and fun to read. Easy choice.” Ships in June.

How to win

Comment on this post with a few thoughts on the redesign along with which item(s) you are most interested. I will be selecting the winners at random on May 31st by email (make sure you leave a valid email address in the email portion of the comment form). Also, sending out a tweet or two couldn’t hurt your chances either.

Thank you: Over the course of the past 2-months of this redesign I’ve received much appreciated help, feedback, and encouragement by so many of you I don’t know where to begin. Huge thanks to Trent and Dave for their amazing development and pixel-pushing skills and being patient with any last minute or crazy nit-picking comments. @DanielMall, @GregPAsh, @Yarcom, @StefanHartwig, and anyone else that had a look at the site before launch and offered feedback: Thank you. I appreciate all of your wonderful encouragement and comments on Dribbble as well. As always, to everyone that has supported myself and this site, I cannot thank you enough! It’s been fun redesigning this site and glad to present it to all of you. I hope you enjoy it!

Discussion and Comments

+ Add to the discussion
  1. Ella says:

    Uffff! I barely got used with your old design :))
    Agree with Dave, need my labels to this form :)
    Also, I love the design, but having it wider would allow much content and less scrolling…
    But I guess you aimed to fit the 800×600 resolutions also ?

  2. Angela says:

    I like that the redesign really puts your content first, while still using beautiful typographical touches. And I’m all in favor of the splash of color!

    As for the goodies, I’m most interested in the Ugmonk shirts and ALA HTML5 book.

  3. Dave says:

    Love the redesign.

    I’ve actually just been falling in love with the work of Trent and Paravel, so it’s doubly exciting for me to see this redesign. I like that more and more blogs are going back to smaller widths and less cluttered sidebars to keep the focus on the content.

    But the one downside I’m seeing with the small width is that when I get to the footer, I can’t see the full thing on one screen (and I have a big-ish screen; a 15″ MBP), which I found kind of confusing at first.

    Also, the placement of the “Older Comments” link seems a bit off; because you only show one comment I thought there only was one comment at first, then I tried to click on the “201 comments” link, but that didn’t do anything. Now that I think about it though, this might be an issue of the pagination of comments, so it’s only weird because I just happen to be seeing only one comment…

    Anyways, just being nit-picky because you strike me as the kind of guy who appreciates that kind of critique.

    And I’d like the HTML5 book :)

  4. The font looks awfully crapy on my firefox/windows. Safari/Windows is ok-ish. IE8 sharpens the text like crazy. Why not use html5/css3 font embedding instead of typekit..

  5. Carlos says:

    Oh my, you’re really one of a kind! One word: deliciousness!

    One thing I really admire with your work is their simplicity with exquisite attention to details. I love the colors, the subtle texture, the way you presented the archive list, the typography… heck, I even love the crisscrossing lines that I mistaken for a continuous looping design at first glance!

    If there’s one thing I’m really envious is your expert ability in handling and working with typography. It’s just something I really hope to learn in the future (perhaps you could write an e-book or a book on the topic?).

    As always, great job and please do continue pushing those awesome articles in! You just don’t know much help you’re able to impart to starters like me! :)

    Just tugging in my luck, just in case — the books, the shirt, and the gift bag are really awesome! Just saying :)

  6. Matt says:

    Brian your redesign has been really inspiring, just like all your other work! I love the amount of reduction, its about sheer communication now. The subtle border around the edges are a particularly nice touch.

    And thanks for putting this giveaway together, what a great way to celebrate your relaunch. The Smashing Magazine book, Ugmonk shirts, and stickers sound most appealing.

    Good luck everyone!

  7. Matt Vickers says:

    Love the new redesign!

    The red background really moves your focus into the middle and makes the text pop!

    Great job everyone.

  8. Janet K says:

    I like the proportions, but the dominant salmon color isn’t really my style :/

  9. Nathaniel says:

    Dude, this is gorgeous!
    I’m actually going through the process of redesigning my site (well, designing it for the first time, really) and am making the same decision you made: why have a bunch of crap in the sidebar that no one wants to look at? I’m pretty excited for it =]

    I’d love a copy of Billings =]

  10. Dan says:

    Love the redesign. Nice to see you chose a comfortable content width for reading text. Very nice attention to detail. Reminds me of A List Apart’s site. Cheers!

  11. Kyle says:

    This background color is striking. I can’t think of another place that I have seen it and it works so well with the grey. This is the first time I have read “the design cube” and I plan to become a frequent reader from now on.

  12. Love the new design.

  13. berfuser says:

    Great new design!

  14. I’m using FF on WIn7 and am finding the text really hard to read. Had to Ctrl+ to be able to read it but at least I was able to make the text bigger which is a big plus =)

    It looks good in Safari though.

    And I’d love that HTML5 book from ALA

  15. Nice clean design. I LIKE the reddish background, and the lack of clutter combined with ease of navigation is welcome.

    Thanks for the possible gifts. I’d fee especially lucky to get a Smashing book or a tee shirt.

    Keep up the good work.

  16. Kirsten says:

    Simple and sweet! Thanks for sharing the redesign experience!

  17. Matt Wendal says:

    Love the color! its very alive.
    The Smashing Book- really?

    Hmm… i will have to send this on to a couple of my buddies.

    Oh and your from PHilly too!

  18. Since I am new to the site, the design would be new to me no matter what. I like your choice of removing the sidebar. It does make me wonder whether they are worth it for anyone to have. The color is pleasing, though on my wide-screen, I wouldn’t mind having the body stretched a little further out.

    With that said, thank you for the contest. If I were to be so lucky to win something, I would love the “A List Apart” book on HTML 5 or the Smashing Magazine book. Actually, I would be pleased with anything. Winning something would make me smile. :)

  19. Kirsten says:

    Isn’t it funny – when I first saw the redesign I thought ‘that reminds of some of the classic Folio books my parents bought’. I love the striking simplicity and strong colour blocks. Initially though I did have problems finding the link through to the article or further info – may a bit too subtle being off to the left and not where I thought it would be intuitively. No matter – now i know and it fits into the overall theme and interface. Bravo from a repeat reader!

  20. Eddie Diaz says:

    I like the redesign and the color scheme. Great work Brian. I like the simplicity of the design.

    I’m interested in the smashing, and the html 5 books.

  21. oya says:

    I love your site. This is amazing site. Good luck.

Brian Hoff
About Brian Hoff: Designer, Writer and Speaker

I’m a graphic designer living in Brooklyn, New York who loves creating compelling and useful websites and memorable interactions across the web. When I’m not designing I can be found writing, speaking and occasionally part-time teaching at colleges — all on the subject of design. I started this blog to share my passion and experiences with designers and clients. I'm most active on Twitter; say hello: