Start a project

Lumen Greens

A website design for a golf-residences development.

Type
UI/UX designWebsite
Made for
Desktop and phone
Includes
Brand identity and a UI kit
Fig. 01 — The home page opens on the view, on desktop and on a phone.

Overview

A brand and a website, designed together.

About

Brand identity, a UI kit, and desktop and mobile page designs for a premium residential project.

What we designed

  1. Brand identity
  2. UI kit
  3. Desktop pages
  4. Mobile pages

On the home page

An overview, the residences, floor plans, the master plan, amenities, a gallery, the location and a site-visit form.

Brand

A mark about light and openness.

The Aperture mark, logo versions, a colour palette, the Outfit typeface and interface samples, on one board.

The Lumen Greens brand identity: the six-blade Aperture mark, logo versions on light and dark, the colour palette with its shares, the Outfit typeface and interface samples.
Fig. 02 — The brand identity on one board.

UI kit

Tokens first, then every control in every state.

Colour tokens with their uses, a type scale for desktop and mobile, and buttons in their default, hover, pressed, focus and disabled states.

The Lumen Greens UI kit foundations: colour tokens with their uses, and the type scale with desktop and mobile sizes.
Fig. 03 — Tokens first: colour and type.
Lumen Greens buttons in default, hover, pressed, focus and disabled states, with buttons on a navy band and round icon buttons.
Fig. 04 — Every control, every state.

Desktop

The home page, section by section.

One long page that moves from the view to the homes, the plans, the amenities and the way to get there.

The whole page

The Lumen Greens home page on desktop, from the hero and its call-back form, through the overview, to the three residences.
Fig. 05 — The home page, from the hero to the residences. Scroll inside the window.

Plans and places

  • The floor plans section on desktop: a floor plan viewer with layout tabs and the details of one home.
  • The location section on desktop: travel times to nearby places beside a map drawn in the brand's colours.
Fig. 06 — A floor plan viewer, and a map drawn in the brand’s colours.
The master plan section on a navy band: Twelve acres, planned around green, with an aerial photo and a numbered list of zones.
Fig. 07 — The master plan, on a navy band.
  • The amenities section on desktop: Clubhouse living, every day, with a photo mosaic of the pool, lobby, gym, spa, joggers' park, play area, pool table and parking.
  • The gallery section on desktop: A look inside, with tabs for interiors, exteriors and amenities, a large photo and thumbnails.
Fig. 08 — Amenities as a photo mosaic, and a gallery with tabs and thumbnails.

Mobile

The same story, built for thumbs.

Each section has its own phone layout, from the first view to the site-visit form.

  • The Lumen Greens home page on a phone: a photo of the towers, the headline Open to the green, close to the city. and the main buttons.
  • The floor plans section on a phone: layout tabs, a plan and the details of one home.
  • The amenities section on a phone, with photos of the pool, the lobby, the gym and the spa.
  • The location section on a phone: a drawn map and travel times.
  • The site-visit form on a phone: See Lumen Greens in person, with fields for a name, a mobile number and a preferred date.
Fig. 09 — Home, floor plans, amenities, location and the site-visit form on a phone.

Next project

Mobile app · Web app

NearBlend

Find people and places near you, and meet in real life.

App Store Google Play Web

Have a project in mind?

Tell us what you want to build, and we will reply with the next steps.

Start a project See our work