Web design from Scratch, free online course in design for the webHome - introduction to Web Design from ScratchBasics - effective web design processTutorials - hands-on, practical lessons in designing clear web pagesCase Studies - useful examples that apply the web design principles
Clear interface controls

This section will feature a series of worked examples that explain how to develop a set of clear, usable, and attractive interface controls.

Contents

Tabular list »

Web Doctor's tabular list is a grid of data items that features:

  • Subtle 3D styling
  • Row selectors / Select all function
  • Sortable columns
Item Currently sorted: click again to reverse order Description Supplier Price Avail
021 Small rubber widget Widgets Inc. £1 Yes
204 Photoshop CS Adobe Inc. £499 No
213 About Face 2.0 Alan Cooper £24.99 Yes
336 Dell Inspiron 5150 Dell.co.uk £999 Yes


Datasheet »

Web Doctor's datasheet is a fully editable grid-based form:

  • Datasheet-style input grid
  • Ability to update multiple changed records
  • Shows which fields have been edited
# ID Name Dept Notes
1
2
3
4
5


CSS link map (coming soon)

A neat technique for representing a group of related objects, and linking to them with highly usable mouseover effects.

The large size of these targets, combined with logical spatial layout, can make this an extremely quick method of navigation.

Corporate division
Management
Technical support
Field agents
Sales
Channels
Clients
Top ^ Next topic »
Comments
How useful are these worked examples? Is the format helpful? Would you like to see more of this kind of stuff?
Ben Hunt - 09:49 on 13 Aug 2004
The Controls are great, great little widgets. keep up the good work, its inspiring!
greg - 09:17 on 22 Sep 2004
Tabular list no workie in firefoxie
foofox - 07:33 on 17 Nov 2004
foofox, what's not working? Clicking the button isn't meant to work. Please let me have more info (ben@scratchmedia.co.uk)
Ben Hunt - 11:18 on 18 Nov 2004
'Web Doctor's' tabular list seems to screw up the top row in Firefox. shame that it works in 'qwerky' IE, but not standards-compliant Firefox...
Jao-Quin - 09:31 on 17 Mar 2005
Please let me have more details Jao-Quin.. Email ben@scratchmedia.co.uk
Ben Hunt - 09:51 on 18 Mar 2005
Looks and works fine to me... Win 2000, Firefox, 1024x768.

-Fuzzy
Fuzzy - 08:53 on 28 Jun 2005