Web 디자인시 유의 할 점 정리

이 내용은 유데미 강좌를 보고 정리한 글입니다.

요약

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

  • 이미지는 웹 디자인에서 점점 더 중요 해지고 있습니다. 따라서 훌륭한 이미지를 선택하고 그 위에 텍스트를 넣는 것이 작업의 필수적인 부분입니다.

  • 아이콘은 웹 사이트의 친숙한 음색을 설정하는 좋은 방법이지만 신중하게 사용하십시오.

  • 공백을 적절하게 사용하면 전문적으로 디자인 된 웹 사이트가 만들어 지므로 올바른 방법으로 많이 사용하십시오.

  • 콘텐츠의 시각적 계층 구조를 정의하여 레이아웃을 작성하십시오. 공백은 또한 이것을 위해 중요합니다.

  • 웹 사이트는 사용자와 웹 사이트 소유자가 목표를 달성 할 수 있도록 설계해야합니다. 이것은 사용자 경험입니다.

  • 다른 디자이너의 잘 디자인 된 웹 사이트를 연구하여 영감을 얻는 것이 매우 중요합니다.

웹 디자인시 참고할만한 치트 시트

아름다운 타이포그래피

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

  1. 헤드 라인에 (실제로) 큰 글꼴 크기를 사용하십시오.

  1. 글꼴 크기의 120 ~ 150 % 사이의 줄 간격을 사용하십시오

  1. 한 줄당 45-90 자

  1. 좋은 글꼴 사용

  1. 웹 사이트에 대해 원하는 모양과 느낌을 반영하는 글꼴을 선택하십시오.

  1. 하나의 글꼴 만 사용하십시오.

프로처럼 색상 사용하기

  1. 하나의 기본 색상 만 사용하십시오.

  1. 더 많은 색상을 사용하려면 도구를 사용하십시오.

  2. 3.주의를 끌기 위해 색을 사용하십시오.

  1. 디자인에 검정색을 사용하지 마십시오.

  1. 색상을 현명하게 선택하십시오.

이미지 작업

  1. 텍스트를 이미지 위에 직접 놓습니다.

  1. 이미지를 중첩합니다.

  1. 텍스트를 상자에 넣으십시오.

  1. 이미지를 흐리게 처리합니다.

  1. 바닥이 퇴색한다.

아이콘 작업

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

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

  1. 아이콘은 알아볼 수 있어야합니다.

  1. 아이콘에 레이블을 지정하십시오.

  1. 아이콘이 중심 무대가되어서는 안됩니다.

  1. 가능할 때마다 아이콘 글꼴 사용

간격 및 레이아웃

  1. 요소 사이에 공백 넣기

  1. 요소 그룹 사이에 공백을 넣으십시오.

  1. 웹 사이트 섹션 사이에 공백을 넣으십시오.

  1. 잠재 고객이 가장 먼저 바라는 위치를 정의하십시오.

  1. 귀하의 콘텐츠 메시지에 해당하는 흐름을 수립하십시오

  1. 공백을 사용하여 그 흐름을 만듭니다.


'스터디 > WEB' 카테고리의 다른 글

Sexy Typograping - Day2  (0) 2019.05.19
Css next grid 클론 ( 1 ~ 5 )  (0) 2018.11.17
PostCSS 스터디 정리 ( 2주차 )  (0) 2018.11.12
CSS Next 정리 ( 부산 1주차 HTML + CSS 스터디 )  (0) 2018.11.07
Flex Css 스터디 정리  (0) 2018.11.06

+ Recent posts