상세 컨텐츠

본문 제목

웹 디자인 원칙

HTML-CSS

by nata_developer 2020. 8. 30. 09:36

본문

1.웹 디자인을 할 때 필요한 것들

 

1.대부분의 콘텐츠는 텍스트이므로 아름다운 타이포그래피는 멋진 웹 사이트의 핵심 요소이다.

 

2.웹 디자인에서 이미지가 점점 더 중요 해지고 있으므로 멋진 이미지를 선택하고

 

텍스트를 추가하는 것이 작업의 필수적인 부분이다.

 

3.아이콘은 웹 사이트에 친숙한 분위기를 설정하는 좋은 방법이기도하지만 신중하게 사용해야 한다.

 

4.공백을 적절히 사용하면 웹 사이트가 전문적으로 디자인 된 것처럼 보이게되므로

 

많이 사용하지만 올바른 방식으로 사용해야 한다.

 

5.콘텐츠의 시각적 계층을 정의하여 레이아웃을 만든다. 공백도이를 위해 중요하다.

 

6.웹 사이트는 사용자와 웹 사이트 소유자가 목표를 달성 할 수 있도록 설계되어야한다.

 이것이 바로 사용자 경험이다.

 

7.다른 디자이너로부터 잘 디자인 된 웹 사이트를 연구하여 영감을 얻는 것이 매우 중요하다.

 

2. 구체적으로 어떻게?

아름다운 타이포그래피

1. 본문 텍스트에 15 ~ 25 픽셀 사이의 글꼴 크기를 사용한다.

2. 헤드 라인에 (정말) 큰 글꼴 크기 사용

3. 글꼴 크기의 120 ~ 150 % 사이의 줄 간격을 사용한다.

4. 한 줄에 45 ~ 90 자

5. 좋은 글꼴 사용

6. 웹 사이트에 원하는 모양과 느낌을 반영하는 글꼴을 선택

7. 하나의 글꼴 만 사용한다.

 

전문가처럼 색상 사용

1. 기본 색상은 하나만 사용해야 한다.

2. 더 많은 색상을 사용하려면 도구를 사용해야 한다.

3. 관심을 끌기 위해 색상을 사용해야 한다.

4. 디자인에 검정색을 사용해서는 안된다.

5. 현명하게 색상 선택을 해야 한다.

 

이미지 작업

1. 이미지에 직접 텍스트를 입력한다.

2. 이미지 오버레이

3. 상자에 텍스트 입력

4. 이미지를 흐리게

5. floor fade

 

아이콘 작업

1. 아이콘을 사용하여 기능 / 단계 나열

2. 작업 및 링크에 아이콘 사용

3. 아이콘을 알아볼 수 있어야한다.

4. 아이콘에 레이블 지정

5. 아이콘이 중심이되어서는 안된다.

6. 가능하면 아이콘 글꼴을 사용해야 한다.

 

간격 및 레이아웃

1. 요소 사이에 공백을 넣어야 한다.

2. 요소 그룹 사이에 공백을 넣어야 한다.

3. 웹 사이트 섹션 사이에 공백을 넣어야 한다..

4. 청중이 먼저 보길 원하는 위치를 정의해야 한다.

5. 콘텐츠의 메시지에 해당하는 흐름을 설정한다.

6. 공백을 사용하여 흐름을 구축해야 한다.

'HTML-CSS' 카테고리의 다른 글

3편 Omnifood section-meals  (0) 2020.08.30
2편 Omnifood section-features  (0) 2020.08.30
1편 Omnifood header  (0) 2020.08.30
웹 디자인에서 컬러의 의미  (0) 2020.08.30
HTML CSS  (0) 2020.08.29

관련글 더보기