SlideShare ist ein Scribd-Unternehmen logo
1 von 7
[object Object],[object Object],Global Design Style Guide Basic
HMC & HMA Things to do -   - Things to do HMC / IBM HMA / GSP Schedule Single design concept  Global  디자인 컨셉 시안 제공 Global  디자인 컨셉 시안 확인 및 방향성 협의 11 월  30 일 Guided area & items  Global  영역 및 가이드 요소 제공 Global  영역 및 가이드 요소 협의 12 월  10 일 Design Template 1 차  : Global  디자인 템플릿 제공  2 차  : HMA  디자인 템플릿 협의 1 차  : Global  디자인 템플릿 협의  2 차  : HMA  디자인 템플릿 제공 1 차  :12 월  20 일 2 차  :12 월  30 일 Basic Web Style Guide 1 차  :  기본 웹스타일 가이드 중간 진행 협의 2 차  :  기본 웹스타일 가이드 산출물 제공 1 차  :  기본 웹스타일 가이드 중간 진행 협의 2 차  :  기본 웹스타일 가이드 산출물 협의 1 차  : 1 월  15 일 2 차  : 1 월  30 일  Site Development KR national Site  및  International Site  제작  진행 과정 중 디자인 일관성 협의 HMA Site  제작진행 과정 중  디자인 일관성 협의 1 차  : 2 월  15 일 2 차  : 3 월  15 일 3 차  : 4 월  15 일 Maintenance  Web Style Guide 운영을 위한 웹스타일 가이드 제공 웹스타일 가이드 협의 5 월  20 일 Web Style Guide  Global Deploy Version 글로벌 확산을 위한  제작 ,  운영 웹스타일 가이드 완성본 제공 제작 ,  운영 웹스타일 가이드 완성본 공유 6 월  20 일
Header(GNB) & Footer size -   - Global standard size Global standard size Global standard size Center horizontal aligned Key visual start line - GNB is overlapped with the key visual Design of key visual & background have to be considered harmonizing with GNB design M M M M M M Mandatory Flexible M F
GNB ,[object Object],-   - Language Mark - If your site can support multiple language version, it designed clickable button.  - Language mark must use its own language. Country select & display - Country display have to use same country name with select combo-box ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Global common area F F M F F F M ,[object Object],M Mandatory Flexible M F
Footer -   - Optimize its own language Link to representative e-mail address Footer menus - Footer have to include warranty, sitemap, help & feedback menu. - It can be added a necessary menu. But, added menus avoid duplication of GNB. F F F Mandatory Flexible M F
Body section – A (Key Visual) -   - - Key Visual section must include clickable element & select button of key visual - This section is operated plural key visuals. Key Visual - Let visitors feel here is the home of Hyundai Motor Company F M Mandatory Flexible M F
Body section – B (Contents Section) -   - 1x 1x 1x 1x 4x columns News area - News and official announcements regarding local and HQ of Hyundai - Use the global template, but variation is permitted ,[object Object],[object Object],[object Object],M F F Mandatory Flexible M F

Weitere ähnliche Inhalte

Andere mochten auch

What do We Know about Drag Kings?
What do We Know about Drag Kings?What do We Know about Drag Kings?
What do We Know about Drag Kings?Teila123
 
independent group
independent groupindependent group
independent groupcartonmo
 
Real Estate Impacts of Alternative Energy Technology
Real Estate Impacts of Alternative Energy TechnologyReal Estate Impacts of Alternative Energy Technology
Real Estate Impacts of Alternative Energy TechnologyZeroNet-Energy-Solutions
 
Hileman Group: Marketing Automation Matters
Hileman Group: Marketing Automation MattersHileman Group: Marketing Automation Matters
Hileman Group: Marketing Automation MattersKyle Chandler
 
28th Social Work Day at the United Nations 2011
28th Social Work Day at the  United Nations 201128th Social Work Day at the  United Nations 2011
28th Social Work Day at the United Nations 2011IFSW
 
PhD Thesis presentation
PhD Thesis presentationPhD Thesis presentation
PhD Thesis presentationJavier Ortega
 
2011 Global Social Work Student Conference - Silver School of Social Work – N...
2011 Global Social Work Student Conference - Silver School of Social Work – N...2011 Global Social Work Student Conference - Silver School of Social Work – N...
2011 Global Social Work Student Conference - Silver School of Social Work – N...IFSW
 
Financial terms
Financial terms Financial terms
Financial terms Tanu Bansal
 
Microbes and technology f.1.
Microbes and technology f.1.Microbes and technology f.1.
Microbes and technology f.1.linamontero
 
User eXitus - Nenechte sve navstevniky odchazet BarCamp 2011 Ostrava
User eXitus - Nenechte sve navstevniky odchazet BarCamp 2011 OstravaUser eXitus - Nenechte sve navstevniky odchazet BarCamp 2011 Ostrava
User eXitus - Nenechte sve navstevniky odchazet BarCamp 2011 Ostravajirikomar
 
Carlos lenin estrada
Carlos lenin estradaCarlos lenin estrada
Carlos lenin estradacarloslenin19
 
Victoriamolinatp1 110601071455-phpapp01
Victoriamolinatp1 110601071455-phpapp01Victoriamolinatp1 110601071455-phpapp01
Victoriamolinatp1 110601071455-phpapp01Pilii Ise Gelsi
 

Andere mochten auch (16)

What do We Know about Drag Kings?
What do We Know about Drag Kings?What do We Know about Drag Kings?
What do We Know about Drag Kings?
 
independent group
independent groupindependent group
independent group
 
Real Estate Impacts of Alternative Energy Technology
Real Estate Impacts of Alternative Energy TechnologyReal Estate Impacts of Alternative Energy Technology
Real Estate Impacts of Alternative Energy Technology
 
Hileman Group: Marketing Automation Matters
Hileman Group: Marketing Automation MattersHileman Group: Marketing Automation Matters
Hileman Group: Marketing Automation Matters
 
TP 13
TP 13TP 13
TP 13
 
UI Prototype
UI PrototypeUI Prototype
UI Prototype
 
Dani h
Dani hDani h
Dani h
 
28th Social Work Day at the United Nations 2011
28th Social Work Day at the  United Nations 201128th Social Work Day at the  United Nations 2011
28th Social Work Day at the United Nations 2011
 
PhD Thesis presentation
PhD Thesis presentationPhD Thesis presentation
PhD Thesis presentation
 
Slide
SlideSlide
Slide
 
2011 Global Social Work Student Conference - Silver School of Social Work – N...
2011 Global Social Work Student Conference - Silver School of Social Work – N...2011 Global Social Work Student Conference - Silver School of Social Work – N...
2011 Global Social Work Student Conference - Silver School of Social Work – N...
 
Financial terms
Financial terms Financial terms
Financial terms
 
Microbes and technology f.1.
Microbes and technology f.1.Microbes and technology f.1.
Microbes and technology f.1.
 
User eXitus - Nenechte sve navstevniky odchazet BarCamp 2011 Ostrava
User eXitus - Nenechte sve navstevniky odchazet BarCamp 2011 OstravaUser eXitus - Nenechte sve navstevniky odchazet BarCamp 2011 Ostrava
User eXitus - Nenechte sve navstevniky odchazet BarCamp 2011 Ostrava
 
Carlos lenin estrada
Carlos lenin estradaCarlos lenin estrada
Carlos lenin estrada
 
Victoriamolinatp1 110601071455-phpapp01
Victoriamolinatp1 110601071455-phpapp01Victoriamolinatp1 110601071455-phpapp01
Victoriamolinatp1 110601071455-phpapp01
 

Ähnlich wie Web Style Guide

The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...Sang Seok Lim
 
두번째단추 디지털마케팅 웹기획
두번째단추 디지털마케팅 웹기획두번째단추 디지털마케팅 웹기획
두번째단추 디지털마케팅 웹기획Woosung Kim
 
Web site devlopment for enterprise (Korean)
Web site devlopment for enterprise (Korean)Web site devlopment for enterprise (Korean)
Web site devlopment for enterprise (Korean)DonghwanKim85
 
Active ad 광고라이브러리 소개
Active ad 광고라이브러리 소개Active ad 광고라이브러리 소개
Active ad 광고라이브러리 소개logeo
 
[D2 오픈세미나]1.무한스크롤성능개선
[D2 오픈세미나]1.무한스크롤성능개선[D2 오픈세미나]1.무한스크롤성능개선
[D2 오픈세미나]1.무한스크롤성능개선NAVER D2
 
5모먼츠 4월 정기교육 - 나만의 웹 포트폴리오/사이트 만들기
5모먼츠 4월 정기교육 - 나만의 웹 포트폴리오/사이트 만들기5모먼츠 4월 정기교육 - 나만의 웹 포트폴리오/사이트 만들기
5모먼츠 4월 정기교육 - 나만의 웹 포트폴리오/사이트 만들기5moments
 
[마케팅전략] 2010년 pr 마케팅 전략 제안서
[마케팅전략] 2010년 pr 마케팅 전략 제안서[마케팅전략] 2010년 pr 마케팅 전략 제안서
[마케팅전략] 2010년 pr 마케팅 전략 제안서Lee Sung Hoon
 
현대자동차_final
현대자동차_final현대자동차_final
현대자동차_finalnceo
 
201003 모바일웹 중요성과 스타트업 기업에 대한 조언
201003 모바일웹 중요성과 스타트업 기업에 대한 조언201003 모바일웹 중요성과 스타트업 기업에 대한 조언
201003 모바일웹 중요성과 스타트업 기업에 대한 조언YOO SE KYUN
 
모바일웹키노트 플루토미디어
모바일웹키노트 플루토미디어모바일웹키노트 플루토미디어
모바일웹키노트 플루토미디어Kim jeehyun
 
[MSD06]MAPPING
[MSD06]MAPPING[MSD06]MAPPING
[MSD06]MAPPINGjylee_kgit
 
3주차 ppt용
3주차 ppt용3주차 ppt용
3주차 ppt용승원 서
 
워드프레스 우커머스 쇼핑몰 홈페이지 제작 서비스
워드프레스 우커머스 쇼핑몰 홈페이지 제작 서비스워드프레스 우커머스 쇼핑몰 홈페이지 제작 서비스
워드프레스 우커머스 쇼핑몰 홈페이지 제작 서비스HanJun Lee
 
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망Sang Seok Lim
 
2013년 워드프레스 템플릿 시장 열릴 것인가?
2013년 워드프레스 템플릿 시장 열릴 것인가?2013년 워드프레스 템플릿 시장 열릴 것인가?
2013년 워드프레스 템플릿 시장 열릴 것인가?블로그코디
 
블로그코디 Bc town소개서
블로그코디 Bc town소개서블로그코디 Bc town소개서
블로그코디 Bc town소개서블로그코디
 
Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발
Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발
Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발JongKwang Kim
 
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020Bansook Nam
 

Ähnlich wie Web Style Guide (20)

Seung
SeungSeung
Seung
 
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
 
두번째단추 디지털마케팅 웹기획
두번째단추 디지털마케팅 웹기획두번째단추 디지털마케팅 웹기획
두번째단추 디지털마케팅 웹기획
 
Web site devlopment for enterprise (Korean)
Web site devlopment for enterprise (Korean)Web site devlopment for enterprise (Korean)
Web site devlopment for enterprise (Korean)
 
Active ad 광고라이브러리 소개
Active ad 광고라이브러리 소개Active ad 광고라이브러리 소개
Active ad 광고라이브러리 소개
 
[D2 오픈세미나]1.무한스크롤성능개선
[D2 오픈세미나]1.무한스크롤성능개선[D2 오픈세미나]1.무한스크롤성능개선
[D2 오픈세미나]1.무한스크롤성능개선
 
5모먼츠 4월 정기교육 - 나만의 웹 포트폴리오/사이트 만들기
5모먼츠 4월 정기교육 - 나만의 웹 포트폴리오/사이트 만들기5모먼츠 4월 정기교육 - 나만의 웹 포트폴리오/사이트 만들기
5모먼츠 4월 정기교육 - 나만의 웹 포트폴리오/사이트 만들기
 
[마케팅전략] 2010년 pr 마케팅 전략 제안서
[마케팅전략] 2010년 pr 마케팅 전략 제안서[마케팅전략] 2010년 pr 마케팅 전략 제안서
[마케팅전략] 2010년 pr 마케팅 전략 제안서
 
현대자동차_final
현대자동차_final현대자동차_final
현대자동차_final
 
201003 모바일웹 중요성과 스타트업 기업에 대한 조언
201003 모바일웹 중요성과 스타트업 기업에 대한 조언201003 모바일웹 중요성과 스타트업 기업에 대한 조언
201003 모바일웹 중요성과 스타트업 기업에 대한 조언
 
모바일웹키노트 플루토미디어
모바일웹키노트 플루토미디어모바일웹키노트 플루토미디어
모바일웹키노트 플루토미디어
 
[MSD06]MAPPING
[MSD06]MAPPING[MSD06]MAPPING
[MSD06]MAPPING
 
3주차 ppt용
3주차 ppt용3주차 ppt용
3주차 ppt용
 
워드프레스 우커머스 쇼핑몰 홈페이지 제작 서비스
워드프레스 우커머스 쇼핑몰 홈페이지 제작 서비스워드프레스 우커머스 쇼핑몰 홈페이지 제작 서비스
워드프레스 우커머스 쇼핑몰 홈페이지 제작 서비스
 
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
 
2013년 워드프레스 템플릿 시장 열릴 것인가?
2013년 워드프레스 템플릿 시장 열릴 것인가?2013년 워드프레스 템플릿 시장 열릴 것인가?
2013년 워드프레스 템플릿 시장 열릴 것인가?
 
블로그코디 Bc town소개서
블로그코디 Bc town소개서블로그코디 Bc town소개서
블로그코디 Bc town소개서
 
Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발
Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발
Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발
 
Jinyweb
JinywebJinyweb
Jinyweb
 
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020
 

Web Style Guide

  • 1.
  • 2. HMC & HMA Things to do - - Things to do HMC / IBM HMA / GSP Schedule Single design concept Global 디자인 컨셉 시안 제공 Global 디자인 컨셉 시안 확인 및 방향성 협의 11 월 30 일 Guided area & items Global 영역 및 가이드 요소 제공 Global 영역 및 가이드 요소 협의 12 월 10 일 Design Template 1 차 : Global 디자인 템플릿 제공 2 차 : HMA 디자인 템플릿 협의 1 차 : Global 디자인 템플릿 협의 2 차 : HMA 디자인 템플릿 제공 1 차 :12 월 20 일 2 차 :12 월 30 일 Basic Web Style Guide 1 차 : 기본 웹스타일 가이드 중간 진행 협의 2 차 : 기본 웹스타일 가이드 산출물 제공 1 차 : 기본 웹스타일 가이드 중간 진행 협의 2 차 : 기본 웹스타일 가이드 산출물 협의 1 차 : 1 월 15 일 2 차 : 1 월 30 일 Site Development KR national Site 및 International Site 제작 진행 과정 중 디자인 일관성 협의 HMA Site 제작진행 과정 중 디자인 일관성 협의 1 차 : 2 월 15 일 2 차 : 3 월 15 일 3 차 : 4 월 15 일 Maintenance Web Style Guide 운영을 위한 웹스타일 가이드 제공 웹스타일 가이드 협의 5 월 20 일 Web Style Guide Global Deploy Version 글로벌 확산을 위한 제작 , 운영 웹스타일 가이드 완성본 제공 제작 , 운영 웹스타일 가이드 완성본 공유 6 월 20 일
  • 3. Header(GNB) & Footer size - - Global standard size Global standard size Global standard size Center horizontal aligned Key visual start line - GNB is overlapped with the key visual Design of key visual & background have to be considered harmonizing with GNB design M M M M M M Mandatory Flexible M F
  • 4.
  • 5. Footer - - Optimize its own language Link to representative e-mail address Footer menus - Footer have to include warranty, sitemap, help & feedback menu. - It can be added a necessary menu. But, added menus avoid duplication of GNB. F F F Mandatory Flexible M F
  • 6. Body section – A (Key Visual) - - - Key Visual section must include clickable element & select button of key visual - This section is operated plural key visuals. Key Visual - Let visitors feel here is the home of Hyundai Motor Company F M Mandatory Flexible M F
  • 7.