Hi-Ex

🎯학습 내용Chpater . 2 파운데이션 셋팅2-1 컬러스타일과 플러그인 2-1 컬러스타일과 플러그인primitive : 공통적인 컬러값- 그린400, 그린500... 플러그인 추천 1. color scale generator - 하나의 색으로 6,8,10 단계 색 추출 2. styler제너레이트 스타일- 스타일 생성 3. tailwind color Generator제너레이트 스타일- 스타일 생성 / 3. tailwind color Palettes제너레이트 스타일- 스타일 생성 ----- 5-2 정 5-3 컨 💡 이 글은 제로베이스 UXUI 디자인 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다. 제로베이스, UI, UX, UI..

🎯학습 내용2-4 컬러시스템 2-5 타이포그래피 2-6 아이콘  2-4  컬러시스템1. 디자인 컬러 1-1. 프라이머리, 세컨더리, 그레이스케일 컬러 - 디자인 컬러를 프라이머리, 세컨더리, 그레이스케일 컬러로 구분함 - 프라이머리 컬러는 메인 컬러, 세컨더리 컬러는 보조 컬러, 그레이스케일 컬러는 기본 배경을 의미함 - 컬러 구성 시 레이아웃과 대비를 위해 그레이스케일 컬러를 사용하기도 함 - 컬러 단계별 레인지를 정의하고 화면 디자인에 반영함 - (중요) 레이아웃의 요소별 컬러 대비를 위해 레인지를 정의하는 것이 중요함 1-2. 컬러 조합과 디자인 - 메인 컬러와 세컨더리 컬러를 조합해 디자인 요소를 구성함 - 메인 컬러를 흰색, 세컨더리 컬러를 검은색으로 사용해 대조 효과를 줌 - 메인 컬러의 색..

🎯학습 내용2-1 디자인환경 2-2 레이아웃과 그리드시스템1 2-3 레이아웃과 그리드시스템2 2-1  디자인 환경1. 모바일 디자인의 환경과 규칙 이해 1-1. 모바일 환경의 이해 - 모바일 환경에서의 디자인 규칙에 대해 이해하고 있음 - 모바일 환경 안에서의 주요 축과 그 의미에 대해 설명함 - (중요) 모바일 환경에서의 '직류(180)'의 형태와 '이어레인(70~80)'에 대해 논의함 - 모바일 환경에서 '셀레스(0)'이 어떻게 표시되는지 설명함 1-2. 모바일 디자인의 환경 규칙 이해 - 모바일 디자인 환경에서 사용되는 다양한 규칙과 그 의미를 이해함 - '아파트 층수(엘리베이션)'이 어떻게 화면에서 표시되는지 설명함 - '셀레스(0)'이 어떻게 표시되는지 설명함 - (중요) '밀도(1)'과 '해..

🎯학습 내용2-1 디자인환경 2-2 레이아웃과 그리드시스템1 2-3 레이아웃과 그리드시스템2 2-4 컬러시스템 2-5 타이포그래피2-6 아이콘 2-1  디자인환경1. 모바일 디자인의 환경과 규칙 이해 1-1. 모바일 환경의 이해 - 모바일 환경에서의 디자인 규칙에 대해 이해하고 있음 - 모바일 환경 안에서의 주요 축과 그 의미에 대해 설명함 - (중요) 모바일 환경에서의 '직류(180)'의 형태와 '이어레인(70~80)'에 대해 논의함 - 모바일 환경에서 '셀레스(0)'이 어떻게 표시되는지 설명함 1-2. 모바일 디자인의 환경 규칙 이해 - 모바일 디자인 환경에서 사용되는 다양한 규칙과 그 의미를 이해함 - '아파트 층수(엘리베이션)'이 어떻게 화면에서 표시되는지 설명함 - '셀레스(0)'이 어떻게 표..

🎯학습 내용1-8 Image, Mood board 1-9 Color  1-10 Typography  1-8  Image, Mood board1. 이미지 메시지 1-1. 이미지의 중요성 - 이미지는 의미를 직관적으로 표현하는 강력한 수단임 - 시각적으로 보여주어 강력한 메시지를 전달함 - 하인즈 케첩의 신선한 이미지를 통해 브랜드 정체성 강조함 - 지퍼팩의 신선한 과일 이미지를 통해 건강한 식재료 전달함 - 스니커즈 초코바의 위트 있는 광고 이미지를 통해 가치 전달함 1-2. 이미지 메시지 전달 - (중요) 이미지는 상품의 가치를 직관적으로 보여주어 소비자의 공감을 이끌어냄 - 니베아 선크림의 깨끗한 이미지를 통해 피부를 보호해주는 메시지 전달함 - 레이드 바퀴와 곤충을 잡는 에프킬러의 이미지를 통해 스..

🎯학습 내용1-5 Design Process2 1-6 Define 1-7 Design Authoring Tools   1-5  Design Process2| As is - To beas is 현재 콘텐츠 분석to be 고도화하고 개선 산출물  SWOT (현재 상황을 분석하고 대응 전략을 짤 때) Strengths(강점): 경쟁에서 우위를 점할 수 있는 내부적인 강점Weaknesses(약점): 보완해야 할 내부적인 약점Opportunities(기회): 외부 환경에서 활용할 수 있는 기회Threats(위협): 외부 환경에서 위험이 될 요소✅ 강점: 브랜드 인지도, 뛰어난 기술력❌ 약점: 낮은 시장 점유율, 고객 충성도 부족🚀 기회: 신흥 시장 성장, 트렌드 변화⚠️ 위협: 강력한 경쟁사, 규제 변화   ..

🎯학습 내용Chapter 9. 사용성 테스트 알아보기Chapter 10. 사용성 테스트 수행하기1 Chapter 11. 사용성 테스트 수행하기2 Chapter 12. UX리서처의 포트폴리오    9  사용성 테스트 알아보기1.사용성 테스트1-1.사용성 테스트 개요사용성 테스트란 특정 과업 수행 태스크를 부여해 사용자 행동 관찰하며 프로덕트/서비스 평가하는 것임사용성 평가는 제품 평가가 아닌 사용자 평가 개념으로 이해해야 함사용자는 특정 기능을 인지, 이해, 예측, 실행할 수 있는지 확인하는 과정을 거침사용성 테스트는 눈으로 확인, 이해, 예측, 실행의 단계로 이루어짐사용성 테스트의 목적은 서비스 의도한 구조와 기능을 사용자가 인지, 이해, 예측, 실행할 수 있는지 확인하는 것임  1-2.사용성 테스트 ..

🎯학습 내용Chapter 4. 비즈니스 관점과 사용자 관점 Chapter 5. 더블 다이아몬드 방법론과 리서치 Chapter 6. 리서치의 방법론들 Chapter 7. 퍼소나 알아보기 Chapter 8. 컴포넌트 가이드라인 실습 Ch 4   비즈니스 관점과 사용자 관점🔹 4-1 비즈니스 관점과 사용자 관점제공자관점과 사용자 관점의 간극을 줄이여야 함. 🔹4-2 회사는 대부분 자신들의 서비스를 과대평가한다  🔹4-3회사에서의 UX성숙도 6단계 - 바이어스(bius)확증 편향(Confirmation Bias)사용자가 자신이 믿고 싶은 정보만 받아들이는 경향예: 사용자가 원하는 정보만 쉽게 찾도록 디자인하면, 잘못된 결론을 내릴 위험이 있음------------UX/UI에서 주요한 바이어스 유형확증 편..

🎯학습 내용Chpater . 1 UX & UI ResearcherChpater . 2 리서치에 대한 마음가짐Chpater . 3 사용자를 이해하기  Ch. 0   시작하기🔹 추천도서  《Think Like a UX Researcher》→ UX 리서처처럼 사고하는 방법을 다루며, 사용자 리서치 기법과 실무 적용 방안을 소개.《Don't Make Me Think》→ 사용자가 고민 없이 직관적으로 사용할 수 있는 UX/UI 디자인 원칙을 설명한 웹 사용성 바이블.《Lean UX》→ 애자일 환경에서 UX 디자인을 빠르게 적용하고, 사용자 피드백을 반영하는 실용적인 접근법을 제시.   *애자일(Agile)*이란 프로젝트를 유연하고 기민하게 진행하는 방법론짧은 개발 주기(스프린트)로 빠르게 피드백을 반영하는 게..

🎯학습 내용Chpater . 88-1 UX 디자이너에게 필요한 기본 개념 - PART 18-2 UX 디자이너에게 필요한 기본 개념 - PART 28-3 UX 디자이너 포트폴리오 Memo랜딩페이지: 광고나 검색을 통해 홈페이지를 방문한 유저가 처음으로 착륙(landing)하는 것. 즉, 방문유저가 처음 보게되는 페이지.버튼 레이블 : 버튼에 표시되는텍스트 나 표시문구프라이머리액션: 사용자 인터페이스에서 가장 중요한 작업을 실행하는 버튼이나 동작으로, 보통 가장 눈에 띄게 강조된다.     8-1  UX 디자이너에게 필요한 기본 개념 - PART 1🔹 A/B test: 두 가지 버전의 요소를 비교하여 어떤 것이 더 나은 성과를 내는지 실험하는 방법 A와 BAs is / To be | 예시넷플릭스  | 과..