← 전체 작업
모놀리스 스튜디오 PC 화면
모놀리스 스튜디오 모바일 화면
커스텀 코드브랜드 사이트미국

모놀리스 스튜디오

뉴욕 브루클린의 타투 스튜디오 브랜드 사이트.
어두운 화면에서 작업물이 먼저 읽히도록 구조를 잡았습니다.

Role
디자인 · 퍼블리싱
Platform
커스텀 코드 · HTML/CSS/JS
Scope
원페이지 · 반응형
Live
사이트 보기 ↗
01 · 기획

화면의 주인은 타투입니다.

사이트는 한발 물러서게 했습니다.
작업물과 아티스트가 앞에 섭니다.

DIRECTION

어두운 화면에서
작업물이 먼저 읽히게.

DECISION 01

사진은 모두 흑백

히어로, 아티스트, 인스타그램에 같은 필터.

DECISION 02

색은 올렸을 때만

마우스를 올린 사진만 원래 색으로.

DECISION 03

글자는 크게, 장식은 없이

스튜디오 이름을 화면 폭만큼.

02 · 구조

한 페이지, 아홉 구간.

보고, 고르고, 예약하는 순서로 놓았습니다.

Hero흑백 사진 위에 스튜디오 이름을 크게 얹었습니다.
About창립 아티스트 소개와 비전을 두 단으로.
Artists아티스트 8명을 스타일 태그와 함께 카드로.
Book아티스트 바로 다음에 예약 버튼 하나.
Journal타투 정보 글 3편.
Collectors구글 후기 3개.
News언론 기사 3줄.
Instagram작업 사진 12장 격자.
Footer연락처, 주소, 뉴스레터.
03 · 아티스트

고르는 순간에만 색이 돌아옵니다.

카드는 흑백으로 둡니다.
마우스를 올리면 색과 확대가 함께 움직입니다.

Before · 기본흑백으로 보이는 아티스트 카드
After · 마우스를 올렸을 때컬러로 바뀐 아티스트 카드
태그스타일 태그를 사진 위에 띄웁니다.
이름이름과 역할은 사진 아래 그라데이션 위에.
링크올렸을 때 인스타그램 링크가 나타납니다.
열PC 4열, 태블릿 2열, 모바일 1열.
04 · 컬러

검정 하나, 흰색 하나.

순검정과 순백 대신 살짝 따뜻한 값을 골랐습니다.
나머지 색은 사진이 가져옵니다.

Black#0A0A0A바탕
Card#141414사진 자리
Line#F4F1EC · 12%선 · 테두리
Ash#8A8782번호 · 라벨
Stone#E7E2D8소개 · 후기 글
Bone#F4F1EC제목 · 본문
05 · 파운데이션

장식 대신 크기와 간격으로.

글꼴은 Helvetica Neue 하나만 씁니다.
굵기와 크기 차이로 위계를 만듭니다.

Typography

monolithDisplay · 290 / 600
book experienceCTA · 180 / 600
artistsHeading · 84 / 600
Every line is intentional.Body · 34 / 300
OUR VISIONLabel · 11 / .28em

Shape · 모서리

0
14
30
pill

Components · 부품

Reserve your session ↗ View all artists →
Fine LineMicro RealismBlackwork

Motion · 움직임

등장구간마다 아래에서 40px 올라오며 나타납니다. 0.9s
사진흑백에서 컬러로 바뀌며 조금 커집니다. 0.6s · scale 1.05
헤더밝은 사진 위에서도 글자가 읽히게 색을 뒤집습니다. mix-blend-mode: difference
시계헤더에 뉴욕 현지 시각을 실시간으로 띄웁니다.
모놀리스 스튜디오 전체 페이지
06 · 결과

사이트는 흑백,
색은 작업물에만.

검정 화면이 길게 이어져도 사진이 리듬을 만듭니다.
모바일에서는 모든 구간이 한 열로 내려옵니다.

Detail · 모바일

모바일 아티스트 구간
Artists · 한 열 카드
모바일 저널 구간
Journal · 한 열 글 목록