St. Thomas Choir School

Downloadable mock ups:

Font Options

First, thanks for the font suggestions- they were very helpful, although I haven’t used them in my first round of design mock ups. Part of my reasoning is that both of the suggested fonts have licensing costs to use them online, and I didn’t want to commit to those costs until we’d had a chance to talk about them first. For example, Cheltenham, the possible serif headline font, is generally licensed on a per-page-load basis. Most places I looked gave you around 10,000 page loads for $29 (per style).  That might last us a good long while, depending on how much traffic you’re expecting. However, since we’d use up one load every time we hit the “refresh” button, I started looking for free alternatives. I found a few that were similar, although admittedly not a perfect match. I’ve included samples of my top 4 headline fonts in the mock up PDF, and used two of them in the design mock ups as well.

The paragraph font you suggested is managed by Adobe, who requires that the website owner has their own Adobe Creative Cloud account which start at $14.99/month with an educational discount. The two free alternatives I found are pretty close, so we can probably avoid that membership complication.

Designs

The following two design concepts will hopefully offer a sufficient starting point for further refinement. Option 1 follows your notes very closely, and Option 2 offers some contrasting ideas for how to handle the layout. Neither design is perfect yet, and if there’s an element from one that you’d like to see in the other, just let me know and we can iterate a bit. Or if you feel confident about one direction in particular, we can move on to refining that design and figuring out other design needs (such as animations, media galleries, etc.).

Option 1

Home Page - Desktop
Home Page: Desktop
Home Page: Mobile
Home Page: Mobile
Content/Sub-Page: Desktop
Content/Sub-Page: Desktop
Content/Sub-Page: Mobile
Content/Sub-Page: Mobile

Option 2

Home Page: Desktop
Home Page: Desktop
Home Page: Mobile
Home Page: Mobile
Content/Sub-Page: Desktop
Content/Sub-Page: Desktop
Content/Sub-Page: Mobile
Content/Sub-Page: Mobile