[UI Design #2] Figma 핵심 기능_코드잇 ❏ 피그마 핵심 기능 및 TIP1. 컴포넌트요소를 컴포넌트화 해서 일괄적으로 수정 가능2. 오토 레이아웃오토레이아웃 기능을 통해서 간격을 보다 편리하게 작업3. 컨스트레인트반응형 및 레이아웃 크기 수정 시, 기준점에 대한 크기 변경4. 프로토타입Low-Fidelity Prototype기능으로 UX기획 단에서 빠르게 검증을 가설할 수 있는 기능과 역할 [Figma] 피그마 활용 과제_프로토타입 ❑ 이미지 슬라이드 스크롤 컨테이너를 활용한 이미지 슬라이드 만들기 ❑ 아코디언 스마트 애니메이트를 활용해서 접었다 폈다 할 수 있는 아코디언 만들기 ❑ 당근앱 글쓰기 버튼 당근 앱의 메인에 있는 글쓰기 버튼이 변하는 과정을 프로토타입으로 만들기 [Figma] 피그마 활용_프로토타입 #1 Goals ▼ 학습 목표 프로토타입의 개념과 용도를 이해 피그마 프로토타입 기능의 구성 피그마 프로토타입 기능을 활용해 기본적인 인터랙션과 프로토타입 제작 #2 Learning Content 1. 프로토타입의 개념 ❑ 프로토타입의 뜻 디지털 제품에선 실제 제품을 만들지 않고 아이디어를 테스트해 볼 수 있는 것을 뜻함 프로토타입을 만들거나 사용해 테스트하는 것을 프로토타이핑이라고 함 ❑ 프로토타입을 만드는 이유 실제 제품을 만들지 않고 아이디어를 검증해 볼 수 있다 팀 구성원들과 시각적인 결과물로 소통할 수 있다. 부족하거나 놓친 부분을 확인할 수 있다. 2. 피그마 프로토타입 ❑ 장점 직관적이다 빠르게 만들 수 있다 ❑ 단점 실제 제품처럼 동작하는 걸 만들기 어렵다 효율성을 떨어트린다 ❑ 피그마 프.. [Figma] 피그마 활용_IA와 FlowChart #1 Goals ▼ 학습 목표 UI설계 시 유의해야 할 점들을 이해 정보구조도(IA)와 화면흐름도(Flowchart)의 차이를 이해 와이어프레임 개념을 이해 #2 Learning Content 1. 다양한 환경에서의 UI차이 ❑ 웹과 앱 앱과 달리 모바일 환경에서의 웹은 기존 사파리 or 크롬과 같은 자체 익스플로앱으로 구동하기 때문에 구조상 앱과 달리해야 한다. 앱은 피츠의 법칙을 활용해서 인터랙션을 구현할 수 있는 방법들이 존재하지만 웹 환경에서는 구동하기 까다롭다. ❑ OS별 앱의 경우 반드시 앱마켓에 등록을 해야하기 때문에 앱 마켓에서 제시하는 심사 가이드라인을 따라야 한다. IOS와 Android의 큰 차이점은 하단 네비게이션과 홈 인디케이터의 차이로 디자인을 달리 해야한다. ※ 차이에 따른 U.. [Figma] 피그마 활용_디자인 시스템 #1 Goals ▼ 학습 목표 팝업과 모달을 이해 다이얼로그 컴포넌트를 만들고 그 그조와 기능을 이해 컨트롤 요소들을 살피고 체크박스와 라디오의 차이 이해 컴포넌트 지식 및 기술 활용해 디자인을 설계 #2 Learning Content 1. 컴포넌트 ❑ 합성 컴포넌트와 컨테이너 컴포넌트 합성 컴포넌트는 대부분 버튼 컴포넌트에 파운데이션 또느 ㄴ컴포넌트가 여러개 합쳐진 형태 컨테이너 컴포넌트에는 바텀시트, 다이얼로그, 리스트, 카드 등 복잡한 구조의 컴포넌트들이 존재 2. 모달 UI ❑ 팝업 팝업 : 팝하고 튀어나온다는 의미로 UI에서는 현재 화면 위에 새로운 화면을 띄우는 것 윈도우 팝업 : 인터넷 창을 하나 더 띄우는 방법인데, 보안상에 이유로 현재는 잘 사용하지 않음 -> 새로운 인터넷 창이 뜨기 때.. [Figma] 피그마 입문 #1 TASK ▼ 학습 목표 피그마가 어떤 툴인지 알고 피그마를 사용하는 실무 환경을 이해 피그마 인터페이스, 주요 메뉴와 기능 파악 피그마 핵심 기능인 프레임과 그룹의 차이 오토레이아웃과 컨스트레인트를 활용 #2 Figma Tool 1. 피그마 소개 ❑ 피그마 특징 언제 어디서나 사용이 가능 디자인부터 개발, PM(or 기획)까지 올인원 제품 강력한 커뮤니티 쉬운 학습 ❑ 피그마의 파일 저장 방식 기본적으로 피그마 계정에 파일을 온라인으로 저장하는 클라우드 방식 내 컴퓨터에 저장하는 방식 로컬 방식도 지원 ❑ 도형 만들기 기본적인 도형 생성 및 라운드 값(곡률) 생성 핸들을 이용한 스케일 값 변경 and 각도 조절 이미지등을 이용한 도형에 삽입 2. 핵심 테크닉 ❑ 프레임과 그룹 프레임(Frame) :.. [Assignment] 디자인 입문 개인과제_문제 정의, 솔루션 도출 #1 Assignment ▼ [11번가 App] 문제정의, 솔루션 도출 ❑ 문제 정의 ▷ 페르소나 : 할인쿠폰 광고를 보고 처음 이용하는 고객 오프라인보다 이커머스를 이용하는 고객이 늘어났고 차별화를 위해 익일, 새벽 배송, 다양한 이벤트 등 바쁜 현대인들에게 중점을 두고 분석하였다. 상품 콘텐츠를 보는 것이 아닌 실질적으로 제품을 구매해야 하며, 아마존과의 전략적 제휴 맺음으로 다양한 이벤트들을 하나의 App으로 유입함으로 깔끔하고 심플함이 주목적일 것으로 사료되었다. 그렇다면 나와 같이 네이버, 쿠팡에 익숙한 사람들을 유입하려면 어떠한 접근이 필요할까 하여 '할인쿠폰 광고를 보고 처음 이용하는 고객'으로 페르소나를 정하고 이를 분석해 보았다. ▷ 문제 정의 처음 이용하는 고객은 무엇을 먼저 클릭해야 .. [UXUI Design] UXUI 디자인 입문_Chapter 6 #1 TASK ▼ 학습 목표 레퍼런스 분석 개념 및 필요한 상황에 적용 UX/UI 디자인 패턴을 이해 및 활용 도메인별 특징 파악, 레퍼런스 분석 #2 Design Tools 1. 레퍼런스 분석 ❑ 레퍼런스 분석이란? 여러가지 사례를 상세하게 분류해 생각해보고 도움이 될만 것들을 수집하는 것 UX/UI 디자이너는 시장과 사용자의 문제를 발견하고, 여러 고민을 통해 해결책을 제시 좋은 사용성을 가진 디자인과 나쁜 UX 패턴을 가진 디자인을 고민해 보면서 사고력을 기를 수 있음 ❑ 레퍼런스 분석 방법 ▹ 화면 구조 분석 * 화면이 각각 어떤 요소들로 구성되어 있는지 분석 - 파운데이션 : 더 이상 속성으로 쪼개지지 않는 가장 기본이 되는 요소 ex) 색상, 폰트, 아이콘 등 - 엘리먼트 : 파운데이션이 모.. 이전 1 2 3 4 다음
