디자인공부 25

CH 7 | 프로토타입 | UIUX 디자인 스쿨 주 3일반 학습일지

🎯학습 내용Chpater . 7 디자인 평가 및 테스트 7-1 프로토타입7-2 프로토타입의 제작과 활용 7-1  프로토타입 prototype🔹 프로토타입이란1. 화이트보드2. 형식3. 리얼리스틱  왜 필요할까? 효율적인 실행과 빠른 수정  Lean UX -   Lean UX 관점이점- 불필요한 커뮤 시간 줄일 수 있다.- 효율적인 업무& 커뮤니케이션... 1. LO-FI2. HI-FI  1. LO-FI특징: 비용적 측면 용이, 효율적인 시간.장점: 가벼운 마음으로! 2. HI-FI: 실제 처럼 만드는 것실질적인 사용성 평가 가능    🔹 프로토타입 제작툴1. LO-FI     |총정리 7-3  프로토타입의 제작과 활용🔹 프로토타입 제작 프로레스- 목적을 정해야 불필요한 에너지(시간, 선택과 집중)..

CH 6 - (2) | 프로세스와 요구사항 / UI디자인 | UIUX 디자인 스쿨 주 3일반 학습일지

🎯학습 내용Chpater . 66-3 인터페이스 디자인: 프로세스와 요구사항 정의6-4 인터페이스 디자인: UI 디자인6-5 인터페이스 디자인: 디자인 평가  6-3  프로세스와 요구사항 정의🔹 인터페이스 디자인 프로세스인터페이스 디자인: 사용자가 시스템으로 과업을 달성하기 위해 조작하는 영역 1. 목적과 디자인 컨셉2.디자인 환경- hw/sw - 디자인 시스템    - 범위(전체, 부분)3. 정의- 요구사항- 컨셉- 기능. ia- 규제 체크4. UI flow와 와이어플레임5. 리뷰-ua디자이너(명칭 검수)6. 디자인 sign off---------개발 팔로우업  🔹 요구사항 정의요구사항은 목적>시스템환경>정의 세번째 단계에서 하는 거지구성버전명소스요구사항 타입요구사항 우선순위설명   요구사항 정의..

CH.5 | 디자인 컨셉과 정보구조 | UIUX 디자인 스쿨 주 3일반 학습일지

🎯학습 내용Chpater.5 디자인 컨셉과 정보구조디자인 컨셉정보 구조 설계  5-1  디자인 컨셉🔹디자인 컨셉이란?스케치, 이미지 or 텍스트로 이뤄진 핵심 idea컨셉 이미지가 없으면본인의 배경지식으로 컨셉을 떠올리게 됨  - 목적: 방향 설정, 이해관계자 원할한 커뮤니케이션, 의사 주장 도움 ...-이해하기: 온전한 구현 보다 디자인 컨셉 / 이상과 현실의 중간지점 UX 디자인 컨셉1. 목표2. 범위3. 정황4. 전략 🔹디자인 컨셉 예시 1. 사용자 앱 실행 시2. 서비스 범위3.전    정형화된 형식정보구조 : 서비스 스트럭쳐수집 리셔처 이정보로 이 기능으로 도출...대략 이런 비쥬얼로 보일 거 같다 =직관적   -컨셉맵: 방사형 연관노드동그라미 = 노드노드 사이 관계를 나타냄검색엔진 최적화..

CH 4| 퍼소나 | UIUX 디자인 스쿨 주 3일반 학습일지

🎯학습 내용 Chpater . 44-1 퍼소나 Persona4-2 퍼소나의 제작과 활용 5-1  퍼소나 Persona🔹 퍼소나란? : 서비스 주요 사용자* 일반화의 주의점:높은 연령대라고 신규 서비스에 호기심이 적다고 할순 ㄴㄴ 아이티분야 종사자일 경우 다름    만들어 지는 과정컨셉은 왜 필요할까?사용자 조사 커피를 마시는 사람의 조사우리 서비스가 집에서만  펴소나 = 대표사용자퍼소나 4~6명 프라이머리 정해지는 것이 중요기능정보가 엄청 많으면 반드시 사용하기 어렵고 시각적으로 직관적인 디자인도 어렵다디자인디시즌 할 때 퍼소나 유용사용자가 된척을 해 볼수 있다.  우린 사용자를 잘 알고있지 않다. 얼죽아..  퍼소나의 대표 사용자의 니즈 표현  인터넷 사용 능력애용하는 브랜드불만사항         ..

CH 3| 유저스토리맵 | UIUX 디자인 스쿨 주 3일반 학습일지

🎯학습 내용Chpater . 3-5 유저 스토리 맵  3-5  유저 스토리 맵 🔹 유저 스토리 맵핑(User Story Mapping)이란?: 제품기능을 사용자 경험의 흐름에 맞춘 계층적 정리 방법- 기원: 애자일(Agile) 방식 - 한 부분만 먼저 만들어서 보여주고 피드백을 받은 후, 다시 고쳐나가는 방식                                         -> 제품 개발의 우선순위를 정하기 위한 기법- 역할: 사용자의 목표와 행동을 바탕으로 기능을 정리하고 개발 순서를 정하는 데 사용됨  🔹 유저 스토리 맵핑과 저니 맵의 차이점구분스토리맵유저 저니맵목적제품 개발 우선순위 설정사용자 경험 개선중심 요소기능 중심 (개발 관점)감정 & 경험 중심 (UX 관점)형태계층적 구조 (에..

CH3 | 사용자여정지도 | UIUX 디자인 스쿨 주 3일반 학습일지

🎯학습 내용Chpater . 3사용자 여정 지도지도 활용 5-1  사용자 여정 지도 ( User Journey Map)| 사용자 여정 지도: 사용자의 행동 감정 상호작용하는 접점을 시간 순서로 정의한 것    - 기대요인 : 페인포인트 발굴 + 잠재적인 기회요인 캐치사용동기시작점행동감정도구시간: 사용자가 얻고자 포인트가 잘 드러남특징필요에 따라 유동적인 양식.Doing : 사고에 흐름에 따른 여러 행동 과정(터치포인트 多)대규모: 회사 부서 담당 구분주의점확증편향: 사용자를 잘 이해하고 있다는 착각. (나도 사용자 아니야? =/ 대표성 x)유의어: 객관성 잃음, 높은 근자감활용팀원 및 이해 관계자들의 공통된 이해를 도움의사결정의 주요 기준기회요인(opportunity)과 문제점(problem)basic..

CH 2 | 사용자 조사 방법 & 준비 | UIUX 디자인 스쿨 주 3일반 학습일지

🎯학습 내용Chpater . 22-1 사용자 조사 방법2-2 사용자 조사 준비 2-1  사용자 조사 방법 사용자 조사란? :다양한 조사 방법론을 활용하여 사용자의 사용 행태와 비언어적인 요구사항을 도출해내는 조사!   우리는 조사 대상자가 될 수 없어..(사용자 조사 없어도 우리도 사용자니까 조사가 따로 없어도 되지 않을까?  틀린 이유1. 이해관계자라서: 타사서비스 느끼는 감정이 다름2. 대표성 없음: 배달 서비스 특성상, 나이 직업 거주지 라이프스타일 다름. (편향된 가정 우려) 사용자 조사 타이밍: 디자인 컨셉 잡기 이전에 사용자 조사의 정보1. 언어적 정보: 저는 이메일은 ~로 써요2. 행동(비언어적) 정보: 눈을 비비거나 물을 많이 마시면 더운가? 공기가 건조한가?                ..

CH 8 | UIUX 디자인 스쿨 주 3일반 학습일지

🎯학습 내용Chpater 8. 공유와 협업8-1 에셋 내보내기8-2 팀 라이브러리8-3 피그잼 8-1  에셋 내보내기  내보내내보낼 레이어 선택:내보내고자 하는 레이어나 요소를 선택. 내보내기 옵션 열기:오른쪽 패널에서 "Export" 섹션내보내기 형식 선택:내보낼 파일 형식(PNG, JPG, SVG 등) 선택배수(1x, 2x, 3x 등) 설정 배수1x 배수: 기본 해상도, 일반적인 화면에서 사용됩니다.2x 배수: Retina 디스플레이나 고해상도 화면에서 사용되는 배율로, 이미지나 아이콘이 더 선명하게 보이도록 크기를 두 배로 확대해서 디자인합니다.3x 배수: 2x보다 더 높은 해상도를 요구하는 화면에 적합합니다.피그마에서 배수는 주로 아이콘, 이미지 등의 요소를 다양한 해상도에서 잘 보이도록 디자인..

CH 7 | 프로토타입 | UIUX 디자인 스쿨 주 3일반 학습일지

🎯학습 내용 (54m)Chpater 7. 프로토타입7-1 인터렉티브 컴포넌트 스위치 인터랙션7-2 버튼 인터랙션7-3 캐러셀 인터랙션7-4 모달창 인터랙션 7-1  인터렉티브 컴포넌트 스위치 인터랙션  Practice  프로토타입 바탕 누르면 인터렉션 요소 보여줌.(파악용이지 100% 구현은 ㄴㄴ)k 컨테이너:  UI 요소들을 그룹화하여 레이아웃을 관리하는 구조적 프레임    컴포넌트 내부 프로토타입  오브제 제작컴포넌트 생성 해당 컴포넌트에 프로토타입 적용new 페이지 제작해둔 컴포넌트 활용프로토타입 실행    Win  컴포넌트 내 프로토타입페이지간의 이동(오브젝트에 프로토타입) vs 오브제간의 이동(컴포넌트에 프로토타입) : 후자. 베리언트로 활용하는게 더 좋아.페이지 단위보다 오브제 단위인 것(실..

Ch 6 컴포넌트와 베리언트 | UIUX 디자인 스쿨 주 3일반 학습일지

🔍이전 학습 일지CH 5 | 정렬과 레이아웃 | UIUX 디자인 스쿨 주 3일반 학습일지 🎯학습 내용 강의 시간: 48mChpater 6 컴포넌트와 베리언트6-1 컴포넌트와 인스턴스6-2 베리언트의 활용  6-1  컴포넌트와 인스턴스  컴포넌트 설정[ctrl + alt + k]     컴포넌트 형태인스턴스: 컴포넌트 복제품    스타일 vs 컴포넌트 차이스타일: 컬러 그림자 텍스트 등록컴포넌트 외 복잡한 요소 등록  컬러, radius, 그림자, 스트로크 적용주니 변화됨인스턴스 - 변화 영향 ㄴ, 단, 인스턴스 요소 변경시 해당 요소만 독립 대치됨 Assets컴퍼넌트 없애면 다 없어짐  ----- 페이지를 나눠서 컴포넌트 페이지 원본 보관용으로 만들어두면 좋음 각각 오브제 컴포넌트 설정- 다중 설정시..