Visual mockups · not a live site

Calvary Chapel Portsmouth: three website directions

Three design directions for the new Calvary Chapel Portsmouth website. Each includes the same five pages. Browse on your phone or desktop, then let us know which direction you prefer — or what you'd mix from each.

How to review

  1. Start with each direction's Homepage — open A, B and C in turn.
  2. Click through all five pages: Homepage, Sermon, Series, Sermon finder and Giving.
  3. Try the 390 and 1440 preview links to see mobile and desktop widths.
  4. Read the Design rationale for each direction to understand the thinking behind it.
  5. When you've looked through all three, reply with your favourite (A, B or C), or tell us what you'd take from each.

A · Warm welcome

Photo-led, cream and terracotta, friendly serif headings. Feels like being greeted at the door.

View Direction A Design rationale

B · Clean editorial

Type-led, white space, one cobalt accent and a visible 12-column grid. Reads like a well-set journal.

View Direction B Design rationale

C · Bold modern

Dark theme, very large type and confident blocks of lime, coral and violet. Loud, quick and current.

View Direction C Design rationale