Rapid Prototyping - The 960 Grid System

by Ezra

The 960 Grid Layout system is a well thought out set of tools and templates that can greatly increase the speed and process when designing and building sites. It is only a single tool to slip into your belt of tools, but it is pretty far reaching and comprehensive and the download includes css/html; templates for fireworks, visio, omingraffle and photoshop; a GNU public license; and printable pdf sketch sheets. It is based around the philosophy that all modern monitors support at least 1024 x 768 and that 960 is divisible by the widths contained within the template. The layout and structure of the template is well documented on the demo page.

From a UI / IA design perspective, this is a very handy tool when thinking about page layout with specific attention to pixel height and width of a page. Great for example, when a site has to be E-Govt compliant and there is a set amount of content that needs to be scaled in a thought out fashion.

The 960 grid system is a generous offer from Nathan Smith, a Senior Front-end developer who works for Viewzi. His personal site is called Sonspring, through which he does not for profit work for charities and religious organisations.

6 Fantastic Interface Decisions in Google Chrome Browser

by Ezra

What are the steps Google have taken to set their browser apart from the competitors when it comes to interface?

1. The Dashboard view

This is something that Opera was doing well way back when, and was something that set it apart as a browser. It is a piece of innovation that is only available in other browsers (Firefox) as a plugin.

2. The clean window

Unlike most of the other browsers, Google have decided to keep everything below the top toolbar dedicated to content. There is no footer bar, and it actually subtly improves the overall browsing experience.

3. The clean menu bar

Everything about the standard browser is minimal and the menu bar is the jewel in the crown. Everything has been stripped back to the core essentials required for maximum functionality.

4. Iconography

This is once again very subtle, but there is actually only one persistent word in the whole window (not counting any content, search terms, or urls). That is the word “Google”. Even then it is a word mark or brand that we are all highly familiar with. Everything else is represented by iconography. Elegant, clean and simple.

5. Drawing on well known elements

Google have worked smarter rather than harder, and innovated where appropriate, but probably more importantly – they have gone with convention also. The tools and settings of Chrome are located in exactly the same place as IE7 (the top right corner, under the close button) which is currently shipping as standard with Windows Vista. Rather than trying to reinvent the wheel, they have reduced the learning curve of the large population who already use Internet Explorer.

6. Search

If the clean menu bar is the jewel in the crown, then the search functionality is the inset blue diamond in that jewel. Google have built their empire on search, so it is appropriate that the search functionality is the all singing all dancing part of the browser. By doubling up the URL and search box together they have authored functionality that I’ve often wished for. They have also given the text a beautiful hierarchy within the box that distinguishes search, and humanizes URLs by separating out the key part of the URL and the persistent “lingo” (http://, php, etc.)

Summary
In summary from an interface and GUI perspective Google Chrome is a beautifully simple yet functionally elegant browser. It is easy to overlook the fact that to reach this balance of simplicity and functionality, it is most likely that many hours of user testing and research went into this product. 5 stars.

Google Chrome Market Share

by Ezra

 

Chrome stats

Chrome stats

Evidence of the power of the Google brand is blatantly aparent in the statistics of the first 24 hours of the release of the new “Google Chrome” browser. They achieved 2.6% market share in the first 24 hours. Thats double Opera’s market share, and encroaching on Safari. Given that Safari ships with Macs, that is pretty impressive. Full blog post by Google is here.

4 form progress indication ideas

by Ezra

Here is a quick snapshot of some form progress indicators that I sketched out for a Government web form I’m working on at the moment. I had a brief search around the web and couldn’t find much on specific progress styling, and it’s often a part of the process I spend a bit of time trying to work out. Hit the image to link to the full size version.

Authoring a new template

by Ezra
Visio templating

Visio templating

One of the big things on my todo list is to get a new template sorted for Infofoundry, and balance the brand so that I’m not using someone elses template. It’s one of those things that often gets put on the back-burner but is really important and considerably raises the professionalism of your site. At the moment I’m creating elements for the design file in photoshop, and I may or may not post them as they get completed.

« Previous Page — Next Page »