❖ 색상 이론
웹사이트에 적합한 색상 팔레트를 만드는 것
- 무드
→ 주요 색상은 실제로 사용자에게 메시지를 전달하는 역할- red : 사랑, 에너지, 강렬함
- yellow : 기쁨, 지성, 관심(밝은 노란색은 주의를 많이 끌게 됨)
- green : 신선함, 성장, 안전
- blue : 안정성, 신뢰, 평온
- purple : 왕족, 부, 여성성
- 색 조합
→ 컬러 휠(wheel) 사용
→ colorhunt에서 디자이너에게 인기 있는 컬러 팔레트를 볼 수 있음Analogous Colors- 바로 옆에 붙어 있는 두 색상으로 유사 색상 팔레트 생성
- 조화로운 디자인
- 네비게이션 바, 웹사이트 본문, 로고 및 배경에 유용
Complementary Colors- 서로 맞은편에 있는 두 색상으로 보색(충돌) 팔레트 생성
- 각각의 색상을 잘 드러내서 돋보이게 하는 역할
- 로고, 아이콘 등 정말 눈에 띄고 싶은 것에 사용
- 텍스트와 텍스트의 배경에 적용하면 눈이 피로해지기 때문에 추천하지 않음
- 이 외에도
단색,삼각형,정사각형등의 조합이 가능
❖ 타이포그래피 선택 방법
글꼴 종류
Serif- 획의 끝부분 양쪽에 작은 발이 달린 형태
- 전통적, 안정적, 진지하고 권위있는 느낌
- Old style, Transitional, Modern, Slab-serif 등의 하위 모음
- 각 서체의 가장 두꺼운 부분과 얇은 부분의 차이가 현대로 올수록 점점 커짐
San-serifs- 획 끝부분에 발이 달리지 않고 완벽한 직각을 이룬 형태
- 더 새롭고 현대적인 느낌
- 스타트업 회사의 웹사이트에서 많이 쓰임
- Humanist, Grotesque 등의 하위 모음
- 비추천하는 글꼴들
Kristen,Comic Sans,Papyrus,Viner,Curlz...
판독성과 가독성에서 고려할 것
- 열린 형태('a'나 'c'의 열린 부분의 넓이)
- 각 글자 사이의 공백
- 모호하지 않은 형태('g'와 '9'가 확실히 구분되어야 함)
- 다양한 비율('O'는 매우 넓고 '0'은 좁아야 확실히 구분됨)
글꼴 결합
- 하나의 디자인에 두 개의 글꼴만 사용하는 것을 추천
(너무 많아지면 어수선하고 비전문적으로 보임) Sililar- 안정감 있는 디자인
- 서로 비슷한 Mood, Time era(시대)의 글꼴끼리 결합
Contrast- 흥미를 유발하는 디자인
- Serif-ness(Serif와 San-serifs의 조합)
- Weight(헤딩과 본문의 굵기를 대조시킴)
❖ UI 디자인
- 계층 구조
→ 상위 계층에서 가장 중요한 정보를 먼저 전달- 색상 : 배경과 대조되는 악센트 색상
- 크기 : 다른 품목보다 큰 크기
- 레이아웃
→ 사용자가 웹사이트에 더 관심을 갖도록 만들기- 최적의 텍스트 라인 길이는 한 줄에 40-60자
- 이미지 삽입
- 서로 다른 크기와 모양 적용
- 정렬
→ 화면의 각 요소를 일관성 있게 배치하기- 정렬 지점의 수를 줄이는 것이 좋음
(각 항목의 시작 부분을 통과하는 선의 수를 최대한 줄이는 것)
- 정렬 지점의 수를 줄이는 것이 좋음
- 공백
→ 텍스트나 요소 주위의 빈 공간을 활용하여 미니멀하고 품격있는 디자인 만들기- 주요 요소 주위에 공간을 많이 추가
- 불필요한 요소는 최대한 줄이기
- 타겟 유저
→ 타겟으로 하는 사용자를 고려한 디자인- 유연성있는 디자인 필요
❖ UX 디자인
UX(User Experience, 사용자 경험)
사용자의 눈에 거슬리지 않으면서도 작업을 쉽고 수월하게 진행할 수 있도록 만드는 디자인
- 간결성: 단순하게 유지
- 일관성: 일관된 디자인과 제품의 기능
- 읽는 패턴: 눈이 웹페이지를 읽는 순서 고려(위→아래&왼쪽→오른쪽 패턴, Z 패턴)
- 플랫폼 호환 : 모바일과 데스크탑 화면을 모두 고려하기
+ 추가
다크패턴 자제 : 사용자가 원치않게 회사나 디자이너에게 유익한 행동을 하게 만드는 패턴
(e.g. 돈을 더 추가해야하는 옵션에 강조색 적용)
🗂️ Day65 프로젝트: 호텔 웹사이트
🔍 유의 사항
- 온라인 그래픽 편집 프로그램 Canva 사용
디자인 만들기→맞춤형 크기→ 1400x800 픽셀- 디자인, 요소, 텍스트를 이용하여 가상의 호텔 웹사이트 디자인
공유→모두 보기→웹사이트→ url 생성 후 게시
- 무료 도메인 신청
- 5개의 디자인까지 가능
- 모바일 반응형이나 네비게이션 바 등의 기능은 사용 불가
