Study/Design (21) 썸네일형 리스트형 [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) :.. [UXUI Design] UXUI 디자인 입문_Chapter 6 #1 TASK ▼ 학습 목표 레퍼런스 분석 개념 및 필요한 상황에 적용 UX/UI 디자인 패턴을 이해 및 활용 도메인별 특징 파악, 레퍼런스 분석 #2 Design Tools 1. 레퍼런스 분석 ❑ 레퍼런스 분석이란? 여러가지 사례를 상세하게 분류해 생각해보고 도움이 될만 것들을 수집하는 것 UX/UI 디자이너는 시장과 사용자의 문제를 발견하고, 여러 고민을 통해 해결책을 제시 좋은 사용성을 가진 디자인과 나쁜 UX 패턴을 가진 디자인을 고민해 보면서 사고력을 기를 수 있음 ❑ 레퍼런스 분석 방법 ▹ 화면 구조 분석 * 화면이 각각 어떤 요소들로 구성되어 있는지 분석 - 파운데이션 : 더 이상 속성으로 쪼개지지 않는 가장 기본이 되는 요소 ex) 색상, 폰트, 아이콘 등 - 엘리먼트 : 파운데이션이 모.. [UXUI Design] UXUI 디자인 입문_Chapter 5 #1 TASK ▼ 학습 목표 사용성을 지키면서 심미적인 UI와 인터렉션을 구현할 수 있는 비주얼 역량 게슈탈트 심리학이 무엇인지 세부 원리들을 이해 UX비주얼 디자인 원칙을 이해하고 디자인 원칙을 활용 UX/UI 심리학 법칙의 유용성을 알고 필요한 원칙을 찾아 학습 #2 Learning process 1. 디자인 원칙 ❑ 디자인 원칙이란 인지심리학의 관점에서 디자인할 때 지켜야 할 규칙을 정해높은 것 디자인 원칙은 많은 사람들이 비슷하게 느끼고, 행동하는 방식에 기초해 디자인하는 방식 디자인 원칙을 기반해 디자인하면 사람들이 편안하게 느끼고 사용성이 높은 제품을 만들 수가 있음 ❑ 디자인 원칙의 종류 게슈탈트 심리학 사람이 이미지를 인식할 때 주변에 있는 요소 간의 관계와 맥락에 영향을 받는다는 이론 .. [UXUI Design] UXUI 디자인 입문_Chapter 4 #1 TASK ▼ 학습 목표 디자인 툴이 무엇이고 어떤 것들이 있는지 학습 인터페이스 디자인 툴에 대해 학습 상황에 맞는 프로토타이핑 툴을 선택 #2 Design Tools 1. 디자인 툴 ❑ 인터페이스 디자인 툴 디지털 제품의 화면 인터페이스를 그리기 위해 사용하는 툴 인터페이스 디자인 툴은 주로 벡터 방식을 기반 - 디자인한 화면을 여러 크기로 늘리고 줄여도 문제가 없도록 하기 위한 목적 ❑ 그래픽 디자인 툴 비주얼 그래픽 이미지를 만들 때 사용 사진을 편집하거나 일러스트를 그려서 원하는 이미지를 만듦 ❑ 3D 그래픽 디자인 툴 3차원의 그래픽을 만들 때 사용 ❑ 모션 그래픽 디자인 툴 그래픽 리소스를 활용해서 영상을 만들거나 촬영한 영상을 편집할 때 사용 ❑ 비트뱁과 벡터의 이해 ▹ 픽셀 - 디지.. 이전 1 2 3 다음
