Design Deconstructed: WhiteHouse.govListThumbs
Design Deconstructed: WhiteHouse.gov
Hello, my name is Youssef Sarhan & I regularly write on my design blog over at www.whiteinkblog.com, 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: www.whiteinkblog.com)
In this edition of Design Deconstructed (DD) I am going to be observing the brand new website of the White House (http://www.whitehouse.gov/).
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.
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.
Further down, a divider which separates the main content and the categorical links. You may like to click and view the image at 100%.
Similarly at the bottom.
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.
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 www.change.gov 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.
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:
http://www.whitehouse.gov/includes/eop/style.css
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;}
Finally, the colour palette consists of appropriate shades. Blue, Navy, Maroon, Grey, etc. Here is a simple drop selection from the blurred image.
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.
Check it all out here: www.whitehouse.gov
Further Reading:
Design Deconstructed: White Ink Blog
Design Deconstructed: WP Remix
About the author
My name is Youssef Sarhan and I am a Graphic Design student at The National College of Art & Design, Ireland. I co-founded WhiteInk with my friend Tim Phelan; which we occasionally write on. I also talk about and give tutorials on motion design at Keyframe Kid. Have a read of either to learn more about who I am and what I do.
Sponsored Links:
19 Comments
very cool although i don't get it so much.
It's a breakdown of the design elements of whitehouse.gov. Identifying the grid, colour, typefaces and other user interface features.
Nice break down, I see you pay attention to fine detail...I like it that way..
Keep up the good work.
Would like to see some more breakdowns in the future!
An1ken
Great article and a very good concept. you should keep doing this Deconstructing thing :) it's really helpful.
thanx again.
Interesting post, I've been following the site since it was updated for Obama. The designers behind it are very talented!
Hey Youssef - nice reconstruct. I wanted to point out that the new design loads at about 780K which means there is a lot of detail and hi res images but they kept it below 1 MB to keep it reasonable in size. The designer also used a fixed background image:
http://www.whitehouse.gov/images/eop/bg-tlpg.jpg
which weighs in at 80K and 1280px × 1180px. You know that is one of the biggest design decisions now for me... do I go with the fixed image background or the repeat-x vertical image or whatever. Best Regards -
intrestesting read indeed.
I'm glad to see people like this. There are a few more over at my blog www.whiteinkblog.com I'll be posting my google one here soon! Keep an eye out.
@NY Sailing, yes the big background image on whitehouse.gov was a good idea, there's not a lot of information in it as it's mainly white with some grey and blue. I must say it's a very well crafted website with great attention to usability. It'll be interesting to see if and how it develops.
thanks for the break down, some good design ideas there. keep up the good work.
I like that, Youssef; and I think Obama did a good job with design; or at least better than any other president...
really interesting... thanks for sharing!
Great breakdown and great design as well, it's a real improvement from the old one
Word. . .that new site is laid out very nice, "shear simplicity"
very clean too. . . another good reflection of a promising transition....now that old site on the other hand :(
hi thank you
Thanks so much for sharing your hard work.
It's great!!! Can't wait to send this to
everyone. Loved the captions and was fun to
comment. Most excellent. One last word...Clarence
Thomas. ok, 2 wordstransparency – refusing
to take donations from lobbyists or PACs,
improving disclosure and creating a database
where the public can track federal contracts
and earmarks.
netlog
sohbet
bayan arkadas
sex
thank you
whitehouse.gov principal designer is Scott Thomas (http://simplescott.com/) - he was the designer for barackobama.com as well, and you can see many similarities. Clearly, he doesn't represent the entire team for either project, so there is a lot of praise to go amongst others who have had a hand in both sites; certainly however, those teams have done a tremendous job, and are globally representing a web design / development community in a manner all of us can be proud of (at least comparatively).
Great article.. I love deconstructing websites also.. analysing the finer points to understand why they work so well.
Hi Youssef! I really like how you explained the development process of this website. You pointed some really interesting details.
I would love to have your work on my site.
Thanks!
Joe
When will there be another PS Tutorial?
I believe the company responsible for producing it was Blue State Digital found here http://www.bluestatedigital.com/ the was an expose on them in october 2008 issue of pint magazine found here http://www.printmag.com/tabid/416/Default.aspx.
Hope it helped.
-Jef
Post new comment