디자인을 전공하지 않더라도 기본 사항을 알고 있다면 웹 사이트의 품질이 변경됩니다! 이 기사에서 우리는 웹 디자인의 세 가지 주요 요소를 구성합니다. 웹 디자인은 색상, 글꼴 및 레이아웃에 대해 쉽게 이해할 수 있습니다.
1. 색상 : 첫인상을 결정합니다
color 컬러 구성 원리
| 요소 | 설명 | | —— | —— | | 메인 컬러 | 브랜드/사이트 대표 색상 (1 ~ 2) | | 하위 검색 | 보조 강조 (2-3) | | 배경/텍스트 | 흰색+짙은 회색 등
free 무료 컬러 도구 권장 사항
📌 밝기/채도 제어는 시각적 안정성을 제공합니다.
2. 글꼴 : 정보 제공의 핵심
우수한 웹 글꼴 선택 기준
가독성 : 모바일 경량에서 쉽게 읽을 수 있습니다 : 속도 일관성을로드합니다
📚 추천 무료 웹 글꼴
| 글꼴 이름 | 기능 | | —— | —— | | Noto Sans Kr | Naver, Google 지원, Hangul Reading Excellence | | pretendard | 개발자와 디자이너 사이의 인기 있고 세련된 감정 | | IBM PLEX SANS KR | 기업 브랜드에 적합한 느낌 “CSS Body {Font-Family : ‘Noto Sans Kr’, Sans-Serif;}” “” ”
3. 레이아웃 (레이아웃) : 내용 구조의 골격
📐 기본 원칙
그리드 시스템 사용 : 일관성을 유지하기위한 12 개의 열 구조 시각적 흐름 설계 : F- 패턴, z- 패터 른 화이트 스페이스 사용 : 마진은 설계입니다! 레이아웃은 내용이 아닌 ‘정보 안내서’역할을합니다.
실제 설계 참조 사이트
| 이름 | 사용법 | | —— | —— | | Behance | 포트폴리오 참조 용 | | dribbble | UI 설계 추세 확인 | | awwwards | 수상 기반 실제 작동 사이트 🖼️Alt 태그 예를 참조하십시오.
초보자를위한 UI 구성 팁
버튼은 명확한 색상 (1 차, 위험 등) 컨텐츠 간격은 다음과 같습니다 일관성 유지 보수 제목 크기 (H1 ~ H3)는 8px 단위의 시각적 우선 순위에 대해 설정됩니다.
마치다
웹 디자인은 “예쁘다” 명확한 정보 제공 및 개선 된 유용성이 핵심입니다. 세 가지 색상, 글꼴 및 레이아웃이 있더라도 사용자 경험이 눈에 띄게 향상되었습니다. 디자인은 기술이 아니라 훈련입니다. 오늘부터 하나씩 적용하십시오. 🔎 다음 게시물 주제 추천 → No. 26 : 모바일 반응 형 웹 페이지 생성 → No. 36 : 10 CSS로 구현 된 버튼 10
참조
https://coolors.co/ https://fonts.google.com/