디자이너에게 바란다.

diary 2010. 4. 7. 16:41
  • 디자인 포토샵파일, 메뉴구성 엑셀파일이 확정된 최종본인지 확인하고 넘겨주세요.
  • 온오프, 로그인 후 등 상황에 따라 달라지는 이미지는 +on +off 별로 레이어셑 을 만들어 주십시오. (레이어셑 명명 방법은 "+이름" 을 추천)
  • 상단메뉴, 좌메뉴의 하위메뉴도 상황별로 디자인 추가 변경 있다면 별도 레이어셑으로 만들어주세요.
  • 레이어셑 만들 때 컨텐츠 구역별로 잘 묶어서 주시고, 가급적 레이어 이름을 남겨주세요..
  • 필히, 전체 배경 디자인은 별도 레이어셑(+bg)으로 구분
    • 예를 들어, head 부분의 텍스트와 본문의 텍스트를 하나의 레이어셑에 묶어 두는 경우 곤란합니다.
      (테이블 레이아웃은 디자인 위주로 자르지만, CSS 레이아웃은 컨텐츠별로 자르므로 레이어셑 숨김, 보임을 자주합니다.)
    • 블릿은 bu 혹은 ㅇ, 라인은 line 혹은 ---- 등등 간단하게라도 붙이는 습관을 가져주세요.
      (시간 많이 안걸립니다. - 다시 수정할 때, UI코딩시, 유지보수시 편리)
  • 연관된 레이어는 바로 인접한곳에 위치하도록 해주세요.
    • 나쁜예 : 텍스트를 꾸미는 불릿 레이어가 인접해있지 않고 사이에 다른 레이어들이 어지럽게 섞여있는 경우.
  • 이미지 메뉴는 크기 또는 간격이 일정하게 제작해주세요.
  • 온오프시 이미지 크기가 동일하도록 만들어주세요. (가로형은 너비, 세로형은 높이가 필히 같아야 함)
  • 그리드 계획에 맞도록 신경써주십시오. (가이드라인 사용시 1px씩 어긋나지 않게 정확하게 표시해주세요.)
    • ※주의: 포토샵 작업시 확대 배율이 100% 의 배수가 아닐 경우 가이드가 1px 중간에 만들어지는 오류.
  • 여러 페이지에 걸쳐서 같은 형태의 디자인일 경우 psd 파일 1개로 처리해주세요. (예)
    • 서브 페이지 UI(head, sidebar, foot 영역), 메인 페이지 디자인은 각각 psd 파일 1개로 해결할 수 있도록 해주세요.
    • 주메뉴 영역 등 메인과 서브가 공통적으로 사용하는 디자인은 서브 페이지 디자인에 넣어주세요.
  • 플래시 링크와 비플래시 링크가 가급적 겹치지 않도록 작업해주세요. (나쁜예)
  • 서브 비쥬얼 위에 메뉴를 만들지 마세요. (나쁜예)
  • 디자인시 색상 대비에 좀 더 신경을 써주세요.
    • 웹 접근성 작업 참고 에서 "1-3-2. 전경색과 배경색은 충분한 대비를 가지고 있어야 한다." 부분 참고
  • PSD 파일이 너무 커서 컴퓨터가 버벅거립니다.(10M이하를 원하는데, 20M가 넘는 경우도 많군요.)
    • 페이지 레아아웃 백그라운드에 그라데이션, 그림자가 없으면 안될까요?
      코딩시 쓸데 없는 코드들을 많이 생성시키고, 페이지 전체 렌더링 속도가 엄청 무거워집니다.
  • 이미지를 투명 png-24 파일로 저장해야 하는 경우가 없도록 디자인해주십시오. (나쁜예)
    (IE6에서 비표준코드를 생성해야함).. 단, IE6 점유율이 바닥으로 떨어질 때 사용가능.
  • 좌메뉴 등 이미지가 아닌 텍스트 정보는 포토샵에서 자간을 100의 배수(css에서 letter-spacing 1px의 배수)로만 지정해주세요.
  • 포토샵에서 Character 패널의 kerning 을 0 또는 Metrics 로 설정하세요. (Optical 은 사용하지 마세요.)
  • 메뉴 영역, 제목 영역 등 모든 콘텐츠는 예상할 수 있는 모든 경우를(가장 짧은 것과 가장 긴 것을) 고려하여 디자인해주세요.
  • 여러 사이즈(원본, 섬네일 등)로 서비스 되는(DB에 저장되는) 이미지는 가로 세로 비율을 맞춰주세요.
    (모니터 화면, 디카의 일반적인 사이즈인 4:3 비율을 권장합니다.)
  • 여러 페이지(서브와 메인 등)에서 같은 콘텐츠가 다른 위치에서 보여질 때 특별한 경우 아니면 디자인을 맞춰주세요. 
  •  외국어 디자인시 텍스트 콘텐츠는 해당 언어 OS 범용 폰트로 만들어주세요.
    • 국문: 돋움, 굴림
    • 영문: Tahoma, Arial, Verdana, ..
    • 일문: MS UI Gothic, MS Gothic
    • 중문: Simsun, SimHei, MS Song

>> [출처] 디자이너에게 바란다|작성자 뭉가

'diary' 카테고리의 다른 글

이미지 낙관 만들어 주는 곳  (0) 2011.05.18
[퍼옴] 차세대 웹브라우저 전쟁  (0) 2011.04.18
css 코딩 정석??  (0) 2011.04.07
무료 다운로드 사이트  (0) 2011.03.25
에디터가 불안정 한거 같은데....  (0) 2010.04.07
: