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:
- 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.
- The previous version did not reflect my design sensibilities, which are inspired heavily by print design, typography and attention to even the smallest details.
- The previous version was just much too stark; color was needed!
- We all get tired of design at some point (as I’m sure I’ll eventually say about this design).
- 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 Design, Cubicle, 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!
