Transcript 웹 디자인 - 익산성심직업전문학교

웹 디자인
제 1 장 디자인 기초
– 디자인의 의미, 개념, 배경
– 디자인의 분류 및 특징
성심정보직업전문학교
1
디자인의 의미와 개념






의미 : 의장, 도안, 계획, 설계
유래 : 데시그나레=>데생, 디세뇨
(목적으로 한다/계획하다/지시하다)
1950년대 : 도안, 의장
1960년대 : 산업미술, 응용미술, 디자인이라는 용어 사용
1970년대 : 시각디자인,환경디자인,공업디자인,패션디자인,공예
1980년대 : 디자인 매니지먼트, 디자인 비즈니스라는 용어 사용
디자인의 개념
디자인
(design)
=
조형에 대한 계획
(plan)
+
목적에 부합하는 설계
(make or build)
디자인의 정의
① 수립한 계획을 목적에 맞게 설계하고 발전시켜 나가는 것. 또는 과정
② 미적인 것과 기능적인 것을 통합하여 가시적으로 표현하는 것
성심정보직업전문학교
2
디자인의 의미와 개념

디자인 4대 조건 : 합목적성, 경제성, 독창성, 심미성 + 질서성(5대조건)
(좋은 디자인=굿디자인)

굿 디자인 마크 : GD 마크(한국디자인진흥원 http://www.designdb.com)

디자인의 발상 : 발의확인 조사 분석 종합 평가 개발 전달
성심정보직업전문학교
3
디자인의 의미와 개념
근대 디자인 발생과정
사건
미술공예운동
아르누보
독일공작연맹
큐비즘
구성주의
데 스틸
바우하우스
특징
관련운동
작가
아르누보 운동
윌리엄 모리스
공예 개량 운동
산업화에 저항
신 장식미술운동
식물,추상형식,화려한 색채
기능주의 운동
제품의 질적 향상과 규격화
독일,프랑스,이탈리아
입체주의
구성주의
공간의 조형중시
공업재료이용
기하학적 기계적 형태
신조형주의
기하학적 단순화된 평면도형
예술창작+공학기술
현대 디자인 이정표 정립
모더니즘
현대적 실험적 예술
획일성, 파괴성, 비인간성
아르데코
반복되는 패턴/기하학적 문양
모더니즘
빅토르오르타
반 데 벨데
헤르만 무테지우스
피터 베랜스
조르쥬브라크
파블로 피카소
큐비즘의 영향
포스트모더니즘 근원
블라디미르 타블린
엘 리시츠키
바우하우스 운동에 영향
테오 반 도스브르크
게리트 리트벨트
데 스틸운동 영향 받음
독일동작연맹 이념 개승
입체주의,초현실주의
상징주의,다다이즘
전이주의와 관련된 운동 촉발
반아르누보/과도기적 모더니즘
성심정보직업전문학교
월터그로피우스
J.E. 룰만
장 퓨이포르카
4
디자인의 의미와 개념
현대 디자인의 역사
사건
특징
관련운동
작가
초현실주의
무의식의 발현
쉬르레 알리즘
디다이즘 영향 받음
에른스트/호앙미로
살바도르 달리
르네 마그리트
추상표현주의
지적인 질서/철학적 성찰
시하학적 추상/형태적 추상
큐비즘과 초현실주의의 영향
팝아트, 신표현주의 영향
잭슨폴락/웰렘드쿠닝
포스트 모더니즘
사용과 이해가 용이한 디자인
감석정 측면
팝 아트/미니멀 아트
패러디 작품
마르셀 뒤샹
요셉 보이스
팝 아트
같은 대상 반복 사용 기법
대중 문화 소재와 정보 활용
네오 다다이즘(네오 다다)
리처드 해밀튼
옵 아트
팝 아트 상업성 반대
기하학적이고 다이나믹한효과
팝 아트 반발
빅토르 발자렐리
추상표현주의/ 팝아트 반발
도날드 저드
댄 플래빈
로버트 모리스
솔 스윗
미니멀 아트
ABC 아트/자기표현의 최소화
성심정보직업전문학교
5
디자인의 분류 및 특징
표현기법
2차원 평면 디자인, 3차원 입체 디자인, 4차원 매체 디자인
적용매체
시각디자인, 공업디자인, 환경디자인, 패션디자인(기타디자인)
산업디자인
시각 디자인, 공업(제품) 디자인, 환경 디자인
 광고와
시각디자인
공업디자인
환경디자인

:
기타
(패션디자인)
선전 디자인, 편집디자인, 아이덴티티, 타이포그래피, 레터링디자인,
일러스트레이션, 웹디자인, POP, 포장디자인,TV CF, 영상 디자인, 애니메이
션, 가상현실
 4대매체 : 포스터 디자인, 신문광고디자인, 잡지광고디자인, TV광고디자인
2차원 공업디자인 : 텍스타일디자인, 벽지 디자인, 인테리어패브릭 디자인
 3차원 제품디자인 : 용기,가구,액세서리,전자,문구,운송수단디자인

도시의 환경과 관련하여 경관과 조경 등을 디자인하는 분야
 인테리어 디자인, 디스플레이 디자인, 스트리트 퍼니처 디자인, 무대디자인

 패션디자인,
공예
 현대공예 : 미술공예운동바우 하우스 운동기계생산현대적공예이론
 공예 : 목공예, 금속공예, 유리공예, 도기공예, 섬유공예
성심정보직업전문학교
6
시각디자인
광고와
선전 디자인
상업적, 구매촉진 효과
티저 광고 : 소비자의 호기심, 기대감 유발
신문 광고 : 신뢰성과 설득력, 안정적, 광고 대상 선택 불가능
편집디자인
인쇄물 편집
문자, 일러스트, 사진을 페이지에 배치하는 적업
아이덴티티
기업 이미지 통합전략(CI, CIP)
CI의 3대 요소 : 기업의 방향(BI), 기업의 이념(MI), 상징을 이용한 시각적
표현(VI)
베이직시스템 : 이미지 통합의 기초=>심벌마크,로고타입,엠블런과 케릭
터, 전용색채
어플리케이션 시스템 : 베이직시스템을 여러 가지 매체에 적용=>유니폼,
작업복, 편지봉투, 명함, 문서 등
타이포그래피
문자와 활자 활용 디자인, 기계적인 방법사용
레터링디자인
문자의 형태, 크기, 배치, 색채, 등을 고안하여 문자를 조형
손으로 제작한 형태의 문자 레이아웃과 서체 자체를 개발
일러스트레이션
웹 디자인
카툰, 캐릭터, 캐리커처
홈 페이지를 설계하고 디자인하는 작업
성심정보직업전문학교
7
시각디자인
POP 디자인
판매대 주변 광고(구매 시점 광고)
포장디자인
포장의 디자인
심벌마크, 그림, 글자 삽입=>포토샵, 일러스트, 쿼크익스프레스
TV, CF, 영상 디
자인, 애니메이
션, 가상현실
다큐멘터리, 애니메이션, 뮤직비디오
모션 그래픽 : 움직임을 가진 영상의 디자인
성심정보직업전문학교
8
웹 디자인
제 2 장 디자인 요소와 원리
– 디자인 요소
– 디자인의 원리
– 형태의 분류 및 특징
성심정보직업전문학교
9
디자인의 요소
개념적 요소, 시각적인 요소, 상관 요소, 실제 요소

존재하지 않지만 존재한다고 지각되는 요소
점<선<면<입체
하나의 시각적으로 표현되는 3차원의 개념

형태의 최소단위

개념 요소
점

점들의 모임, 움직임의 성격, 속도감, 강약, 방향을
가질 수 있다.
 직선(수평선,수직선,사선), 곡선, 가는 선, 굵은 선,
유기적인 선, 무기적인 선
 수 많은 선들의 모임
 생성방법 : 현실적인 면, 이념적인 면
 외각모양 : 평면, 곡면
 면이 이동한 자취, 면의 집합
구, 원기둥, 육면체

선
면
입체
성심정보직업전문학교
10
디자인의 요소
시각 요소

형과 형태, 색채, 질감
형과 형태

형(2차원), 형태(3차원)
색채

3속성 : 색상, 명도, 채도
질감

물체의 표면적인 느낌
상관 요소

실제 요소

디자인 요소들이 결합되었을 경우 나타나게 되는 연
관된 속성=>위치와 방향, 공간감, 중량감
특정한 목적을 이루기 위해 필요한 요소로 형태
성심정보직업전문학교
11
디자인의 원리
균형

대칭 : 선대칭, 방사대칭, 이동대칭, 확대대칭
비대칭 : 자유롭고 개성적이고 활동감
전체와 부분을 연관시켜서 상대적으로 설명하는 것
요소들의 분포, 면적, 길이 등의 대비 관계
황금 비례 : 1 : 1.6184
규칙적인 특징을 반복하거나 교차시키는 움직임
반복과 교차, 점이(점층), 방사

방향, 각도 등을 강조하거나 과장하여 움직임을 표현하는 것

통일 : 하나의 규칙으로 단일화 시키는 것
변화 : 통일선에 자극을 주며, 흥미를 부여



비례


율동
동세
통일과 변화
강조와 대조
조화



강조 : 단조로움을 피하기 위해 일부 요소를 다르게 표현
대조 : 서로 다른 영역이 대립되는 것

디자인 요소들이 상호관계를 가지고 균형감을 잃지 않은 상

태
성심정보직업전문학교
12
형태의 분류 및 특징
1.형태의 분류 및 특징
1) 이념적 형태:실제로 지각할 수 없지만 느껴지는 형태, 점/선/면
/입체 등의 추상적인 형태
2) 현실적 형태:실제적으로 지각되는 구상적 형태, 자연적형태/인
위적형태
2.형태의 심리
1) 심리적인 원리에 의해 지각된다.
2) 게슈탈트의 시각에 관한 법칙(군화의 법칙) : 막스 베르트하이
머,근접의 원리, 유사의 원리, 연속의 원리, 폐쇄의 원리, 대칭
의 원리
3) 시지각의 항상성 : 크기, 형태, 밝기, 색상 등이 바뀌어도 원래
대로 보이는 것
4) 착시 : 사물을 원래와 다르게 지각하는 시각적인 착오
성심정보직업전문학교
13