Design preview, phase 2

Somersfield PTA website

Thank you for the notes on the four directions. This is one site, built from them: Airy as the base, the clear event buttons from Bold Navy, and some of Warm's personality. Please try it on your phone first, the way most parents will arrive from WhatsApp or email.

Photos, names, prices and dates are placeholders. Nothing on the checkout page takes a payment.

Open the phase 2 site Compare with the phase 1 directions

What changed from your feedback

  1. Airy is the base. White space, a simple layout, and text beside photos rather than on top of them.
  2. One main button per page. Yellow with navy text, taken from Bold Navy, so the next step is always obvious.
  3. Every event looks the same. Name, date, time, place and price in the same order, with one button such as Buy Tickets.
  4. Plainer menu. Events, Lunch Orders, Volunteer, Donate and Contact. "Menu" is now "Lunch Orders", and Volunteer has its own page.
  5. Built for phones. Text is 18px, and buttons and menu links are at least 44px tall. On a phone, the Menu button opens a full list, and Buy Tickets stays at the bottom of the screen.
  6. Easier to read. Colours are checked against the WCAG AA contrast standard. The brand green stays on small labels and icons; buttons use navy or yellow. Optional form fields say so in words, and nothing is shown by colour alone.
  7. Works with a keyboard. A thick outline shows where you are, and "Skip to content" is the first link on every page.
  8. News uses the Editorial layout, as suggested, and the rest of the site stays simple.
  9. The real shop. The Shop page lists your merchandise and prices from the current price list.
  10. The real checkout. The card form is shown as it will appear: Authorize.Net's secure form inside the page.

Built in Bermuda by dot.bm. Questions or changes? hello@dot.bm.