If you are a graphic designer or an interaction designer and have ever been tasked with creating a style guide or UI guidelines document (both are different and I’ve had the pleasure to work on both of them creating templates and the actual documents for brands and products), this list should help you out as a consolidated list of references. This list is going to be constantly updated (and will ultimately be a monster list, it’s quite modest for now) of publicly accessible style guides and UI guideline documents on the web. If you find any links not working or would like to suggest one that is not on the list, feel free to comment and let me know.
- 3M
- ABB Brand Identity
- ACDSee Brand Style Guide
- Air Products Identity Standards
- Ameritech Graphical User Interface Standards and Design Guidelines (This one is from the Internet Archive)
- AMAIA Residence Brand Manual (PDF, 816 kb)
- Android User Interface Guidelines
- Apple Human Interface Guidelines
- Barbican Brand Guidelines for Print / Web / and Plasmas
- BBC Future Media Standards & Guidelines
- BBC Global Experience Language (GEL)
- Belfast Zoo Brand guidelines
- Blackberry and RIM wireless handheld UI Developers Guide (PDF, 1.3 mb)
- BlackBerry Branding Guidelines (PDF, 300 kb)
- Brick brand guidelines
- Cargill Identity Style Guide
- Cambridge University Brand Manual
- Cunard Brand Guidelines
- Easy Group Brand Manual (PDF, 2 mb)
- Eclipse User Interface Guidelines
- Federal Identity Program (Canada)
- GOOD Technology Brand Identity Guide
- Gnome Human Interface Guidelines
- Heineken Brand Manual
- iPhone Human Interface Guidelines
- Java Look and Feel Design Guidelines
- KDE User Interface Guidelines
- Kew’s Brand Guidelines (PDF, 5 mb)
- Microsoft Inductive User Interface Guidelines
- Microsoft Surface User Experience Guidelines
- MITRE- Guidelines for designing user interface software
- NASA’s webstyle guide
- Novozymes’ brand guide
- The New School Visual Identity Manual (PDF, 6.5 mb)
- The New School Web Style Guide
- Nokia Design and User Experience Library
- Oracle Technology Network Guidelines
- Palm User Interface & Human Interface Guidelines
- RSA brand standards
- SAP Interaction Design Guide for Internet Application Components
- SAP Design Guild
- SAP User Interface guidelines
- Silicon Graphics Indigo Magic User Interface Guidelines
- Skype Brand Identity Guidelines
- Spelman College Visual Identity Guidelines (PDF, 1.3 mb)
- Reuters Brand Center
- Taligent Human Interface Guidelines
- WebEx brand style guide
- Web Style Guide 2nd edition
- Windows User Experience
- Windows User Experience Guidelines
- Windows User Experience Interaction Guidelines
- Windows XP Visual Guidelines (There’s a download section to the right to download WindowsXP DesignGuidelines)
- Yale Web Style Guide
- Yale’s Visual Identity
- Yahoo! Style guide
Published in 1954, Fitts’s Law is an effective method of modeling the relationship of a very specific, yet common situation in interface design. That situation involves a human-powered appendage at rest (whether it’s physical like your finger or virtual like a mouse cursor) and a target area that’s located somewhere else.
Visualizing Fitts’s Law
For people who need tables in everyday work they are hated element that makes them scream. And it shouldn’t be this way. Here are some of the patterns that can help in creating less evil tables.
Ultimate guide to table UI patterns
Three more table UI patterns
.
Google Drawings is the latest addition to Google Docs. You can use it for wireframing with this stencil kit.
A Wireframe kit for Google Drawings
Human-centered approaches to industrial and interaction design have long focused on studying human behavior to create informed and appropriate designs. A social interaction designer must consider not only people, environment, and existing tools, but also the unseen elements of the system such as social relationships, power dynamics, and cultural rules.
Social Software: The Other ‘Design for Social Impact’
If you’re running a project where you mock up designs, get them approved, code them up, build a CMS, hook it all together, and then everyone looks around and says “Who’s got the content? Wait, this content doesn’t match the designs and it won’t fit in the CMS!” then you have a problem. A big problem.
Lorem Ipsum is not the cause of your problem. It’s a symptom. The real problem is an overall process that treats design and content as separate tracks without appropriate communication, collaboration, and checkpoints along the way.
In Defense of Lorem Ipsum
This post provides a list of more than 20 resources that can be used in sketching phase of application development categorized as follows:
- Printable sketch templates for websites
- Printable sketch templates for mobile applications
- Sketch Books
- Make you own sketch templates
A Collection of Printable Sketch Templates and Sketch Books for Wireframing
Freescale conducted extensive research with existing non-Windows netbooks and learned that both the user interface and form factor issues co-mingle in these devices. They approached the Savannah College of Art & Design (SCAD) industrial design department and asked them to work on concepts that address issues for specific markets: tweens, teens and soccer moms.
Two sponsored courses that participated in this project. What follows is the class’ process for developing the initial framework and vision for a new graphical user interface to run on top of an existing operating system (like Linux) that can take advantage of an ARM CPU chipset on something akin to a netbook or a smartbook.
Case Study: Freescale Netbook Design at SCAD
Published in the ‘Ergonomics in Design’ journal in 1997. The author collected and created this list of 34 thumb rules (given below in order of priority) that were found particularly useful during the design process by colleagues working in the human-computer interface (HCI) design field.
- Know thy user, and YOU are not thy user.
- Things that look the same should act the same.
- Everyone makes mistakes, so every mistake should be fixable.
- The information for the decision needs to be there when the decision is needed.
- Error messages should actually mean something to the user, and tell the user how to fix the problem.
- Every action should have a reaction.
- Don’t overload the user’s buffers.
- Consistency, consistency, consistency.
- Minimize the need for a mighty memory.
- Keep it simple.
- The more you do something, the easier it should be to do.
- The user should always know what is happening.
- The user should control the system. The system shouldn’t control the user. The user is the boss, and the system should show it.
- The idea is to empower the user, not speed up the system.
- Eliminate unnecessary decisions, and illuminate the rest.
- If I made an error, let me know about it before I get into REAL trouble.
- The best journey is the one with the fewest steps. Shorten the distance between the user and their goal.
- The user should be able to do what the user wants to do.
- Things that look different should act different.
- You should always know how to find out what to do next.
- Don’t let people accidentally shoot themselves.
- Even experts are novices at some point. Provide help.
- Design for regular people and the real world.
- Keep it neat. Keep it organized.
- Provide a way to bail out and start over.
- The fault is not in thyself, but in thy system.
- If it is not needed, it’s not needed.
- Color is information.
- Everything in its place, and a place for everything.
- The user should be in a good mood when done.
- If I made an error, at least let me finish my thought before I have to fix it.
- Cute is not a good adjective for systems.
- Let people shape the system to themselves, and paint it with their own personality.
- To know the system is to love it.
Expert Ratings of Usability Maxims (article access requires purchase)
Wireframes Magazine is a collection of UI design techniques and samples by interaction designers and information architects across the globe.
Wireframes Magazine