Example style guides. Various formats and examples.

Ideas for creating a style guide for websites and branding.

Remember when MapQuest was the online map site? Then Google came along and rained on their parade in 2005 with their dynamic-loading AJAX secret sauce which enabled you to infinitely pan around the map. Ever since then, MapQuest has been dead to me – until now. The AOL-owned site unveiled their new look today and it is a complete revamp. Their logo took a turn from a comic typeface to a more serious, sans-serif one. Reddish-marroon, out! Green and purple, in! The new branding will certainly take some time but there is more to this re-launch than a new log0.

MapQuest has made their maps look more like paper maps. Well what do I mean by that? The color choices by the MapQuest team are really spot on. You might not really think about it, but the distinct colors used by MapQuest make their maps easier to read. Major interstate highways are blue, secondary highways are an orange color, and streets are yellow. This visual hierarchy of most important roads to least important helps focus your attention as your looking around. Compare this to Google Maps where the colors are so similiar that the roads kind of blend together. The label style on Google Maps is a bit easier to read than MapQuest as I think Google Maps is better for locating city names and MapQuest is geared more towards a visual search of a map. For a more in-depth analysis about map design, see A Brief Comparison of Google Maps, Bing Maps, & Yahoo! Maps by 41Latitude.

The new MapQuest layout is akin to Google Maps with two-thirds of the screen dedicated to the map and the left third of the page for search and directions. Along the top of the map is a carousel navigation featuring groupings of locations like grocery stores, bars, and gas stations. It’s a well done interface for finding nearby attractions on the map. Most people stick with MapQuest because they trust their directions over others. After a couple of test searches, I prefer the directions from Google better. But MapQuest is more enjoyable to just browse around. One feature MapQuest did really well is right clicking anywhere on the map will bring up the address of that location. Sure the address is an approximation, but the map bubble that pops up gives the house number, street, city, and zip. Sometimes there is even a 360 degree view just like Google’s Street view. MapQuest’s street view feature is more basic but I find it more intuitive to pan around. It doesn’t take up the whole screen and its easy to just pop in, pop out and continue on your way.

Will I’ll drop Google Maps and make MapQuest my dedicated online mapping service? Probably not. Google Maps has too many extra features for a power user like me (auto complete, public transportation, scroll wheel to zoom in/out). But for those people that feel Google Maps is too complicated and  hard to use MapQuest provides a clean, easy to use mapping site that is geared for people like them. I would easily recommend MapQuest to an average computer user while Google is for people who want more features. The more competition the better for all of us. MapQuest has certainly stepped up it’s game and I can’t wait to see what else they have in store. MapQuest Gets A Fresh Coat Of Paint by Russell Heimlich

Tool for generating vertical rhtym. Kind of weird to use.

Blurred background creates depth. Nice design. Handy checklist for launching new sites to boot!

Seamless background generator.

Crazy looking type.

Nice design with big cover art and CD Jewel cases. Integrates Grooveshark as well.

http://0to255.com/ – “0to255 cures your color manipulation woes. Simply pick the color that you want to start with and 0to255 gives you a range of colors from black to white using an interval optimized for web design. Then, just click the variation you want to use and the hex code is automatically copied to your clipboard.” My favorite part is that it uses a RESTful API so you can do things like http://0to255.com/0099ff You know I just love things that you can manipulate with a url.

http://cssdesk.com/ – A tool for quickly mocking up snippets of HTML/CSS. I would prefer to just create a new HTML file in Dreamweaver and play with it using Firebug, but this could work too. I found the cursor in the HTML/CSS box to be a little off when hitting return. CSSdesk has a nice interface which is almost like a desktop application. And since you can download it and run it locally, I guess it qualifies as a genuine application.

Please Do Not Change Your Password – Alot of security’s best practices cause more problems than they solve. “At countless conferences and seminars, experts have consistently called for more education and outreach as the answer to user apathy or ignorance. But the research of Herley and others is causing many to realize most of the blame for noncompliance rests not with users, but with the experts themselves — the pros aren’t able to make a strong case for all their recommendations.”

Holistic Web Browsing: Trends Of The Future – “The future of the Web is not at your desk. It’s not necessarily in your pocket, either. It’s everywhere.” How do we design for a Web that was only intended to be used in a single context?

WTF? (Video) – “This clip comes from Hard Ticket to Hawaii, possibly the worst 1980’s movie made (though to be fair, it’s tagline of Bombs, Babes, and Beaches is quite… radical).” At first I thought the acting was WTF, then I saw the ending.

“How many SEO copywriters does it take to change a lightbulb, light bulb, light, bulb, lamp, bulbs, flowers, flour…?” — Chris Rowe 5 Links Of Interestingness by Russell Heimlich

Generate CSS3 code for different browsers from one standard tool.

DC design firm with interesting visuals

Sliding label technique for spiffy forms.

Cross browser CSS3 techniques including, gradients, rotating images, RGBA,

Neat use of transparent pngs and last.fm album covers.

typophile.com had a type battle for members to design a new logotype for digg.User aluminum posted this fine Bing version of the digg logo.

It’s a clever idea since both brands are 4 letters and the second letter is an “i”. (via dburka, the creator of the digg logo) a

Lots of templates and wireframes for prototyping and planning web projects

Slick web design with a neat JavaScript falloff interaction between sections

Several different disc templates in a variety of file formats.

Web design trends of 2009 - "I notice a lot of them are minimalistic design with beautiful serif fonts. The grungy and sketchy styles are still strong. However, the large background is no longer as hot as in 2008, instead, texturized background is popular in 2009."