Page 66

121

Designing for the Web ~ Typography

Tables and forms Tables of data and forms should be given careful design consideration. If you forget the usability factors associated with forms on the World Wide Web for just one moment, the actual visual design of tables and forms should be quite simple: Use space well and make sure things line up. Well, it’s not always that easy. I had a baptism of fire with forms and tables. When I was 21, I had a summer internship at an advertising agency in Manchester, UK. In addition to the usual lowly tasks of being the ‘Spraymount Boy’ — yes, for a while there, I virtually lived in the cutting room — I was tasked with helping one of the artworkers, (unfortunately, not my best mate who got me the job, but a rather grumpy little man from Warrington), to help set the tables and forms for a huge plumbing catalogue. This thing was enormous — close to a thousand pages of cutouts, tables and order forms. The grid was set, the type styles were signed off, and it was just left to me and this bloke to fill the pages with thousands upon thousands of little nuts, bolts, thingemies and whatsits. Next to each cutout was a table that referred to the item’s specifications, which, in turn, related to an enormous order form in the back of the catalogue. Yes, this was in the days of mail order — way back in 1994. As tedious as that particular project was, it taught me some valuable lessons for setting tables and forms. Here are some of them: 1. Use a thick rule to denote headlines and thin rules to separate lines. 2. Don’t use alternate background colours in rows, just use one and white. 3. If you can, don’t use vertical lines. Let the data in the tables indicate the columns. 4. To give emphasis to a column heading, set it in CAPS.

122

5. To emphasise a column, set it in bold, or highlight with a different background colour. 6. Range numerical data right. 7. Give more padding to the bottom of items than to the top. You can still keep the same overall line—height, but this gives the reader a sense of more whitespace. AW

AW

AW

AW

AW

AW 4

Pontypridd d

——

——

0519

——

——

——

Trefforest d

——

——

0521

——

——

——

Cathays d

——

——

0539

——

——

——

Caerffili/Caerphilly d

——

——

——

——

0600

—— 7

——

——

0544

——

0615

——

Cardiff Central d

0515

0542

0550

0607

0625

0645

Grangetown d

0519

0546

0554

0611

0629

0649

Heol Dingle/Dingle Road d

——

——

——

——

——

0653

Penarth a

——

——

——

——

——

0657

0522

0549

0557

0614

0632

——

Eastbrook d

0525

0552

0600

0617

0635

——

Dinas Powys d

0527

0554

0602

0619

0637 6

——

Tregatwg/Cadoxton d

0531

0558

0606

0623

0641

——

Dociau’r Barri/Barry Dock d

0533

0600

0608

0625

0643

——

Y Barri/Barry d

0537

0604

0612

0629

0647

——

Ynys y Barri/Barry Island a

0542

0609

——

0634

0652

——

Rhoose d

——

——

0618

——

——

——

Llantwit Major d

——

——

0629

——

——

——

Bridgend a

——

——

0642

——

——

——

1

Heol y Frenhines/ Cardiff Queen Street d Caerdydd Canolog/

Cogan d

5

2 3

licensed to Denis (1 user license)

Profile for anh7

Five simple steps designing for the web  

Designing for the web

Five simple steps designing for the web  

Designing for the web

Profile for anh7
Advertisement