Anchor
로고의 형태·간격·컬러 규칙을 디지털 화면의 첫 인상과 반복 기준으로 정리했다.
WEBSITE HERO CONTENT ASSET
PRODUCT & INFORMATION · SUPPORT CASE 07 · COLLABORATION
KITPM Digital
Presence
기관의 로고 기준, 히어로 이미지와 페이지별 콘텐츠가 같은 인상으로 이어지도록 시각 자료와 정보 구성을 지원한 디지털 프레즌스 협업.
INSTITUTIONAL INFORMATION → COHERENT DIGITAL PRESENCE
Build a recognizable entry before asking people to read.
Sequence
기관 소개, 사업, 갤러리, 게시판과 문의가 자연스럽게 이어지도록 페이지별 이미지 역할을 구분했다.
Support
웹 구현 파트너가 적용할 수 있도록 히어로 방향과 각 섹션의 이미지·콘텐츠 구성을 제공했다.
CREDIT CLARITY · 담당 범위는 로고 비주얼 시스템과 홈페이지 이미지·콘텐츠 구성 지원. 홈페이지 전체 UX 설계와 개발 총괄은 협업 범위에 포함하지 않는다.
01 · VISUAL ANCHOR
One mark.
One digital signal.
로고를 별도 아이덴티티 사례처럼 분리하지 않고, 웹 화면 전반의 방향을 정렬하는 시각적 기준으로 배치했다. 시그니처, 그리드, 컬러 규칙이 화면의 정보 계층과 연결된다.
05 · TANGIBLE CONTACTThe visual rule
The visual rule
enters a real exchange.
웹 화면으로 이동하기 전에 명함을 배치해, 로고의 비례와 Deep Blue·Green 규칙이 실제 대면 접점에서도 유지되는지 먼저 확인한다. 이후 디지털 폴리오로 이어져 같은 인상이 화면 구조로 확장된다.
CONTINUE TO DIGITAL FLOW ↓02 · INTERACTIVE DIGITAL FOLIO
A site that reads
like a living document.
여섯 개 주요 화면을 클릭·스와이프·방향키로 넘기며 페이지별 이미지 역할과 정보 흐름을 확인하는 디지털 리더로 구성했다.
INTERACTION · CLICK TABS / SWIPE / USE ← → KEYS · SELECT THE PAGE TO OPEN ITS FULL RATIO
03 · NEXT DIRECTION
From page turning
to institutional rhythm.
페이지 이미지와 담당 범위, 수정한 비주얼, 사용자 흐름상 역할을 함께 제시해 협업 기여도를 구분한다. 비교 자료는 수정 전후가 모두 확인된 화면에만 사용한다.
ROLE · PROCESS · RESULT
Support that stays
visible and attributable.
Identity & page visuals
로고 사용 기준, 히어로 방향, 섹션 이미지와 콘텐츠 구성을 지원했다.
Page-by-page contribution
여섯 화면마다 담당 범위, 수정 비주얼과 사용자 흐름상의 역할을 분리해 기록했다.
Published support assets
아이덴티티 가이드와 페이지별 시각 자료가 기관 사이트의 공개 화면으로 이어진 협업 범위를 제시한다.