전체 글 (18) 썸네일형 리스트형 [새싹X스나이퍼팩토리] 기업연계 실무특화 UX/UI 디자인 마스터 과정 17일차 "모바일 디자인 구조와 패턴” 모바일 기본 구조 타이틀 영역은 타이틀, 기능버튼내비게이션 영역: 탭 같은 역할로 화면전환, 서비스 전체 구조탭 바: 5개 메뉴를 넘지 않도록, 햄버거 버튼으로 전체보기 제공드로어 메뉴는 화면을 효율적으로 사용 가능 모바일 영역 이론 스티븐 후버의 모바일 디바이스 파지 방법론상단 View(주시 영역): 타이틀, 비주얼 요소 배치한다.하단 Ineraction(활동 영역): 버튼, 탭 등 사용자가 터치하는 기능 요소를 배치한다. 드로어 메뉴 햄버거 메뉴를 누르면 나온다.사용자가 필요할 때만 메뉴를 열어서 사용한다.장점: 좁은 모바일 화면에서 효율적으로 사용 모달관련 내용을 위해 작은 창을 띄워서 보여주는 것.모달: 화면이 어두워지면서 임시로 위에 창이 뜬다. 모달에서 작업이 끝나기 전에 다른 작업을 할.. [새싹X스나이퍼팩토리] 기업연계 실무특화 UX/UI 디자인 마스터 과정 16일차 "베리어블” 인터랙티브 컴포넌트 프로퍼티 종류Text PropertyBoolean PropertyInstance Swap Property 인터랙티브 컴포넌트란?컴포넌트 세트 안의 베리언트 사이에 인터랙션을 걸어주는 기능. Action은 항상 change to이다. 베리어블 프로그래밍에서 변수와 같음.값이 변경되는 동적인 요소로 다양한 디자인 속성과 프로토타입에 색상, 숫자 등 재사용 가능한 정보를 저장. 사용 예시디자인 시스템을 관리할 때 디자인 토큰 생성라이트 모드와 다크모드로 테마 전환버튼의 모서리 둥글기 설정사용자와 퀴즈 인터랙션디바이스 크기에 따라 간격 조정한국어와 영어로 다른 언어로 전환 유형Color: 단색Number: 숫자(문자레이어/Corner radius/Minimum&Maximum width/He.. [새싹X스나이퍼팩토리] 기업연계 실무특화 UX/UI 디자인 마스터 과정 15일차 "와이어 프레임” UX 전략 사용자에게 제공할 핵심가치, 시장 대응 방안 등의 전략을 수립한다.- UX 전략 프로세스인사이트를 바탕으로 서비스를 '어떻게 차별화하는가' - 가치도출고객에게 어떤 가치를 제공해야 하는가?제품을 경험하는 과정에서 사용자가 시간, 정보, 비용, 시간을 제공하는 것이 아깝지 않고 즐겁고 유익하다면 가치를 느낀다. - 포지셔닝 맵1960년대 알레스와 트럿이 제안한 마케팅 이론.서비스를 경쟁 브랜드와 우위를 확보하기 위한 전략적 도구로 사용. - 포지셔닝 지표 설정사용자가 우리 서비스를 사용할 때 중요하게 생각하는 기준을 파악한다.사용자가 가장 중요하게 생각하는 2가지로 압축한다. 정보구조 설계(IA) 보통 PM이나 개발자가 작성하는 문서이다.웹사이트와 앱에서 보여지는 기능을 계층적으로 표현한 문서.. [새싹X스나이퍼팩토리] 기업연계 실무특화 UX/UI 디자인 마스터 과정 14일차 "디자이너 커리어 설계” 오늘은 회사별로 UXUI 디자인 직무와 역할에 대해 알아보았습니다. 회사에 따른 UXUI 직무 1. 인하우스 디자이너자사 웹사이트, 앱 디자인자사 서비스, 브랜드를 운영총체적 경험을 하며 다른 팀과 소통서비스 개발부터 운영까지 모두 담당해서 UX 설계와 개선에 더 집중데이터를 수집하고 데이터를 기반으로 서비스 개선일정과 업무량을 내부에서 조절이 가능해서 워라밸 가능특정 분야를 깊게 경험하고 싶다면 인하우스가 적당! 단점디자인 이외의 업무도 소화할 수 있다.디자인보다 서비스 전반적인 매출이 중요다양한 디자인에 도전하지 못하는 한계반복되는 업무에 다소 따분하게 느낄 수 있음포트폴리오 넣기에는 다소 적당하지 않은 디자인 2. 에이전시디자인 개발, 리뉴얼, 서비스 런칭 등을 의뢰 받아 수행하는 디자인 전문 회사.. [새싹X스나이퍼팩토리] 기업연계 실무특화 UX/UI 디자인 마스터 과정 13일차 "컴포넌트” 오늘은 컴포넌트에 대해 배웠습니다. 컴포넌트 아이콘, 버튼, 레이아웃 등 많이 사용하는 오브젝트를 저장해 두고 반복해서 사용하는 요소입니다. 프로젝트 전반에 걸쳐 일관된 디자인을 만들고 관리하는 데 도움이 됩니다. 버튼, 아이콘, 레이아웃, GNB, Tab bar 등을 컴포넌트로 만듭니다. 컴포넌트 만들기 실습 디자인 패널 상단 컴포넌트 아이콘 ✅ 단축키 Ctrl + Alt + K or 마우스 우클릭 - create component Main component: 처음에 만든 원본 메인 컴포넌트는 디자인에 사용하지 않는다. - 인스턴스컴포넌트를 복사한 요소로 메인 컴포넌트에 영향을 받는다.- 컴포넌트 해제해제가 없다. 플러그인 사용 - Detatch component - 인스턴스 해제More action.. [새싹X스나이퍼팩토리] 기업연계 실무특화 UX/UI 디자인 마스터 과정 12일차 "앱 UI 설계하기” 모바일 정보구조 설계의 4가지 방식 모바일은 화면이 작은 한계로 인해 다양한 정보구조 방식을 사용한다. 계층구조, 허브앤스포크, 중첩인형, 탭뷰 4가지 방식이 있다. 계층 구조Hierarchy(계층구조)는 정보 규모가 크고 단계적으로 정보를 탐색하는 경험이 많은 서비스에서 사용. 대부분의 웹사이트는 계층구조 방식을 따르며 1depth~4depth 사용하기도 한다. 모바일에서는 depth(계층)가 많을수록 사용자들이 불편하고 어렵게 느껴서 사용하지 않는 것이 좋다. 모바일 설계시 Depth 모바일 정보구조는 기본적으로 2 Depth로 초과하지 않는 것이 좋다. 안드로이드, iOS 모두 3 Depth로 제한한다. 최근 1 Depth 설계가 유행이다. UI 설계 1. 레이아웃: 서비스의 메뉴 계층 구조에 따라.. [새싹X스나이퍼팩토리] 기업연계 실무특화 UX/UI 디자인 마스터 과정 11일차 "프로토타입” 오늘은 프로토타입에 대해서 배웠습니다. 실습을 많이 해서 진짜 재밌는 하루였어요! 프로토타입 앱과 웹사이트를 개발할 때 실제 원하는 방식으로 서비스가 작동하는지 테스트하는 과정 왜 하나요?프로젝트 관계자 사이의 커뮤니케이션 용도 기획을 실체화 하는 용도 개발 전에 사용자의 피드백을 받는 용도 커뮤니케이션 미스를 줄여서 개발 비용 절약플로우 (Flow) 프로토타이핑을 사용해서 한 페이지에 여러 개의 플로우를 만들어서 전체 유저 플로우를 설계할 수 있다. 예를 들면 로그인 성공, 실패, 회원가입 등 여러가지 플로우를 만들어서 유저 플로우를 설계한다. 프로토타입 단축키Present✅ Ctrl + Alt + Enter 새 창을 띄워 인터랙션을 확인한다. Inline Preview ✅ Shift + Space .. [새싹X스나이퍼팩토리] 기업연계 실무특화 UX/UI 디자인 마스터 과정 10일차 "디자인 원칙” 디자인 원칙과 UX 페르소나 쪽에 대해 배웠습니다. 디자인 원칙 근접의 원칙 관련이 있는 요소를 가깝게 배치하는 방식을 의미한다. 사용자가 관련 요소를 빠르게 인식할 수 있도록 도와준다.정렬의 원칙 디자인 요소(사진, 이미지, 문자, 아이콘, 버튼 등)를 특정 기준으로 배치하는 작업을 정렬이라 한다. 비슷한 요소 또는 정보에 따라 그룹을 형성해서 정렬 원칙을 세운다.가이드 라인을 활용한다.기준을 정한다.디자인 요소의 방향을 고려한다.디자인 요소에 맞게 한다. 반복의 원칙 동일한 패턴을 반복적으로 배치하는 방식을 말한다. 대비의 원칙디자인 요소를 배치해서 우열 관계를 만드는 방식이다. 색상 대비, 크기 대비, 우선 순위의 원칙, 시선 유도의 원칙, 황금비의 원칙 사용자를 사로잡는 심리법칙 피츠의 법칙: 심.. 이전 1 2 3 다음
