3 주차 강의 내용 강의 내용 밤샘돌이   서승원 http://cafe.naver.com/hongmario http://www.bamsamdori.com
목차 숙제 검사  사이트 / 서비스 시안 컨셉 잡기 메인 / 서브페이지 시안 기획 Q&A 다음 주 숙제
숙제검사 !!!
P rocess... 사업기획 단계 웹기획 단계 마케팅 기획 단계 사이트 운영기획 단계 BM  설계 및 수익구조에 대한 분석 ROI/ 손익분기점에 대한 목표 설정 분석 :  사용자분석 ,  고객니즈 / 요구사항 분석 ,  웹사이트 / 서비스 분석 등 초기설계 :  벤치마킹 , IA 설계 ,  컨셉설계 ,  메인 / 서브시안 기획 등 상세설계 :  화면단위 기획 ,  서비스 기획 ,  요구사항 변경관리 등 구축개발 :  기능설명 및 협의 테스트   :  기능별 단위테스트 ,  통합테스트 ,  사용자테스트 등 런칭   :  오류테스트 ,  사용자테스트 등 안정화   :  모니터링 ,  산출물 작업 등 타겟분석에 의한 전략 수립 아이템 선정 이슈화 및 활성화를 위한 단계별 전략 및 마스터 플랜 수립 지속적인 사용자에 대한 분석 및 이슈점 도출 이슈점에 대한 서비스 개편 / 고도화 전략 수립 개편 시점과 부합되는 프로모션 전략 수립 사용자에 대한 로얄티 상승을 위한 프로모션 전략 수립  잠재고객 / 신규고객에 대한 프로모션 전략 수립
I.  사이트 / 서비스 시안 컨셉 잡기 차별화 포인트 잡기 아이덴티티 표현하기 메인화면 컷 결정하기
I.  사이트 / 서비스 시안 컨셉 잡기 차별화 포인트 잡기 아이덴티티 표현하기 메인화면 컷 결정하기
-  타이틀 / 키워드에서 찾기 -  디자인에서 찾기 -  컨텐츠에서 찾기 차별화 포인트를 잡으려면 어떻게 해야 하지 ?
차별화 포인트 잡기  ○  키워드에서 찾기  일상의 짧은 이야기들  :  토크쇼  :  야생버라이어티  :
차별화 포인트 잡기  ○  디자인에서 찾기  - www.thefwa.com
차별화 포인트 잡기  ○  디자인에서 찾기  -  www.dbcut.com
차별화 포인트 잡기  ○  아이덴티티 / 서비스 구성에서 찾기
차별화 포인트 잡기  예 )  기업  -  인재상 http://www.noroo.co.kr/kor/recruit/talent.asp http://www.lg.co.kr/lgstory/advice/advice_list.jsp ○  핵심 컨텐츠에서 찾기   -  일반적인 내용의 재미요소 부여
차별화 포인트 잡기  http://www.samsung.co.kr   http://www.nhncorp.com   ○  핵심 컨텐츠에서 찾기   -  기업의 감성적 프로모션 -  기업 메인페이지에 사회공헌 내용 및  소개 동영상을 소개하여 기업 이미지 / 브랜드 인지를 제고  ( 사개밴드 ,  삼성의 연구원 등 )  -  네이버라는 서비스 브랜드가 있기 때문에  nhn  기업사이트에는 기본정보만 제공 -  브랜드 사이트를 별도로 제작 및 사회공헌에 내용을 서비스 전체에 적용하여 기업 이미지에 대한 부분을 긍정적으로 유도
차별화 포인트 잡기  http://www.oklasik.com / ○  핵심 컨텐츠에서 찾기   -  사용자의 불안요소 / 니즈에서  -  고객이 궁금하고 중요하게 생각하는 컨텐츠를 전략적으로 부각  -  사용자가 서비스 ( 수술 ) 에 대해서 불안감을 가지고 있을 수 있는 것에 대한 니즈를 파악  ➜  온라인에서 이와 관련된 불안감을 해소시킬 수 있는 컨텐츠 제공  ➜ 직원들의 체험후기 ,  타 서비스 / 시설과의 차별화 포인트에 대한 강조 ( 토탈케어 시스템 ,  평생보장제도 )
차별화 포인트 잡기  www.daum.net  -  모바일 검색 ○  핵심 컨텐츠에서 찾기   -  사용자 니즈  /  트랜드에 의한 www.daum.net  -  제주 지진 뉴스 검색 -  사용자 로그분석 / 트랜드에서 찾기 -  인기 컨텐츠 / 서비스에 대한 분석을 통해서 컨텐츠 찾기 ( 서비스 개선사항 찾기 ) ➜  다음  :  전체 서비스 사용 / 미디어변화에 대한 흐름 ( 모바일 검색 ),  중복 검색결과에 대한 사용자 불편사항을 묶음 형태로 서비스 제공 ( 뉴스 클러스트링 )
차별화 포인트 잡기  http://inside.naver.com/sequence_search ○  핵심 컨텐츠에서 찾기   -  사용자 니즈  /  트랜드에 의한 -  사용자 로그분석 / 트랜드에서 찾기 ➜  네이버 :  사용자 클릭 / 시선이동  / 주요 이용 탭에 대한 분석을 검색에 대한  UI  개선
차별화 포인트 잡기  http://inside.naver.com/sequence_search ○  핵심 컨텐츠에서 찾기   -  사용자 니즈  /  트랜드에 의한 -  사용자 로그분석 / 트랜드에서 찾기 ➜  네이트 :  검색어와 관련된 카테고리를 우선적으로 보여줌 ,  실시간 검색에 대한 부분을 강조
여기서 잠깐 !!!
포탈  3 사의 검색결과 비교 네이버 -  광고 중심의 검색 결과 -  지식인에 대한 서비스 포인트 -  전문자료 부분이 검색에 나와야 할 요소인지에 대한 부분 다음 -  광과 중심 ,  네이버와 달리 지역광고에 대한 강조 ,  후기  -  추천에 대한 부분이 약함 -  뉴스가 상위에 있는 것이 적합하지 않음 네이트 -  바로가기 링크에 대한 강남맛집 ( 업체 ) 이 특정 사이트로  이동하게 되어 있는 것이 적합하지 않음
I.  사이트 / 서비스 시안 컨셉 잡기 차별화 포인트 잡기 아이덴티티 표현하기 메인화면 컷 결정하기
P rocess... 사업기획 단계 웹기획 단계 마케팅 기획 단계 사이트 운영기획 단계 BM  설계 및 수익구조에 대한 분석 ROI/ 손익분기점에 대한 목표 설정 분석 :  사용자분석 ,  고객니즈 / 요구사항 분석 ,  웹사이트 / 서비스 분석 등 초기설계 :  벤치마킹 , IA 설계 ,  컨셉설계 ,  메인 / 서브시안 기획등 상세설계 :  화면단위 기획 ,  서비스 기획 ,  요구사항 변경관리 등 구축개발 :  기능설명 및 협의 테스트   :  기능별 단위테스트 ,  통합테스트 ,  사용자테스트 등 런칭   :  오류테스트 ,  사용자테스트 등 안정화   :  모니터링 ,  산출물 작업 등 타겟분석에 의한 전략 수립 아이템 선정 이슈화 및 활성화를 위한 단계별 전략 및 마스터 플랜 수립 지속적인 사용자에 대한 분석 및 이슈점 도출 이슈점에 대한 서비스 개편 / 고도화 전략 수립 개편 시점과 부합되는 프로모션 전략 수립 사용자에 대한 로얄티 상승을 위한 프로모션 전략 수립  잠재고객 / 신규고객에 대한 프로모션 전략 수립
-  기획  :  컨셉 ,  슬로건 및 차별화 포인트 -  디자인  : Look & Feel -  개발  :  컨셉에 맞는 기능 구현 아이덴티티를 표현하려면 어떻게 해야 하지 ?
아이덴티티 표현하기 ○  기획  :  컨셉 ,  슬로건 및 차별화  http://www.dit.co.kr /  사명을 활용하여 경영철학과 사업영역에 대한 부분을 표출
아이덴티티 표현하기 ○  기획  :  컨셉 ,  슬로건 및 차별화  http://www.dit.co.kr/business/it.asp 각 사업영역의 팀장들의 자필 활용
아이덴티티 표현하기 http://www.s-class.co.kr/ ○  Design : Look & Feel 브랜드 네임을 활용한 비주얼 요소
아이덴티티 표현하기 ○  Design : Look & Feel http://www.daekyo.co.kr/Kr/ 경영철학을 비주얼 이미지로 표현
아이덴티티 표현하기 ○  Design : Look & Feel http://www.uplus.co.kr/ 새로운 로고를 강조  &  네비게이션으로 활용
아이덴티티 표현하기 ○  개발  :  컨셉에 맞는 기능 구현 http://www.cgv.co.kr 빠른 예매  -  원스탑 모든것을 한화면에서 가능
아이덴티티 표현하기 ○  개발  :  컨셉에 맞는 기능 구현 http://korean.visitkorea.or.kr / FIT 를 위한 여행 만들기 서비스
아이덴티티 표현하기 ○  개발  :  컨셉에 맞는 기능 구현 http://www.twitter.com/yuki6174 일상의 모든 이야기를 쉽고 편하게
아이덴티티 표현하기 ○  개발  :  컨셉에 맞는 기능 구현 http://www.facebook.com / 나와 관계 있는 사람을 편하게 찾을 수 있다
I.  사이트 / 서비스 시안 컨셉 잡기 차별화 포인트 잡기 아이덴티티 표현하기 메인화면 컷 결정하기
-  모션 플래시 비주얼 ( 인트로 ) 을 사용할 것인가 ? -  일반적인 메인 비주얼을 사용할 것인가 ? -  정보 중심의 화면으로 구성할 것인가 ? 메인화면 컷을 결정하려면 어떻게 해야 하지 ?
모션 비주얼을 활용 ○  직접 메인화면으로 이동  -  프로모션 일반 메인화면 기업철학 제품군 사업영역 I II III
모션 비주얼을 활용 정보 중심 포탈형 커뮤니티형 미디어형 I II I II I II III ○  직접 메인화면으로 이동  -  정보전달
모션 비주얼을 활용 ○  인트로의 활용 인트로 화면 홍보영상 기능 단순 제품 프로모션 / 브랜드 홍보 간략한 비주얼과 기능을 조합 http://k7.kia.co.kr / http://www.visitkorea.or.kr/intro.html
모션 비주얼을 활용 ○  인트로의 활용  -  홍보영상 인트로 화면 홍보영상 기능 음성 / 음향효과 슬로건 / 카피문구 동영상 시나리오
모션 비주얼을 활용 인트로 화면 홍보영상 기능 네비게이션 언어 특수목적 ○  인트로의 활용  -  기능
II.  메인 / 서브페이지 기획 메인 / 서브페이지 구성 전략 UI 설계하기 화면설계서 작성하기
II.  메인 / 서브페이지 기획 메인 / 서브페이지 구성 전략 UI 설계하기 화면설계서 작성하기
기획에서 빠지지 말아야 할 것 共感
소수 처럼  생각 하고   다수 처럼  이야기  하라 기획에서 빠지지 말아야 할 것
왜  여기에  왔을까 ? 왜  여기에  와야만 하나 ? 기획에서 빠지지 말아야 할 것
기획에서 꼭 빠져야 할 것 自我陶醉
-  사용자 유형에 대한 분류 -  방문 목적에 대한 분류 -  아이덴티티 요소의 구성 -  재미요소 적용 3 가지를 잊지않고  기획을 하려면 어떻게 해야 하지 ?
사용자에 대한 분류 ○  사용자 분류 / 고려 요소 Quantity Factor ( 정량적 요소 ) :  나이 ,  성별 ,  지역 ,  사용시간 ... Quality Factor ( 정성적 요소 ) :  성격 ( 적극적 ,  소극적 등 ),  표현 ... Common/Cultural Factor ( 일반적 / 문화적 요소 ) :  한국사람은 ...
사용자에 대한 분류 ○  사용자 목적에 대한 고려 요소 1 차 서핑 검색 / 뉴스 / 킬링타임 다시보기 공부 구매 참여 상담 2 차 쇼핑몰 포탈서비스 방송국사이트 교육사이트
아이덴티티와 재미요소 구성 ○  파트별  Fun  요소의 가미 목록 ➜ 레이아웃의 변화 Only view ➜  참여형으로 단순 나열 ➜ 테마형 구성 단순 관리 ➜ 경쟁 / 보상 디자인 서비스 컨텐츠 운영정책
추가 고려 요소 ○  사용자가 페이지에 접근하는 경로 파일 보기➜
참여 시간 ~♪ 함께해 보아요  *^^*
5 분간 논의 해보기 ○  사용자는  -  누구 ?  -  왜 방문을 ?  -  어떻게 방문할까 ? -  어떤 것을 좋아할까 ? ○  논의 대상사이트 -  쇼핑몰  :  대형 ,  소호 ,  특판형 ( 원어데이 ) -  학습사이트  :  온라인 ,  온 / 오프라인 ,  연령별  -  게임사이트  :  게임의 종류별 ,  방문복적별 -  브랜드 사이트  :  제품의 유형별 -  서비스 사이트  :  서비스 목적별
UI/UX  설계하기 ○  UI( U ser  I nterface) 는 ?  -  사전적 의미  : ( 컴퓨터 )  사용자 인터페이스  (( 사용자가 컴퓨터와 대화하기 위한 기호나 명령 체계 ))   -  관계형성 너와 나의 관계를 맺는 것 예 )   사람과 사람  -  사람이 하는 말 ( 언어 ,  표현 ),  거친말 ,  부드러운 말 사람과 컴퓨터    -  입력을 키보드로 하면 화면으로 컴퓨터가 보여주는 것  사람과 웹    -  클릭을 하면 서비스가 액션이 일어나는 것  ○  GUI( G raphical  U ser  I nterface) 는 ?  -  사전적 의미  :  사용자가 컴퓨터와 정보를 교환할 때 ,  그래픽을 통해 작업할 수 있는 환경을 말한다 .  마우스 등을 이용하여 화면에 있는 메뉴를 선택하여 작업을 할 수 있다 .
UI/UX  설계하기 ○  UX( U ser e X perience) 는 ?  -  사전적 의미  : 사용자가 어떤 시스템 ,  제품 ,  서비스를 직 ,  간접적으로 이용하면서 느끼고 생각하게 되는  총체적 경험을 말한다 .  :  미래형 ,  사용자가 경험하기 이전에 기대하는 심리 :  현재형 ,  사용자가 실제로 사용한 경험 :  미래형 ,  사용자가 서비스를 사용한 후 평가 - 3 가지의 의미를 가지고 있다 . User  eXpectation User  eXperience User  eXcuse
UI/UX  설계하기 ○  UI 와  UX 의 차이는 ?  美
UI/UX  설계하기 ○  UI 와  UX 의 차이는 ?  美 + 人
UI/UX  설계하기 ○  페이지 구성  -  독립적인 /Unique 한 페이지 예 )   메인 (TOP) 페이지 ,  안내 (Helpdesk)  페이지 ,  회원가입 페이지 등 -  표준폼에 맞는 페이지 예 )   게시판 ,  일관된 컨텐츠 페이지 ( 연혁 ),  커뮤니티 ,  블로그 등 ○  작업방식  -  스케치 후 작업 -  표준폼을 활용한 작업
UI/UX  설계하기 ○  컨텐츠 수급  - SI  프로젝트  ◇  원본자료에 대한 요청 및 시점의 중요성 ◇  컨텐츠 생산부서의 이슈  :  공공기관과 일반기업의 차이 -  자체서비스에 대한 컨텐츠 제작관점  :  뉴스 ,  용어 ,  표현방식
UI/UX  설계하기  -  작성예시 ○  스케치
UI/UX  설계하기  -  작성예시 ○  스케치
UI/UX  설계하기  -  작성예시 ○  스케치
UI/UX  설계하기  -  작성예시 ○  표준폼 활용 파일 보기➜
UI/UX  설계하기  -  작성예시 ○  환경부 작업 파일 보기➜
UI/UX  설계하기  -  작성예시 ○  DIT 홈페이지 작업 파일 보기➜
Q & A
Homework #3
Next time...
감사합니다  ^^

3주차 ppt용

  • 1.
    3 주차 강의내용 강의 내용 밤샘돌이 서승원 http://cafe.naver.com/hongmario http://www.bamsamdori.com
  • 2.
    목차 숙제 검사 사이트 / 서비스 시안 컨셉 잡기 메인 / 서브페이지 시안 기획 Q&A 다음 주 숙제
  • 3.
  • 4.
    P rocess... 사업기획단계 웹기획 단계 마케팅 기획 단계 사이트 운영기획 단계 BM 설계 및 수익구조에 대한 분석 ROI/ 손익분기점에 대한 목표 설정 분석 : 사용자분석 , 고객니즈 / 요구사항 분석 , 웹사이트 / 서비스 분석 등 초기설계 : 벤치마킹 , IA 설계 , 컨셉설계 , 메인 / 서브시안 기획 등 상세설계 : 화면단위 기획 , 서비스 기획 , 요구사항 변경관리 등 구축개발 : 기능설명 및 협의 테스트   : 기능별 단위테스트 , 통합테스트 , 사용자테스트 등 런칭   : 오류테스트 , 사용자테스트 등 안정화   : 모니터링 , 산출물 작업 등 타겟분석에 의한 전략 수립 아이템 선정 이슈화 및 활성화를 위한 단계별 전략 및 마스터 플랜 수립 지속적인 사용자에 대한 분석 및 이슈점 도출 이슈점에 대한 서비스 개편 / 고도화 전략 수립 개편 시점과 부합되는 프로모션 전략 수립 사용자에 대한 로얄티 상승을 위한 프로모션 전략 수립 잠재고객 / 신규고객에 대한 프로모션 전략 수립
  • 5.
    I. 사이트/ 서비스 시안 컨셉 잡기 차별화 포인트 잡기 아이덴티티 표현하기 메인화면 컷 결정하기
  • 6.
    I. 사이트/ 서비스 시안 컨셉 잡기 차별화 포인트 잡기 아이덴티티 표현하기 메인화면 컷 결정하기
  • 7.
    - 타이틀/ 키워드에서 찾기 - 디자인에서 찾기 - 컨텐츠에서 찾기 차별화 포인트를 잡으려면 어떻게 해야 하지 ?
  • 8.
    차별화 포인트 잡기 ○ 키워드에서 찾기 일상의 짧은 이야기들 : 토크쇼 : 야생버라이어티 :
  • 9.
    차별화 포인트 잡기 ○ 디자인에서 찾기 - www.thefwa.com
  • 10.
    차별화 포인트 잡기 ○ 디자인에서 찾기 - www.dbcut.com
  • 11.
    차별화 포인트 잡기 ○ 아이덴티티 / 서비스 구성에서 찾기
  • 12.
    차별화 포인트 잡기 예 ) 기업 - 인재상 http://www.noroo.co.kr/kor/recruit/talent.asp http://www.lg.co.kr/lgstory/advice/advice_list.jsp ○ 핵심 컨텐츠에서 찾기 - 일반적인 내용의 재미요소 부여
  • 13.
    차별화 포인트 잡기 http://www.samsung.co.kr http://www.nhncorp.com ○ 핵심 컨텐츠에서 찾기 - 기업의 감성적 프로모션 - 기업 메인페이지에 사회공헌 내용 및 소개 동영상을 소개하여 기업 이미지 / 브랜드 인지를 제고 ( 사개밴드 , 삼성의 연구원 등 ) - 네이버라는 서비스 브랜드가 있기 때문에 nhn 기업사이트에는 기본정보만 제공 - 브랜드 사이트를 별도로 제작 및 사회공헌에 내용을 서비스 전체에 적용하여 기업 이미지에 대한 부분을 긍정적으로 유도
  • 14.
    차별화 포인트 잡기 http://www.oklasik.com / ○ 핵심 컨텐츠에서 찾기 - 사용자의 불안요소 / 니즈에서 - 고객이 궁금하고 중요하게 생각하는 컨텐츠를 전략적으로 부각 - 사용자가 서비스 ( 수술 ) 에 대해서 불안감을 가지고 있을 수 있는 것에 대한 니즈를 파악 ➜ 온라인에서 이와 관련된 불안감을 해소시킬 수 있는 컨텐츠 제공 ➜ 직원들의 체험후기 , 타 서비스 / 시설과의 차별화 포인트에 대한 강조 ( 토탈케어 시스템 , 평생보장제도 )
  • 15.
    차별화 포인트 잡기 www.daum.net - 모바일 검색 ○ 핵심 컨텐츠에서 찾기 - 사용자 니즈 / 트랜드에 의한 www.daum.net - 제주 지진 뉴스 검색 - 사용자 로그분석 / 트랜드에서 찾기 - 인기 컨텐츠 / 서비스에 대한 분석을 통해서 컨텐츠 찾기 ( 서비스 개선사항 찾기 ) ➜ 다음 : 전체 서비스 사용 / 미디어변화에 대한 흐름 ( 모바일 검색 ), 중복 검색결과에 대한 사용자 불편사항을 묶음 형태로 서비스 제공 ( 뉴스 클러스트링 )
  • 16.
    차별화 포인트 잡기 http://inside.naver.com/sequence_search ○ 핵심 컨텐츠에서 찾기 - 사용자 니즈 / 트랜드에 의한 - 사용자 로그분석 / 트랜드에서 찾기 ➜ 네이버 : 사용자 클릭 / 시선이동 / 주요 이용 탭에 대한 분석을 검색에 대한 UI 개선
  • 17.
    차별화 포인트 잡기 http://inside.naver.com/sequence_search ○ 핵심 컨텐츠에서 찾기 - 사용자 니즈 / 트랜드에 의한 - 사용자 로그분석 / 트랜드에서 찾기 ➜ 네이트 : 검색어와 관련된 카테고리를 우선적으로 보여줌 , 실시간 검색에 대한 부분을 강조
  • 18.
  • 19.
    포탈 3사의 검색결과 비교 네이버 - 광고 중심의 검색 결과 - 지식인에 대한 서비스 포인트 - 전문자료 부분이 검색에 나와야 할 요소인지에 대한 부분 다음 - 광과 중심 , 네이버와 달리 지역광고에 대한 강조 , 후기 - 추천에 대한 부분이 약함 - 뉴스가 상위에 있는 것이 적합하지 않음 네이트 - 바로가기 링크에 대한 강남맛집 ( 업체 ) 이 특정 사이트로 이동하게 되어 있는 것이 적합하지 않음
  • 20.
    I. 사이트/ 서비스 시안 컨셉 잡기 차별화 포인트 잡기 아이덴티티 표현하기 메인화면 컷 결정하기
  • 21.
    P rocess... 사업기획단계 웹기획 단계 마케팅 기획 단계 사이트 운영기획 단계 BM 설계 및 수익구조에 대한 분석 ROI/ 손익분기점에 대한 목표 설정 분석 : 사용자분석 , 고객니즈 / 요구사항 분석 , 웹사이트 / 서비스 분석 등 초기설계 : 벤치마킹 , IA 설계 , 컨셉설계 , 메인 / 서브시안 기획등 상세설계 : 화면단위 기획 , 서비스 기획 , 요구사항 변경관리 등 구축개발 : 기능설명 및 협의 테스트   : 기능별 단위테스트 , 통합테스트 , 사용자테스트 등 런칭   : 오류테스트 , 사용자테스트 등 안정화   : 모니터링 , 산출물 작업 등 타겟분석에 의한 전략 수립 아이템 선정 이슈화 및 활성화를 위한 단계별 전략 및 마스터 플랜 수립 지속적인 사용자에 대한 분석 및 이슈점 도출 이슈점에 대한 서비스 개편 / 고도화 전략 수립 개편 시점과 부합되는 프로모션 전략 수립 사용자에 대한 로얄티 상승을 위한 프로모션 전략 수립 잠재고객 / 신규고객에 대한 프로모션 전략 수립
  • 22.
    - 기획 : 컨셉 , 슬로건 및 차별화 포인트 - 디자인 : Look & Feel - 개발 : 컨셉에 맞는 기능 구현 아이덴티티를 표현하려면 어떻게 해야 하지 ?
  • 23.
    아이덴티티 표현하기 ○ 기획 : 컨셉 , 슬로건 및 차별화 http://www.dit.co.kr / 사명을 활용하여 경영철학과 사업영역에 대한 부분을 표출
  • 24.
    아이덴티티 표현하기 ○ 기획 : 컨셉 , 슬로건 및 차별화 http://www.dit.co.kr/business/it.asp 각 사업영역의 팀장들의 자필 활용
  • 25.
    아이덴티티 표현하기 http://www.s-class.co.kr/○ Design : Look & Feel 브랜드 네임을 활용한 비주얼 요소
  • 26.
    아이덴티티 표현하기 ○ Design : Look & Feel http://www.daekyo.co.kr/Kr/ 경영철학을 비주얼 이미지로 표현
  • 27.
    아이덴티티 표현하기 ○ Design : Look & Feel http://www.uplus.co.kr/ 새로운 로고를 강조 & 네비게이션으로 활용
  • 28.
    아이덴티티 표현하기 ○ 개발 : 컨셉에 맞는 기능 구현 http://www.cgv.co.kr 빠른 예매 - 원스탑 모든것을 한화면에서 가능
  • 29.
    아이덴티티 표현하기 ○ 개발 : 컨셉에 맞는 기능 구현 http://korean.visitkorea.or.kr / FIT 를 위한 여행 만들기 서비스
  • 30.
    아이덴티티 표현하기 ○ 개발 : 컨셉에 맞는 기능 구현 http://www.twitter.com/yuki6174 일상의 모든 이야기를 쉽고 편하게
  • 31.
    아이덴티티 표현하기 ○ 개발 : 컨셉에 맞는 기능 구현 http://www.facebook.com / 나와 관계 있는 사람을 편하게 찾을 수 있다
  • 32.
    I. 사이트/ 서비스 시안 컨셉 잡기 차별화 포인트 잡기 아이덴티티 표현하기 메인화면 컷 결정하기
  • 33.
    - 모션플래시 비주얼 ( 인트로 ) 을 사용할 것인가 ? - 일반적인 메인 비주얼을 사용할 것인가 ? - 정보 중심의 화면으로 구성할 것인가 ? 메인화면 컷을 결정하려면 어떻게 해야 하지 ?
  • 34.
    모션 비주얼을 활용○ 직접 메인화면으로 이동 - 프로모션 일반 메인화면 기업철학 제품군 사업영역 I II III
  • 35.
    모션 비주얼을 활용정보 중심 포탈형 커뮤니티형 미디어형 I II I II I II III ○ 직접 메인화면으로 이동 - 정보전달
  • 36.
    모션 비주얼을 활용○ 인트로의 활용 인트로 화면 홍보영상 기능 단순 제품 프로모션 / 브랜드 홍보 간략한 비주얼과 기능을 조합 http://k7.kia.co.kr / http://www.visitkorea.or.kr/intro.html
  • 37.
    모션 비주얼을 활용○ 인트로의 활용 - 홍보영상 인트로 화면 홍보영상 기능 음성 / 음향효과 슬로건 / 카피문구 동영상 시나리오
  • 38.
    모션 비주얼을 활용인트로 화면 홍보영상 기능 네비게이션 언어 특수목적 ○ 인트로의 활용 - 기능
  • 39.
    II. 메인/ 서브페이지 기획 메인 / 서브페이지 구성 전략 UI 설계하기 화면설계서 작성하기
  • 40.
    II. 메인/ 서브페이지 기획 메인 / 서브페이지 구성 전략 UI 설계하기 화면설계서 작성하기
  • 41.
  • 42.
    소수 처럼 생각 하고 다수 처럼 이야기 하라 기획에서 빠지지 말아야 할 것
  • 43.
    왜 여기에 왔을까 ? 왜 여기에 와야만 하나 ? 기획에서 빠지지 말아야 할 것
  • 44.
    기획에서 꼭 빠져야할 것 自我陶醉
  • 45.
    - 사용자유형에 대한 분류 - 방문 목적에 대한 분류 - 아이덴티티 요소의 구성 - 재미요소 적용 3 가지를 잊지않고 기획을 하려면 어떻게 해야 하지 ?
  • 46.
    사용자에 대한 분류○ 사용자 분류 / 고려 요소 Quantity Factor ( 정량적 요소 ) : 나이 , 성별 , 지역 , 사용시간 ... Quality Factor ( 정성적 요소 ) : 성격 ( 적극적 , 소극적 등 ), 표현 ... Common/Cultural Factor ( 일반적 / 문화적 요소 ) : 한국사람은 ...
  • 47.
    사용자에 대한 분류○ 사용자 목적에 대한 고려 요소 1 차 서핑 검색 / 뉴스 / 킬링타임 다시보기 공부 구매 참여 상담 2 차 쇼핑몰 포탈서비스 방송국사이트 교육사이트
  • 48.
    아이덴티티와 재미요소 구성○ 파트별 Fun 요소의 가미 목록 ➜ 레이아웃의 변화 Only view ➜ 참여형으로 단순 나열 ➜ 테마형 구성 단순 관리 ➜ 경쟁 / 보상 디자인 서비스 컨텐츠 운영정책
  • 49.
    추가 고려 요소○ 사용자가 페이지에 접근하는 경로 파일 보기➜
  • 50.
    참여 시간 ~♪함께해 보아요 *^^*
  • 51.
    5 분간 논의해보기 ○ 사용자는 - 누구 ? - 왜 방문을 ? - 어떻게 방문할까 ? - 어떤 것을 좋아할까 ? ○ 논의 대상사이트 - 쇼핑몰 : 대형 , 소호 , 특판형 ( 원어데이 ) - 학습사이트 : 온라인 , 온 / 오프라인 , 연령별 - 게임사이트 : 게임의 종류별 , 방문복적별 - 브랜드 사이트 : 제품의 유형별 - 서비스 사이트 : 서비스 목적별
  • 52.
    UI/UX 설계하기○ UI( U ser I nterface) 는 ? - 사전적 의미 : ( 컴퓨터 ) 사용자 인터페이스 (( 사용자가 컴퓨터와 대화하기 위한 기호나 명령 체계 )) - 관계형성 너와 나의 관계를 맺는 것 예 ) 사람과 사람 - 사람이 하는 말 ( 언어 , 표현 ), 거친말 , 부드러운 말 사람과 컴퓨터 - 입력을 키보드로 하면 화면으로 컴퓨터가 보여주는 것 사람과 웹 - 클릭을 하면 서비스가 액션이 일어나는 것 ○ GUI( G raphical U ser I nterface) 는 ? - 사전적 의미 : 사용자가 컴퓨터와 정보를 교환할 때 , 그래픽을 통해 작업할 수 있는 환경을 말한다 . 마우스 등을 이용하여 화면에 있는 메뉴를 선택하여 작업을 할 수 있다 .
  • 53.
    UI/UX 설계하기○ UX( U ser e X perience) 는 ? - 사전적 의미 : 사용자가 어떤 시스템 , 제품 , 서비스를 직 , 간접적으로 이용하면서 느끼고 생각하게 되는 총체적 경험을 말한다 . : 미래형 , 사용자가 경험하기 이전에 기대하는 심리 : 현재형 , 사용자가 실제로 사용한 경험 : 미래형 , 사용자가 서비스를 사용한 후 평가 - 3 가지의 의미를 가지고 있다 . User eXpectation User eXperience User eXcuse
  • 54.
    UI/UX 설계하기○ UI 와 UX 의 차이는 ? 美
  • 55.
    UI/UX 설계하기○ UI 와 UX 의 차이는 ? 美 + 人
  • 56.
    UI/UX 설계하기○ 페이지 구성 - 독립적인 /Unique 한 페이지 예 ) 메인 (TOP) 페이지 , 안내 (Helpdesk) 페이지 , 회원가입 페이지 등 - 표준폼에 맞는 페이지 예 ) 게시판 , 일관된 컨텐츠 페이지 ( 연혁 ), 커뮤니티 , 블로그 등 ○ 작업방식 - 스케치 후 작업 - 표준폼을 활용한 작업
  • 57.
    UI/UX 설계하기○ 컨텐츠 수급 - SI 프로젝트 ◇ 원본자료에 대한 요청 및 시점의 중요성 ◇ 컨텐츠 생산부서의 이슈 : 공공기관과 일반기업의 차이 - 자체서비스에 대한 컨텐츠 제작관점 : 뉴스 , 용어 , 표현방식
  • 58.
    UI/UX 설계하기 - 작성예시 ○ 스케치
  • 59.
    UI/UX 설계하기 - 작성예시 ○ 스케치
  • 60.
    UI/UX 설계하기 - 작성예시 ○ 스케치
  • 61.
    UI/UX 설계하기 - 작성예시 ○ 표준폼 활용 파일 보기➜
  • 62.
    UI/UX 설계하기 - 작성예시 ○ 환경부 작업 파일 보기➜
  • 63.
    UI/UX 설계하기 - 작성예시 ○ DIT 홈페이지 작업 파일 보기➜
  • 64.
  • 65.
  • 66.
  • 67.