Case 03 · Morrow & Field

A digital identity,rooted in nature.

Branding, web design and development for a fictional garden design and landscape studio. A self-initiated concept shaped around craftsmanship, atmosphere and growth.

MORROW & FIELD
GARDEN DESIGN + BUILD

DESIGN DETAILS

ProjectMorrow & Field

ScopeBrand identity · UI/UX · Development

PlatformStatic HTML · CSS · JavaScript

StatusSelf-initiated portfolio concept

The project in motion

A sense of place.
A signature in motion.

Project film · 00:14

Depth Digital × Morrow & FieldIdentity · Imagery · Interaction

01 / Purpose & identity

Thoughtful gardens.
A considered experience.

We shaped the website around three visitor priorities: exploring the gardens, understanding the service and starting a project. Selected work leads the experience, followed by services and a clear six-stage process.

Deep olive, warm ivory and bronze establish a natural, understated palette. An editorial serif wordmark, clean supporting typography and a circular botanical emblem connect the identity to planting, craftsmanship and growth.

Deep olive#263127

Warm ivory#F4F1E9

Bronze#C5A77B

Sage#697564

02 / Visual direction

Space, texture
and atmosphere.

Large garden imagery, a video-led opening and generous spacing give the website an immersive, editorial feel. Alternating dark and light sections create rhythm, while restrained borders and botanical linework carry the branding throughout.

The botanical logo appears during the opening sequence and transitions between pages. Subtle text and image reveals introduce content progressively, while a scroll-drawn tree connects Discover, Define, Design, Build, Plant and Grow through branches, trunk and roots.

03 / Before & after

Conceptual landscaped garden with a curving path and layered planting

BeforeAfter

A change worth exploring.

An interactive slider turns the transformation into something visitors can explore. AI-assisted garden imagery demonstrates the visual direction.

Conceptual imagery for a fictional portfolio project; these scenes do not document completed client work.

04 / Development

Crafted in code.

Custom HTML, CSS and JavaScript bring the design together: responsive layouts, image comparisons, project interactions, mobile navigation and coordinated transitions. SVG powers the animated tree, with reduced-motion alternatives included.

The website is packaged as a static build for Cloudflare Pages, bringing the visual identity into a coherent experience across its pages.

The result