design | 웹스타일 가이드

1. 웹스타일 가이드 제작 목적

: 가장 중요한 부분. 타겟층을 분석하여 타겟층의 마음을 사로잡는 전략을 구사한다.

과정 : 클라이언트에게 제시하여 컨셉부터 메인 시안이 나오는 때까지 프로세스 진행.

메인 디자이너가 서브 한장을 친다.

상호 피드백은 PM(Project Manager)에게.

즉, 팀장이 스타일 가이드를 만듦

가이드/스토리보드/화면설계서 등 10가지 종류의 서류를 

상호 호환관계를 맺는다

컬러 /폰트 / 폴더 구성 등 가이드 작업

* 실무이야기 : 사수가 천재지변 및 불의의 사건사고로 가이드라인을 안 잡아주고 나갈 때, 당황하기 마련인데,

   잘 응용한 선례가 있으므로 참고할 것.

   유틸리티=공통보조메뉴 등 용어 정리

   플래시 프로그램 영역이 적은 보안관련  은행, 증권사이트, 게임 등을 빼고는 이 수준으로 목차가 완료이다.

예를 들면, 사이트 구축에 드는 비용이 2천만원인 사이트와 2백만원인 사이트가 있다. 

결과물이 비용에 비례하지 않으나 기획력 좋은 디자이너가 되어야 유리하다.

목적 & 컨셉을 읽고 포인트 단어에 형광펜으로 기록할 것

화면설계서 30~100장까지 정리한다

기존사이트를 잘 읽는다.

2. 웹스타일 가이드 적용 원칙

3. 브랜드 아이덴티티 규명

   전략이 있는 헤드라인을 노출하라!

4. 디자인 관련 스타일 가이드

   1) 레이아웃 : 로고위치 파악 및 페이지 일관성을 위해서 플래쉬, 스크립트 넣는 방법 등 파악

   2) 가이드 시스템

   3) 내비게이션 시스템

   4) 메인 비주얼 : 기준 모니터 해상도를 고려하여 컨텐츠 사이즈를 알고 있어야 함.

       비주얼 분위기 느낌 등 남이 한 디자인을 그대로 하는 것이 오히려 어려움.

      ex) 신입에게 배너 및 공지사항 디자인을 많이 시킴.

   5) 폰트시스템 : 서체 뿐 아니라 속성까지 형광펜으로 체크

       메인 디자인 폴더 복사해서 쓰고 맞춰주기

   6) 컬러 시스템 : 16진 주조색 및 보조색 등 배색을 서브에서 정리

   7) HTML코딩 가이드 : 디자이너와 개발자의 중간영역

       영역별로 폴더를 구성

       기본코딩 원칙                                

       플래시/레이어 적용시 원칙

       폴더 정리 / 오브젝트는 배경이 없는 게 좋다.

       CSS부분은 안 치지만, 프로그램 사이즈 맞춰서 네모박스를 친다.

   8) 멀티미디어 

       플래시 및 애니메이션 제작 및 적용

       PNG, PSD로 바로 작업함

5. 유지보수 관리 규칙 (디자인 업무측면)

    1) 폴더관리 규칙 : 폴더구성

       images폴더 : 메인+서브(sub_01/introduce)

멀티미디어에 많이 들어감

플래쉬 / 미디어폴더 /.swf 동영상폴더(동적효과)

css폴더: PNG파일은 인터넷익스플로어에서는 투명부분이 회색으로 보임

자바스크립트를 써야함

j-query

Next버튼 초수 7초

자바스크립트 수정시 어딜 고치는지 알면 편하다!!

프로그래머에게 의뢰하면 비용이 드므로 간단한 사항은 문의할 것!

서버셋팅 - 게이트웨이 

디자이너와 관련된 사항.

admn, community 게시판, 회원가입과 관련된 폴더

프린트에 나온 폴더구성은 디폴트로 백업폴더, 작업지시사항 폴더 해서 1배정도 더 있다고 한다.

  2) 파일관리 규칙 : 백업파일

작업지시서를 수정할 때마다 기록한다.

업무일지에 답변이 달림!

운영/관리 규칙

웹에이전시 입사후 3개월 정도는 유지보수관리를 하여 디자인 업무를 겸한다.

6. 스타일 가이드 용어 정의

    : 클라이언트와 신입을 위한 가이드 라인