City of Boulder Boulder Events Calendar

Boulder Events CalendarMood Board

About this mood board

Nothing on this page is final. These are directions to react to, and the most useful thing you can tell me is what you'd like to stay away from.

Once the pieces come together on a live page, I may adjust what we look at here. Sizes, colors, fonts, and layout may need to shift once they are all together on the page. Your feedback on this mood board leads those calls and my design judgment covers the rest, so the finished page will be close to the ideas presented here without matching it exactly.

01

Page name

The name sits at the top of the page and carries into emails, social posts, and the way people refer to it around town. Two approaches are below, followed by a list of potential names.

Functional

Says what the page is. Events, Boulder County, a date range. Nobody has to decode it, it searches well, and no organization reads it and wonders whether they qualify.

Evocative

Says how the page feels. Immediate, a little loud, built around right now rather than around a category. It carries a tone and gives people something to repeat.

Names
01Boulder Today
02Now! Boulder
03Boulder Now
04Happening in Boulder
05Events in Boulder County
06Boulder County Events
07Boulder→Events
08What’s Happening!?
Page name design

The name will be set as text, in a typeface chosen to complement the one running through the layout. No custom lettering and no drawn logo. That keeps it consistent everywhere the name appears, and it's easy to change if the wording moves.

02

Calendar layout

Every event is a card, and the cards run in one continuous scroll grouped by how soon they happen. The page opens on today and moves forward, with no month grid and no way to look backward.

Today
All the day’s events
Tomorrow
The next full day
This week
Through Sunday
The next two weeks
Monday onward, two weeks out
Ongoing
Catch any day
03

Visual style

The event calendar has to read well on a phone, be easy to scan, and look modern. It also has to appeal to a wide range of people, from young people to more mature patrons, most of whom are traveling and only in Boulder for a short time.

The examples below are all clean, bold, and modern, with some fun and unique elements incorporated into the design across color, typography, and layout.

Weekly schedule set in black type on a full red background
03-01 · One color across a minimal page. Structure comes from hairlines and type weight instead of boxes.
Lecture series poster using yellow highlight blocks over black type
03-02 · A single text-only card accent layered over black and white.
Festival day schedule with each event set as a colored block on a timeline
03-03 · Tiles are arranged to mirror the look of a phone app.
A row of music cards, each one filled with a different pastel color
03-04 · The background of each card has a light pastel color.
Events listing with colored rows and a date block beside each one
03-05 · Each event is a colored row with a date block on the left.
Concert calendar poster with large numerals on torn blocks of bright color
03-06 · Numbers and loud colors carry the layout.
Monthly activity poster with every photo tinted a single blue
03-07 · One color over every photo, bringing a mixed set of images into a single look.
Editorial index page with tinted images in a warm grid
03-08 · Images are tinted across a warm pastel color palette.
04

Color

The palette is pulled from colors seen around Boulder.

Wheat
Dry tall grasses below the Flatirons
04-01 · Wheat · #F6EFE0
Tall grass in the fall.
Sandstone
Red stone buildings and tile roofs below the Flatirons
04-02 · Sandstone · #E8503F
Red bricks on campus and the Pearl Street Mall.
Alpenglow
Winter sunrise turning the snow on the Flatirons and Longs Peak pink
04-03 · Alpenglow · #F2609E
Sunrise on the snow.
Sky
Field of pink wildflowers along a fence line below the Flatirons
04-04 · Sky · #2E96E0
A clear spring sky.
Amber
Open meadow below the foothills lit gold by low sun
04-05 · Amber · #F09A2E
The last hour of sunset.
Pine
Dense evergreen slope below the Flatirons
04-06 · Pine · #2FAA8B
Evergreen trees in the foothills.
Color palette
Sandstone
#E8503F
Amber
#F09A2E
Alpenglow
#F2609E
Pine
#2FAA8B
Sky
#2E96E0
Sandstone soft
#EDA8A6
Amber soft
#EDCDA6
Alpenglow soft
#EDA6C5
Pine soft
#A1E6D4
Sky soft
#AAD3F2
Accent colors
Wheat light
#FBF7EE
Wheat
#F6EFE0
Wheat deep
#EFE4CB
Plum
#351E28
Ink
#191712
05

Typography

Sans serif fonts are easy to read at a glance. Premium fonts require a license, typically $200-500.

Adelle Sans specimen showing letters, numerals, and symbols
05-01 · Adelle Sans. The font used on the City of Boulder website.
Helvetica specimen showing letters, numerals, and symbols
05-02 · Helvetica. A neutral and universal sans serif font.
PP Neue Montreal specimen showing letters, numerals, and symbols
05-03 · PP Neue Montreal. A neutral sans serif with an even weight across every letter.
PP Neue York specimen showing letters, numerals, and symbols
05-04 · PP Neue York. An editorial style sans serif with subtle character.
06

Card content

An overview of the content displayed for each single event. All data pulled from the BCAA calendar API.

Image
Pulled from the feed.
Town
The town it takes place in. Boulder, Longmont, Lafayette, Lyons, Nederland.
This is based on the venue address. If BCAA adds a town field we can display more specific locations.
Cost
Free, Paid, or Donation.
The cost status is inferred from the text box on the BCAA form. If BCAA adds a price field on their side, we could display an exact amount.
Date and time
7:30pm, 10am to 5pm, or All day.
Title
The event name as submitted.
Venue
The place where the event takes place.
Type
Exhibit, Performance, Class, Screening, Fair, Market.
Fair and Market share a label color. Each event still shows its own tag, either Fair or Market.
Link
The whole card opens the event’s page.
Events submitted without a link could redirect to the BCAA Calendar.
Card layouts

The same content arranged different ways.

Lafayette
Saturday 0/00 · 10am to 5pm

Our Journeys to Now: Sesquisemiquincentennial of CO and USA Exhibit

The Collective Community Arts Center
Exhibit Free
06-A Image at top with location on image.
Lafayette Exhibit Free
Saturday 0/00 · 10am to 5pm

Our Journeys to Now: Sesquisemiquincentennial of CO and USA Exhibit

The Collective Community Arts Center
image
06-B Image below with all details above.
Exhibit

Our Journeys to Now: Sesquisemiquincentennial of CO and USA Exhibit

The Collective Community Arts Center
Lafayette
Saturday 0/00
10am to 5pm Free
06-C Type on the image, with the date set large under the details.
Sat
0/00
10am to 5pm

Our Journeys to Now: Sesquisemiquincentennial of CO and USA Exhibit

The Collective Community Arts Center
Lafayette Exhibit Free
06-D Date in a left rail and no image.
Saturday 0/00 · 10am to 5pm

Our Journeys to Now: Sesquisemiquincentennial of CO and USA Exhibit

The Collective Community Arts Center
Lafayette Exhibit Free
06-E No image, with type weight and one hairline.
07

Project sequence

01
Kickoff
Scope confirmed, feed verified, schedule set.
COMPLETED
02
Mood board
Name, layout, visual style, color, typography, and card content. Approve the mood board and select a name to progress to the next round.
IN PROGRESS
03
Prototype page
A working mobile page pulling live BCAA data, on a staging URL.
UP NEXT
04
Final assets
All source code handed off, yours to deploy anywhere.
CLOSES PROJECT
08

Parked

This list includes functions and ideas we’ve discussed that sit outside the scope of this project. They’re included here so we don’t lose them.

08-01
Tablet and desktop layouts. The prototype is designed for mobile. Purpose-built wider breakpoints are their own pass.
08-02
Save events and build an itinerary. Bookmarking, a saved list, exporting to a personal calendar.
08-03
Maps and directions. Handing off to Google Maps from a card. Depends on clean venue addresses in the feed.
08-04
Search, filter, and sort. Narrowing by category, town, date, or price.
08-05
Event submission form. Submitting from this page instead of linking to BCAA.
08-06
Additional pages. Individual event pages and other supporting pages on the site, added after this project closes.