UXUI 디자인 입문(23.12.18~24.01.29)/[01.02~01.22] ▸ Figma 활용법 (21) 썸네일형 리스트형 피그마 활용법(2)_1주차 숙제 #숙제 피그마 활용법(1)_4주차 정리 [수업 목표] 피그마의 컴포넌트 개념과 분류를 이해합니다 버튼 컴포넌트의 개념과 구조를 이해합니다. 텍스트필드 컴포넌트의 개념과 구조를 이해합니다. -컴포넌트 : 앞으로 계속 볼 컴포넌트가 무엇인지, 피그마에서 컴포넌트를 쓸때 필요한 용어와 기능 -버튼 컴포넌트 : UI의 대표. 어떤 종류, 어떤 구조로 구성되어 있는지 상세하게(버튼별 상태, 구조, 속성) -텍스트필드 컴포넌트 : 텍스트필드의 개념, 주의해야 할 점, 상세하게(상태, 구조, 속성) 1. 컴포넌트 -개념: 어떤 것을 만들기 위한 재료/구성품 원자 요소(Atom)를 결합해서 만든 분자(Molecule) 단위의 구성 요소 -유의할 점: 버튼이 하는 일이 중요(모양이 중요X), -종류 : ① 액션 : 사용자가 중요한 행동을 수행할 때 사용 ② .. 피그마 활용법(1)_3주차 정리 [수업 목표] UI 설계의 기본 원리와 기초 디자인 지식을 이해합니다 디자인 시스템의 설계 원리와 원칙을 이해합니다 기본적인 디자인 시스템 요소를 만들 수 있습니다. 피그마 디자인시스템(UI키트 정도의 크기) 폰트, 컬러 만들어보기 (1)UI 디자인 원리 기초 (2).디자인 시스템의 개념과 원리 : 앱/웹을 일관되게 설계 할 수 있게 해주는 것/ 아토믹 디자인 (3)파운데이션과 스타일 : 컬러와 폰트 스타일 1. 디스플레이와 픽셀, 배수 디지털화면Display (폰,컴,모니터,전광판,키오스크) - 픽셀이라는 정말 작은 칸으로 이루어짐. -해상도 : 화면의 선명한 정도. 픽셀의 개수(가로줄의 픽셀*세로줄의 픽셀) -해상도와 픽셀의 관계 : 픽셀의 수가 같을 때 화면이 커지면 픽셀이 커짐/ 가로와 세로가 2.. 피그마 활용법(1)_1,2주차 정리 [수업 목표]피그마 핵심 기능인 프레임과 그룹의 차이를 이해하고 사용합니다.피그마 프레임을 정리하고 정렬하는 방법을 배웁니다.오토레이아웃과 컨스트레인트를 활용해 레이아웃을 만들고 조정하는 방법을 이해합니다.프레임과 그룹 - 입문과 심화를 나누는 기준이 됨. 중요! -프레임 : 블록 개념 -그룹 : 개체를 붂는 개념 -정렬개념 : 화면에 배치하는 규칙 -오토레이아웃 : UI에서 가장 중요한 개념, 좀 더 빠르고 쉽게 레이아웃을 만들 수 있게 도와주는 개념 -컨스트레인트 : 어떤식으로 움직일지 정하는 것. 1. 프레임과 그룹 -코드와 디자인 : 박스 형식으로 디자인 해야한다.(코드가 디자인을 레고처럼 쌓아서 박스 모델을 만듦.) -프레임과 그룹의 개념 : 개체를 만드는 기본적인 단위, 차이는 큼 -프레임(=.. Figma 활용법 기초 [오전] 오전에는 저번 이론 수업을 보충하는 시간을 가졌다. 저번주에 잘했던 못했던 열심히 진도에 맞춰서 몰입해서 공부했던 탓일까.. 오늘은 집중이 하나도 되지 않았다. 복습할 건 많지만, 왜때문인지 손이 잘 안 가고 집중도 잘 안되는 이 마음이란 무엇인가. 내배캠 수업을 진행하면서 오늘 같은 날은 처음이었던 것 같다. 늘 항상 집중해서 스케쥴 떠놓고, 그 스케쥴 맞춰서 공부에 몰입하는게 그간의 빅재미였는데.. 오늘은 왜 이렇게 노잼이었을까. 다시 마음을 다잡고 진지하게 수업에 임해야 겠다. 이론 수업을 나만의 노트로 작성해 두었기 때문에 프린트해서 간혹 들여다본다. 까먹지 말고 틈틈이 봐야겠다. 이상 끗. [Figma Start !] 오늘 피그마 수업을 듣기위해 기다려왔다. 저번주에 이론 수업 또한 매.. 이전 1 2 3 다음
