웹 디자인은 단순한 시각디자인보다는 산업디자인에 가깝다고 봐야 할 듯 합니다.
실용성 사용성 등 자동차 디자인과 마찬가지로 여러가지에 대해 많은 고려가 필요합니다. 웹 사이트는 기본적으로 보는것이 아니라 사용하는 것임으로 웹브라우저의 환경안에서 가능한 범위에서 디자인 작업을 해야 합니다.
실용성 사용성 등 자동차 디자인과 마찬가지로 여러가지에 대해 많은 고려가 필요합니다. 웹 사이트는 기본적으로 보는것이 아니라 사용하는 것임으로 웹브라우저의 환경안에서 가능한 범위에서 디자인 작업을 해야 합니다.
레이아웃의 경우 사실상 grid만 맞혀서 진행을 하여도 사실상 불가능한 구현은 없습니다. 다만 효율측면에서 떨어지는 레이아웃은 존재하는대 이는 격자구조의 레이아웃이 아닌 경우에 종종 발생 합니다. 격자구조가 아닌 레이아웃을 표현하기 위해서는 더 많은 코드들과 시간이 소요 되기에 결과적으로 금전적인 문제가 발생 하기도 합니다. 즉 그리드안에서 표현이 불가능한 형태는 거의 없다고 보아도 무방하지만 현실적으로는 많은 제약이 존재 합니다.
색의 경우 텍스트를 제외한 경우 특별한 제약은 없습니다. 단지 전경색과 배경색에 대한 유의가 필요합니다.
웹사이트는 정보 전달을 기본적인 목적으로 하고 있기에 정보에 해당 하는 부분의 인지가 어렵게 되면 잘못된 디자인이라고 할 수 있습니다. 즉 빨간 바탕에 주황 글을 작성하게 되면 잘못된 디자인이라고 할 수 있겠습니다.
더불어 색이라는 것은 하나의 정보가 될 수 있습니다. 빨간 제목에 파란 부제목이 반복 될 경우 사용자는 색으로 이에 대한 정보를 얻을 수도 있습니다(물론 색만으로 정보를 주어서는 안됨) 제목, 부제, 내용 등 통일화된 색상을 같는 것이 좋습니다. 텍스트는 색상을 가급적 통일화 시켜 주어야 합니다. 비슷한 채도의 비슷한 명도를 다양하게 하여 불필요하게 다양한 텍스트 색상으로 만드는것은 좋지 않습니다.
UI에 중요한 요소중에는 디자인 패턴이라는 것이 있습니다.
위키의 내용을 요약 하자면 디자인패턴은 건축학 및 컴퓨터 과학에서 사용되는 용어로, 특정 영역의 설계가 문제를 해결하기 위해 고안된 형식적인 방법이다. 이 방식은 건축가 크리스토퍼 알렉산더가 건축한 영역에서 고안된 것을 그 시초로 하며 이후 컴퓨터 과학 등 여러 다른 분야에서도 받아들여지게 되었다. 여러 구체적인 영역에서 관련을 맺으며 사용 될 수 있는 패턴들을 구조적으로 정리한 것을 패턴 언어라 부른다. 이 패턴 언어를 인터랙션 디자인에 적용하자고 도널드 노먼의 "User Centered System Design"에서 제안했었다.
이 디자인 패턴은 이미지의 반복을 의미 하는 것이 아니라 일종의 프로그래밍 철학이며 그 것이 디자인 언어로 정착된 디자인 형태의 패턴이라고 할 수 있습니다. 이 디자인 언어가 상호간 일치되어야지 디자인도 효율적으로 할 수 있을 것입니다.
이러한 디자인 패턴은 애플사의 디자인 가이드 등을 통하여 알려져있지만 모바일에는 적절하지 못한 것이 있습니다. 현재 모바일의 경우 국외 애플사와 포털업체 등에서 선두적으로 UI 디자인 패턴에 대해서 그 가이드와 활용법을 설명하고 있습니다.
모바일 어플용 UI 디자인 패턴
웹사이트는 정보 전달을 기본적인 목적으로 하고 있기에 정보에 해당 하는 부분의 인지가 어렵게 되면 잘못된 디자인이라고 할 수 있습니다. 즉 빨간 바탕에 주황 글을 작성하게 되면 잘못된 디자인이라고 할 수 있겠습니다.
더불어 색이라는 것은 하나의 정보가 될 수 있습니다. 빨간 제목에 파란 부제목이 반복 될 경우 사용자는 색으로 이에 대한 정보를 얻을 수도 있습니다(물론 색만으로 정보를 주어서는 안됨) 제목, 부제, 내용 등 통일화된 색상을 같는 것이 좋습니다. 텍스트는 색상을 가급적 통일화 시켜 주어야 합니다. 비슷한 채도의 비슷한 명도를 다양하게 하여 불필요하게 다양한 텍스트 색상으로 만드는것은 좋지 않습니다.
UI에 중요한 요소중에는 디자인 패턴이라는 것이 있습니다.
위키의 내용을 요약 하자면 디자인패턴은 건축학 및 컴퓨터 과학에서 사용되는 용어로, 특정 영역의 설계가 문제를 해결하기 위해 고안된 형식적인 방법이다. 이 방식은 건축가 크리스토퍼 알렉산더가 건축한 영역에서 고안된 것을 그 시초로 하며 이후 컴퓨터 과학 등 여러 다른 분야에서도 받아들여지게 되었다. 여러 구체적인 영역에서 관련을 맺으며 사용 될 수 있는 패턴들을 구조적으로 정리한 것을 패턴 언어라 부른다. 이 패턴 언어를 인터랙션 디자인에 적용하자고 도널드 노먼의 "User Centered System Design"에서 제안했었다.
이 디자인 패턴은 이미지의 반복을 의미 하는 것이 아니라 일종의 프로그래밍 철학이며 그 것이 디자인 언어로 정착된 디자인 형태의 패턴이라고 할 수 있습니다. 이 디자인 언어가 상호간 일치되어야지 디자인도 효율적으로 할 수 있을 것입니다.
이러한 디자인 패턴은 애플사의 디자인 가이드 등을 통하여 알려져있지만 모바일에는 적절하지 못한 것이 있습니다. 현재 모바일의 경우 국외 애플사와 포털업체 등에서 선두적으로 UI 디자인 패턴에 대해서 그 가이드와 활용법을 설명하고 있습니다.
모바일 어플용 UI 디자인 패턴
- Apple iPhone : Human Interface Design Guideline
- MS Windows Mobile : Windows Mobile Guide
- Nokia Symbian : Mobile DEsign Wiki
- 야후 모바일 : Yahoo Mobile
- 노키아 모바일 : Nokia Mobile
- 기타 : Yahoo Design Pattern Library
- 모바일 디바이스는 기본적으로 스크린이 작기 때문에 중요한 요소와 사용자 입력 폼(form 요소, 버튼, 링크 등)은 사용자가 확실히 인지 할 수 있게 해야합니다.
- 모바일은 특성상 이동통신사를 통한 패킷 과금 방식을 택하고 있습니다. 그렇기에 이미지의 용량과 갯수등에 대한 고려도 필요합니다.
- 본 글은 강좌목적의 자료가 아니라 다른곳에 사용하다 도움이 될만한 글이라 올립니다.
- 하코사글 펌.
- 하코사글 펌.