← 작업 전체
건축사사무소 프로젝트 아카이브와 설계 문의
사진이 화면을 채우고 글은 짧게 두는 편집 디자인으로 사무소의 분위기를 전하고, 5단계 설계 문의로 이어지는 여러 페이지 사이트입니다.
풀어야 했던 문제
건축사사무소의 홈페이지는 작품이 전부인데, 흔한 템플릿에 사진을 끼워 넣으면 사무소의 결이 사라집니다. 문의도 "연락 주세요" 한 줄로 끝나 어떤 프로젝트인지 파악하는 데 시간이 걸립니다.
이렇게 풀었습니다
프로젝트 사진을 크게 두고 문장은 줄 단위로 떠오르게 해 보는 속도를 늦췄습니다. 상세 페이지는 왼쪽에 위치·용도·규모 표를 고정하고 오른쪽에 설계 이야기와 갤러리를 흘렸습니다. 설계 문의는 유형·대지·일정·연락처를 한 단계씩 받아 접수 코드를 발급합니다.
만든 것
- 홈·프로젝트 목록(주거·상업·리노베이션 필터)·상세 6건·스튜디오·진행 과정·저널·설계 문의·관리자
- 사진 패럴랙스, 문장 등장, 사진 위에서 색이 바뀌는 메뉴, 프로젝트 위에서 VIEW로 바뀌는 커서
- 프로젝트 상세: 고정 데이터 표, 갤러리, 평면 개념도, 다음 프로젝트
- 설계 문의 5단계: 입력 검사, 이전 단계 수정, 접수 코드 발급
- 관리자: 문의 상태 관리, 프로젝트 공개 설정
확인 범위가상의 업체를 가정해 직접 기획하고 만든 시안입니다. 서버 없이 브라우저 안에서 동작하며, 입력한 내용은 보는 사람의 브라우저에만 남습니다.
화면 모아보기
프로젝트 목록. 주거·상업·리노베이션으로 거르고, 사진 위에 올리면 커서가 VIEW로 바뀝니다. 
프로젝트 상세. 왼쪽 데이터 표가 고정된 채 오른쪽 설계 이야기와 갤러리가 흐릅니다. 
설계 문의 5단계. 유형, 대지와 규모, 일정, 연락처, 확인 순서로 받습니다. 
관리자 화면. 접수된 문의의 상태와 프로젝트 공개 여부를 관리합니다. 
모바일 첫 화면.