Grid

Book Suggestion: Ordering Disorder Grid Principles for Web Design

abduzeedo — Wed, 02 Nov 2011 04:39:08 +0000

The book suggestion of the week is a must have for those willing to design nice web sites and pretty much anything. It is called Ordering Disorder: Grid Principles for Web Design (Voices That Matter) and as the name says it is all about grid systems or the principles behind it.

Book Description

The grid has long been an invaluable tool for creating order out of chaos for designers of all kinds—from city planners to architects to typesetters and graphic artists. In recent years, web designers, too, have come to discover the remarkable power that grid-based design can afford in creating intuitive, immersive, and beautiful user experiences.

Ordering Disorder delivers a definitive take on grids and the Web. It provides both the big ideas and the brass-tacks techniques of grid-based design. Readers are sure to come away with a keen understanding of the power of grids, as well as the design tools needed to implement them for the World Wide Web.

Author

Khoi Vinh is internationally recognized for bringing the tried and true principles of the typographic grid to the World Wide Web. He is the former Design Director for NYTimes.com, where he consolidated his reputation for superior user experience design. He writes and lectures widely on design, technology and culture, and has published the popular blog Subtraction.com for over a decade. Follow Khoi on Twitter: @khoi. Khoi's blog: http://www.subtraction.com

Some Photos

Buy Now from Amazon

About the author

Abduzeedo is a blog about design. There are all sorts of articles for those who want to look for inspiration. Also you will find very useful tutorials for the most used applications out there, with a special selection of Photoshop Tutorials and Illustrator Tutorials. You can get in follow us via Twitter at @abduzeedo

Happy St. Patrick's Day Wallpaper

Youssef Sarhan — Mon, 16 Mar 2009 23:31:45 +0000

With St. Patrick's Day just around the corner I figured I'm spread some Irish cheer. Put some Paddy's Day on your desktop.

Click for full size 1920 x 1200

Enjoy.

From Ireland!

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.

Design Deconstructed: WhiteHouse.gov

Youssef Sarhan — Sat, 21 Feb 2009 03:41:55 +0000

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

Grid

Book Suggestion: Ordering Disorder Grid Principles for Web Design

The book suggestion of the week is a must have for those willing to design nice web sites and pretty much anything. It is called Ordering Disorder: Grid Principles for Web Design (Voices That Matter) and as the name says it is all about grid systems or the principles behind it.

Book Description

Author

Some Photos

Buy Now from Amazon

About the author

Sponsored Links:

Happy St. Patrick's Day Wallpaper

With St. Patrick's Day just around the corner I figured I'm spread some Irish cheer. Put some Paddy's Day on your desktop.

About the author

Sponsored Links:

Design Deconstructed: WhiteHouse.gov

About the author

Sponsored Links: