웹디자인 할 때 고려해야 할 사항들

웹디자인의 주요원칙12
 웹디자인은 주연이 아닌 조연
 웹디자인은 네비게이션을 위한 설계
 텍스트를 읽을 때 그래픽이 방해되지 않아야
 한 페이지에서 너무 많은 것을 보여주려는 욕심은 버려야 
 컬러를 사용할 때는 객관화된 근거를 가져야
 타이포그라피를 사용할 때는 디폴트 폰트를 활용하라

 링크를 걸때는 텍스트와 그래픽을 함께 사용하라
 웹디자인의 일관성을 유지하라
 웹페이지의 다운로드는 가능한 빠르게
 웹사이트 이용현황의 측정수치를 반영하라
 웹페이지의 분량은 효율적인 판단기준에 근거해서 정한다.
 여백도 웹디자인 요소 
웹디자인의 주요 실수
 웹사이트의 호환성을 고려하지 않는다.
 최신기술을 사용함에 있어 너무 성급한 경향이 있다.
 최신기술의 문제점들
• 새로운 기술이 보편적인 일반 네티즌에게 아직 검증되지 않은 경우가 많다.
• 새로운 기술을 구현하기 위해서는 새로운 플러그인 프로그램을 내려 받아서 설치해야 아는 번거로움이 있다.
• 새로운 기술로 인해 사용자들이 컨텐츠나 정보에 접근하는 시간을 빼앗길 수도 있다.

 Scroll Stopper는 사용자의 웹사이트 접근을 방해하는 치명적 요소

 Main Page에 지난 정보를 그대로 두는 것은 위험이다.
 [Back]버튼이 제대로 작동되지 않는 것은 전혀 도움이 안 된다.
 새 창을 지나치게 많이 띄우는 것은 오히려 악영향

 네비게이션을 제대로 지원하지 않는 것은 심각한 위험
 컨텐츠를 광고처럼 디자인하는 것에는 부작용이 따른다.

 과도한 그래픽 이미지 사용으로 컨텐츠가 묻혀 버린다.
 사용자의 수준을  개발자 수준으로 생각하면 곤란 

 프레임 사용에 주의해야
 벤치마킹과 모방을 혼동하면 곤란
 보편타당한 웹디자인의 약속은 지키는 것이 좋다



사용성을 높이는 웹디자인 요소
 웹사이트의 로고나 이름, 회사명 등은 모든 페이지에 명기
 로고나 웹사이트 이름, 회사명 등은 웹페이지 상단(우측이나 좌측)에 배치하고 로고에는 홈페이지메인 페이지로 연결되는 링크를 걸어둔다.
 검색서비스는 기술적 요소가 아니라 디자인 요소로 접근해야


 웹페이지가 담고 있는 정보를 한눈에 직관적으로 알아볼 수 있도록 이미지 요소와 헤드라인 카피를 효율적으로 활용한다. 
 타이포그라피에서 사용되는 폰트는 가급적 윈도우 브라우저에 디폴트로 설정되어 있는 폰트를 사용한다.
 제한된 한 페이지 안에서 하나의 제품이나 주제에 관한 모든 내용을 담으려는 욕심으로 과도하게 정보를 제공해서는 안 된다.

 사진은 저해상도를 기본으로 하고 사용자 선택에 따라 고해상도의 정밀 사진으로 링크한다.
 링크에 대한 설명은 링크 타이틀을 활용하여 텍스트로 제공한다.
 보편 타당한 웹 디자인 형식을 받아들이는 것이 사용성 확보에  도움이 된다.
 Intro페이지를 사용하지 않는 것이 사용성에는 도움이 된다.
Color Planning
  웹에서의 색상의 중요성




 신호등의 색상

 소방차가 빨간색인 이유는?

 Coca Cola site!?!?
색 설계의 기본 원리
 다소 보수적이면서 점잖은 듯한 색 설계를 하라
 상식적인 수준을 따르는 것이 좋다

 보색 사용은 자제
 색상 결정순서는 지배 색상에서부터 시작하는 것이 좋다.
 배경색과 배경무늬는 심플한 것이 좋다.

 원색보다는 파스텔톤의 색상을 사용하는 것이 좋다.
 바탕은 흰색, 글자는 검은색이 좋다.

 색상 설계는 구조 설계 이후에 하는 것이 좋다.
 일관성 있는 색상을 적용해야 한다.

색상 선택에 영향을 주는 요소들
 사이트의 성격과 중심이 되는 내용

 사이트의 주 타겟층

 웹사이트 컨셉

 궁극적인 지향 이미지
색의 상징성: Red
 긍정적 이미지: 열정, 힘, 활동성, 따뜻함, 진취, 진보, 정열, 애정, 일출etc.

 부정적 이미지: 위험, 포악, 공격성, 분노, 맹렬, 피, 분노, 혁명etc.






 산타크로스가 붉은 색을 입는 이유

색의 상징성: Orange
 긍정적 이미지: 활발, 다정, 외향적, 사교적, 적극, 건강, 희열, 풍부, 유쾌etc.

 부정적 이미지: 색이 엷어지면서 유약하고 무기력해 보일 수 있다.

색의 상징성: Yellow
 긍정적 이미지: 밝은 미래, 희망, 행복, 힘을 돋움, 태양의 이미지, 즐거움, 유쾌, 바나나, 금etc.

 부정적 이미지: 지나치게 강조하면 유아적이고 자기 중심적 이미지를 가질 수 있다.

색의 상징성: Green
 긍정적 이미지: 안정, 안식, 평화, 여름, 중성, 평정, 소박, 조용하고 신선한 자연 이미지etc.

 부정적 이미지: 무료, 단조로움, 단순하고 질박함etc.

색의 상징성: Blue
 긍정적 이미지: 명상, 희망, 고요, 안정, 편안함, 온건, 진실, 거룩, 시원함, 바다, 하늘, 그리움, 깨끗함etc.

 부정적 이미지: 냉정, 차가움, 놀라움, 우울, 슬픔, 추위etc.



 대통령 선거와 컬러: 
• 빌클린턴의 네이비블루/힐러리의 금발염색
• 조지부시의 브라운, 회색, 블루등의 정장

색의 상징성: Violet
 긍정적 이미지: 신성, 숭고, 당당, 독보적 이미지, 고귀, 신비, 예술, 우아, 고가etc.

 부정적 이미지: 경솔, 외로움, 슬픔, 거만, 불안, 우울, 최면적 분위기etc.

색의 상징성: White
 긍정적 이미지:  신앙, 순결, 순수, 소박, 는, 정직, 는, 빛, 하늘, 숭고한, 희망, 성스러움, 청결etc.

 부정적 이미지: 결벽증, 심약etc.

색의 상징성: Black
 긍정적 이미지: 정숙, 패션에서는 품위, 부유, 존엄etc.

 부정적 이미지: 불안, 밤, 허무 절망, 정지 침묵, 부정, 비애, 공포, 보수적, 슬픔, 황량, 죄악etc.

웹용 컬러모드
 RGB 모드
 컴퓨터 그래픽에 있어서의 기본 컬러모드로 컴퓨터상의 화상처리 방식
 RGB Color란 빛의 삼원색인 Red, Green, Blue의 빛을 의미
 RGB가 모두 더해지면 희색, 색이 전혀 혼합되어 지지 않으면 검정색
 RGB Color Model은 빛의 삼원색을 256단계의 명도 값 가지고 3원색 혼합으로 색상표현
 HTML코드는 RGB 색상을 코드로 변환시켜 웹사이트에 올려줌
• Ex)#ff88c1, ffgg88
Web-safe Color
 Web-safe color란? 
 256색상을 기준으로 모든변수에 상관없이 항상 공통적으로 보이는 색상
 Web-safe color chart 보는 법
• #0000ff ----> 파란색




• 16진수 코드값에서 cc, ff, 00, 33, 66, 99가 포함되는 색상이 Web-safe Color이다.

 항상 Web-safe Color를 사용해야 하는가?

 Web-safe color를 사용하는 것이 좋은 경우:
 단순한 색상이나 선을 사용하는 그래픽 이미지
 HTML code안의 텍스트 컬러, 여러가지 링크, 배경등을 설정할때
 Web-safe color를 피하는 것이 좋은 경우:
 주로 사진 이미지같은 JPEG format일 경우
 Web-safe color선택하기
 대부분 프로그램에서 지원
Article 토론
 Reading Material: “최악의 웹 사이트 디자인 10가지” 를 가지고 실제 경험을 바탕으로 웹사이트 디자인의 문제점에 관하여 토론
 현재 그룹프로젝트의 연구 웹사이트에는 웹디자인에 있어 어떤 문제점을 안고 있는지 분석
 과제
 프로젝트 보고서 초고 제출: 10월 11일 수업시작과 함께
 다음주 Reading Material: “포털 사이트 생존경쟁력 분석” 프린트하여 읽고 오기 [class notes안에 있음]

Group Project 토론:
프로젝트 1차Draft (초고)
 프로젝트 1차Draft (초고) 내용: 
 웹사이트 분석목적
 분석내용:
• 분석대상 웹사이트 제작 근본 목적과 목표 분석
• 분석대상 웹사이트 Target 분석
• 분석대상 웹사이트 Contents 분석
• 분석대상 웹사이트 Navigation 분석
• 분석대상 웹사이트 Program 분석
• 분석대상 웹사이트 Design 분석
 분량은 3-5페이지 내외
 주의사항:
*규격-A4용지, 12font, single space
*첨가되어지는 자료(참고문헌, 도표etc.)들은 제외되어진 페이지수.