SlideShare a Scribd company logo
1 of 15
UI/UX 중간고사 최종안
201928008_김의종
◈ 사이트개요/목적
◈ 벤치마킹 사이트
-톤앤매너
-메뉴
-메인컬러
-아이콘
-페이지구성
-플로우
-메인화면UI
◈ 기획안
-스토리보드
-히스토리페이지
-메인페이지
사 이 트 개 요 / 목 적
• 관광대학교 학생들의 취업처에 대한 정보나 각 과목에 관련된
자료들을 저장해놓은 사이트로 기획
• 관광대학교 멀티미디어게임과 재학생들이 이용할 수 있고
과제에 필요한 자료나 정보를 쉽게 찾을 수 있게 하기 위한
목적으로 홈페이지를 제작하게 됨
벤 치 마 킹 사 이 트
디자인
기능
mobalytics.gg
OP.GG
NAVER cafe
dda.ac
위키백과
★ 필요한 정보력과
모던한 디자인을 갖춘
홈페이지를 참고
톤 앤 매 너
멀티미디어 게임과에서 펼치는
자신의 꿈을 표현한다는 컨셉으로
맑은 하늘색 계을의 톤앤매너를
사용.
메 인 컬 러
일반적인 파란계열의 색상과
민트 색상 이 두개가 메인컬러
입니다. 전체적인 바탕은 하얀색
으로 맞출 것이기 때문에 그 안에서
최대한 가시성을 살릴 수 있으면서
편안하게 볼 수 있는 색상을
선택했습니다.
ㅣ공지사항ㅣ자료실ㅣ취업분야ㅣ
메 뉴
불특정 다수가 아닌 관광대 멀티미디어게임과 학생들이 주 이용자이기 때문에
타 홈페이지처럼 많은 기능은 제공하지 않지만, 기획의 주 목적인
정보 검색과 취업처 정보 검색 같은 필요한 메뉴만 개설했습니다.
또한 스크롤 창을 길게 내리더라도 메뉴창 UI가 같이 내려와 다시 올라가서
메뉴창을 찾아 확인하는 번거로움을 없애는 기능도 추가했습니다.
아 이 콘
멀티미디어 게임과의 마스코트인
부엉이 캐릭터를 간소하게 아이콘으로
제작.
홈페이지 톤앤매너와 어울릴 수 있게
파란색 계열 위주로 사용.
페 이 지 구 성
ㅣ메뉴ㅣ메뉴ㅣ메뉴ㅣ
메뉴명
게시글
게시글
게시글
게시글
게시글
게시글
플 로 우 구 성
메인 화면
공지사항 자료실 취업분야
공지사항
게시글 목록으로
이동
카카오게임즈
넥슨넥트웍스
넷마블
네오플
관련 홈페이지로 이동
3D
2D
게임기획
스토리텔링
.
.
.
관련 문서 목록으로 이동
메 인 화 면 U I
메뉴
메인화면
☆일정 시간마다
메인화면 모습이 바뀐다.
아이
콘
히 스 토 리 페 이 지
히스토리
버전 변경일자 변경내용
Ver.0.1 2020-09-21 레퍼런스 기획 초안
Ver.0.2 2020-09-28 메인 화면 디자인/메뉴 변경/시스템 추가 기획
Ver.0.3 2020-10-05
메인 화면 구성, 시스템 정리/홈페이지 개설 방향성 확립/그 외
사소한 디자인 수정
Ver.0.4 2020-10-11 메뉴마다 페이지 디자인 개선
Ver.1.0 2020-10-16 최종 완성
메 인 페 이 지 + 시 안
I 공지사항 I 자료실 I 취업분야 I
회원가입 / 로그인
3D MAX 캐릭터 제작
2D 애니메이션 기획
스토리텔링 능력 키우기
3D MAX 건물 제작
스토리텔링 기승전결
언리얼 엔진 다루기 (기초)
3D l 2D l 스토리텔링 l 게임기획 l … l … l목록
자료실
취업 분야
카카오 게임즈
자신이 경험해보지 못한 영역에
도전하고 싶으신가요?
혹은 남들이 느껴보지 못할 나만의
창의성을 뽐내고 싶나요?
넥슨 네트웍스
모두가 바라는 꿈의 직장 속에서
세상을 바꿀 새로운 문화를 창작해볼 수 있는
기회를 찾으신다면
이곳이 좋을 거 같네요!

More Related Content

Similar to Uiux

Design blueb manual_1.0
Design blueb manual_1.0Design blueb manual_1.0
Design blueb manual_1.0중진 한
 
투어팁스모바일웹 제작가이드
투어팁스모바일웹 제작가이드투어팁스모바일웹 제작가이드
투어팁스모바일웹 제작가이드병수 김
 
9th.lecture.ui.design
9th.lecture.ui.design9th.lecture.ui.design
9th.lecture.ui.designJeongeun Kwon
 
iOS Human Interface Guidlines #3_SYS4U
iOS Human Interface Guidlines #3_SYS4UiOS Human Interface Guidlines #3_SYS4U
iOS Human Interface Guidlines #3_SYS4Usys4u
 
Portfolio imyongtai 2015
Portfolio imyongtai 2015Portfolio imyongtai 2015
Portfolio imyongtai 2015Yongtai Im
 
2024_Platz_Company brochure(Brand ZAKAK)
2024_Platz_Company brochure(Brand ZAKAK)2024_Platz_Company brochure(Brand ZAKAK)
2024_Platz_Company brochure(Brand ZAKAK)Platz
 
아세아시멘트홈페이지제작제안.ppt
아세아시멘트홈페이지제작제안.ppt아세아시멘트홈페이지제작제안.ppt
아세아시멘트홈페이지제작제안.pptDongHyunLee180578
 
Sencha 가 기업용 WebApps 를 위한 최적의 솔루션인 이유는?
Sencha 가 기업용 WebApps 를 위한 최적의 솔루션인 이유는?Sencha 가 기업용 WebApps 를 위한 최적의 솔루션인 이유는?
Sencha 가 기업용 WebApps 를 위한 최적의 솔루션인 이유는?미래웹기술연구소 (MIRAE WEB)
 
2012 UX Design Trend Report Part 2_SYS4U I&C
2012 UX Design Trend Report Part 2_SYS4U I&C2012 UX Design Trend Report Part 2_SYS4U I&C
2012 UX Design Trend Report Part 2_SYS4U I&Csys4u
 
[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221
[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221
[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221KTH, 케이티하이텔
 
2011년 1월 Webdevmobile 세미나
2011년 1월 Webdevmobile 세미나2011년 1월 Webdevmobile 세미나
2011년 1월 Webdevmobile 세미나korea_simgoon
 
어흥~!이번발표
어흥~!이번발표어흥~!이번발표
어흥~!이번발표korea_simgoon
 
Webdevmobile 2011 01
Webdevmobile 2011 01Webdevmobile 2011 01
Webdevmobile 2011 01korea_simgoon
 
제 5회 DGMIT UI&UX 컨퍼런스: 2015 웹디자인 트렌드
제 5회 DGMIT UI&UX 컨퍼런스: 2015 웹디자인 트렌드제 5회 DGMIT UI&UX 컨퍼런스: 2015 웹디자인 트렌드
제 5회 DGMIT UI&UX 컨퍼런스: 2015 웹디자인 트렌드dgmit2009
 
블로그코디 Bc town소개서
블로그코디 Bc town소개서블로그코디 Bc town소개서
블로그코디 Bc town소개서블로그코디
 
2015 블로그코디 회사소개서
2015 블로그코디 회사소개서2015 블로그코디 회사소개서
2015 블로그코디 회사소개서블로그코디
 
0812485 박혜진 mobile
0812485 박혜진 mobile0812485 박혜진 mobile
0812485 박혜진 mobilemarchlioon
 
Earlyadopter Proposal
Earlyadopter  ProposalEarlyadopter  Proposal
Earlyadopter ProposalMatthewyoon
 
ux 2.0 시대의 ceo와 디자이너의 역할
ux 2.0 시대의 ceo와 디자이너의 역할ux 2.0 시대의 ceo와 디자이너의 역할
ux 2.0 시대의 ceo와 디자이너의 역할Billy Choi
 

Similar to Uiux (20)

Design blueb manual_1.0
Design blueb manual_1.0Design blueb manual_1.0
Design blueb manual_1.0
 
투어팁스모바일웹 제작가이드
투어팁스모바일웹 제작가이드투어팁스모바일웹 제작가이드
투어팁스모바일웹 제작가이드
 
9th.lecture.ui.design
9th.lecture.ui.design9th.lecture.ui.design
9th.lecture.ui.design
 
iOS Human Interface Guidlines #3_SYS4U
iOS Human Interface Guidlines #3_SYS4UiOS Human Interface Guidlines #3_SYS4U
iOS Human Interface Guidlines #3_SYS4U
 
Portfolio imyongtai 2015
Portfolio imyongtai 2015Portfolio imyongtai 2015
Portfolio imyongtai 2015
 
2024_Platz_Company brochure(Brand ZAKAK)
2024_Platz_Company brochure(Brand ZAKAK)2024_Platz_Company brochure(Brand ZAKAK)
2024_Platz_Company brochure(Brand ZAKAK)
 
아세아시멘트홈페이지제작제안.ppt
아세아시멘트홈페이지제작제안.ppt아세아시멘트홈페이지제작제안.ppt
아세아시멘트홈페이지제작제안.ppt
 
Sencha 가 기업용 WebApps 를 위한 최적의 솔루션인 이유는?
Sencha 가 기업용 WebApps 를 위한 최적의 솔루션인 이유는?Sencha 가 기업용 WebApps 를 위한 최적의 솔루션인 이유는?
Sencha 가 기업용 WebApps 를 위한 최적의 솔루션인 이유는?
 
2012 UX Design Trend Report Part 2_SYS4U I&C
2012 UX Design Trend Report Part 2_SYS4U I&C2012 UX Design Trend Report Part 2_SYS4U I&C
2012 UX Design Trend Report Part 2_SYS4U I&C
 
Hellotutorial
HellotutorialHellotutorial
Hellotutorial
 
[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221
[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221
[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221
 
2011년 1월 Webdevmobile 세미나
2011년 1월 Webdevmobile 세미나2011년 1월 Webdevmobile 세미나
2011년 1월 Webdevmobile 세미나
 
어흥~!이번발표
어흥~!이번발표어흥~!이번발표
어흥~!이번발표
 
Webdevmobile 2011 01
Webdevmobile 2011 01Webdevmobile 2011 01
Webdevmobile 2011 01
 
제 5회 DGMIT UI&UX 컨퍼런스: 2015 웹디자인 트렌드
제 5회 DGMIT UI&UX 컨퍼런스: 2015 웹디자인 트렌드제 5회 DGMIT UI&UX 컨퍼런스: 2015 웹디자인 트렌드
제 5회 DGMIT UI&UX 컨퍼런스: 2015 웹디자인 트렌드
 
블로그코디 Bc town소개서
블로그코디 Bc town소개서블로그코디 Bc town소개서
블로그코디 Bc town소개서
 
2015 블로그코디 회사소개서
2015 블로그코디 회사소개서2015 블로그코디 회사소개서
2015 블로그코디 회사소개서
 
0812485 박혜진 mobile
0812485 박혜진 mobile0812485 박혜진 mobile
0812485 박혜진 mobile
 
Earlyadopter Proposal
Earlyadopter  ProposalEarlyadopter  Proposal
Earlyadopter Proposal
 
ux 2.0 시대의 ceo와 디자이너의 역할
ux 2.0 시대의 ceo와 디자이너의 역할ux 2.0 시대의 ceo와 디자이너의 역할
ux 2.0 시대의 ceo와 디자이너의 역할
 

Uiux

  • 2. ◈ 사이트개요/목적 ◈ 벤치마킹 사이트 -톤앤매너 -메뉴 -메인컬러 -아이콘 -페이지구성 -플로우 -메인화면UI ◈ 기획안 -스토리보드 -히스토리페이지 -메인페이지
  • 3. 사 이 트 개 요 / 목 적 • 관광대학교 학생들의 취업처에 대한 정보나 각 과목에 관련된 자료들을 저장해놓은 사이트로 기획 • 관광대학교 멀티미디어게임과 재학생들이 이용할 수 있고 과제에 필요한 자료나 정보를 쉽게 찾을 수 있게 하기 위한 목적으로 홈페이지를 제작하게 됨
  • 4. 벤 치 마 킹 사 이 트 디자인 기능 mobalytics.gg OP.GG NAVER cafe dda.ac 위키백과 ★ 필요한 정보력과 모던한 디자인을 갖춘 홈페이지를 참고
  • 5. 톤 앤 매 너 멀티미디어 게임과에서 펼치는 자신의 꿈을 표현한다는 컨셉으로 맑은 하늘색 계을의 톤앤매너를 사용.
  • 6. 메 인 컬 러 일반적인 파란계열의 색상과 민트 색상 이 두개가 메인컬러 입니다. 전체적인 바탕은 하얀색 으로 맞출 것이기 때문에 그 안에서 최대한 가시성을 살릴 수 있으면서 편안하게 볼 수 있는 색상을 선택했습니다.
  • 7. ㅣ공지사항ㅣ자료실ㅣ취업분야ㅣ 메 뉴 불특정 다수가 아닌 관광대 멀티미디어게임과 학생들이 주 이용자이기 때문에 타 홈페이지처럼 많은 기능은 제공하지 않지만, 기획의 주 목적인 정보 검색과 취업처 정보 검색 같은 필요한 메뉴만 개설했습니다. 또한 스크롤 창을 길게 내리더라도 메뉴창 UI가 같이 내려와 다시 올라가서 메뉴창을 찾아 확인하는 번거로움을 없애는 기능도 추가했습니다.
  • 8. 아 이 콘 멀티미디어 게임과의 마스코트인 부엉이 캐릭터를 간소하게 아이콘으로 제작. 홈페이지 톤앤매너와 어울릴 수 있게 파란색 계열 위주로 사용.
  • 9. 페 이 지 구 성 ㅣ메뉴ㅣ메뉴ㅣ메뉴ㅣ 메뉴명 게시글 게시글 게시글 게시글 게시글 게시글
  • 10. 플 로 우 구 성 메인 화면 공지사항 자료실 취업분야 공지사항 게시글 목록으로 이동 카카오게임즈 넥슨넥트웍스 넷마블 네오플 관련 홈페이지로 이동 3D 2D 게임기획 스토리텔링 . . . 관련 문서 목록으로 이동
  • 11. 메 인 화 면 U I 메뉴 메인화면 ☆일정 시간마다 메인화면 모습이 바뀐다. 아이 콘
  • 12. 히 스 토 리 페 이 지 히스토리 버전 변경일자 변경내용 Ver.0.1 2020-09-21 레퍼런스 기획 초안 Ver.0.2 2020-09-28 메인 화면 디자인/메뉴 변경/시스템 추가 기획 Ver.0.3 2020-10-05 메인 화면 구성, 시스템 정리/홈페이지 개설 방향성 확립/그 외 사소한 디자인 수정 Ver.0.4 2020-10-11 메뉴마다 페이지 디자인 개선 Ver.1.0 2020-10-16 최종 완성
  • 13. 메 인 페 이 지 + 시 안 I 공지사항 I 자료실 I 취업분야 I 회원가입 / 로그인
  • 14. 3D MAX 캐릭터 제작 2D 애니메이션 기획 스토리텔링 능력 키우기 3D MAX 건물 제작 스토리텔링 기승전결 언리얼 엔진 다루기 (기초) 3D l 2D l 스토리텔링 l 게임기획 l … l … l목록 자료실
  • 15. 취업 분야 카카오 게임즈 자신이 경험해보지 못한 영역에 도전하고 싶으신가요? 혹은 남들이 느껴보지 못할 나만의 창의성을 뽐내고 싶나요? 넥슨 네트웍스 모두가 바라는 꿈의 직장 속에서 세상을 바꿀 새로운 문화를 창작해볼 수 있는 기회를 찾으신다면 이곳이 좋을 거 같네요!