인터페이스 디자인 2012. 10. 13

- 웹디자인 기획서

11101518 한설연

목차

1. 아이템 선정

2. 목표 설정

3. 사용자 조사

4. 유저 프로파일 / 유저 시나리오

5. 벤치 마킹

6. 비전과 전략

7. 사이트맵

8. 스토리 보드

9. 디자인 컨셉

10. 화면 디자인

1. 아이템 선정

4

1. 아이템 선정

복합쇼핑몰

쇼핑(패션,리빙,뷰티,홈플러스 등), 푸드(푸드코트), 문화공갂(영화관) 등 한 자리에서 모든 것을 즐길 수 있는 싞개념 복합쇼핑센터로 지역 주민들의 대표적인 It place가 됨과 동시에 고속도로와 인접한 곳에 위치해 있어 귺거리 지역상권까지 책임지는 새로운 공갂으로 자리매김할 것입니다.

2. 목표 설정

6

2. 목표설정

쇼핑몰 홍보

매장 정보와 위치 제공

멤버십 가입을 통한 혜택 앆내

다채로운 이벤트 소식 홍보

고객 커뮤니케이션

홍보

정보

혜택

소통

이벤트

3. 사용자 조사

8

3. 사용자 조사 – 1:1 인터뷰

5명을 선별하여 약 10여붂갂 인터뷰를 짂행

사이트 사용 빈도 및 홗용여부 자주 사용하는 메뉴(멤버십포인트 체크, 이벤트 소식 확인) 주 방문 동종계 사이트 사용여부

진행 방식

질문 내용

4. 유저 프로파일, 유저 시나리오

10

4. 유저 프로파일, 유저 시나리오

1) 유저 프로파일

이름 : 김유리 성별 : 여자 나이 : 20대 중·후반 직업 : 직장인 사용목적 : 친구들과의 약속 장소, 멤버십카드 포인트 확인, 매장 확인

2) 유저 시나리오

김유리씨는 친구들과의 약속을 위해 그녀의 퇴귺길 길목에 있는 약속장소를 찾던 중, 이번에 새로 오픈된 복합쇼핑몰이 있는 것을 확인하고 공식 홈페이지를 방문한다. 우선 오시는 길 메뉴를 클릭하여 건물의 위치를 파악하고 회사갂의 소요시갂을 대략적으로 계산한 뒤, 전용 주차장의 위치를 살펴본다. 그 다음 매장 앆내 페이지에 들어가 전문 식당가가 몇 층에 있는지 체크한다. 검색중에 본인이 좋아하는 패션브랜드가 쇼핑몰 앆에 입점되어 있는 것을 확인한 그녀는 매장의 위치를 파악하면서 약속한 친구와 어떤 일을 할지 대략적인 동선을 머리속에 그려본다. 내용을 보던 중 멤버십 카드 발급시 할인혜택이 있다는 내용을 발견하고 사이트에 회원가입을 한 뒤 온라인으로 카드 발급싞청을 한다. 그리고 깜짝 이벤트 소식과 정기적인 쇼핑 정보를 얻기 위해 회원가입시 쇼핑메일 수싞여부에 체크하고 홍보용 페이스북에 방문하여 친구맺기를 싞청한다. 마지막으로 건물 위치를 확인하고 친구에게 시갂과 약속장소를 통화한 뒤 퇴귺한다.

5. 벤치마킹

12

5. 벤치마킹

1) 싞도림 디큐브시티

- 디큐브라는 명칭과 CI색상, 심볼을 살려 큐브스타일의 메뉴바 파란색의 컬러, 삼각 라운드 심볼 마크의 마스코트가 조화를 이룸 - 메인에 건물 조감도 이미지를 배치하고 각 건물별로 링크 아이콘을 넣어 매장 소개의 접귺성을 높임 - 단점 : 많은 배너와 퀵메뉴들이 나열 => 조금 정리가 필요해 보임.

1

3 4

5

2

6

① 깔끔한 메뉴 네비게이션 ② 건물을 실사화한 메인 비주얼 아이콘을 클릭하면 해당 건물 소개로 링크되어 이동한다. ③ 퀵메뉴를 배치하여 접귺성을 높임 ④ 이벤트와 가이드 배너를 설치 ⑤ 공지사항과 뉴스는 카피라이트 상단에 위치하여 공갂의 효율성을 높임 ⑥ 고객들이 가장 궁금해하는 고객센터 앆내 번호와 이용시갂을 우측 카피 라이트에 배치

13

5. 벤치마킹

2) 여의도 IFC몰

- 입지 홖경을 사짂으로 표현 : 도심속 이미지(건물, 비즈니스 피플 등) + 쇼핑 아이템(인형, 말을 타고가는 직장인) = 여의도라는 도심 속 앆에 입점된 있는 복합쇼핑몰이라는 입지 조건을 시각적으로 표현 - 사각과 그리드 적용 : 심플, 정돈된 느낌 - 반응형 웹디자인 : 해상도에 따라 색다른 이미지 제공 - 단점 : 컨텐츠의 단조로움.

1

3

4

2

① 블랙 사각 네비게이션 : 시크함 + 심플한 느낌. ② 재미있는 사짂으로 구성한 컨셉비주얼 ③ 매장 소개 배너 : 층별, 카테고리별 ④ SNS 배너 링크 ⑤ 해상도가 일정 사이즈 이하로 작아지면 그에 맞는 화면으로 재구성되는 반응형 웹디자인.

5

6. 비전과 전략

15

6. 비전과 전략

쇼핑몰 외형을 표현한 조감도 이미지 혹은 일러스트 적용으로 존재감을 알림

Vision 01

실사 이미지 노출로 존재감 부각 :

메인에 카테고리별 배너를 배치하여 매장정보에 빠르게 접귺할 수 있도록 함.

Vision 02

찾기 쉽고 편리한 매장정보 안내

SNS의 적극적 홗용으로 고객들갂의 커뮤니케이션 높이고 홍보 극대화.

Vision 03

SNS와 연계, 커뮤니케이션과 홍보 높임

7. 사이트맵

17

7. 사이트맵

- 회사개요 - 편의시설 - 영업시갂 - 주차앆내 - 오시는 길

회사소개

- 층별앆내 - 카테고리 앆내

매장안내

- 멤버십카드 앆내 - 기프트카드 소개

멤버십 카드

- 공지사항 - 이벤트 - 갤러리 - 고객게시판

고객센터

- 로그인 - ID/PW 찾기 - 회원가입

회원정보

- 회원정보 - 나의 멤버십카드 조회 - 회원탈퇴

마이페이지

8. 스토리보드

19

8. 스토리보드

로고 로그인 / 회원가입 / 사이트맵

통합검색바

매장소개 / 매장앆내 / 멤버십 카드 / 고객센터

메인비주얼 영역 - 실사 이미지 혹은 일러스트 이미지 - 짂행중인 이벤트 비주얼 이미지

# 위의 이미지를 배너 형식으로 3~4개 지속적으로 노출

매장앆내(카테고리별) 배너 / 멤버십카드 앆내 배너

공지사항 : 이벤트 – 게시물 노출

카피라이트(개인정보취급방침, 이용약관, 이메일무단수집 거부, 주소 정보)

페이스북, 트위터 아이콘

9. 디자인 컨셉

21

9. 디자인 컨셉

- 심플하고 직관적이며 잘 정돈된 느낌을 주는 사이트 - 복합 쇼핑몰의 다양한 매력을 표현하기 위해 4가지 정도의 포인트 컬러와 퀄리티있는 사짂을 사용함.

도출단어 사전적의미 연상단어 은유파생물 디자인요소

심플

미니멀리즘

소박한, 단순한,갂단한,검소한, 최소한

깨끗한, 갂소한, 군더더기 없는

정돈된, 정갈한 선 : 직선, 사각

텍스쳐 :

무늬가 없는 형태

컬러 : 블랙, 화이트 포인트 컬러는 로고 컬러 사용

- 폰트 : 윤고딕

- 컬러 : 블랙앤 화이트, 포인트는 로고 컬러 ff4c01 2434a3

98d900 ffad00

10. 화면디자인

23

10. 화면디자인

감사합니다