큐레이션 · 오픈 · 무료

Tomoseattle

드래그 앤 드롭 콜라주 인터페이스를 특징으로 하는 일본 레스토랑을 위한 실크lectic하고 상호작용적인 웹사이트.

01

디자인 DNA

현대식 레스토랑을 위한 인터랙티브 스크랩북 또는 디지털 무드 보드.

02

컬러

따뜻하고 중립적인 캔버스에 굵은 블랙 타이포그래피와 단 하나의 생동감 있는 코랄 악센트가 점을 찍어 만든 고대비 콜라주 느낌.

03

타이포그래피

didone-serif · transitional-serif · geometric-sans

• display32px · 400
• body25px · 400

탐색 항목은 콜라주 또는 몸값 메모 효과를 시뮬레이션하기 위해 다양한 폰트를 사용합니다. · 메인 제목 'TOMO'는 굵고 고대비 Didone 세리프를 사용합니다. · 설명 텍스트는 고정폭 또는 기하학적 산세리프 폰트를 사용합니다.

04

여백

불규칙하고 콜라주 주도적이며, 간격은 엄격한 그리드보다 드래그 가능한 요소의 수동적 배치에 의해 결정됩니다.

05

표면 (라운드 / 그림자 / 경계선)

눈에 띄는 박스 그림자 없음; 요소들은 날카로운 가장자리나 이미지 투명도에 의존합니다.

06

레이아웃

이미지와 텍스트 블록이 겹치고 사용자가 재배치할 수 있는 자유형태, 비구조적 레이아웃.

07

모션과 인터랙션

드래그 가능한 요소들은 표준 220ms 전환으로 커서를 따라 움직입니다.

드래그 가능한 요소 위에서 커서가 'move' 아이콘으로 변경됩니다. · 요소를 클릭하고 캔버스의 새 위치로 드래그할 수 있습니다.

08

컴포넌트

• button 다양한 폰트를 사용한 종이 같은 흰색 배경 위의 스타일화된 텍스트 라벨.
• card 겹치는 사진 컷아웃과 텍스트 블록.
• chip 작은 드래그 가능한 텍스트 조각.
• input 전통적인 입력 없음; 상호작용은 드래그 앤 드롭을 통해 이루어집니다.
• hero 페이지 상단을 지배하는 거대한 'TOMO' 타이포그래피.

09

보이스와 금지 목록

• 톤 장난스럽고, 비공식적이며, 다소 거침없는.
• 헤드라인 굵고, 과장된 크기의, 타이포그래피적으로 표현적인.
• CTA 놀이에 대한 초대로 프레이밍됨 ('나만의 맞춤 구성을 만드세요').

• 엄격하고 균일한 그리드를 사용하지 마세요 — 스크린샷은 혼돈스럽고 겹치는 콜라주 레이아웃을 보여줍니다.
• 모든 텍스트에 단일 폰트 패밀리를 적용하지 마세요 — 스크린샷은 탐색 항목이 최소 4가지 다른 서체를 사용하는 것을 보여줍니다.
• 차갑거나 어두운 배경색을 사용하지 마세요 — 스크린샷은 따뜻하고 밝은 베이지 캔버스를 보여줍니다.
• 깊이감을 위해 미세한 그림자에 의존하지 마세요 — 스크린샷은 날카로운 가장자리의 사진 컷아웃을 보여줍니다.
• 어떤 요소에도 둥근 모서리를 사용하지 마세요 — 스크린샷은 날카롭고 직사각형의 가장자리를 보여줍니다.
• 절제된 또는 단색 악센트 팔레트를 사용하지 마세요 — 스크린샷은 강조를 위해 단 하나의 밝은 코랄 레드가 사용되는 것을 보여줍니다.
• 피하기: 기업적
• 피하기: 미니멀리스틱
• 피하기: 지나치게 구조화된
• 피하기: 진지한

10

팩 안의 실제 스크린샷

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko