단냥이네

[모바일 디자인의 어려움과 기회영역]   ㆍ 작은 화면 크기   ㆍ 다양한 화면 너비   ㆍ 터치 스크린   ㆍ 문자 입력하기   ㆍ 물리적 환경의 제약   ㆍ 위치 인식   ㆍ 사회적 영향과 집중력의 한계 [모바일 디자인에 접근하는 방법]   ㆍ  모바일 사용자에게 무엇이 필요할까?   ㆍ  웹/앱을 본질에 맞게 발라내기   ㆍ  모바일 기기의 하드웨어 활용하기   ㆍ  콘텐츠를 선형으로 배치하기   ㆍ  가장 일반적인 인터랙션 시퀀스 최적화          - 타이핑은 없애거나, 최소화하기          -  불러오기 최소화, 불필요한 데이터로 화면 용량 키우지 않기          -  좌우 인터랙션 지양, 위아래 인터랙션          -  탭횟수 줄이기    [버티컬 스택][필름 스트립] [..

[GUI]    ㆍ Graphical User Interface [비주얼 디자인의 기초]    ㆍ시각적 계층구조    ㆍ구성    ㆍ색상    ㆍ타이포그래피   ㆍ가독성    ㆍ감정 불러일으키기       ㆍ이미지[웹접근성]소프트웨어 접근성(Sofeware Accessibility)은 정보통신 제품이나 시스템에서 실행되는 응용 프로그램이나 운영체제 등과 같은 소프트웨어를 개발함에 있어서 장애인이나 고령자분들이 비장애인과 동등한 수준으로 사용할 수 있도록 하기 위하여 설계 또는 구현에 필요한 최소한의 사항을 규정한 것 (www.wa.or.kr) [다양한 비주얼 스타일]   ㆍ일러스트   ㆍ스큐어모픽   ㆍ플랫디자인   ㆍ미니멀리즘

1. 레이아웃의 기본    ㆍ구성요소를 배열하는 특정한 방법    ㆍ유저가 각 정보와 기능의 우선순위를 직관적으로 판단하게 하는 디자인의 기본    ㆍ서비스의 목적에 따른 정보의 위계구조 정립이 전제 조건    ㆍ시각적 계층 구조    ㆍ시선의 흐름    ㆍ게슈탈트 법칙 2. 시각적 계층 구조    ㆍ화면 구성 요소의 상대적 중요성    ㆍ구성 요소간의 관계    ㆍ다음에 해야할 일 3. 물체의 중요도 가늠하기    ㆍ크기    ㆍ 위치    ㆍ 밀도    ㆍ 배경색    ㆍ 리듬    ㆍ 작은 항목 강조하기    ㆍ 정렬과 그리드 4. 물체의 중요도 가늠하기    Θ 게슈탈트 법칙 4가지       ㆍ근접성의 법칙       ㆍ 유사성의 법칙       ㆍ 연속성의 법칙       ㆍ 폐쇄성의 법칙 5..

1. 사용자를 인도하는 내비게이션    ㆍUX에서 내비게이션의 목적    ㆍ서비스에서 길찾기를 장려하는 방법    ㆍ다양한 내비게이션 종류들 소개    ㆍ내비게이션 디자인 2. 정보와 태스크 공간 이해하기    ㆍ주제와 범위 안에서 활용할 수 있는 정보와 툴    ㆍ콘텐츠와 기능이 구조화된 방식    ㆍ현재 위치    ㆍ 다음으로 이동할 수 있는 위치    ㆍ지금까지의 이동 히스토리 및 뒤로 가거나 상위 위계로 이동하는 방법 3. 정보와 태스크 공간 이해하기    1) 표지판       ㆍ상단바           - 타이틀           - 브랜드 요소           - 탭           - 선택 인디케이터     2) 길찾기       ㆍ찾아가는 '과정'에서 필요한 모든 요소들        ..

1. 정보 구조 (Infomation Architecture, IA)ㆍ 정보 구조는 정보를 구성하고 레이블링하는 기술ㆍ 디지털 공간 구축에 앞서 사람들이 공간을 사용하는 방식을 고민하고 효율적으로 디자인하기 위한 첫걸음.    2. 서비스 플랫폼의 구성ㆍFront와 Back의 차이점 3. 콘텐츠 구성 및 분류ㆍ위치ㆍ가나다순ㆍ시간ㆍ카테고리 또는 다면 필터 ㆍ위계ㆍ숫자 4. 태스크와 작업 흐름 위주의 앱 디자인하기ㆍ사용자 스토리ㆍ플로 다이어그램5. 추천, 검색, 탐색ㆍ태스크 위주ㆍ목적형ㆍ탐색형ㆍ커머스 사이트ㆍ카드형ㆍ다면검색6. 모바일 다이렉트 액세스ㆍ첫화면에서 니즈 충족ㆍ위치와 시간 데이터 사용 가능 7. 스트림과 피드ㆍ콘텐츠 탐색형 / 전체 흐름 파악ㆍ데이터 업데이트 주기 고려ㆍ최신 항목 상단ㆍ개인화 / ..

좋은 UX/UI 설계는 기획 의도를 명확히 파악하는 것에서부터 시작한다. Context - 사용자는 누구인가?목표 - 사용자는 무엇을 하고자 하는가?리서치 - 사용자의 전후 사정과 목표를 이해하는 방법패턴 - 인터페이스 디자인과 관련된 사용자 인식과 행동들 1. 사용자를 둘러싼 컨텍스트 파악하기  Θ 인터랙션 디자인의 시작점    ㆍ당신은 사용자가 아니다    ㆍ인터랙션은 대화처럼    ㆍ콘텐츠와 기능을 사용자에게 맞춰라    ㆍ숙련도에 따라 달라지는 것들    ㆍ인터페이스는 목표를 달성하는 수단일 뿐    ㆍ"왜?"라고 묻고 또 묻기    ㆍ문제를 정확히 파악하고 해결하기 2. 사용자를 있는 그대로 이해하는 법  Θ 사람을 이해하는 첫 발걸음, 리서치    ㆍ'일반적인..

[ GNB ]ㆍGlobal Navigation Bar. 메뉴바를 뜻함ㆍ 웹페이지에 표시되는 하이퍼링크들의 집합 영역을 말함ㆍ 모바일이나 웹에서 앱과 웹들의 최상단에 위치한 메뉴들이 모이는 영역  [ Bottom bar ]ㆍ 모바일 화면 하단에 탐색 및 주요 작업을 표시하는 영역ㆍ 주요 메뉴들로 구성되어 ㅅ가용자가 쉽고 빠르게 접근할 수 있도록함ㆍ 접근할 수 있는 메뉴는 5개를 초과하지 않아야함ㆍ 화면에 고정되어 스크롤 시에도 사라지지 않음 [ FAB / Footer ]FABㆍFloating Action Button은 화면에서 가장 기본적이고 공토적인 작업을 수행함ㆍ모든 화면 내용의 앞에 표시되며 일반적으로 가운데에 아이콘을 포함한 원형 모양임ㆍ기능적으로 빠르게 접근해야..

[ List Module ]ㆍ텍스트 또는 이미지의 여속적인 수직 인덱스ㆍ 경계와 시각적 레이아웃에 맞게 조정하여 요소를 최소화하여 어지럽지 않게 하면서도 수 많은 콘텐츠가 어우러지도록 함 [ Thumbnail Module ]ㆍ 썸네일 이미지와 텍스트들이 어우러진 모듈ㆍ 썸네일 이미지, 텍스트 간격 등을 정리하여 썸네일 모듈을 제작함  [ Basic Module ]ㆍ일반적으로 흔히 보이는 모듈형태로 베리에이션된 기본 형태의 모듈ㆍ보편적으로 사용되며 베이직 모듈에서 다양하게 베리에이션하여 사용 가능 [ Module Variation ]ㆍ 일반적으로 흔히보이는 모듈 형태로 베리에이션된 모듈ㆍ 다양한 형태의 모듈이 있을 수 있으며 모듈들이 모여서 페이지를 이룰 수 있음[..