사람에서 시작합니다.
생활 방식과 공간의 요구를 작품 이야기의 첫머리에 둡니다. 결과만 보는 대신 선택의 이유까지 읽게 합니다.
BLUECANVAS SELECTED WORK / 01ARCHITECTURE & INTERIOR
지음앤
브랜드 웹사이트
기획 · 디자인 · 개발
FROM A WAY OF LIVING, TO A WAY OF SEEING.
삶을 듣고,
공간을 보여주다.
지음앤의 생각을 웹사이트의 경험으로 옮긴 이야기01 / THE STARTING POINT어디에서 시작했을까요?
집을 보여주는 일보다,
집을 대하는 태도를
전하는 일이 먼저였습니다.
지음앤의 자료에는 서로 다른 집과 그 집에서 살아갈 사람들의 이야기가 있었습니다. 사애헌의 반려견을 위한 공간, 소소재의 창에 담긴 풍경, 풍경재의 중정까지. 작품마다 선택의 이유가 달랐습니다.
홈페이지에서도 그 차이가 보여야 했습니다. 사진을 한데 모으는 데서 더 나아가, 이 공간이 왜 이렇게 지어졌는지 읽히도록 구성했습니다.
완성된 홈페이지 방문하기344+
자료 이미지에서 출발했습니다
9
작품마다 다른 이야기를 정리했습니다
4
서로 다른 디자인 방향을 펼쳤습니다
READ THE SPACE, BEFORE DESIGNING THE PAGE.수백 장의 사진에서,
수백 장의 사진에서,
하나의 시선으로.
외관, 생활, 빛, 재료.
이미지를 고르는 기준도 브랜드의 일부입니다.
02 / BRAND THINKING브랜드의 태도를 화면의 기준으로
짓기 전에 듣는 브랜드.
보여주기 전에
이해하는 웹사이트.
브랜드의 중심은 ‘멋진 건축물’보다 ‘그곳에 사는 사람’에 있었습니다. 그래서 첫 문장도 건축의 규모나 기술을 앞세우기보다 삶의 순서에서 시작합니다.
기존 브랜드 이름과 작품이 지닌 개성은 이어가고, 웹에서는 사진의 크기와 문장의 어조, 여백과 움직임이 같은 태도를 전하도록 맞췄습니다.
공간에 집중합니다.
사진 위의 장식과 반복되는 박스를 덜어냅니다. 풍경과 빛, 재료가 화면의 인상을 만들도록 합니다.
다음 대화로 이어갑니다.
마음에 드는 작품에서 브랜드의 생각으로, 작업 과정에서 프로젝트 문의로 자연스럽게 이동하게 합니다.
THE WORDS THAT GUIDE THE EXPERIENCE
삶이 먼저,
공간은 그다음.
브랜드의 태도 → 첫 화면의 문장사진보다 먼저 정한, 사진을 보여줄 기준
A QUIET PALETTE, A CLEAR POINT OF VIEW.자연의 색을 빌려,
자연의 색을 빌려,
공간의 색을 남깁니다.
나무와 돌, 벽과 종이.
서로 다른 질감이 어울리는 색의 온도를 살폈습니다.
03 / COLOR & TYPOGRAPHY사진을 돋보이게 하는 시각 규칙
화면의 색이
작품보다 앞서지 않도록.
짙은 올리브는 사진의 빛을 선명하게 만들고, 세이지는 시선이 쉬어 가는 구간을 만듭니다. 긴 글은 부드러운 화이트 위에 놓았습니다. 색이 바뀌는 지점은 이야기의 장면이 바뀌는 지점이기도 합니다.
사진을 받치는 깊이
작품 사진의 명암을 살리고, 장면 사이의 전환을 차분하게 받칩니다.
자연과 연결되는 색
문장과 선에 쓰는 녹색입니다. 풍경과 정원을 함께 생각하는 브랜드의 태도와 맞닿습니다.
시선이 쉬어 가는 면
선화와 공간 이야기를 보여 주는 바탕입니다. 어두운 사진 장면 사이에 밝기를 더합니다.
읽기 위한 여백
작품 설명과 긴 문장이 놓이는 색입니다. 순백색보다 부드럽게 사진과 이어집니다.
TYPE EXPLORATION같은 문장도,
같은 문장도,
서체에 따라 다르게 들립니다.
명조는 한 편의 이야기를 읽는 인상을, 산세리프는 공간을 또렷하게 보여주는 인상을 만듭니다. 확정안은 큰 산세리프 제목을 중심으로, 보조 영문에 이탤릭의 부드러움을 더했습니다.
SANS / 확정안의 중심
삶을 담는 공간.
형태는 또렷하게, 문장은 담백하게.SERIF / 에디토리얼 시안
삶을 담는 공간.
천천히 읽히는 제목과 넓은 여백.EDITORIAL / 보조 영문
A life, well framed.
04 / DESIGN EXPLORATION같은 브랜드, 네 가지 접근
한 번에 그린 정답보다,
서로 다른 가능성을.
사진에 몰입하는 방식, 잡지처럼 읽는 방식, 모형과 빛으로 시작하는 방식, 정보와 작품을 구조화하는 방식. 같은 자료를 놓고도 첫인상과 읽는 속도는 달라집니다.
아래 시안은 실제로 제작한 화면입니다. 각 방향이 무엇을 강조하는지 비교하고, 시안을 직접 열어 움직임까지 살펴볼 수 있습니다.
01 / Cinematic확정 시안
공간 안으로 들어가는 첫인상
실제 주택 사진을 크게 열고, 스크롤에 따라 외부에서 내부로 시선을 옮깁니다. 지음앤이 지은 공간을 먼저 경험하게 하는 방향입니다.
대담한 산세리프 / 올리브 / 사진 중심시안 직접 보기02 / Editorial시안 탐색
한 권의 건축 잡지처럼
명조 제목과 종이 같은 배경, 여유 있는 여백으로 작품을 천천히 읽습니다. 사진 옆에 이야기를 붙여 차분한 인상을 살폈습니다.
명조 / 웜 아이보리 / 비대칭 편집시안 직접 보기03 / Spatial시안 탐색
시간과 빛으로 설명하는 건축
건축 모형과 하루의 빛을 첫 장면으로 삼았습니다. 실제 작품을 소개하기 전에, 생각이 공간으로 바뀌는 과정을 시각적으로 보여주는 방향입니다.
대형 명조 / 뉴트럴 / 시간의 전환시안 직접 보기04 / Structured시안 탐색
철학과 작품을 하나의 체계로
ZIUM& 표기와 기하학적 선, 작품 카드와 단계별 설명을 조합했습니다. 브랜드 철학부터 작업 과정까지 차례로 이해하게 하는 방향입니다.
산세리프 / 세이지 / 기하학적 구조시안 직접 보기THE CHOSEN DIRECTION / CINEMATIC결국, 지음앤이 지은 공간을
결국, 지음앤이 지은 공간을
가장 먼저 만나게 했습니다.
확정된 1번 시안에서는 실제 작품 사진이 첫인상을 만듭니다. 큰 제목은 브랜드의 태도를 짧게 전하고, 스크롤은 공간의 바깥에서 안쪽으로 이어집니다. 다른 시안에서 살핀 이야기와 정보도 작품 소개와 작업 과정 안에서 이어갑니다.
실제 작품이 첫 장면에짧고 분명한 브랜드 문장설명이 되는 움직임
05 / INTERACTION WITH A REASON밖에서 안으로.
밖에서 안으로.
보는 사람에서, 머무는 사람으로.
사진이 커지고, 시선이 안으로 이동합니다.
스크롤 한 번에 공간을 경험하는 순서를 담았습니다.
OUTSIDEINSIDE
06 / THE DIGITAL EXPERIENCE움직임 다음에는, 읽히는 정보
사진에 머물렀다면,
이제 이유를 읽을 차례.
첫 화면의 몰입이 다음 페이지에서도 이어지도록 작품, 브랜드 소개, 함께 짓는 과정, 자재와 디테일, 문의를 연결했습니다. 작품을 감상한 사람이 자신의 프로젝트를 떠올릴 수 있는 순서입니다.
- 01공간을 만나다실제 작품과 첫인상
- 02태도를 이해하다작품의 이야기와 철학
- 03과정을 살피다집짓기와 자재의 선택
- 04대화를 시작하다프로젝트 문의
주택, 인테리어, 상업공간을 구분하고 작품별 이야기를 상세 페이지로 이어갑니다.
집의 바깥, 벽 속, 실내로 자재를 나누어 무엇을 고려하는지 이해하게 합니다.
EVERY SPACE HAS A DIFFERENT REASON.같은 틀 안에서도,
같은 틀 안에서도,
작품의 표정은 다르게.
사애헌
함께 사는 모두를 위한 집
두 건축주와 반려견의 생활이 창과 마당, 공간의 구성을 결정합니다.
소소재
풍경을 담는 하얀 집
창의 위치와 비율, 공간마다 다른 도형이 집의 이야기가 됩니다.
풍경재
풍경과 일상 사이의 중정
마당과 데크, 밤의 빛까지 하나의 생활 장면으로 보여줍니다.
달빛주점
기억 속 골목을 공간으로
주택과 다른 상업공간의 분위기도 같은 브랜드 안에서 이어집니다.
07 / IN YOUR HANDS모바일에서는, 모바일의 속도로
작은 화면에서도
공간은 넉넉하게.
PC의 가로 전개를 작은 화면에 그대로 줄여 넣지 않았습니다. 작품은 세로로 이어지고, 문장은 읽을 수 있는 크기로 남습니다. 한 손으로 작품과 이야기를 살펴보며 다음 페이지로 이동할 수 있게 했습니다.
큰 사진과 읽히는 본문세로로 이어지는 작품 탐색손가락으로 여는 메뉴와 사진 확대기기의 동작 줄이기 설정 반영
08 / MEET THE WEBSITE이제, 직접 경험해 보세요.
설명했던 선택들이
하나의 웹사이트로.
첫인상부터 작품을 읽는 순서, 색과 움직임까지.
지음앤의 홈페이지에서 하나로 이어집니다.
ziumn.com
YOUR BRAND, SEEN WITH CARE.당신의 브랜드에는
당신의 브랜드에는
어떤 이유가 있나요?
가지고 있는 사진, 아직 정리하지 못한 이야기,
고민 중인 방향까지 함께 살펴보겠습니다.
지음앤 / BRAND WEBSITEPlanning · Design · Interaction · DevelopmentBLUECANVAS