Why Saemaeul looks the way it does
A site for a Korean-American Presbyterian church where the parents worship in Korean, their children in English, and everyone eats lunch together afterwards. Every important line exists in both languages, and the home page greets both congregations at once instead of making one of them click a flag.
- Built for
- First-generation Korean families and grandparents, second-generation young adults in the English Ministry, spouses who don't speak Korean, and Korean families new to Bergen County looking for a church and a Saturday school.
- Navigation
- Tabbed app bar. Pages behave like tabs in an app: a sticky segmented bar under a compact header.
- Pages
- Home, Worship, Dawn prayer, New family, Next generation, Our church
- Hero
- a mirrored bilingual opener: the same welcome written in two languages, each with its own service times, shown together on purpose so both congregations are greeted first. Variants: a = two columns that face each other across a centre rule, with a wide photo beneath; b = one headline set large with its translation directly beneath like an interlinear text, a shared timetable and a portrait photo; c = a full-height photo beside a printed-programme column where each language has a hanging label; a short action form as the hero: the one thing most visitors came to do (request a ride, ask for help, register a child) can be done before they scroll, with reassurance beside it. Variants: a = headline, reassurance and a photo on the left with the form as a raised card on the right; b = a tall photo carrying the headline, with the form and reassurance on a plain panel beside it; c = headline beside a photo, then the form laid out as one horizontal booking bar; livestream-first: the opening screen is the stream itself, with a live or next-stream badge and countdown, a play control, the service chapters and a route to past services, for churches whose online congregation is as real as the room. Variants: a = headline above a large screen with the chapter list in a side panel; b = a full-width cinematic screen with the headline over it and chapters running beneath as a strip; c = headline and a chapter timeline in a left column beside the screen
Typography
Gowun Batang is a Korean book face with brush-stroke terminals, and its Latin letters were drawn in the same hand, so an English headline and its Korean translation can sit on consecutive lines without looking like two websites. IBM Plex Sans KR handles the reading text in both scripts at the same weight. Line spacing is set generously at 1.72 because Hangul blocks are taller and denser than Latin lowercase.
Color
The green is celadon, the glaze on Goryeo pottery, taken darker so it passes contrast as a text color. The persimmon accent comes from dancheong, the painted eaves of Korean temples and palaces, used sparingly for times and live badges. The page color is a pale green-gray rather than a cream so it reads as paper without falling into the usual beige.
Layout and navigation
A tabbed app bar fits a congregation that already lives inside KakaoTalk and banking apps: six tabs, always visible, no menu to open. The language switch sits beside the logo, and every heading, button and table label changes with it. Pages are named for what people actually do here, such as Dawn prayer, New family and Next generation.
The hero
The opening sets one sentence large in English with its Korean translation directly beneath, the way a bilingual hymnal prints its verses. It says the true thing about this church in one breath: parents pray in Korean, children sing in English, and lunch is shared. Both service times sit in one timetable underneath so nobody has to switch language to find their hour.
Calls to action
The tab bar's button is "Register as a new family" (새가족 등록), because in Korean churches registration is the real next step and the welcome team acts on it the same week. Dawn prayer gets its own action, with a livestream, because many members pray along from their kitchens before driving into the city. Korean School enrollment is the third, and it is often what brings a family through the door the first time.
Photography
Photos favour hands, Bibles, tables, early light and the building over posed crowd shots. Portraits on the welcome team are Korean-American faces, and Mrs. Yoon's portrait appears both with her quote on the home page and on the team list, so she is recognisably the same person. The dawn prayer page opens on fog and first light instead of a worship stage: at 5:30 the room is half-dark and nobody is performing.
Accessibility
Each language is marked with its own lang attribute so screen readers switch pronunciation correctly. Body text is 17px with contrast above 4.5:1 in both themes. The interpretation headsets, step-free side entrance and large-print hymnals are mentioned where people plan their visit, not on a separate page.
Type system
- DisplayGowun BatangA brush-informed Korean book face whose Latin was drawn alongside the Hangul, so a headline and its translation share one voice.
- TextIBM Plex Sans KRPlex carries matching Hangul and Latin at the same color, and the extra leading gives Korean syllable blocks room to breathe.
Colour and contrast
Every text pairing is checked against WCAG 2.2 in both themes.
Light theme
| Pairing | Sample | Ratio | WCAG |
|---|
| Body text on page | Aa | 14.53:1 | AAA |
| Body text on cards | Aa | 16.07:1 | AAA |
| Secondary text | Aa | 5.78:1 | AA |
| Links | Aa | 6.91:1 | AA |
| Button text | Aa | 7.88:1 | AAA |
| Accent label text | Aa | 5.35:1 | AA |
| Text on dark bands | Aa | 14.53:1 | AAA |
| Muted text on dark bands | Aa | 7.75:1 | AAA |
| Text on brand bands | Aa | 7.88:1 | AAA |
| Muted text on brand bands | Aa | 5.25:1 | AA |
Dark theme
| Pairing | Sample | Ratio | WCAG |
|---|
| Body text on page | Aa | 15.43:1 | AAA |
| Body text on cards | Aa | 13.76:1 | AAA |
| Secondary text | Aa | 6.85:1 | AA |
| Links | Aa | 9.52:1 | AAA |
| Button text | Aa | 9.77:1 | AAA |
| Accent label text | Aa | 8.63:1 | AAA |
| Text on dark bands | Aa | 16.34:1 | AAA |
| Muted text on dark bands | Aa | 8.22:1 | AAA |
| Text on brand bands | Aa | 9.77:1 | AAA |
| Muted text on brand bands | Aa | 5.79:1 | AA |