UI 디자인 썸네일형 리스트형 UI 디자인 - 디자인 무드보드 무드보드에 대한 정의는 위와 같다. 원래 아티스트들이나 감독, 프로듀서들이 벽에 걸어놓은 판에 이미지를 핀이나 클립으로 꽂아두는데서 유래했다. 그런데 이것이 꼭 필요한가? 라고 하면 단순히 예술적인 영감을 구현하기 위해서라는 면에서는 NO, 한편 다른 효용성에 대해서는 YES이다. 즉 솔직히 예술가는 두 가지 경우가 있는데 아이디어가 심상에서 뚜렷해서 그걸 구현하는 경우, 반대로 아이디어가 안 나서 막막하다가 타 오브제에서 아이디어를 취합해서 최종적으로 작품을 구현하는 두 경우가 있다. 전자의 경우 무드보드를 억지로 만들라고 하면 오히려 시간과 고생의 낭비라고 볼 수 있다. 따라서 꼭 필요하다기보다는 브레인스토밍에 좋은 차원이라고 볼 수 있다. 하지만 위의 경우처럼 디자이너가 자신의 작업물을 다양한 목업.. 더보기 UI 디자인 - 디자인 컴포넌트 앱의 UI를 구성하는 요소인 다양한 컴포넌트들을 파악해보자. ios 가이드라인 등에 잘 정리가 되어있다. 이 이미지에서처럼 다양한 컴포넌트들이 존재한다. 네비게이션 바 네비게이션 바의 현 위치를 2단으로 내려 더 크게 표현하기도 한다. 많은 앱에 존재하는 search bar. 서치바를 구성하는 요소들은 다음과 같다. 스코프바로 범위를 한정시키기도 한다. 하단에서 속해있는 메뉴나 위치를 쉽게 전환하게 해주는 TAB bar 탭바 디자인 시 유의 툴바는 해당 표시된 현재화면 혹은 관련 작업을 수행하기 위한 버튼. 그러니까 우리가 pc에서 11번가등등 인터넷 링크가 다닥다닥 붙으며 툴바라 부르던 것은 사실은 탭바이고, 실제 툴바에 해당되는 것은 크롬의 경우 추가시킨 확장프로그램 혹은, 최소화, 이전크기로 복원,.. 더보기 UI 디자인 - 컬러 컬러라는 것의 필요성 내지는 중요성 반론으로 흑백의 아름다움을 제기할 수 있다. 그러나 흑백의 아름다움도 결국은 컬러배치의 조화임을 알아야 한다. 미니멀한 컬러배치인 것이다. 사용자 경험이 향상된다. 가령 같은 것도 색상을 다르게 배치하면 정보가 중요도 순으로 잘 전달된다. 이 경우도 마찬가지이다. 좌측의 경우 모든 정보가 강조되어있어서 오히려 시선이 분산된다. 반면, 우측에는 확실히 전달되어야하는 정보인 제목과 부제는 검은색, 더 상세한 텍스트인 내용부는 회색으로 표시했다. 그리고 상대적으로 덜 중요한 시간표현도 옅은 회색으로 표시했다. 그렇기 때문에 기업별 컬러를 만들기도 한다. 이마트는 노란색, 삼성은 파랑색 등등.. 비활성화 - 활성화에 따른 색 구분으로 행동을 유도함의 예시. 색상을 구분하면 이.. 더보기 UI 디자인 - text 전체적인 조화를 볼 줄 알아야 한다. 나무도 물론 너무 이상한 건 체크해야겠지만, 나무만 보지말고 숲을 보는 시야를 기르자. 폰트 스타일에는 여러 속성이 존재한다. 대략 어떤 속성이 있는지는 알아둬야 변형등을 주기도 용이하다. New Roboto 서체의 예시. 구글 폰츠등에서 확인해보면 헤드라인 별로 어떠한 속성값이 들어갔는지 확인할 수 있다. 어떻게 적용값이 달라지느냐에 따라 비주얼이 어떻게 다르고 어떻게 달리 적용되는가에 대한 예시 (문장, 문단을 쓸 때 특히) 텍스트 레이아웃 속성도 중요한 개념이다. 앱 내에서의 텍스트 레이아웃 속성 예시 이렇게까지 다 알려고 하지 않아도 디자인을 하면서 자간 행간등에 대해 저절로 알게 되었겠지만 아무튼 구체화시키면 이렇다. 텍스트 별로 구분을 준 모습. 확실히 정.. 더보기 UI 디자인 - 버튼 디자인 같은 버튼이라도 State에 따라 각각 다른 변화를 줌으로써 사용자로 하여금 쉽게 구분하도록 한다. 버튼의 종류에도 여러가지의 형태와 셰잎이 있다. 버튼에 사용자로 하여금 특정한 행동을 유도하는 이미지를 부여하자. 다른 state라면 버튼 간에 구분을 준다. 어떠한 행동을 유도하느냐에 초점을 맞춰 디자인해야한다. 버튼 간에도 위계 구분을 주어 무엇에 포커싱을 두는 지를 명확하게 하고 시각적으로도 더 편안하게 만든다. *보다 자세한 내용은 인프런에서 확인하세요. 더보기 이전 1 다음
