This project involved redesigning a set of magazine newsletter artist pages into a one-page gallery website. The page was designed in Figma, using only a single typeface family, and included a header navigation to support online usability.
Magazine Newsletter Spread (Reference)
Project Goal
Translate
Translate a print-based artist feature into a digital-first experience
Rethink
Rethink layout, navigation, and interaction for the web
Preserve
Preserve the visual richness of the magazine format
Enhance
Enhance usability and accessibility for online audiences
Consistency
Ensure consistency across all artist pages
Design Overview
The website was designed using 'Bitter', a contemporary serif typeface chosen for its strong readability and connection to print heritage, reflecting the origins of the Sarjeant Quarterly. A black background creates a neutral canvas that allows artwork and photography to stand out, while white text ensures accessibility and legibility. The accent color yellow (#D48621) provides contrast and highlights important elements such as volume number and navigation, creating visual hierarchy and guiding the user’s focus.
Home Page - Artist Overview
Card-based Layout – Artists are presented in large, clickable cards for immediate recognition and easy navigation.
Visual Emphasis on Artwork – Minimal text overlaid directly on images provides a brief introduction to the visual, while also allowing the artwork itself to take center stage, dominating the design.
Hierarchy by Scale – Large imagery draws attention first, with supporting titles secondary in visual weight.
Consistent Grid System – Equal spacing and alignment across cards ensure balance and visual cohesion.
Typography Contrast – Serif text overlay creates a tactile, print-inspired feel while remaining legible against varying backgrounds.
Sarjeant Gallery - Background Page
Hero Image Banner – Full-width photograph of the gallery establishes place and identity immediately.
Content Sectioning – Clear separation between the hero image, intro text, and history content, utilizing dark backgrounds for enhanced readability.
Inline Visual Support – A portrait of Henry Sarjeant anchors the text visually and connects the historical context with the narrative.
Consistent Navigation – Header navigation and social media icons maintain brand presence and ensure usability across pages.
Artist Gallery – User Flow
Navigation
Fixed header keeps navigation consistent across pages.
Active artist highlighted for orientation.
Dropdown menu for quick access to past newsletters.
Interaction
Thumbnails encourage exploration of more artworks.
Click-to-enlarge flow mimics gallery experience.
Arrows enable smooth browsing between works.
Layout
White background with black body text for readability.
Artist names & exhibition titles use colors drawn from artwork for visual cohesion.
Two-column grid balances text and visuals.
Consistent page structure builds familiarity.
Embedded Figma Prototype
If the prototype below fails to load, please click on the Figma prototype button under it to view it in a separate window.
