본문 바로가기

레이아웃

1_사용자를 사로잡는 첫인상 누구나 쉽게 적응할 수 있게 염두해야할 점 - 사용자에게 좋은 첫인상을 제공한다. - 필요한 정보를 찾을 수 있는 명확한 경로를 알려준다. - 사용자가 쉽게 적응하도록 친숙하게 디자인한다. - 처음 방문한 사용자를 고객이 되도록 유도한다. 레이아웃 레이아웃은 웹 디자인의 가장 기본적인 요소다. 레이아웃은 만든느 것이 아니라 찾는 것이다. 컨텐츠의 중요도에 따라 논리적으로 구성하다 보면 레이아웃은 자연스럽게 그 모습을 드러낸다. 사용자 시선 유도 구텐베르크의 법칙 구텐베르크의 디자인 패턴 '대각성 균형(diagonal balance)' 중력때문에 물건은 위에서 아래로 떨어진다. 웹페이지를 볼 때는 시선이 좌측상단에서 우측하단으로 떨어진다. 책을 볼 때 왼쪽에서 오른쪽으로, 위에서 아래로 읽기 때문이다. 좌.. 더보기
06_인터페이스 디자인의 기초_비주얼 인터페이스 디자인의 기본요소_레이아웃 비주얼 인터페이스 요소에는 버튼, 라벨, 화면 상 개별 아이템의 위치, 디바이스 상에서의 스크린 위치, 다른 인터랙션 디자인 요소들이 위치할 공간이 포함된다. 비주얼 인터페이스는 기본 요소 몇 개만으로 이뤄져있다. 이런요소들이 어우러진 방식이 비주얼 인터페이스를 정의한다. 레이아웃 모든 스크린 비주얼 디자인의 핵심은 레이아웃이다. 레이아웃이란 구성요소, 칸트롤, 컨텐츠를 어디에 어떻게 배치할까 고민하는 것이다. 레이아웃은 이런 요소들을 배치할 구조를 만들어 내고 우선순위를 매겨 놓음으로써, 사용자는 무엇이 더 중요하고 무엇이 덜 중요한지 알 수 있다. 레이아웃은 공간이 한정된 작은 스크린에서 더욱 중요하다. 그리드시스템 그리드 시스템은 디자이너가 유사한 패턴 안에 존재하는 정보를 쉽게 조직화할 수 있게 .. 더보기
PART_4_9. 그래픽 디자인 (GRAPHIC DESIGN) PART_4. 그래픽 디자인 (GRAPHIC DESIGN) *** 리퀴드 디자인 (Liquid Design) *** - 다양한 브라우져지원, 플랫폼에 종속되지않는 디자인을 추구 - 해상도에 따라 적절하고 유연하게 보여지는 디자인 - Flexible Design - 사용자에게 비슷한 경험을 제공하기 위한 목적을 가짐 - 가변 레이아웃(relative layout)이 전제되어야 함 - 고정 래이아웃(fixed-width layout)에 비해 가독성에 대한 약점이 있음 - 행의 길이가 과도하게 길어질 경우 다음 행의 시작점을 찾기 어렵다 - 다양한 모습과 느낌을 미리 예상 한다는것이 디자인 측면에서는 약점 - 가변 레이아웃은 CSS를 사용해 화면을 구성허고 요소를 배치한다 - 여백(margin), 영역(div.. 더보기
PART_4_8. 그래픽 디자인 (GRAPHIC DESIGN) PART_4. 그래픽 디자인 (GRAPHIC DESIGN) *** 가운데 정렬 (Central Alignment) *** - 인터넷초기에는 좌측정렬이 주로 채택되었으니 해상도가 높아짐에 따라 '사용자 환경을 고려한 디자인'을 구현하기 위해 가운데 정렬이 많아지고있다. - 좌측정렬은 보수적인 느낌을 준다. - 전통을 중시하는 기업은 좌측 정렬을 선호하기도 함 - 여백은 형태를 돕는 순기능을 수행하지만, 여백이 과도하면 형태를 압박하거나 산만함을 가중시키는 역효과 발생 - 좌측정렬은 과도한 여백에 의해 본문이 위축되거나 여백의 집중으로 인해 전체의 안정감이 떨어진다 - 여백에 의해 읽혀 진다는 것을 감안 할때 본문의 좌측영역이 보다 쉽게 읽혀지도록 하기 위해 서는 좌측에도 여백을 부여하는것이좋다. 그래서 좌.. 더보기
PART_4_5. 그래픽 디자인 (GRAPHIC DESIGN) PART_4. 그래픽 디자인 (GRAPHIC DESIGN) *** 본문중심의 레이아웃 (presenting Main Contents First) *** - 로컬 네비게이션은 주로 본문 좌측에 위치 - 보편화된 레이아웃을 다르다보면 내용(본문)보다 기능(네비게이션)을 먼제 보여주게됨 - 블로그는 시간 또는 주제중심의 정보구조였기 때문에 기존 웹사이트의 구조와 다른 정보구조를 가짐 - 블로그는 본문을 먼저 보여주는 레이아웃 - 블로그는 본론부터 예기하는것과 같다. 정보의 홍수속에서 살고있는 사용자는 본론만 듣는것고 쉽지않음 - 본문 중심의 레이아웃은 그리드 시스템보다는 본문을 먼제 보여즐 수 있는게 관건 - 본문보다 다른 구성요서가 먼저 보인다면 본문중심의 레이아웃으로 볼 수 없음 - 이는 읽기 시작점과 관.. 더보기
PART_4_2. 그래픽 디자인 (GRAPHIC DESIGN) PART_4. 그래픽 디자인 (GRAPHIC DESIGN) *** 단순한 레이아웃 (Simple Layout) *** - 레이아웃이 복잡하면 화면을 이해하는 속도는 느릴수 밖에 없다 - 일반적으로 화면전체를 먼저 인식한 후 세부 영역에 대한 인식이 이루어짐 - 복잡성(Complexity)은 디자이너가 반드시 해결해야할 과제 - 내용과 디자인요소를 담는 틀이 단순해질수 있도록함 - 틀(Grid), 기준은 컬럼(Column) - 화면분할은 3단 그리드 이하가 바람직 - 3단 그리드가 임계점(critical point) - 레이아웃은 디자인 컨셉트를 반영 - 단순함이라는 그랜드 컨셉트가 있어야 단순한레이아웃이라는 서브켄셉트가 나옴 - 반드시 단순해야하는것은 아님 - 오래도록 보게 유도해야하는 컨텐츠, 다양한정.. 더보기