웹디자인 작업 과정, 주택금융통계시스템

안녕하세요. 머프입니다.
말씀드린 대로 웹사이트 디자인 작업 과정을 공유합니다.
빨리 보여드리려고 했는데..
신규 디자인 및 기존 작업, 펀딩 등 여러 가지 작업이 순차적으로 진행해야 하기 때문에 지금에서야 공개하게 되네요.

이번 웹디자인 작업과정은 개인적인 결과물과 작업 과정이므로
절대적인 답안지 개념이 아닌 참고서적 형태의 내용으로 참고하시기 바랍니다.
개인적인 성향이 있기 때문에 어느 누구도 정답이라고 말을 할 수가 없기 때문입니다.
예컨대
제가 작업 과정을 공유하는 것은 회사에서 디자이너의 작업 과정을 보면 개인적인 성향이 강하고
천차만별이기 때문에 어느 것이 정답 일리 없고 어느 게 좋다고 말할 수도 없습니다.
오로지 저 개인적인 노하우이므로 작업하시는데 참고하시라는 말씀을 드립니다.
이 과정을 통해 더 나은 작업 방향을 찾으시면 저는 100% 만족합니다.
이 글을 공유하는 이유이기도 합니다.

그럼 서론은 이 정도 하고 본론으로 들어가도록 하겠습니다.
처음 웹디자인을 잡을 때 가장 먼저 하는 것은 벤치마킹을 하는 것입니다.
근데 더 먼저 선행해야 할 것이 고객사의 대한 요청사항 파악입니다.
이 사이트의 웹 아이덴티티와 디자인 스타일을 어떻게 이끌어 갈 것인지가 여기서 판가름 납니다.

가장 중요한 단계입니다.
여기서 확실하게 디자인 방향을 잡고 가지 않으면 고객사와 기획자에게 100% 깨지게 되어 있습니다.
고객사의 요청사항과 기획자의 의도를 머리속에 두고 아래와 같이 벤치마킹을 합니다.

고객사 요청사항
현재 사이트의 웹 아이덴티티가 확실하므로 중소벤처기업부 통계자료 홈처럼 시각적으로 깨끗하되 색감은 국세통계포털처럼 부드러운 색감을 사용

기획자의 요청사항
3가지 타입의 디자인 시안 작업요청 (플랫디자인 타입, 카드디자인 타입, 시차스크롤 타입)

A : 플랫디자인 타입으로 중소기업 벤처기업부 통계자료 홈을 벤치마킹했으며 고객사의 요청대로 시각적으로 깨끗하고
기존 웹 아이덴티티를 살려 구성하였으며 검색 위주의 일반적인 콘텐츠 구성 화면으로 작업되었다.

B : 시차 스크롤 타입으로 문화셈터를 벤치마킹했으며 고객사의 요청대로 시각적으로 깨끗하고
기존 웹 아이덴티티를 살려 구성하며 CI색상을 전체적으로 배색하여 기존과 완전 다른 화면 구성을 하였다.

보시면 아시겠지만
A, B 타입 나름대로 디자인 구성이 깨끗하고 웹 아이덴티티를 잘 계승하고 있습니다. 물론 콘텐츠도 직관적으로 구성되었습니다. 그러나 디자인 선택은 고객사 몫입니다. PM, 기획자, 디자이너가 아무리 어필을 해도 고객사의 마음에 안 들면 다시 처음부터입니다.
하지만 2번째, 시차 스크롤 타입으로 디자인 선택이 되었네요. 아주 다행입니다.
역시 고객사도 기존 화면과 다른 구성의 레이아웃과 웹아이덴티티를 바랬던건 아닌가 생각해 봅니다.

최종 메인 화면



디자인 키워드
CLEAR + ELEGANT + MODERN

디자인 개요
콘텐츠를 정리 및 그룹화시켜 레이아웃을 좀 더 편리하게 개편하여 사용자가 쉽게 접근할 수 있도록 개편하며 또한 웹 아이덴티티(GRID, COLOR, FONT의 일관성)를 적용하여 사이트의 디자인 통일성을 강조하였다.

“한눈에 보는 주택금융통계” 콘셉트
시차 스크롤 디자인이며 전체적으로 주택금융통계를 한눈에 볼 수 있도록 영역별로 구성한 것이 특징이며 순차적으로 주요 통계를 구분지어서 고객으로 하여금 편리하게 이용할 수 있도록 배려하였다.

그리드
세로 그리드, 1280 픽셀에 최적화

색상
파란색 (주제색상), 밝은 파랑색 (보조 색상), 흰색 (배경 색상), 초록색 (포인트 색상)
- CI 기준으로 색상 설정.

폰트
기본 폰트로 구글 본고딕, 넥슨 웹폰트를 사용하여 가독성(기본 14~16pt)을 높여 모든 이용자에게 글자가 잘 보일 수 있도록 하였다.

추가
TOEN & MANNER
CI 색상을 기준으로 전체적으로 색상이 흘러갈 수 있도록 채도와 명암을 설정
LOOK & FEEL
CI 색상을 기준으로 디자인적인 요소(아이콘+챠트+지도 등)와 레이아웃(A+B, C) 구성을 통해 제시

1. 그리드

PHOTOSHOP MENU VIEW에서 NEW GUIDE LAYOUT 선택

NEW GUIDE LAYOUT창에서 COLUMNS을 NUMBER 12, WIDTH 81PX, GUTTER 28PX로 설정합니다.
아래 조건(CENTER COLUMNS, CLEAR EXISTING GUIDES)은 작업 상황에 맞게 설정하시기 바랍니다.
여기서 중요한 건
시차 스크롤이라서 하나의 영역이 1920, 1080으로 설정하고 그리드를 설정합니다.
해당 웹사이트 디자인은 3개의 영역으로 구성이 되었고 하나의 영역이 1920, 1080으로 구성되었습니다.

2. 색상

왼쪽부터
메인 색상 : #0154A4, 보조 색상 : #4E93CC, #7EC96C, 배경색상 : #FFFFFF, 포인트색상 : ff6600

3. 폰트

폰트 정의

타이포그래피
본문 내용은 본고딕을 기본으로 사용하며 이미지와 콘텐츠, 블렛을 사용할 때를 나누어서 정의하며 대제목만 넥슨 고딕으로 정의합니다.
현재 해당 사이트는 블렛에 정의는 극히 일부 화면에서 사용될것으로 보입니다.

4. 아이콘

TOEN & MANNER를 기준으로 아이콘도 작업합니다.
일러스트로 작업을 하고 포토샵으로 복사 붙여 넣기 할 때 VECTOR SMART OBJECT로 불러옵니다.
나중에 아이콘 수정할 때 반드시 필요하므로 반드시 이렇게 설정합니다. 수정할때 포토샵에서 더블 클릭하면
일러스트가 실행되어서 바로 일러스트에서 아이콘을 수정할 수 있습니다.
이걸 응용하면 공통으로 들어가는 모든 디자인적인 요소를 VECTOR SMART OBJECT를 저장해서 사용하면
아트보드 안에 있는 VECTOR SMART OBJECT는 하나의 오브젝트만 수정해도 생성된
모든 VECTOR SMART OBJECT는 같이 수정이 됩니다.
작업하실 때 GNB, NAVIGATION, FOOTER 등등 공통적으로 들어가고 수시로 변경될 수 있고 모든 화면에 일괄적으로 수정이 필요한 요소가 있을때 요긴하게 써먹을 수 있는 아이템입니다.

5. 버튼

사각형 툴을 선택하고 사이즈를 259, 320으로 설정하고 만듭니다.

LAYER STYLE를 선택하고

STROKE를 위와 같이 설정합니다.

아래 DROP SHADOW를 위와 같이 설정합니다.

위와 같은 버튼을 생성할 수 있습니다.

작업된 버튼은 메인 색상을 기본으로 하며 서브화면을 보시면 알겠지만
특이한 콘텐츠 및 복잡한 레이아웃에 구성이 아니기에 포인트 색상 및 버튼으로 시선을 확보해야 하는 이슈가 있어서
포인트 색상을 제외한 버튼의 스타일을 확립하기 위해 버튼의 스타일을 확립했습니다.

6.UI

게시판 목록 화면

게시판 상세화면

통계 목록 화면

통계 조회결과 화면

이렇게 주요 화면 작업이 진행되었습니다.
각 영역별 세부적인 작업 과정은 따로 테마별(아이콘 일러스트 작업과정, 그래프 작업 과정, 지도 작업 과정, 아이콘 포토샵 작업과정, 이미지 작업과정 등등)로 업로드하도록 하겠습니다.

궁금하시거나 필요한 요청사항이 있으시면 메일이나 답글로 보내주세요.
아는 범위 안에서 성심성의껏 답변하도록 하겠습니다.
이제 '해치지않아' 일러스트 채색 작업하러 가야겠습니다.
감사합니다.