대한민국해병대 홈페이지 리뉴얼 디자인

디자이너 김보배 발표자 김보배

목차

01 해병대 소개

02 미션

03 자사&타사 분석

04 우수사이트 분석

05 최신기술 분석

06 타겟 분석

07 미션 수행

08 컨셉&전략

09 디자인 소개

10 결과예측 및 질문&답변

육지나 바다 어디에서도 싸울 수 있도록 조직ㆍ훈련된 부대로

특히 상륙 작전에 큰 역할을 수행

비교적 힘들고 강도 높은 훈련

아무나 갈 수 있는 곳이 아닌, 테스트 통과해야 갈 수 있음

해병대 표어

• 무적해병

• 최강부대

• 안되면 될 때 까지

해병대 소개

핵심가치

해병대 소개

상징 4가지

마크 팔각모 붉은 명찰 캐릭터 (용맹한 진돗개) 진홍색: 피,정렬

황색: 땀,인내 독수리: 용맹, 승리

(뒷장 설명)

해병대 소개

트렌드만 반영한 디자인 지양,

해병대 위상 연출 & 자부심 느낄 수 있는 디자인

사용자 맞춤 정보설계

디자인 퀄리티 향상, 최신기술 응용

사용자와 소통 위한 컨텐츠 설계, 제안

미션

N사 연관 검색어

-해병대 0000기(동문의식, 동료애) -지원방법 -인터넷 편지 -날아라마린보이(블로그)

자사 분석

뉴스기사 : 해병대 캠프 관심도

자사 분석

상징 4가지

GOOD -이미지 사용 -퀵메뉴의 편의성 -컨텐츠 간 구분 쉬움 -SNS,블로그 활동 활발

BAD -촌스러운 디자인 -퀵메뉴 글로만 나열 -상단 공간 낭비 -컨텐츠 우선순위 빈약 -사용자 위한 컨텐츠 빈약(전우애) -SNS, 블로그 노출 빈약

자사 분석

상징 4가지

GOOD -픽토그램 활용 -팝업 컨텐츠 상단 위치 -e-book,SNS 직접 노출 -관련사이트 이미지로 노출

BAD -메뉴 다소 복잡 -픽토그램 통일성 빈약 -자주 찾는 메뉴 접근성 빈약

타사 분석

상징 4가지

GOOD -세련된 디자인 -사각 그리드 레이아웃 -빠른 메뉴 픽토그램 활용 -상단 비주얼의 활용 -관련사이트 롤링 형식

BAD -빠른 메뉴의 접근성 빈약 -메인에 노출된 컨텐츠 종류 적음

타사 분석

상징 4가지

GOOD -정보를 찾기 쉬운 짧은 메인페이지 길이 -해군모집, 합격자 조회 등을 상단에 노출 -빠른 메뉴 픽토그램 활용 -상단 비주얼의 활용

BAD -SNS 노출 빈약 -퀵메뉴 접근성 빈약 -메인에 노출된 컨텐츠 종류 적음

타사 분석

상징 4가지

GOOD -깔끔한 그리드와 여백 -컨텐츠 구분 용이 -상단 검색바로 사용자 고려 -빠른 메뉴 픽토그램 활용 -상단 비주얼의 활용

BAD -SNS 노출 빈약 -퀵메뉴 접근성 빈약 -여백 일정하지 않음

우수사이트 분석

반응형 웹 -창의 크기 작아지면, 컨텐츠 상자가 아래로 내려옴

최신기술 분석

자바스크립트 -퀵메뉴 : 마우스 오버 시 설명글 노출

최신기술 분석

타겟이 생각하는 해병대의 장점

타겟 분석

-지원동기 : 해병대의 강인함 61% -지원자격, 경쟁률

타겟 분석

코어 타겟층

-해병대에 가고 싶은 예비 해병대인 : 지원방법, 입대전 준비 -해병대에 복무 중인 군인의 가족 &지인 : 포토뉴스, 인터넷편지, 입영장병 가족과의 대화

서브 타겟층

- 해병대에 복무 중인 군인

- 해병대에 입대 예정인 군인의 가족 &지인

타겟 분석

트렌드만 반영한 디자인 지양,

해병대 위상 연출 & 자부심 느낄 수 있는 디자인

- 컬러&이미지로 해병대 위상 연출

사용자 맞춤 정보설계

- 중요한 컨텐츠 우선순위 재설정

- 부대배치조회, SNS 직접 노출

미션 수행

디자인 퀄리티 향상, 최신기술 응용

- ‘컬러 통일 &이미지&깔끔한 그리드’로 퀄리티 향상

- ‘반응형 웹, 제이쿼리’로 최신기술 응용

사용자와 소통 위한 컨텐츠 설계, 제안

- SNS 직접 노출하여 사용자와 소통

- 해병대지 컨텐츠 메인에서 노출하여 사용자와 소통

- 동문모임 컨텐츠 추가 제안

미션 수행

- 컨셉 : 강인함, 역동적

- 전략 : 최강 해병대, 국민의 힘!

컨셉과 전략

컬러

폰트

RED #fa2829

Dark gray #444444

White #ffffff

정열,용기, 힘, 에너지

세련,당당, 위엄,권위,힘

정직,신뢰, 세련,단순

스타일 가이드

1. 일반적 레이아웃 2. 역동적 사선 배경 3. 배경에 이미지 사용 4. 통일된 픽토그램 5. 우선순위 정보설계

디자인 소개

1. 상단 검색바 추가 2. 퀵메뉴 최신기술 응용 3. 포토뉴스 상단 비주얼로 활용, 역동적 폰트 4. 공지사항, tv뉴스를 하나로 묶음 5. 팝업 컨텐츠 상단 위치

디자인 소개 - 상단

1. 자주찾는 메뉴 픽토그램&상단 위치 2. 부대배치조회 검색바 노출 3. 해병모집 컨텐츠 상단 배치(사용자와의 소통) 4. SNS 직접 노출&상단배치 5. 동문모임 컨텐츠 추가제안 6. 블로그 컨텐츠 노출 7. 해병대지 컨텐츠 : 사용자와의 소통, 최신기술 응용

디자인 소개 - 콘텐츠

1. 관련사이트 바로가기 이미지로 노출 2. 관련사이트 바로가기 최신기술 응용 3. 깔끔한 화이트 컬러로 가독성 높임 4. 해병대 마크 노출

디자인 소개 - 푸터

디자인 퀄리티 향상 -해병대 위상 & 자부심

사용자 맞춤 우선순위 재설계- 사용자 편리

최신기술 이용- 신뢰감

SNS노출로 사용자와의 소통 활발

결과 예측

Q&A

발표를 들어주셔서 감사합니다. 필승!

필승 : 반드시 승리한다. 반드시 승리하시기를 응원합니다!