AN INVITATION, REDESIGNED.
AN INVITATION, REDESIGNED.
AN INVITATION, REDESIGNED.
HIKING.JPGLOADING
HIKING.JPGLOADING
HIKING.JPGLOADING
ST. CONSTANTINE SCHOOL
ST. CONSTANTINE SCHOOL
ST. CONSTANTINE SCHOOL
WEB DESIGN / UX / DESIGN SYSTEM LEAD WEB DESIGNER
WEB DESIGN / UX / DESIGN SYSTEM LEAD WEB DESIGNER
WEB DESIGN / UX / DESIGN SYSTEM LEAD WEB DESIGNER
2021
2021
2021
CONTEXT
CONTEXT
CONTEXT
The Saint Constantine School is a classical Christian school in Houston, educating students from early childhood through college around a vision of virtue, wisdom and joy. By 2021, it was adding roughly 50 students a year and preparing to grow beyond one campus. The website needed to welcome local families, speak to a wider educational community and make the character of the school immediately clear.
The Saint Constantine School is a classical Christian school in Houston, educating students from early childhood through college around a vision of virtue, wisdom and joy. By 2021, it was adding roughly 50 students a year and preparing to grow beyond one campus. The website needed to welcome local families, speak to a wider educational community and make the character of the school immediately clear.
The Saint Constantine School is a classical Christian school in Houston, educating students from early childhood through college around a vision of virtue, wisdom and joy. By 2021, it was adding roughly 50 students a year and preparing to grow beyond one campus. The website needed to welcome local families, speak to a wider educational community and make the character of the school immediately clear.
HIKING.JPGLOADING
HIKING.JPGLOADING
CHALLENGE
CHALLENGE
CHALLENGE
The school had outgrown its website. I started with an established crest, a basic color palette and a digital presence that no longer matched the warmth or ambition of the institution.
The new site had to feel classic, beautiful and friendly without becoming childish, overly modern or sterile. It also had to organize five stages of education, deep interior content and future campuses without turning the whole thing into a maze.
The school had outgrown its website. I started with an established crest, a basic color palette and a digital presence that no longer matched the warmth or ambition of the institution.
The new site had to feel classic, beautiful and friendly without becoming childish, overly modern or sterile. It also had to organize five stages of education, deep interior content and future campuses without turning the whole thing into a maze.
HIKING.JPGLOADING
HIKING.JPGLOADING
HIKING.JPGLOADING
HIKING.JPGLOADING
HIKING.JPGLOADING
HIKING.JPGLOADING
HIKING.JPGLOADING
HIKING.JPGLOADING
HIKING.JPGLOADING
HIKING.JPGLOADING
SOLUTION
SOLUTION
SOLUTION
I built the web system from scratch around the existing crest and palette. I designed the information architecture, navigation, responsive templates and visual system as one connected whole. Every page had to feel related without forcing very different content into the same box.
Large photography made school life feel immediate. Black, maroon and gold gave it structure. School tiers, testimonials, faculty stories and long-form content each had a clear place without losing the warmth of the whole.
The development team built the site from the Figma system. I stayed through implementation, ran several rounds of quality control and worked through the remaining accessibility adjustments before handoff.
The first presentation came back with an unusual amount of revision notes: none. Houston approved the design as presented. Within weeks, the same system was rolling out to the other campuses.
I built the web system from scratch around the existing crest and palette. I designed the information architecture, navigation, responsive templates and visual system as one connected whole. Every page had to feel related without forcing very different content into the same box.
Large photography made school life feel immediate. Black, maroon and gold gave it structure. School tiers, testimonials, faculty stories and long-form content each had a clear place without losing the warmth of the whole.
The development team built the site from the Figma system. I stayed through implementation, ran several rounds of quality control and worked through the remaining accessibility adjustments before handoff.
The first presentation came back with an unusual amount of revision notes: none. Houston approved the design as presented. Within weeks, the same system was rolling out to the other campuses.
HIKING.JPGLOADING
HIKING.JPGLOADING
HIKING.JPGLOADING
KEEP LOOKING
KEEP LOOKING
KEEP LOOKING
INDEX.REG // LOCAL VIEW
MFI.JR: ONLINE
>0606CULVER ACADEMIESCULVER ACADEMIESWEB DESIGNWEB DESIGN20202020
>1010SUPERSONIC JELLYBEANZSUPERSONIC JELLYBEANZPRODUCT PHOTOGRAPHYPRODUCT PHOTOGRAPHY20132013
RECORD 10 / 10
Automation idle
+100+500-50-100

DISPLAY FEEDBACK
DRIFT FIELD
DRIFT FIELD
RES: —
FPS: 00
FPS: 00
FIELD: 0.00
INPUT: IDLE
INPUT: IDLE
AUTO / NONE
−∞DBFS
MUNKI VOICE UNIT
EXPERIMENTAL DRONE SYNTH
EXPERIMENTAL DRONE SYNTH
REV X / BUILD 38
MATERIALBlends eight sound textures. Turn the dial or tap a material name.
VOICEBalances the voices, from a grounded foundation to brighter upper layers.
COUPLINGChanges how the voices interact. Left: sympathetic. Right: tangled.
MOTIONSets modulation depth. Left: organic. Right: coherent.
MEMORYLets earlier sound return and evolve. Left: blurred trails. Right: distinct echoes.
SPACEPlaces the sound in a room or a larger, lingering atmosphere.
BETWEENSets the interval between the voices. With generated PULSE, steers the melody's center.
Automation idle
+100+500-50-100

DISPLAY FEEDBACK
DRIFT FIELD
DRIFT FIELD
RES: —
FPS: 00
FPS: 00
FIELD: 0.00
INPUT: IDLE
INPUT: IDLE
AUTO / NONE
−∞DBFS
MUNKI VOICE UNIT
EXPERIMENTAL DRONE SYNTH
EXPERIMENTAL DRONE SYNTH
REV X / BUILD 38
MATERIALBlends eight sound textures. Turn the dial or tap a material name.
VOICEBalances the voices, from a grounded foundation to brighter upper layers.
COUPLINGChanges how the voices interact. Left: sympathetic. Right: tangled.
MOTIONSets modulation depth. Left: organic. Right: coherent.
MEMORYLets earlier sound return and evolve. Left: blurred trails. Right: distinct echoes.
SPACEPlaces the sound in a room or a larger, lingering atmosphere.
BETWEENSets the interval between the voices. With generated PULSE, steers the melody's center.
Automation idle
+100+500-50-100

DISPLAY FEEDBACK
DRIFT FIELD
DRIFT FIELD
RES: —
FPS: 00
FPS: 00
FIELD: 0.00
INPUT: IDLE
INPUT: IDLE
AUTO / NONE
−∞DBFS
MUNKI VOICE UNIT
EXPERIMENTAL DRONE SYNTH
EXPERIMENTAL DRONE SYNTH
REV X / BUILD 38
MATERIALBlends eight sound textures. Turn the dial or tap a material name.
VOICEBalances the voices, from a grounded foundation to brighter upper layers.
COUPLINGChanges how the voices interact. Left: sympathetic. Right: tangled.
MOTIONSets modulation depth. Left: organic. Right: coherent.
MEMORYLets earlier sound return and evolve. Left: blurred trails. Right: distinct echoes.
SPACEPlaces the sound in a room or a larger, lingering atmosphere.
BETWEENSets the interval between the voices. With generated PULSE, steers the melody's center.
> MUNKI / SESSION START
ENTRY / PAGE
IDENTITY [ SOLVING ]
PREPARING ENTRY..........................................................................................[ WAIT ]
> MUNKI / SESSION START
ENTRY / PAGE
IDENTITY [ SOLVING ]
PREPARING ENTRY..........................................................................................[ WAIT ]
> MUNKI / SESSION START
ENTRY / PAGE
IDENTITY [ SOLVING ]
PREPARING ENTRY..........................................................................................[ WAIT ]