Why Lowell Street Music School looks the way it does
A site for a sliding-scale music school in a mill city, built around two questions every family asks first: what will it cost us, and can my kid try it before we commit? The look borrows from the concert bills and programs that music in Lowell has always been advertised with.
- Built for
- Lowell parents, many of them Cambodian, Latino, Brazilian or Cape Verdean, plus adult beginners and retirees who always meant to learn.
- Navigation
- Full-screen menu. Only a Menu button shows; it opens a full-screen index with large type. Keeps the first screen uncluttered.
- Pages
- Home, Lessons, What it costs, Play together, Borrow an instrument, Concerts
- Hero
- The organisation's name set as a giant wordmark that fills the width, with a short line and details beneath
Typography
Abril Fatface is a fat-face Didone, the heavy, high-contrast letter of nineteenth-century playbills and concert posters. It only comes in one weight, so it is used sparingly and big: the name across the top of the home page and the headings. Karla carries everything else, because tuition tables and rehearsal times have to be read on a phone in a car line.
Color
The red is the velvet of an old recital-hall seat and the brick of the mills along the Merrimack. The brass yellow comes from a trumpet bell and is used only as a highlight. The light ground is a warm granite gray instead of cream, and the dark theme is piano lacquer with a faint violet cast, so evenings feel like a hall with the house lights down.
Layout and navigation
A full-screen menu keeps the first screen to the name, one sentence and the facts that decide everything: price, ages and the start of term. Pages are named after what families actually do here (lessons, what it costs, play together, borrow an instrument, concerts) instead of a generic set.
The hero
The school's name is set as a wordmark that fills the width, the way a concert bill shouts its headliner. Under it sit three facts most music schools hide on an inner page: lessons from $6, ages 4 to 94, and the date spring term starts.
Calls to action
The main action is a free trial lesson, because most families here have never paid for lessons and want to know their child will stick with it first. The second is 'Work out your rate', which takes people straight to the sliding scale. 'Borrow an instrument' answers the other quiet worry: we can't afford a cello.
Photography
Real lessons in ordinary rooms: a teacher's hand on a fretboard, a girl at an upright with the sheet music held for her, a grandfather teaching a chord. No stage lights or spotlit soloists on the home page, because the school is about the weekly half hour more than the concert.
Accessibility
Body text runs at 17px with generous line spacing, and the brick red passes contrast on both grounds. The price ledger is real text in a list, so screen readers announce each income band with its rate. Countdown times to the Friday recital are written out as text as well as shown.
Type system
- DisplayAbril FatfaceAbril Fatface is a fat-face Didone, the letter of nineteenth-century concert bills pasted up outside Lowell's mill-era music halls.
- TextKarlaKarla is a plain, slightly quirky grotesque that stays out of the way of the fat face and reads well at small sizes on a parent's phone.
Colour and contrast
Every text pairing is checked against WCAG 2.2 in both themes.
Light theme
| Pairing | Sample | Ratio | WCAG |
|---|
| Body text on page | Aa | 14.87:1 | AAA |
| Body text on cards | Aa | 16.69:1 | AAA |
| Secondary text | Aa | 5.6:1 | AA |
| Links | Aa | 6.24:1 | AA |
| Button text | Aa | 7.37:1 | AAA |
| Accent label text | Aa | 7.09:1 | AAA |
| Text on dark bands | Aa | 14.87:1 | AAA |
| Muted text on dark bands | Aa | 7.77:1 | AAA |
| Text on brand bands | Aa | 7.37:1 | AAA |
| Muted text on brand bands | Aa | 4.76:1 | AA |
Dark theme
| Pairing | Sample | Ratio | WCAG |
|---|
| Body text on page | Aa | 15.47:1 | AAA |
| Body text on cards | Aa | 14.03:1 | AAA |
| Secondary text | Aa | 6.84:1 | AA |
| Links | Aa | 6.82:1 | AA |
| Button text | Aa | 7.01:1 | AAA |
| Accent label text | Aa | 10.53:1 | AAA |
| Text on dark bands | Aa | 16.42:1 | AAA |
| Muted text on dark bands | Aa | 8.24:1 | AAA |
| Text on brand bands | Aa | 7.01:1 | AAA |
| Muted text on brand bands | Aa | 4.68:1 | AA |