공부 일기

Complex Compnent란? 싱글 컴포넌트를 결합한 컴포넌트로서 간단한 기능 그룹으로 조립됨   Pagination많은 양의 콘텐츠를 여러페이지를 나누고 원하는 페이지로 쉽게 탐색할 수 있는 역할의 컴포넌트 Considerations Breadcrumb현재 페이지의 위치를 알려주는 컴포넌트 Dropdown사용자가 여러개의 옵션 중 한가지를 선택할 수 있게 보조하는 컴포넌트   Select드랍다운과 유사하지만 다중 값을 선택할 수 있는 컴포넌트   Cascader대량의 데이터를 다단계 분류를 통해 선택할 수 있는 컴포넌트    Steps지정된 프로세스의 완료 유/무를 안내하며, 사용자에게 단계별 진행 상황을 시각적으로 표현하는 컴포넌트

Single Compnent란?ui를 구성하는 기본 요소로 더 이상 분해할 수 없는 것을 single compnent로 분류함  -Buttonui에서 가장 많이 사용되고 있는 가장 중요한 componentdefault가 가장많이 쓰임 status -어떤 과정을 겪고난 후의 결과(상태)state - 특정 시점(상황)  1.Radio   2.Checkbox   3. Switchyes or no 둘 중 하나만 선택 가능한 컴포넌트  4. Float가장 상위에 떠있는 버튼   5. Badge빠른 인지와 탐색을 돕기 위해 컴포넌트 근처에 표시되는 작은 문자 또는 숫자 데이터   5. Tooltip보조 설명을 할때 사용되는 컴포넌트*아주 간단한 도움말을 제공하는 컴포넌트이므로 복잡한 텍스트나 장문 지양.

1. Layout이란? 01. Grid system-비교적 정돈되어 보임-전체적으로 통일적으로 보임-기준을 정하면 협업이 수월함-반응형 디자인의 경우 해상도 대응이 용이함   Columns(콘텐츠가 포함되는 영역)->어떤 콘텐츠가 들어가냐에 따라 Columns의 크기가 달라짐Gutters (콘텐츠 사이의 여백) ->내용을 분리하는 고정 영역 Margins(전체 콘텐츠를 뺀 나머지 영역 오른쪽,왼쪽 가장자리)->큰 해상도일수록 더 넓은 Margins 권장  2. Layout Anatomy  Spacing method요소간의 간격

01. Typography란?사용자가 쉽게 읽고 목적에 맞게 경험할 수 있는 중요한 요소 -TypeType ≠ Font → 폰트가 좀 더 큰 개념이라고 볼 수 있습니다.Type은 활자 하나를 말할 수 있습니다.Type -TypographyTypes를 가지고 일종의 그래픽 행위를 하는 것입니다.-Typo오탈자라고 볼 수 있습니다.여기 타이포 있어 = 여기 오탈자 있어Typography 줄임말로 사용 X-Typeface사람의 얼굴처럼 느낌이라는 것을 가지고 있습니다. 02. Hierarchy  Display화면에서 가장 큰 텍스트, 간결한 텍스트 또는 숫자 정도로 작성(필기체,스크립트 스타일의 화려한 글꼴 권장)  Headline주로 큰 제목에 해당하는 영역, 화면에서 짧고 강조되는 텍스트로 사용, 콘텐츠의..

높은 위계 ------> 낮은위계  Iconopraphy란? 01. Product Icons(브랜드와 제품을 시각적으로 표현한 아이콘)  02. System Icons(최소한의 형태로 필수적인 특성을 단순하게 표현) 03. Animated Icons(움직이는 동작을 반영하여 즐거움을 더함)   아이콘 그리드  2픽셀로 스트로크 추천

Design Token -> Design System 요소들의 변수를 저장하는데 사용 디자인토큰->컴포넌트->프로덕트 모두에 사용할 수 있음(동일한 값으로 사용)             Variable (베리어블) 1. 반복 사용되는 속성을 변수처리하여 효율적으로 관리2. 다양한 Color/Space Mode 적용 가능3. 구조적인 사용 방식으로 개발자가 의미 추론 용이

UI란? - 제품의 인터페이스가 어떻게 보이고 기능하는지에 관한 것 상호작용 의사소통                      UI  UX - 경험의 전반적인 느낌UI - 인터페이스가 어떻게 보이고 기능하는지(개발자와 함께 구현)  WireframeWirefram의 목적:디자인의 컨셉, 고객의 요구사항, 콘텐츠들의 기능 요소 등을 모두 파악하여 전략적으로 설계 ex) 제품 제작 요청 -> 요구사항 파악, 메인에 나올 콘텐츠와 기능 요소들 정리 -> 와이어프레임 제작(개발자 : 제품 기능 이해, 디자이너: 컨셉 선정, 디자인 작업, 클라이언트 : 요구사항과 원하는 기능 사전확인) -필수 항목1.화면에 어떤 정보가 나타나야 하는가?2.어떤 레이아웃을 가져야 하는가?3.어떤 세부 모습이 나타나야 하는가?(유형화..

포트폴리오(12~15페이지)Cover(첫페이지) - 리서치/분석 - 문제 요약 UX 전략 - 시안UI  사용성, 총체적 경험 둘다 중요 인지적 관점지각(감각기관에 닿지않음, 핸동 반경에서 접근 자체가 어려움) -> 시각요소 -> 인지 -> 기억 -> 행동   UX디자이너의 관점 - 인지적, 감정적, 상황/맥락적, 행동적 1/8과제(일일팀 선정)   UX역사와 인간공학-프레더릭 테일러의  '과학적 관리법': 작업자 경험 디자인의 작업 효율성과 생산성 향상 -> 지금은 사용자 경험 디자인으로 전이됨 1.작업자의 초점을 맞춰 발전함-토요타의 생산방식-인지과학-제록스,HCI 2.일반인(사용자)를 위한 디자인-도널드 노먼(최초 UX용어 사용)-웹, 모바일 등 미학(보기 좋고 예쁜 디자인) 인간공학(사용하기 쉬운 ..

오전 강의 - 도메인,커머스 커머스: 전자상거래에서 주어진 기간 동안 이뤄진 총 매출액, 총 상품 판매량콘텐츠: 구독 전환율 + 구독 유지율검색 포털 : 전체 유저 방문율 + 검색 쿼리 점유율 GMV가 높다 = 특정기간 동안 거래/전환된 상품액이 크다1.그만큼 해당 기간 동안 많은 고객들이 우리 서비스에서 재화를 샀다.2..그만큼 해당 기간 동안 고객들이 자주 우리 서비스에서 재화를 샀다.3.그만큼 해당 기간 동안 새로운 고객들이 많이 유입되어서 재화를 샀다.4.그만큼 해당 기간 동안 기존 고객들이 자주 혹은 큰 액수로 재화를 샀다. 등등 유입 - 앱설치/ 활성유저/ 실행 (Activation)활성 - 상품 검색, 조회, 장바구니, 찜재방문 - 유저 전환 및 이탈, 재방문수익 - 컨버전, 매출,  APR..

12/16 월클론디자인 선정-유튜브 뮤직 오후-피그마 특강 [레이아웃]Fixed : 너비가 고정되어 있는 컬럼 해상도에 상관없이 고정Fluid : 해상도에 따라 비율이 달라지는 컬럼 퍼센트로 계산  컨트롤+쉬프트+우클릭 -> 오토레이아웃 리스트 보여줌 12/19 목[듀오톤 강의] - 정다영 대표님 1.오버뷰2.디스커버3.디파인4.디벨롭&딜리버5.q&a uxui 디자인 케이스 스튜디오사용자 경험이 제일 중요 !! (user needs)  [아이트래킹의 인기요소]1.동적 이미지(동영상)2.정적 이미지3.아이콘4.텍스트