Web Project 작업3: Design기획 Article 토론 Group Project 토론

Presentation on theme: "Web Project 작업3: Design기획 Article 토론 Group Project 토론"— Presentation transcript:

1 Web Project 작업3: Design기획 Article 토론 Group Project 토론
10/04/2002—Class06 컴퓨터 에이전트 Web Project 작업3: Design기획 Article 토론 Group Project 토론 Fall 2002 대전대학교정보통신공학부

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

3 링크를 걸때는 텍스트와 그래픽을 함께 사용하라 웹디자인의 일관성을 유지하라 웹페이지의 다운로드는 가능한 빠르게
웹사이트 이용현황의 측정수치를 반영하라 웹페이지의 분량은 효율적인 판단기준에 근거해서 정한다. 여백도 웹디자인 요소 Fall 2002 대전대학교정보통신공학부

4 웹디자인의 주요 실수 웹사이트의 호환성을 고려하지 않는다. 최신기술을 사용함에 있어 너무 성급한 경향이 있다.
최신기술의 문제점들 새로운 기술이 보편적인 일반 네티즌에게 아직 검증되지 않은 경우가 많다. 새로운 기술을 구현하기 위해서는 새로운 플러그인 프로그램을 내려 받아서 설치해야 아는 번거로움이 있다. 새로운 기술로 인해 사용자들이 컨텐츠나 정보에 접근하는 시간을 빼앗길 수도 있다. Fall 2002 대전대학교정보통신공학부

5 Scroll Stopper는 사용자의 웹사이트 접근을 방해하는 치명적 요소
Main Page에 지난 정보를 그대로 두는 것은 위험이다. [Back]버튼이 제대로 작동되지 않는 것은 전혀 도움이 안 된다. 새 창을 지나치게 많이 띄우는 것은 오히려 악영향 Fall 2002 대전대학교정보통신공학부

6 네비게이션을 제대로 지원하지 않는 것은 심각한 위험 컨텐츠를 광고처럼 디자인하는 것에는 부작용이 따른다.
과도한 그래픽 이미지 사용으로 컨텐츠가 묻혀 버린다. 사용자의 수준을 개발자 수준으로 생각하면 곤란 프레임 사용에 주의해야 벤치마킹과 모방을 혼동하면 곤란 보편타당한 웹디자인의 약속은 지키는 것이 좋다 Fall 2002 대전대학교정보통신공학부

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

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

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

10 Color Planning 웹에서의 색상의 중요성 신호등의 색상 소방차가 빨간색인 이유는? Coca Cola site!?!?
Fall 2002 대전대학교정보통신공학부

11 색 설계의 기본 원리 다소 보수적이면서 점잖은 듯한 색 설계를 하라 상식적인 수준을 따르는 것이 좋다 보색 사용은 자제
색상 결정순서는 지배 색상에서부터 시작하는 것이 좋다. 배경색과 배경무늬는 심플한 것이 좋다. 원색보다는 파스텔톤의 색상을 사용하는 것이 좋다. 바탕은 흰색, 글자는 검은색이 좋다. Fall 2002 대전대학교정보통신공학부

12 색상 설계는 구조 설계 이후에 하는 것이 좋다. 일관성 있는 색상을 적용해야 한다. Fall 2002 대전대학교정보통신공학부

13 색상 선택에 영향을 주는 요소들 사이트의 성격과 중심이 되는 내용 사이트의 주 타겟층 웹사이트 컨셉 궁극적인 지향 이미지
Fall 2002 대전대학교정보통신공학부

14 색의 상징성: Red 긍정적 이미지: 열정, 힘, 활동성, 따뜻함, 진취, 진보, 정열, 애정, 일출etc.
산타크로스가 붉은 색을 입는 이유 Fall 2002 대전대학교정보통신공학부

15 색의 상징성: Orange 긍정적 이미지: 활발, 다정, 외향적, 사교적, 적극, 건강, 희열, 풍부, 유쾌etc.
부정적 이미지: 색이 엷어지면서 유약하고 무기력해 보일 수 있다. Fall 2002 대전대학교정보통신공학부

16 색의 상징성: Yellow 긍정적 이미지: 밝은 미래, 희망, 행복, 힘을 돋움, 태양의 이미지, 즐거움, 유쾌, 바나나, 금etc. 부정적 이미지: 지나치게 강조하면 유아적이고 자기 중심적 이미지를 가질 수 있다. Fall 2002 대전대학교정보통신공학부

17 색의 상징성: Green 긍정적 이미지: 안정, 안식, 평화, 여름, 중성, 평정, 소박, 조용하고 신선한 자연 이미지etc.
Fall 2002 대전대학교정보통신공학부

18 색의 상징성: Blue 긍정적 이미지: 명상, 희망, 고요, 안정, 편안함, 온건, 진실, 거룩, 시원함, 바다, 하늘, 그리움, 깨끗함etc. 부정적 이미지: 냉정, 차가움, 놀라움, 우울, 슬픔, 추위etc. 대통령 선거와 컬러: 빌클린턴의 네이비블루/힐러리의 금발염색 조지부시의 브라운, 회색, 블루등의 정장 Fall 2002 대전대학교정보통신공학부

19 색의 상징성: Violet 긍정적 이미지: 신성, 숭고, 당당, 독보적 이미지, 고귀, 신비, 예술, 우아, 고가etc.
Fall 2002 대전대학교정보통신공학부

20 색의 상징성: White 긍정적 이미지: 신앙, 순결, 순수, 소박, 는, 정직, 는, 빛, 하늘, 숭고한, 희망, 성스러움, 청결etc. 부정적 이미지: 결벽증, 심약etc. Fall 2002 대전대학교정보통신공학부

21 색의 상징성: Black 긍정적 이미지: 정숙, 패션에서는 품위, 부유, 존엄etc.
Fall 2002 대전대학교정보통신공학부

22 웹용 컬러모드 RGB 모드 컴퓨터 그래픽에 있어서의 기본 컬러모드로 컴퓨터상의 화상처리 방식
RGB Color란 빛의 삼원색인 Red, Green, Blue의 빛을 의미 RGB가 모두 더해지면 희색, 색이 전혀 혼합되어 지지 않으면 검정색 RGB Color Model은 빛의 삼원색을 256단계의 명도 값 가지고 3원색 혼합으로 색상표현 HTML코드는 RGB 색상을 코드로 변환시켜 웹사이트에 올려줌 Ex)#ff88c1, ffgg88 Fall 2002 대전대학교정보통신공학부

23 Web-safe Color Web-safe color란? Blue Red Green
256색상을 기준으로 모든변수에 상관없이 항상 공통적으로 보이는 색상 Web-safe color chart 보는 법 #0000ff ----> 파란색 16진수 코드값에서 cc, ff, 00, 33, 66, 99가 포함되는 색상이 Web-safe Color이다. Blue Red Green Fall 2002 대전대학교정보통신공학부

24 항상 Web-safe Color를 사용해야 하는가? Web-safe color를 사용하는 것이 좋은 경우:
단순한 색상이나 선을 사용하는 그래픽 이미지 HTML code안의 텍스트 컬러, 여러가지 링크, 배경등을 설정할때 Web-safe color를 피하는 것이 좋은 경우: 주로 사진 이미지같은 JPEG format일 경우 Web-safe color선택하기 대부분 프로그램에서 지원 Fall 2002 대전대학교정보통신공학부

25 Article 토론 Reading Material: “최악의 웹 사이트 디자인 10가지” 를 가지고 실제 경험을 바탕으로 웹사이트 디자인의 문제점에 관하여 토론 현재 그룹프로젝트의 연구 웹사이트에는 웹디자인에 있어 어떤 문제점을 안고 있는지 분석 과제 프로젝트 보고서 초고 제출: 10월 11일 수업시작과 함께 다음주 Reading Material: “포털 사이트 생존경쟁력 분석” 프린트하여 읽고 오기 [class notes안에 있음] Fall 2002 대전대학교정보통신공학부

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