With the recent release of the new Twitter website, it was time for Malenke | Barnhart to create ourselves a slunky (slick and funky) new design.

The first step to designing for Twitter is to understand the flexible layout of the site. As it turns out, the main tweets column is the only fixed-width element on the page. The right column, and left and right margins, scale with the browser window. On the plus side, there are some PSD templates available to help guide your design across 1024, 1280, 1440 and 1600 pixel widths.

In any Twitter design, you can configure the background image, text and link colors. The background image is always anchored to the upper-left of the window. We took advantage of this constraint to display M|B contact information in the upper-left corner of the background image so it is easily visible to all.

We recognized that varying amounts of the background image will be seen depending on screen size. In order to accommodate a majority of visitors, we adopted a maximum screen resolution of 1080 pixels high and designed to that. After accounting for minimal browser chrome and the permanent Twitter bar across the top of the page, we settled on ~1000 pixels for our background height. With a 1080-pixel height, we assumed 1920 pixels of width and made our background image capable of scaling up to that.

We designed our sweet-spot around 1440-1600 pixel width. With this common target size, we were able to integrate some fun elements into the background–our M|B hand sign, contact information, winged logos– such that they would be visible on most screens. Beyond those optimal dimensions, the background uses some low color-depth shapes to fill space without needing to fade to black.

With a background image designed, the next step was to apply our visual system to the backgrounds and text on the page. We used our primary brand colors to ensure readable text and create links that pop. We also included a slight transparency on the right column to let some of our beautiful background forms show through without impeding readability.

The sum result is a calm, but strong, brand presence. It plays up the dual dynamic of our internal culture: functional coolness with a titch of insanity. It was a fun project, and we’re very pleased with the result. We can’t wait to build the next one!

You can check it out at twitter.com/malenkebarnhart

What have you done with your Twitter page? We’d love to compare stories and exchange feedback!