articles on
UI Designs for the Web
Web has changed so much in the last 10 years, be it the end of the Flash era with the historic Steve Jobs post proclaiming why Flash wasn't good, Web 2.0 and the introduction of the iPhone to the mobile web with responsive design. There has been so much innovation in technology like faster connections that has allowed us to have more visually rich experiences. A couple of years ago we also saw the explosion of long scrolling pages aligned with uniform grids inspired by the Metro design that Microsoft adopted. This post celebrates past innovation while showcasing some design styles that I believe will help keep the web evolving. In my opinion, with CSS Flex Box, Columns, Regions and many new features we will be able to have powerful grid systems that will also allows us to do what graphic designers have been doing for ages, break the grid, explore with typography and create even more personalized and branded designs.
Grid Design References
For the past few weekends I have been playing with some new ideas for the Abduzeedo layout. Checking stats, analyzing what other sites do in terms of organizing large amount of content and heavily visual. One of the references I have been trying to use is newspaper grid systems. Below I selected some references I have in my mood board.
Book Suggestion: The Grid - A Modular System for the Design and Production of Newpapers, Magazines, and Books
The book suggestion of this week is again about grids. The book is called The Grid: A Modular System for the Design and Production of Newpapers, Magazines, and Books and despite the fact that it's an old book we can apply the concepts to our design for the new medias From earliest history man's close kinship with nature has guided him toward a sense of proportion in the shaping of his world. Just as mathematics began with the measurement of objects in harmonious relationship to each other and to space they occupied. The linkage of mathematical systems and design can be traced to the earliest cultures, and science and art have frequently found a common denominator in the search for the perfect form throughout history. Buy Now
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 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
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. Click for full size 1920 x 1200 Enjoy. From Ireland!
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: Google Design Deconstructed: WP Remix