Design Deconstructed:


Hello, my name is Youssef Sarhan & I regularly write on my design blog over at, and I also like to share my posts here, on abduzeedo. With a great audience and community it's a brilliant forum for discussion. In this feature I try to shed some light on the development process and/or elements of a selected design. By deconstructing the design into layout, typeface, colours & use of images we will hopefully develop a better understand of how the final result was achieved. I feel that this degree of awareness is crucial to a graphic designers development; being able to not only identify the design elements but the rationale behind them.(Via: In this edition of Design Deconstructed (DD) I am going to be observing the brand new website of the White House ( Within minutes of President Obama being sworn in the new site had gone live. I'd imagine it has received a huge spike in visitors but it seems to be coping perfectly. I'm trying to find out the designer/company who is behind it, so if anyone knows? It looks fantastic. It's clean, feels like a position of authority and most importantly approachable. It doesn't look like a news site, like it used to. Here's an image of the homepage.


As you can see it's pretty sharp looking. You can view a 100% version if you click the image. I have overlaid the grid over it, at least a grid which I think fits. It's a 3 column grid thats subdivided again into 3 more columns. The subdivisions really come into play in the bottom footer which has many links to different categories.

WhiteHouse.Gov Grid1

WhiteHouse.Gov Grid2

Starting at the top, I think the header shows the level and attention to detail that went into making this site look how it does. It's detailed, precise and well-planned. These small images can really set a design off.

WhiteHouse.Gov Header

Further down, a divider which separates the main content and the categorical links. You may like to click and view the image at 100%.

WhiteHouse.Gov Divider

Similarly at the bottom.

WhiteHouse.Gov Footer

Love the use of little stars in the required field instead of an asterisk*


Next is the Navigation, easy to use rollover bar, I love the use of italc/regular fonts. Set in Georgia.

WhiteHouse.Gov Nav2

WhiteHouse.Gov Nav1

I feel overall the site suits the new President. I'd love to see the development process to get a real idea of how it came to this end. It's a nice alternative to his also excellently designed website which he used during the campaign. The subtle use of the semi-transparent white box is a nice touch. Nothing too over the top on the site but at the same time it stands out and airs class.

WhiteHouse.Gov Traceparency

The primary typeface for titles of the site in Gerogia. Copied from what I think is the css.

h1, h2, h3, h4, h5, h6 {font-family:Georgia,"Times New Roman",Times,serif; color:#036;}

You can view the style.css file here:

WhiteHouse.Gov Primary Title Typeface

The body text is set in Lucida.

html, body {font-family:"Lucida Sans Unicode","Lucida Grande",Verdana,Arial,Helvetica,sans-serif;} body {font-size:12px; margin:0; padding:0;} strong, em, b, i, .bold {font-family:"Lucida Sans","Lucida Sans Unicode","Lucida Grande",Verdana,Arial,Helvetica,sans-serif;}

WhiteHouse.Gov Primary Body Typeface

Finally, the colour palette consists of appropriate shades. Blue, Navy, Maroon, Grey, etc. Here is a simple drop selection from the blurred image.

WhiteHouse.Gov Colour Pallete

WhiteHouse Pixelate Colour Pallete

Here is an image I was saving until the end; Its the before version, as you can see. It's a good change. A huge improvement from the previous site, which looked like a news site. Hopefully this will be a reflection on the presidency.

Old White House Site

Check it all out here: Further Reading: Design Deconstructed: White Ink Blog Design Deconstructed: Google Design Deconstructed: WP Remix

Written by