(주)크리틱 웹사이트 구축 기획안.

Presentation on theme: "(주)크리틱 웹사이트 구축 기획안."— Presentation transcript:

1 (주)크리틱 웹사이트 구축 기획안

2 목차 A. OVERVIEW B.기획방안 C.디자인방안 C.디자인방안 프로젝트 개요 벤치마킹 기획방향 및 컨셉 내용설계 구조설계
주요 화면설계 C.디자인방안 디자인 컨셉 디자인 시안 C.디자인방안 베이직 가이드 레이아웃 그리드 칼라 비주얼 네비게이션 폰트 뷸릿, 아이콘 # 2

3 A. OVERVIEW 프로젝트 개요 벤치마킹 기획방향 및 컨셉

4 ◎ 게임마케팅 회사의 이미지를 글로벌하게 표현하고 깔끔한 디자인을 클라이언트가 원함
A. OVERVIEW 프로젝트 개요 ◎ 게임마케팅 회사의 이미지를 글로벌하게 표현하고 깔끔한 디자인을 클라이언트가 원함 ◎ 현재 도메인만 존재하며 홈페이지의 부재로 내용설계와 구조설계등 초기작업부터 진행되어야함 # 4 벤치마킹 기획방향 및 컨셉

5 A. OVERVIEW 벤치마킹 가) 벤치마킹의 개요
웹사이트 제작의뢰 회사인 (주)크리택 에서 추천한 사이트로 웹디자인 제작시 참고하고자 한다. 벤치마킹 작업은 타겟 사이트 전체를 일별한 뒤 웹사이트를 이루는 구성요소 차원에서 1) Layout 및 Navigation 측면을 먼저 살펴보고, 2) Contents/Service 측면을 분석해 보는 것과 동시에 3) Iterface 측면을 분석해 보는 것으로 한다. # 5

6 A. OVERVIEW 벤치마킹 MAIN 2. 사이트 나) 사이트
MAIN # 6

7 A. OVERVIEW 벤치마킹 SUB 나) 사이트
# 7

8 A. OVERVIEW 벤치마킹 다) 사이트 개요 및 총평
주소: 주대상: 게임참가자 및 스폰서 성격:세계를 무대로 마케팅을 하는 회사로 글로벌한 이미지와 신뢰를 줄 수 있는 요소를 보여준다 글로벌한 이미지를 삽입하여 게임시장의 세계화를 보여준다 영문 사이트도 제공하고 있어 프리젠테이션용으로 사용할 수 있는 사이트이다 #8

9 A. OVERVIEW 벤치마킹 라) LAYOUT, NAVIGATION, CONTENTS Layout
직사각형의 평범한 포맷에 내용을 보여줌 신뢰감을 주기위해 레이아웃이 메인 서브 모두 일관성 있게 배치 Navigation 메인메뉴에서 현재 위치를 표시 유저의 편의성을 고려한 일관된 1depth 메뉴의 위치 Contents 2depth가 없고 1depth 만 소개 회사 소개 프리젠테이션을 보는 것 같다. #9

10 5. 장점 A. OVERVIEW 벤치마킹 마) 장점, 단점 장점 유저가 찾기 쉽게 네비게이션 배치
신뢰할 수 있는 단순한 레이아웃과 안정된 색 단점 내용의 부재로 2depth가 없음 저채도 칼라와 단조로운 사각박스로 지루함 회사소개가 유저의 needs에 부합된 프리젠테이션용 내용으로 일반 유저의 서비스 내용이 없음 다이나믹한 디자인과 플래쉬의 부재로 게임 마케팅 회사의 이미지가 표현되지 않음 #10

11 유저의 needs에 적합한 내용으로 회사소개 제공
A. OVERVIEW 벤치마킹 바) 결론 내용의 부재로 2depth가 없음 저채도 칼라와 단조로운 사각박스로 지루함 회사소개가 유저의 needs에 부합된 프리젠테이션용 내용으로 일관 일반유저를 위한 서비스 내용이 없음 다이나믹한 디자인과 플래쉬의 부재로 게임 마케팅 회사의 이미지가 표현되지 않음 다양한 내용 삽입 레이아웃을 현 트랜드에 맞추어 표현 유저의 needs에 적합한 내용으로 회사소개 제공 일반 유저를 위한 서비스 내용 삽입 다이나믹한 디자인과 플래쉬로 게임 마케팅 회사의 이미지를 표현 #11

12 A. OVERVIEW _2 벤치마킹 가) 사이트 제일기획 # 12

13 A. OVERVIEW _2 벤치마킹 다) 서브 제일기획 # 14

14 A. OVERVIEW _2 벤치마킹 다) 사이트 개요 및 총평 주소: http://www.cheil.com
주대상: 광고 기획자, 광고에 관심 있는 사람 모두,스폰서 성격:세계를 무대로 광고를 제작하고 마케팅을 하는 회사로 글로벌한 이미지와 신뢰를 줄 수 있는 요소를 보여준다 단순하면서도 색채와 이미지로 시선을 끌고 있다. 영문 사이트도 제공되며 회사이미지와 그 동안의 작업 등을 상세히 볼 수 있게 되어 있다. #8

15 A. OVERVIEW _2벤치마킹 라) LAYOUT, NAVIGATION, CONTENTS Layout Navigation
*극적인 도형사용했으나 레이아웃이 무난함 *곡선적으로 재미있게 변화를 줌 *intro,main,portfolio 페이지는 1024x768사용 유저들에게 최적화 sub 페이지는 많은 정보들의 내용들을 되도록이면 스크롤이 적어 지게 확실하게 내용정리 되어 있음. Navigation 메인메뉴를 메인이미지 안에, 하나의 이미지화 시켜 나타내고 있으며 이미지 안에 네비게이션이 위치. 유저가 현재의 위치를 찾는데 다소 어려움이 있으나 타 메뉴로 넘어가는데 용이. Contents *레이블링 : 확실한 레이블링으로 쉽게 이해할 수 있는 단어들 사용 유저들로 하여금 페이지마다의 contents 내용 유추 가능하나 정리 필요 색상, 포커스 :포인트 칼라들로 하여금 경쾌한 느낌. *주요 기사와 타이틀을 적절히 배치하고 플래시 등으로 포인트를 주어서 젊은 유저들의 접근을 도움. #9

16 A. OVERVIEW _2벤치마킹 마) 장점, 단점 장점 전달하고자 하는 내용들을 색상으로 각 서브마다 정리가 잘되어
있으며이 회사가 어떤 일을 하는 곳인지 확실하게 나타내며 중점으로 부각되는 부분을인 포트폴리오를 메인에 과감하게 노출 단점 일반적으로 글로벌 네비게이션이 각 서브의 색상과 유사해서 글로벌 네비게이션을 하나의 이미지로 착각 할 수 있음 관련 사이트맵과메인과 서브에 보여지는 컨텐츠 네비게이션 역시 색에 묻혀서 확실한 구분 필요 #10

17 회사소개가 일반 유저의 needs에 적합한 내용삽입
A. OVERVIEW _2 벤치마킹 바) 결론 디자인 되지 않은 내용으로 다소 산만 각 페이지의 색상에 묻혀서 글로벌 네비게이션을 이미지로 착각 회사소개가 스폰서와 기획자들 위주의 내용들로 상당부분 차지 하고 있어 일반 유저의 서비스 내용이 약함 내용 디자인 및 정리 확실한 글로벌 네비게이션 노출 회사소개가 일반 유저의 needs에 적합한 내용삽입 유저의 서비스 내용 삽입 #11

18 B. 기획방안 내용설계 구조설계 주요 화면설계

19 Home company portfolio e-sports Press project Contact us
B. 기획방안 4. 내용설계 Home 메인( Home )에 보여지는 Utility Site map과 FAQ를 나타냄. Quick menu에 일정으로 바로 갈 수 있게 표현 company 회사 소개, 회사 연혁, 조직도, 협력 업체 카테고리로 나누고 회사소개와 약도 등 전반 적인 내용 정리 portfolio Gallery, Business 갤러리부분에는 사업실적에 대한 이미지를 넣어서 볼 수 있게 하고 비즈니스 부분에는 텍스트만으로 된 사업실적에 대한 내용 정리 e-sports E-sports, 글로벌 E-sports, IEL 글로벌 E-sports 온라인 게임 리그에 대한 정보 전달 Press 공지사항, 대회소식, 보도자료 리그 관련 공지 사항이나 대회소식 각 게임잡지나 게임 관련 채널에 소개된 소식들을 정리 project 행사 개요, 행사 구성, 행사 일정 그 해 년도에 실행되는 일정 정리 Contact us , 회사 약도 & 연락처 를 기록 # 17 벤치마킹 기획방향 및 컨셉

20 Home company e-sports 2006년 project Notice & news Notice & news Press
B. 기획방안 5. 구조설계 Home 메인( Home )에 Site map과 FAQ를 나타냄. Quick menu 일정 이벤트 로 바로 갈수 있게 설정 company e-sports 2006년 project Notice & news Notice & news Press Contact us 회사 소개를 하고 회사 약도 이미지를 보여줌 E-sports?에 대한 소개 행사 개요 설명 공지사항 알려줌 Gallery에 년도별 사업실적 내용을 Image로 보여줌 회사약도& 연락처 회사 연혁 글로벌 E-sports 소개 행사 구성 설명 대회소식 전달 Business에 년도별 사업실적을 text로만 작성된 내용을 보여줌 조직도 IEL 글로벌 E-sports에 대한 정보 전달 행사 일정 설명 보도자료 알려줌 협력 업체 각 회사 로고로 클릭하면 각 사이트로 링크 할 수 있도록 함 # 18

21 Home B. 기획방안 5. 구조설계 company e-sports project Press portfolio
5. 구조설계 Home Site Map FAQ Quick menu 일정 이벤트 company e-sports project Press portfolio Contact us 회사 소개 E-sports? 행사 개요 공지사항 Gallery 회사 연혁 E-sports 종류 행사 구성 대회소식 Business 회사 약도&연락처 조직도 행사 일정 보도자료 협력업체 글로벌 E-sports IEL 글로벌 E-sports # 19

22 INTERNATION E-SPORTS GROUP INC. 메인시안
6. 주요화면설계 B. 기획방안 1epth(1) (1)1depth: 마우스를 대면 2depth가 플래쉬로 오른편에서 나타나고 1depth의 버튼이 올라간다 (2) 밑의 면이 좌측에서 나타나고 2depth가 오른편에서 나타난다. (3)플래쉬작업을 하되 다이나믹한 모션을 준다. (4)공지사항과 보도사항을 보여준다 (5)일정을 다달이 보여준다. (6) 내용은 계속플래쉬로 움직이고 협력업체 로고에 마우스를 갖다대면 칼라로 변환되면서 각 사이트로 링크된다. (7)마우스를 갖다대면 칼라로 변환되면서 링크된다. 2epth(2) Main image(3) Nortice(4) 일정(5) 협력업체(6) 관련사이트(7) utility INTERNATION E-SPORTS GROUP INC. 메인시안 화면이름 메뉴경로 화일명 화면설명 특이사항 기타 설계 > 화면설계 # 20

23 C. 디자인 방안 디자인 컨셉 디자인 시안

24 모델링을 통한 Draft Design Concept 유사 및 경쟁사의 환경분석을 통한 Design 요소적 Concept
7. 디자인 컨셉 Critique Concept 모델링을 통한 Draft Design Concept 유사 및 경쟁사의 환경분석을 통한 Design 요소적 Concept # 22

25 C.디자인 방안 Friendly Business
7. 디자인 컨셉 가) 모델링 Friendly Business 자유 부드러움 따뜻함 일러스트 다양한 컬러 부드러움 Image concept 사진 입체감 깨끗함 사진 일러스트 신뢰감 단위적 평면적 텍스트 위주 기계적 자유로움 재미, 심플 신뢰감 기업적 부드러움 친근함 강렬함 새로움 여성적 부드러움 따뜻함 남성적 딱딱함 User experience # 23

26 C.디자인 방안 7. 디자인 컨셉 신뢰감을 줄 수 있는 깨끗하고, 심플한 비즈니스적인 사이트 구현 가) 모델링 사진 입체감
7. 디자인 컨셉 가) 모델링 신뢰감을 줄 수 있는 깨끗하고, 심플한 비즈니스적인 사이트 구현 사진 입체감 깨끗함 사진 일러스트 신뢰감 기계적 자유로움 재미, 심플 신뢰감 기업적 부드러움 # 17 # 24

27 Layout free consistent distinct unit C.디자인 방안 7. 디자인 컨셉
7. 디자인 컨셉 나) 디자인 환경분석(유사/경쟁사이트 분석) Layout free 기업 사이트의 전형적인 구조 네비게이션의 위치의 안정적 심플한 구조 consistent distinct unit # 25

28 Visual dynamic Text base Image base static C.디자인 방안 7. 디자인 컨셉
7. 디자인 컨셉 나) 디자인 환경분석(유사/경쟁사이트 분석) Visual dynamic 사진이미지 사용 일러는 아이콘 정도 사용 텍스트로 정보 전달 심플한 느낌 Text base Image base static # 26

29 Tone 고대비 Duo or mono multi 저대비 C.디자인 방안 7. 디자인 컨셉
7. 디자인 컨셉 나) 디자인 환경분석(유사/경쟁사이트 분석) Tone 고대비 블루와 회색계열 사용으로 신뢰와 신용의 이미지 표현 Duo or mono multi 저대비 # 27

30 keyword Stability Unit Trust C.디자인 방안 7. 디자인 컨셉
7. 디자인 컨셉 다) 디자인 환경분석(유사/경쟁사이트 분석) Layout keyword Stability Unit Trust Visual Tone # 28

31 keyword Keyword factor Stability Unit Trust C.디자인 방안 7. 디자인 컨셉 디자인
7. 디자인 컨셉 라) 디자인 환경분석(유사/경쟁사이트 분석) keyword Stability Unit Trust Keyword factor 안정, 확고 단일화, 단위(정형화) 신뢰, 신용 # 29

32 C.디자인 방안 7. 디자인 컨셉 안정적이며, 정형화 된 신뢰감 있는 안정, 확고 기업이미지의 사이트 구현 - 심플한 구조
7. 디자인 컨셉 안정, 확고 안정적이며, 정형화 된 신뢰감 있는 기업이미지의 사이트 구현 - 심플한 구조 - 저채도의 그레이, 블루 - 텍스트 위주의 이미지 단일화, 단위(정형화) 신뢰, 신용 # 30

33

34

35 INTERNATION E-SPORTS GROUP INC. 메인시안
1epth(1) utility (1)1depth: 마우스를 대면 2depth가 플래쉬로 오른편에서 나타나고 1depth의 버튼이 올라간다 (2) 밑의 면이 좌측에서 나타나고 2depth가 오른편에서 나타난다. (3)플래쉬작업을 하되 다이나믹한 모션을 준다. (4)공지사항과 보도사항을 보여준다 (5)일정을 다달이 보여준다. (6) 내용은 계속플래쉬로 움직이고 협력업체 로고에 마우스를 갖다대면 칼라로 변환되면서 각 사이트로 링크된다. (7)마우스를 갖다대면 칼라로 변환되면서 링크된다. 2epth(2) Main image(3) Nortice(4) 일정(5) 협력업체(6) 관련사이트(7)

36 1epth(1) utility 2epth(2) sub image(3) 2depth(4) contents(5) copy(6)
INTERNATION E-SPORTS GROUP INC. 서브시안 1epth(1) utility (1)1depth: 마우스를 대면 2depth가 플래쉬로 오른편에서 나타나고 1depth의 버튼이 올라간다 (2) 밑의 면이 좌측에서 나타나고 2depth가 오른편에서 나타난다. (3)플래쉬작업 (4)2depth (5)컨텐츠 (6)copyright 2epth(2) sub image(3) 2depth(4) contents(5) copy(6)

37

38 INTERNATION E-SPORTS GROUP INC. 메인시안
PROJECT Web Site INTERNATION E-SPORTS GROUP INC. 메인시안 화면이름 메뉴경로 화일명 Main image(3) 화면설명 특이사항 기타 Logo(1) utility 1)네비게이션는 마우스를 오버하면2depth가 하위로 떨어져 나옴 (2) 메인화면 글로벌한 사이트 느낌이 들록 제작, 지구이미지에서 슬로건이 나옴 (3)공지사항과 보도뉴스 (5)현프로젝트에 관련하여 이미지와 간단한 설명(링크) (6) 협력업체 하단에 위치하여 각 사이트로 링크 (7)퀵 메뉴는 서브메이지에서 보여질 메뉴고, 프로젝트의 대회 일정 표시(각대회마크로 상세화) (8)상단의 로고를 대신 하단의 카피라이터 부분에 넣었고, 영문주소기재 Global navigation(2) Nortice(4) 2006년 Project(5) 퀵메뉴 Project 일정 협력업체(6) 협력사(8) Copyright(7) 설계 > 화면설계

39

40

41 INTERNATION E-SPORTS GROUP INC. 메인시안
PROJECT Web Site (1)플래시네비게이션 (2) 회사 사업내용과 관련한 메인 플래시 구현 예정 단순한플래시 EX 경희대 메인 플래시참조 (3)E-스포츠 플래시 배너 (4) 2006ESWC 대회 바로가기 (5) 공지사항과 대회소식 (6) 파트너 회사 링크 (7)파트너 회사 점프메뉴로 바로가기 (8) CPL , ESWC, ASIA PLAY 바로가기 퀵메뉴 INTERNATION E-SPORTS GROUP INC. 메인시안 1)네비게이션 2)플래시 8)대회 바로가기 6)파트너회사 링크 4)2006ESWC바로가기 5)공지/대회소식 3)E-스포츠플래시배너 7)파트너바로가기 화면이름 메뉴경로 화일명 화면설명 특이사항 기타 설계 > 화면설계

42

43

44

45 INTERNATION E-SPORTS GROUP INC. 메인시안
Logo text 원래 logo 를 사용 하면 색상과 이미지 때문에 디자인 하는데 어려움이 있어 웹상에서 변형은 하지 않으면서 이미지와 Text를 분리해서 사용 메인 이미지부분엔 text만 사용 Copyright부분에 로고 이미지 사용 Main image 네비게이션 메인 이미지 안에 포함 각 카테고리를 곡선으로 연결 마우스 클릭하면 글로벌 네비게이션 의 텍스트 상단으로 올라가고 로컬 네비게이션 라인이 생기면서 나타 나게 되며 플래시로 작업 공지사항 image 2006 행사일정 Image 설명 달력으로 일정표시 image ESWC2006 관련내용 보도자료 sponser와 family site 부분은 각 로고 이미지를 gray로 처리해서 플래시로 움직임을 줄 것이며 마우스 를 가져가게 되면 원래 로고 색으로 변하고 클릭하면 링크가 됨 중요하다고 생각되는 사이트 로고 메인 하단 에 노출시킴 logo Copyright & address

46

47

48 INTERNATION E-SPORTS GROUP INC. 메인시안
PROJECT Web Site INTERNATION E-SPORTS GROUP INC. 메인시안 화면이름 메뉴경로 화일명 화면설명 특이사항 기타 Logo text 원래 logo 를 사용 하면 색상과 이미지 때문에 디자인 하는데 어려움이 있어 웹상에서 변형은 하지 않으면서 이미지와 Text를 분리해서 사용 메인 이미지부분엔 text만 사용 Copyright부분에 로고 이미지 사용 Quick menu 네비게이션 상단에 위치 글로벌 네비게이션에 마우스를 대면 로컬 네비게이션이 나타나게 되면 플래시로 작업 보도자료 공지사항 Main image Main image image 2006 행사일정 Image 설명 달력으로 일정표시 sponser와 family site 부분은 각 로고 이미지를 gray로 처리해서 플래시로 움직임을 줄 것이며 마우스 를 가져가게 되면 원래 로고 색으로 변하고 클릭하면 링크가 됨 Family site logo address 중요하다고 생각되는 사이트 로고를 메인 하단 에 노출시킴 address 설계 > 화면설계

49 ㈜크리틱 2. 컨펌난 Main 시안 수정사항 로그인 세계대회소식 행사 일정 협력업체 4번 시안 copyright

50 ㈜크리틱 2. 컨펌난 Main 시안 수정

51 INTERNATION E-SPORTS GROUP INC. 메인시안
1epth(1) utility (1)1depth: 마우스를 대면 2depth가 플래쉬로 오른편에서 나타나고 1depth의 버튼이 올라간다 (2) 밑의 면이 좌측에서 나타나고 2depth가 오른편에서 나타난다. (3)플래쉬작업을 하되 다이나믹한 모션을 준다. (4)공지사항과 보도사항을 보여준다 (5)일정을 다달이 보여준다. (6) 내용은 계속플래쉬로 움직이고 협력업체 로고에 마우스를 갖다대면 칼라로 변환되면서 각 사이트로 링크된다. (7)마우스를 갖다대면 칼라로 변환되면서 링크된다. 2epth(2) Main image(3) Nortice(4) 일정(5) 협력업체(6) 관련사이트(7)

52 ㈜크리틱 3. Sub 시안