UI Patterns and Techniques: Introduction

May 26th, 2005

Each of these patterns (which are more general) and techniques (more specific) are intended to help you solve design problems. They’re common problems, and there’s no point in reinventing the wheel every time you need, say, a sortable table — plenty of folks have already done it, and learned how to do it well. Some of that knowledge is written up here, in an easily-digestible format.

These patterns are intended to be read by people who have some knowledge of UI design concepts and terminology: dialogs, selection, combo boxes, navigation bars, whitespace, branding, and so on. It does not identify many widely-accepted techniques such as copy-and-paste, as you probably already know what they are. But, at the risk of belaboring the obvious, some common techniques are described here to encourage their use in other contexts — for instance, desktop apps could make better use of Toplevel Navigation — or to discuss them alongside alternative solutions.

UI Patterns and Techniques: Introduction

Using Colour And Type Effectively

May 26th, 2005

There are lots of different mediums that good colour and typography should be used - magazines, books, posters, signage and (most applicable for us) screens. How we use colours and fonts (and just as importantly, how we use the spaces in between them) is the most telling aspect of web design - these things more than any other are what attract us to a website and also what repulse us too.
Typography
Ty.pog.ra.phy - The art, craft, or process of composing type and printing from it - The planning, selection, and setting of type for a printed work

Good typography leaves a user with hardly any impression at all - unless the user is also a designer who can appreciate what they are seeing. Conversely, bad typography will make a user leave.

Web Design Tutorials For New Web Designers And Designers New to Web Standards

LinkChecker - Firefox link validator extension for web developers

May 26th, 2005

Check webpage links at a glance with simple color coding. Ditch those massive listings of bad links that provide no context and add LinkChecker to your arsenal of web development tools today.

LinkChecker - Firefox link validator extension for web developers

Successful Web Development Methodologies [Site Planning]

May 25th, 2005

Having tried, trusted and standardised approach to Web development would go a long way to helping avoid the mistakes we all see over and over again. We need a Web methodology. However, finding a methodology that seems suited to Web development is not easy; making it work in the real world is even harder.

As the Development Manager for a team of 20, in the heady dotcom days, this was exactly the dilemma I faced. This article explores the issues that arose from our lack of a decent methodology, and how we as a team tried to resolve them. The result was the successful adaptation of an existing methodology for Web development.

Successful Web Development Methodologies [Site Planning]

What is information architecture?

May 25th, 2005

Organising functionality and content into a structure that people are able to navigate intuitively doesn’t happen by chance. Organisations must recognise the importance of information architecture or else they run the risk of creating great content and functionality that no one can ever find.

This article provides an introduction to information architecture, discusses the evolution of the discipline and provides a 9-step guide for how to create an effective information architecture.

It also discusses the relationship between information architecture and usability, in the context of real-world projects.

What is information architecture?

How to Style a Definition List with CSS - WebReference.com

May 25th, 2005

Most tutorials on the styling of CSS lists for menus use unordered lists, which, for people starting out with CSS, can be a little difficult to grasp as the use of unordered lists requires extra styling to remove the bullets.

In this tutorial I demonstrate how to style a Definition List, which is equally suitable for menus, but is a little easier to understand.

How to Style a Definition List with CSS - WebReference.com

Web Design Practices

May 25th, 2005

Web Design Practices is a site devoted to helping designers understand what design practices are currently in use on the Web—and aims to gather research about the usability of commonly-employed design practices.

The data presented on this site are intended to inform design decisions, not dictate them. Common practice does not necessarily equate with best practice—and the relationship between consistency and usability on the Web is remains a lightly researched area.

Web Design Practices

Unordered lists: more than just bullets

May 25th, 2005

When marking up content which could be defined in some way as a list, you should consider using an unordered list (

    ) for presentation. Not only does it improve the readability of your HTML code, it also applies meaning to content which would otherwise have none.

Unordered lists: more than just bullets

Essential Fonts For Designers | 300 Free Truetype Fonts You Should Have

May 25th, 2005

Essential Fonts For Designers | 300 Free Truetype Fonts You Should Have

Fontleech: The best free fonts on the web.

May 25th, 2005

Our constantly-growing index of the best free font sites on the web.

Fontleech: The best free fonts on the web.


0.217 s.