heewon study I'll be on your side.

UI 디자인이 성공하기 위한 요건 GUI 템플릿에 따라서 전체 화면을 디자인할 수 있다. GUI 템플릿에 따라서 아이콘과 버튼을 디자인할 수 있다. GUI 상세 디자인 UX 디자인의 기본 명제를 이해하고 있다면 프로세스를 이해하는 것은 간단하다. 사용자를 이해하고 그것을 디자인으로 연결시키면 되는 것이니 말이다. 그러나 디자인은 ‘자동판 매기(Bending machine)’가 아니다. 사용자 경험을 이해했다고 해서 자동으로 디자인이 만 들어지지는 않는다는 얘기다. 디자이너 개인의 창의성이나 지식, 경험 등이 ‘의도’를 형 성한 뒤, 이 ‘의도’를 통해 디자인이 만들어지는 것이다. “사용자들의 경험을 이해하고, 그 이해를 바탕으로 디자인 한다.” 사용자 경험을 이해하는 과정에는 목표 수립, 제반 상황 분석..

전반적인 일관성을 제공 GUI 콘셉트 기획서에 따라서 레이블과 콘텐츠에 대한 폰트를 선정할 수 있다. 전반적인 일관성을 제공 일반적인 일관성을 제공해야 한다. 다양한 Task 수행시 지각-해석-평가-행동-실행-기억 순으로 인지한다. 쉽게 인지하고 기 억부담을 줄이기 위해 일관된 표현과 사용방식을 사용한다. 레이아웃등을 시각적으로 표현하기 위해 폰트, 색등 적절하게 사용해야 한다. 설계 가이드 는 다음과 같다. UX 제작 GUIDE는 다음과 같다. 레이아웃, 아이콘, 폰트, 타이틀, 메시지위치, 용어 등 시각적 요소를 일관되게 사용한다. Task 수행절차 및 조작 방식(제스처, Hard key 포함)은 일관되게 제공한다. 동일기능의 경우 가로/세로 화면 전환 시 전혀 다른 방향과 위치에 제공하지 않는다. ..

현 상태 및 정보의 단서 표시 GUI 콘셉트 기획서에 따라서 GUI 디자인 요소별 컬러를 선정할 수 있다. 현 상태 및 정보의 단서를 명확하게 표시 사용자가 처한 상황과 제품의 상태를 사용자가 직관적으로 알 수 있도록 화면에 표시한다. 미리 다음 정보에 대한 예상이 가능하도록 버튼, 링크등에 단서를 제공한다. 사용자가 이해할 수 있는 친숙한 용어를 사용한다. 실제 사물이 가지는 모양, 컬러, 움직임, 기능을 메타포로 활용한다. 아이콘만으로 의미전달이 불충분할 경우 텍스트로 변경 또는 병행사용을 고려한다. SS Galaxy S4(좌)Apple iPhone iOS7(우)의 경우 죄축 삼성 스마트폰의 경우 패턴 변경 메뉴 에 대한 힌트가 전혀 없다.(즉, ‘패턴’ 진입하여 새로 만들어야한다.) 우측의 경우 ‘..

한눈에 이해 할 수 있는 화면을 제공 UI 설계에 따라서 기능별 대표 화면을 선정할 수 있다. 선정된 대표 화면에 대하여 그리드 시스템(화면 레이아웃)을 디자인할 수 있다. 모바일에서 실현되는 UI 화면 사용자는 그들의 디바이스에서 당신의 앱을 사용하는 동안 편안함을 느낄 수 있어야 한다. 사용자가 앱을 사용하는 도중 사용자가 원하지 않는 불필요한 작업(Task)을 만들어내는 상 황은 절대 허용하지 않는다. 평범하거나 절대적 위치를 요구하는 레이아웃을 만들지 말라 텍스트에서 픽셀단위의 사용을 지양하고, DIP(dot in pixel, 밀도단위)를 사용한다 다양한 크기의 이미지 리소스를 만든다(xhdpi, hdpi, mdpi, ldpi) 버튼이나 리스트 아이템등의 선택하는 타겟은 크고 명확하게 사용한다. ..

디자인 및 시각적 요소 도출 사용자 리서치에서 도출된 페르소나 정의에 따라서 사용자의 라이프스타일이 반영된 비주얼 무드보드(Visual Moodboard)를 작업할 수 있다. 도출된 비주얼 무드보드(Visual Moodboard)에 의하여 GUI 상세 디자인을 하기 위한 콘셉트 기획서를 작성할 수 있다. UI/UX 콘셉트 기획안에 따른 디자인 및 시각적 요소 도출 디자인 요소 도출 UX는 멋지고 Fancy한 디자인을 만드는 것이 목표가 아니라, 탁월한 사용자 경험을 제공 하는 게 목표이다. 탁월한 사용자 경험을 제공하기 위해서는 사용자를 깊이 있게 이해하 는 것이 필요하다. 비즈니스 목표와 도전과제가 정해졌다면 사용자에서 출발한다. 사용자 를 깊이 있게 이해하는 것은 특정한 컨텍스트에서 사용자들이 보이는..

UI/UX 디자인 개요 UI/UX 콘셉트 기획안에 따라서 GUI(Graphical User Interface) 디자인 요소와 시각적인 콘셉트를 도출할 수 있다. UI/UX 콘셉트 기획안에 따른 GUI(Graphical User Interface) 디자인 요소 얼마나 멋진 앱을 만들든지 간에 다음의 내용들은 UX 디자인적인 접근이 아니다 사용자 중심 디자인을 하겠다는 것은 ‘선언’이 아니다 사용자의 경험을 고려하겠다는 ‘태도’도 아니다 실제 사용자들의 경험을 조사하고 그 내용을 기반으로 디자인을 하는 것이 ‘사용자 중심 디자인’, 또는 UI/UX 디자인인 것이다. 권위 있는 전문가의 의견이 완벽한 UI/UX를 디자인 할 수 있는 것은 반쪽자리 접근일 뿐이다. 전문가의 경험이 UX 사용자의 경험이 아니다 전..

태스크 플로우 작성 사용자가 이용하는 서비스에 대하여 경험 경로 및 과정을 예측할 수 있다. 모든 화면들이 시나리오 흐름과 옵션에 따라 어떤 경로를 갖게 되는지 작성할 수 있다. 각 흐름에 따라서 태스크 플로우(Task Flow)를 작성할 수 있다. 사이트맵과 태스크 플로우 1. 사이트맵 정의 웹사이트의 특정 영역을 대표하는 페이지들을 시각적으로 보여주는 것을 의미한다. 회사 조직도처럼 생겼으며 사이트의 수직적인 구조를 보여준다. 2. 태스크 플로우 정의 사용자들이 웹사이트를 항해하는 중 취하는 경로나 과정을 보여준다. 사용자의 옵션이나 경로를 상세히 보여주기 위해 제작된다. 시나리오 기반의 태스크 분석 1. 정의 사용자의 니즈와 요구사항을 기반으로 사용자가 우리 서비스를 이용하여 어떤 작업을 수행하도록..

와이어프레임 작성 기획된 UI/UX 콘셉트에 따라서 화면의 기본 구조를 정의할 수 있다. 사용자 인터페이스 요소의 구성에 따라 모든 화면들을 간략하게 설계할 수 있다. UI 기술과 개발 난이도를 고려하여 요소별 액션을 정의할 수 있다 구조도 (사이트 맵) 1. 구조도 정의 (1) 정보 공간의 형태를 개괄적으로 보여주며, 각각 사이트 개발자와 사용자를 위한 요약 도 기능을 한다. (2) 페이지와 다른 콘텐츠 요소들 간의 관계를 보여주기 때문에 조직화, 내비게이션, 레이 블링 시스템을 표현하는 용도로 사용하는 것이다. 2. 구조도 설계 (1) 상위 레벨 구조도 메인 페이지에서 시작해서 하위 페이지들을 추가하고 단순성을 유지하며 구조에 계속 적으로 살을 붙여 나가며 사용자의 예상 접근 경로뿐 및 조직화 및 콘..

네비게이션 구조 설계 사용자의 접근성, 사용성을 위하여 네비게이션(Navigation) 구조를 설계할 수 있다. 검색엔진 최적화 검색엔진 최적화(Search Engine Optimization)는 웹 페이지 검색엔진이 자료를 수집하고 순 위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있도록 하는 작업을 말한다. 웹 페이지와 관련된 검색어로 검색한 검색 결과 사위에 나오게 된다면 방 문 트래픽이 늘어나기 때문에 효과적인 인터넷 마케팅 방법 중의 하나라고 할 수 있다. 기본적인 작업 방식은 특정한 검색어를 웹 페이지에 적절하게 배치하고 다른 웹 페이지에 서 링크가 많이 연결되도록 하는 것이다.

정보 레이블링 설계 사용자가 사용하는 언어를 고려하여 메뉴 및 UI 구성요소에 대하여 레이블링 (Labeling) 할 수 있다. 정보 조직화 설계의 종류 순차적 구조(계열 구조)는 정보를 한 페이지씩 한 방향으로 이동하는 구조이다. 카테고 리 화면에서 선택하여 목록 화면으로 이동하고, 목록 화면에서 항목을 선택하여 조금씩 자세하게 보는 과정이 이에 해당한다. 계층적 구조(모빌 구조)는 각 상위 메뉴에서 하위 메뉴로 Top-Down 방식으로 이동하는 구조이다. 한 화면에서 다양한 기능으로 분기되면서 구성되는 형태이며 여러 레벨의 복 잡한 메뉴 구조를 표현할 때 사용된다. 각 메뉴마다 또 다른 구조를 안에서 포함한다. 그리드 구조는 바둑판식으로 수평과 수직 형태로 연결되어 있는 구조이다. 정보 데이터 를 그..