본문 바로가기

UXUI 기타

(18)
[24.03.04] 스탠다드 특강(4) 0 to 1 MVP 프로덕트 디자인 특강 1. 0→1단계 : 백지상태에서 새로 제품을 만드는 단계 2. 1→10단계 : (1)목표-제품 안정화, 수익 창출 (2)사용자가 기대하는 기능을 제공하고 있는지, 안정된 수익을 실현하고 있는지 3. 10→100단계 : 제품을 대규모로 확장하고 시장 내에서의 입지를 강화하는 단계 (1)목표-시장 확장, 브랜드 인지도 증대 (2)초기 성공을 넘어 지속 가능한 성장을 이루고, 시장 점유율 증가하고 있는지를 검증 4. 성공적인 프로덕트의 기준 (1) 사용자에게 실제 가치를 제공하는가? - 성공 지표 : 사용자 참여율, 전환율, 유지율, 재방문율, 만족도 등을 통해 평가 - 예시 : 사용자가 일상에서 직면하는 특정 문제를 해결해 주거나, 효율적인 대안을 제시하여 시간, 비..
피그마 심화 섹션 - 김태길튜터님 피그마 변수(Variable) - 디자인토큰, 상품 가격, 장바구니 수량, 로그인 여부, 상품 정보 구분, 다크모드/라이트모드 (Conditional) - 01. 디자인 토큰(Design Token)#2A79FF → Blue500 헥스코드에 이름 부여 → Color-Primary이름 부여제품 맥락이 없는 단순한 raw value → 제품 안에 맥락이 들어있는 이 색상의 고유값=토큰 → 의미를 가지는 색상component token으로 한번 더 적용시켜 준다. 어디어디에 사용해 줄거야 라는 기준을 정해 줄 수 있음. 디자인 조직이 확실히 구축된 곳에서 사용할 수 있다.피그마 변수 = 디자인 토큰 아니야~#숫자 변수(number)#글자(string)#다크모드/라이트모드#장바구니 숫자
[24.02.22] 스탠다드 특강(3) 사용자 친화적 UI를 위한 체크리스트 및 디자인 팁 -사용자 친화적 UI를 위한 핵심 행동의 이해 사용자 친화적 UI - 사용자 경험을 최 우선 고려한 인터페이스.(사용자의 만족도를 가장 극대화 시키는 것) 1.직관성과 일관성 - 사용자가 최소한의 노력으로 인터페이스를 이해하고 어려움 없이 작업을 수행 해야 함. Tip. 01.익숙한 소통으로 직관성 높이기 색감-붉은색/녹색 아이콘-취소버튼 등 02.시각적 위계를 활용하여 직관성 높이기 - 사용자가 쉽게 작업을 수행할 수 있게 한 화면에 한가지 행동에 집중 한 화면에서 한가지 액션에 집중할 수 있도록. 03. 공통 UI를 활용하여 시각적 일관성 유지 - UI 요소의 위치와 스타일을 일관되게 유지 04.색상을 활용하여 시각적 일관성을 유지 2. 가독성과 이..
[24.02.22] 스탠다드 특강(2) 디자인 시스템 이해하기 01. 디자인 시스템의 개념과 중요성 이해 02. 디자인 시스템의 주요 구성 요소 파악 03. 효과적인 활용 방법 이해 디자인 시스템이란 ? 규모에 맞게 디자인 관리를 위한 원칙과 표준, 스타일 가이드 및 구성 요소의 모음 →google material design system, Microsoft Fludent design system, adobe's spectrum design system - 01. 디자인 시스템이 필요한 이유 (1)일관성 : • 제품 내 시각적 일관성 유지 -예)데스크톱, 모바일, 패드 등 사이즈가 달라져도 일관성 • 여러 제품 및 회사 전반에 걸친 일관성 유지 -예)아도비의 일러스트, 포토샵, 인디자인, 에프터이팩트, 등. 구글도 같은 경우 이메일, 영상콜,..
포트폴리오 섹션 - 박주연튜터님 보호되어 있는 글입니다.
[24.02.22] 스탠다드 특강(1) UX 디자인 슬로건을 살펴보는 이유는? 복잡한 UX 디자인 원칙과 개념을 쉽게 접근 좋은 UX디자인이 무엇인지 탐구 다양한 사례를 통해 슬로건 이해 - 01.사용자는 디자이너가 아니다. 유저 페르소나, 유저 시나리오, 유저 인터뷰, 유저 테스트 = 실제 사용자의 문제를 파악하고 해결 위해. -이 지표가 성과에 큰 영향을 미치기 때문에 사용자를 이해해야 한다. (1) 행통 패턴 식별하기 : 데이터 분석(유저 전의, 특정 행동 전환률, 엔드콜, 구매 전환률,이탈률 등) (2) 전환률/이탈률 분석 (3) 사용자 세그먼트 분석 (4) A/B 테스팅 활용(간접적으로) 직접적인 부분은 유저 서베이, 사용자의 말에서 인사이트 도출,(실제 구체적인 문제와 불편함 등을 해석하고 분석하는 작업이 필요함) TIP. 사용자 ..
배달 앱 - 쿠팡이츠/배달의민족/라이더 리뷰 분석 배달 앱 - 쿠팡이츠 / 쿠팡이츠 라이더 / 리뷰 분석 배달의민족 / 배달의민족 라이더 / 리뷰 분석
엔터테인먼트 앱/웹 - 코로나19 이후 메타버스 [레퍼런스 분석하는 방법] 1. 화면 구조 분석 : 사람마다 다른 기준, 파운데이션-앨리먼트-모듈-페이지 2. 디자인 원칙 기반 분석 : 사용성, 심미성, 다양한 관점, 좋음/나쁨 둘다 → 논리적인 근거 3. 인사이트 정하기 : 제품에 참고하고 적용할 것을 그룹화, 아쉬운점/나쁜점의 개선점도 찾아보기지금 우리가 사용하고 있는 젭(ZEP) 서비스를 생각해보자. 우리는 가상공간에 수강생 모두가 모여서 자리에 앉아 함께 공부한다. 필요하면 보이스로 말을하고, 얼굴을 서로 마주볼 수도 있다. 심지어 작업하고 있는 컴퓨터창 화면도 손쉽게 다수의 사람들과 공유하며 이야기 나눌 수 있다. 이런걸을 우리는 메타(가상.초월)버스(우주)라고 한다. 우리는 이제 메타버스가 익숙해져간다. 그런데, 우리는 사실 예전에도 경험한..