웹디자인#4
LeeMir, 16 March 2021
3강 - 웹 디자인 기초
웹 디자인에 적용되는 원리
- 가시성(Visibility)
- 배경과 분리된 가시 대상의 존재나 컬러의 차이를 잘 볼 수 있는 정도 또는 상태
- 웹 페이지에서 표현하고자 하는 내용이 디자인에도 잘 드러나도록 간단한 그래픽이나 아이콘을 활용
- 한눈에 어떤 내용이 담겨져 있는지 알 수 있도록 해야함
- 그룹핑(Grouping)
- 공통 기능을 가진 것들을 묶어 일관성을 유지하는 기법
- 그룹핑의 3가지 기법
- 공간을 이용한 그룹핑
- 게슈탈트 심리학
- 근접성, 유사성, 연속성, 간결성, 폐쇄성, 전경과 배경
- 관련된 정보끼리 근접하게 만들고, 그룹과 그룹 사이에 간격을 둠
- 게슈탈트 심리학
- 외곽선을 이용한 그룹핑
- 모여 있는 정보 주변에 비슷한 내용 끼리 한 덩어리로 보이게 함
- 컬러를 이용한 그룹핑
- 연관된 내용에 동일한 컬러를 사용
- 공간을 이용한 그룹핑
- 강조성(Emphasis)
- 불필요한 요소를 과감히 없애 중요한 정보를 다른 정보와 차별화 시키는 작업
- 강조성은 가장 중요한 요소를 돋보이게 할 수 있고, 사용자는 중요한 정보를 더 쉽게 찾을 수 있움
- 화면의 특정 구성 요소를 이용해 사용자의 관심을 유도하는 방법
- 반전 기법(hover), 컬러 대비 기법(중요한 글자 강조), 글자 스타일(굵기, 밑줄, 이탤릭체)을 이용한 기법, 아이콘이나 그래픽을 이용하는 기법
- 일관성(Consistency)
- 하나의 웹 사이트 또는 여러 웹 사이트에서 지켜지고 있어 굳이 학습하지 않아도 쉽게 사용할 수 있는 법칙
- 웹 사이트에서 일관성이 지켜지면 반복에 의한 학습효과로 사용자 편의성을 높일 수 있음
- 내부적 일관성
- 일정한 규칙에 따라 웹 사이트를 제작하여 일관성이 느껴지도록 디자인하는 것
- 일관성이 잘 지켜진 사이트를 보면 ‘UI스타일 가이드’가 있음을 알 수 있음
- 외부적 일관성
- 사용자가 여러 프로그램 사이에서 일관성을 느낄 수 있도록 디자인하는 것
- 저 사이트에서 학습했으면 이 사이트는 자연스럽게 이용할 수 있음
- ex : 게시판의 기본적인 아이콘의 일관성, Home으로 이동하는 네비게이션의 일관성, Footer의 저작권 부분의 일관성
그리드 시스템
- 공간을 효율적으로 활용하기 위해 일정한 구역(Grid)으로 나누어 둔 것을 뜻함
- 디자인에 질서를 도입하는 수단
- 그리드가 중요한 이유
- 사용자에게 최적의 리딩 시스템을 제공
- 웹 사이트의 시각적 질서와 일관성을 유지할 수 있어 사용성을 높임
- 체계적인 웹 사이트 제작을 위한 최고의 수단
- 그리드 시스템은 편집 디자인에서 많이 사용됨
- 그리드 레이아웃의 특징
- 시각적으로 안정적인 디자인 제공
- 단순한 웹 디자인
- 내용을 원하는 대로 배치
- 그리드 시스템의 종류
- 컬럼 그리드, 계층 그리드, 모듈 그리드
- 그리드 생성해주는 도구들이 있음(포토샵, 그리드 계산기 웹 사이트 등)
- 그리드 시스템에 영향을 주는 요소
- 컬러
- 가장 흔히 사용되는 방법
- 글자
- 글자의 색, 크기, 글꼴을 달리하여 그리드를 구분
- 컬러