디자인 시스템에 대해 탐구할 수 있는 기회였다. 특히 쇼피파이가 제공하는 피그마 디자인시스템의 경우
이커머스라는 복잡한 어드민에 대한 요소들이 잘 구현이 있어서 어드민 구축에 도움이 될거란 생각이 들었다.
기존에 어드민 작업을 할 기회가 있었는데 ANT 디자인이나 부트스트랩 스타일도 도움이 되었지만
다양한 상황과 변수를 고려한 디자인 시스템이 더 체계적이지 않나 생각이 들었다.
구글 UX 자격증 - hi-fi 디자인과 프로토타입을 피그마에서 구현하기
2023/11/15
모듈 1
1. 목업
마지막 재춤을 보여주기 위한 높은 퀄리티의 디자인
- 사람이 A에서 B로가는데 여정에서 중요한 순간은 무엇인지?
2. 타이포그래피
타이포그래피는 텍스트와 툴들의 사용 => 디자인의 하이라키를 더해줌
- 타입 분류 사용하기: 세리프, 산세리프
- 타입페이스 선택하기: 전체적인 문자의 스타일 웨이트, 형태 등
- 폰트를 고르기: 크기, 두께, 강조점
-타이포그래피 하이라키
어디에 사용자들이 집중을하고 정보를 찾아야하는지 명확하게 분류
예) 헤드라인은 두껍고 굵은 폰트 사용 => 강조
- 읽기 쉽게 함 예) 식품 상품구성표
읽고, 네이게이션이 쉽게 진행하기
- 브랜드 가이드라인 맞추기
가치와 미션을 나타냄
- 카피
로렌입숨은 이해관계자를 혼란스럽게 할 수 있음
디자인의 크기를 지정하였다면 후에 텍스트 내용 변경시 전체 레이아웃에 영향 받음
3. 색상
사람의 행동, 감정, 인상에 영향을 미침
- 강조를 더함
- 60-30-10룰: 60%를 중립적인 컬러 사용, 2번째 서브컬러를 30%를 사용, 세번째 강조 컬러를 1%를 사용
예) 화이트 60%, 그레이 30%, 오렌지 10%
컬러의 조합을 생각하기
- 디자인의 접근성을 생각하기
- 다양한 환경과 디바이스로 컬러를 체크해보기
3-1. 색상에 대한 접근성
종류
- 색맹
적록색맹, 청황색색맹, 완전 색맹
=> 해결
- 컬러 외의 아이콘으로 구분
- 패턴과 질감의 대비
- 조합시 구분하기 어려운 색상 피하기
- 낮은 대비 감도:
물체가 어둡거나 불분명하여 물체 식별이 어려움: 최소 대비 4.5:1 ~ 최대대비 21:1
- 감광도:
빛 민감성: 다크모드, 고 대비모드 추가
Easy Checks – A First Review of Web Accessibility
3-2. 아티클
=> 색상이 인간의 감정에 미치는 영향 고려하기, 색상의 문화적 차이 고려하기, 색상을 더 밝게, 흐리게, 어둡게 등으로 조절하기
An Introduction to Color Theory and Color Palettes
머터리얼 디자인 가이드를 통해 알아보는 색조합
개인적으로는 이 조합이 마음에 들었음
4. 아이콘
주제나 아이디어에 걸맞는 그래픽 시스템
- 글로벌 유저들에게 이해를 도움, 필수의 기능으로 이어져서 낭비되는 공간을 줄임
- 다른 페이지나 위치로의 쉬운 전환을 도와줌
- 글로벌 유저들을 도와줌
- 디지털, 아날로그 둘다 사용 가능
- 이해가 쉽도록 텍스트 라벨 추가
- 브랜드를 들어냄 예) 구글의 메일, 드라이브 등의 프로덕트의 브랜드
4-1. 시각적 요소
- 선: 공간의 두점을 연결, 아이디어 연결/ 구분 / 디자인 강조
- 크기: 매우 작은 휴대폰 화면에 맞춰 디자인 / 디자인을 더 좋게, 더 나쁘게
- 모양: 길이와 넓이
- 이미지: 스토리 전달, 텍스트 없이 영향, 시각적 강조
5. 이미지
이미지의 장점
- 단어를 사용하지 않고 소통함
- 유저들에게 감정적인 반응을 불러옴
- 제품을 경쟁으로 부터 멀어지게함 (텍스트와 비교시)
6. 설계시 고려사항
- 하이퍼링크 텍스트: 밑줄+파란색으로 표기하며
깔끔한 페이지를 위해 적당이 추가, 항상 링크여야 함, 모든 링크가 동일하지 않음, 설명이 포함된 링크 (이동에 대한힌트)
- 버튼: 특정 작업 수행
버튼을 버튼 처럼 만들기, 일관성 유지하기, 버튼 주변에 여백 포함
7 Basic Rules for Button Design
친숙한 디자인, 공백, 예상되는 위치에 두기, 기능을 설명하는 라벨을 붙이기, 버튼 크기 조정하기, 순서를 잘 지키기, 버튼을 적당히 사용하기, 상호작용에 대한 시각적/청각적 피드백 제공
- 입력: 시각적 단서를 사용하기, 고스트 텍스트(힌트테스트), 하위범주 사용하기
컨테이너 크기 입력 예상하는 크기에 비례하기, 컨테이너 쉽게 찾을 수 있게, 스테이터스를 확인하는 비쥬얼, 버튼과 구별하기,
시각적 스타일 고려하기, 아이콘, 라벨텍스트(항상표기하기), 플레이스 홀더 적기, 포커스 상태 제공, 접두사/접미사 제공,
후행 아이콘(지우기, 체크 등), 가이드/오류 텍스트
7. 레이아웃
페이지에 요소들을 정렬하는 방법, 중요한 정보가 눈에 띄도록
7-1. 그리드를 사용하기
- 기본 그리드: 디자인에 요소를 쉽게 두게하는 페이지를 사각형으로 나눈 선들
- 레이아웃 그리드: 디자인에서 요소를 정렬하기 위한 칼럼과 간격들
사용하는 이유
- 명확함과 일관성을 만들기 위해
- 디자인 과정을 빠르게
- 디자인의 조합을 만들기 편하게 하기 위해서
- 레이아웃 그리드를 사용하여 더 나은 UI 디자인 구축
8. 컨테인먼트 (격리)
디자인들이 가깝과 정렬되어 보이게 시각적인 베리어를 씀
- 디바이더: 섹션을 나누는 라인
- 테두리
- 색 채우기
- 쉐도우: 공간감을 줌
9. 공간
- 화이트 스페이스: 디자인에서 요소간의 간격
- 집중해야할 요소에 대한 강조 예) 구글 페이지의 구글 서치바
- 유사한 내용을 묶어줌
- 가독성을 높여줌
*버튼간 충분한 공간이 없다면 버튼을 잘못누름
10. 앱 디자인의 일반적인 패턴
- 홈화면: 주요 콘텐츠와 기능 표시, 검색 및 하단 탐색 등의 탐색요소, 필수 콘텐츠에 집중하고 공간 잘 이요
- 온보딩: 처음 사용자에게 앱의 주요 구성요소와 기능 소개, 간결한 문구와 매력적인 그래픽 사용
- 프로필, 계정화면: 개인 정보와 앱 기본설정, 탐색이 쉽게
- 결제 화면: 스트레스가 많으니 최대한 안전함 어필, 양식의 옳은 입력의 시각적 피드백
- 13 basic mobile UI patterns to know about
모듈 2 목업을 위한 디자인 규칙
1. UX디자인
- 강조: 주의를 기울이게 하는 것
- 시각적 무게: 사이즈, 컬러, 대비 등
a. 크기
b. 대비
c. 질감: 반복적인 패턴 배치
- Emphasis: Setting up the focal point of your design
Breaking Down the Principles of Design (with Infographic)
[강조를 결정하는 방법]
- 어디에서 사용자의 관심을 끌고 싶은지?
- 유저의 목표는 무엇인지?
2. 디자인 계층 구조
중요도에 따라 페이지에 요소를 배치하고 강조함
더 중요한 정보 = 더 시각적으로 강조
보조장치를 사용하는(예. 스크린 리더) 에도 레이아웃을 명확하게 하면 도움이 됨
하이라키 vs 강조
- 하이라키: 중요도에 따른 배치
- 강조: 주변보다 한 요소를 눈에 띄게 함
- 어디에 처음으로 집중할것인지
- 어떤 행동을 취해야하는지
=> 인터페이스를 접하면 빠르게, 사용자의 눈은 문화적으로 익숙한 F와 Z패턴 사용, 자연스러운 패턴 강화
- Golden Tips and Examples to Create Visual Hierarchy in Website Design
=> 중요한 웹 정보는 밝은 색상
- The A to Z of UX — A is for Accessibility: 12 tips for designing an inclusive user experience
=> 추가 리소스가 들더라도 접근성을 테스트 프로토콜 일부로 지정, 충분한 색상 대비 구현,
두개 이상 변수를 사용하여 정보를 시각적 차별화, 양식 필드 및 텍스트 입력 지침,
정보를 설명하기 위한 대체 텍스트 필드, 서식을 활용, 상호적용 요소 명확한 구별,
3. 크기
주어진 요소와 다른 요소간의 사이즈 관계
- 강조를 만들기
- 유사성과 대비를 보여주기
Golden Ratio. Bring Balance in UI Design.
=> 1: 1.618, 효과적인 시각적 계층구조, 적절한 공백
=> UI에서도 황금비율을 사용할 수 있다니 놀랍다..
4. 통일성 & 다양성
통일성: 아이디어를 논의하기 위해서 당신의 디자인의 요소들이 서로 얼마나 잘 함께 하는지
=> 정렬되는 방식, 요소의 모양, 요소 내 연속성
다양성: 단조로움을 분해하기 위해 설계요소를 변화시킴
- 색깔을 지속적이고 목적있는 방식으로 사용했는지?
- 내가 쓴 타입페이스들이 함께 잘 일하는지?
- 여전히 나의 디자인을 흥미롭게 유지시킬만한 다양성이 있는지?
텍스트, 형태, 컬러 등 다양한 사용
Ways to Improve Your Website's User Experience
=> 온라인 쇼핑객 88%가 나쁜 사용자 경험 이후 웹사이트를 방문하지 않음
=> 공백, 매력적인 클릭 유도 문구, 페이지 속도 향상 , 타겟 헤드라인, 스톡이미지가 아닌 실제 이미지,
중요정보 글머리 기호 분류, 하이퍼링크 차별화, 사이트 페이지의 일관성, 404에러 유의, 사이트 탐색기능 확인,
최소한의 정보 요청,
One Minute Design: What is Unity? (in Graphic Design) 동영상
5. 게슈탈트 원리 적용
게슈탈트 원리는 우리가 사물을 인지할 때 인간이 어떻게 비슷한 요소들을 그룹화하고,
패턴을 인식하고, 복잡한 이미지를 단순화하는지를 설명합니다.
- 유사성 similarity: 비슷한 외견은 같은 기능을 보인다 => 메인 액션에 강조 색상을 씀
- 근접 proximity: 떨어져 있는것 보다 붙어 있는 요소들이 더 관계있어보임
- 보통영역 common region: 같은 영역에 놓인 요소는 함께 묶인거라 생각'
- 폐쇠 closure: 불완전한 대상을 볼때 전체적으로 완성된 대상을 보기 위해 무의식적으로 완성
Improve Your Designs With The Principles Of Closure And Figure-Ground (Part 2) - 연속성 contibuity: 선이나 곡선에 배열된 요소가 관련성 높아보임
- symmetry 대칭: 균형을 이루거나 거울상일 때 요소가 시각적으로 즐거움
- asymmetry 비대칭: 요소의 중요성을 강조하고 시각적 흥미
관련 유튜브
비쥬얼 발란스: 강조된 중심의 양쪽에 동일하게 가중치가 부여
6. 디자인 리뷰 체크리스트
- 디테일뷰; 작은거부터 먼저보기
- 페이지 단위뷰: 크기와 비율 확인
- 기능 단위 뷰: 앞페이지 뒤페이지 연결되어있는지?
- 앱 레벨 뷰: 전체 앱 확인
6-1. 추가적인 시각 디자인 요소
- 색조: 색상군과 밝음과 어두움, 밸류 조절하여 대비 만들기
- 채도: 색상의 강도와 풍부 > 채도가 높을수록 수수한 형태
- 오리엔테이션(방향): 디자인의 레이아웃, 설계하는 플랫폼이나 장치와 일치시키기
- 본질적인 관심: 시각적 요소가 사용자의 눈길 끌기
- 인지된 물리적 무게: 시각적인 요소가 전달하는 무게와 부피
16 Important UX Design Principles for Newcomers
a. 네비게이션
=> 단순한, 짧은, 일관된, 눈에 띄는, 도움이 되는 / 레이아웃 고려하기
Navigation design: Almost everything you need to know
=> 사용자의 이해도 높이기, 사용에 대한 자신감, 제품의 신뢰성 부여
=> 메가 메뉴 사용하기, 유의미한 라벨=>SEO향상
The Rules for Modern Navigation
=> 링크인지 헤더인지 정확하게 안내
b.탭바
- kartik 디자인 포트폴리오
c. 탐색메뉴
- Hidden Menus in Mobile and Web Design
d. 탐색허브
e. 탐색 디자인 = 어포던스
- 버튼 애니메이션, 텍스트 버튼 아래 선
- 아이콘: 다른 기능/페이지로 이동가능
- UX Design Glossary: How to Use Affordances in User Interfaces
=> 어포던스: 해당 개체로 수행할 수 있는 작업에 대한 프롬프트를 표시하는 개체의 속성 또는 기능
=> 명시적
=> 암시적 어포던스: 사용자의 특정흐름에서만 가능 예) 마우스를 올려야 설명이 나옴
=> 긍정적/부정적 어포던스
=> 거짓 어포던스 유의하기
[실습]
이전에 기획 했던 내용을 통해 기초안을 짜고 있다. 아이콘 요소들은 라이브러리를 사용할 예정
- 앱의 목표:
달의 목표한 금액을 저축하기 위한 앱이다. 목표한 금액을 등록하고, 어떤 목적으로 모으는지 적는다. 오늘 아낀 금액, 저축한 금액을 앱에 기록한다. 목표액이 얼마나 남았는지, 얼만큼 모았는지 확인한다. 다음달에 지난달의 기록을 참고하여 다시 목표를 세운다. 다른 사람들은 얼마나 모으는지 비교해본다. (기획삭제)
[디자인 컨셉]
유저들이 즐겁게 돈을 모을 수 있도록, 목표를 명확하게 보여준다. 곳곳에 흥미로운 이미지와 인터렉션으로 돈을 모으는 즐거움을 더해준다. 다른 사람과 비교하여 경쟁심을 조금 줄 수 있도록 한다. (개발 단위로 기획 삭제)
모듈 3 디자인 시스템의 이해
1. 디자인 시스템
팀이 제품을 디자인하고 개발할 수 있는 재사용 가능한 요소와 가이드 라인
브랜드 가이드 라인, 콤포넌트, 컬러팔렛트, 컬러, 아이콘, 레이아웃, 카피, 애니메이션 등
2. 디자인 시스템의 이점
- 디자이너와 유저에게 브랜드의 지속성을 줌
- 브랜드 아이덴티티 강화
- scalable: 업무가 증가할때 퍼포먼스 레벨을 동일하게 유지할 수 있음
- 효율성을 늘림으로서 시간과 돈을 아낌
- 디자이너와 개발자가 좀 더 효율적으로 일할 수 있도록 도와줌
3. 구글 매터리얼 디자인
4. 소피파이 디자인 시스템: 폴라리스
4. 그외
5. 피그마에서 스티커시트 만들기
디자인 시스템의 파트를 일부 구성하는 요소 => 디자인 가이드라인 소개/정리하는 페이지
6. 피그마 디자인 시스템 라이브러리 사용
- 디자인 시스템의 요소와 함께 그들의 요소를 믹스 매치함
- 브랜드에 일치하기 위해 커스텀 마이즈하고, 존재하는 디자인 시스템의 콤포넌트를 사용함
- elevation: 레이어링이나 깊이를 더하는 것
- 상태 status: 콤포넌트나 인터렉티브 요소의 상태를 대화하는 시각적 안내
- 컬러 라이브러리 토큰: O3 on primary/medium emphasis => 메인색상의 오퍼시티/중간 강조
- 10 Best Design Systems and How to Learn (and Steal) From Them
=> a. 머터리얼 시스템: 플랫폼, 장치, 입력기반에 걸쳐 사용자 경험 통합하기
b. 애플 휴먼 인터페이스: 디자인 단순성, 첨단 기술의 친숙함
c. 마이크로소프트 플루언트: 다양상, 웹 윈도우 ios aos 포괄적으로 만듦
d. atlassian 디자인시스템: 협업 및 관리도구 => 피그마 다운받기
e. 우버디자인시스템: 모빌리티에 상관없이 이동
f. 쇼피 파이: 전자상거래
g. IBM: 대량 데이터를 조작 및 시각화 => 피그마 다운받기
h. 메일침프: 이메일, 마케팅, 비즈니스 전략, 광고영역
i. 세일즈 포스: 사용자 경험, 상호 작업 및 흐름 컨텐츠 관리 시스템 , AI , 판매, 상거래 또는 분석 플랫폼 => 피그마 다운받기
j. 헬프스카웃: 지원 포험, FAQ, 지식기반
[디자인 시스템 리뷰]
I've looked into a number of design systems, and among them, I like ADS and Polaris the most.
-ADS: Work related tool, providing various document forms as icons
-Polaris: Provides web-optimized components, data tables available for data, admin-related offerings
-Material Design: Well implemented with Android optimization but difficult to use with ios
-IBM: Component for neat administration, text field well established
6-1. 디자인시스템과 보조기술 고려
지역 사회에 연락하여 다양한 대화를 진행시킬 수 있음
기존의 가이드라인을 충족하고 싶지만 장애인을 최우선으로 고려하여 접근성을 만들어야함
모듈 4 hi-fi 프로토타입
1. hi-fi 프로토타입
디테일한 프로토타입으로, 마지막 프로덕트의 룩앤 필과 일치하며 디자인의 인터렉티브 버전
[구조]
비주얼 요소: 적힌 콘텐츠, 일러스트레이션, 그래픽, 외부링크 => 실제 앱 경험과 동일하게 제작
네비게이션: 테스트를 위한 유저플로우
- 유저가 한 스크린에서 다른 스크린으로 어떻게 가는가?
- 뒤로가기 화살표처럼 네비게이션과 연관된 아이콘을 어떻게 배치하는가
- 어떻게 유저 저니가 끝나는지 알려주는거?
인터렉션
2. hi-fi 프로토타입를 만들기 위한 스텝
- 목업의 레이아웃
- 스크린 연결하기
- 인터렉션 디테일
- 애니메이션 적용하기
- 모든 스크린 완료하기
- 작업 공유하기
3. 제스쳐와 모션
제스쳐: 그들의 기기를 터치를 사용함으로서 유저와의 인터렉션 하는 방법
- 스와이프: 수직이나 수평으로 짧게 움직임
- 탭: 짧게 터치하여 항목을 선택
- 드래그: 길게 탭하여 끌어보기
- 핀치: 서로 가까워지거나 멀어짐
모션: 유저의 주의를 끌고 이야기를 하기위한 움직이는 디자인 요소
- Creating Usability with Motion: The UX in Motion Manifesto
- easing: 완화로서 자연주의
- 오프셋과 딜레이: 특정 개체의 분리 (다른 형태의 요소일수 있음/ 텍스트와 버튼)
- 페어렌팅: 인터페이스의 개체를 관련
- 변환: 일련의 이벤트로 인식
- 밸류체인지: 숫자나 텍스트의 변화
- 마스킹: 물체의 영역을 드러내고 숨김
- 오버레이: 계층화
- 복제: 새로운 사물이 생겨날/삭제될때 연속성, 관계, 내러비트 생성
- Obscuration: 투명물체나 오버레이 처럼 활용
- 시차: 스크롤할때 다른 속도로 두 객체가 움직임
- 차원: 3D
- The Role of Animation and Motion in UX
현재 작업과 관련없는 경우에는 집중력을 떨어뜨림
4. 인터렉션 디테일
- 트리거: 앞으로 나아가기위한 행동 (클릭,터치, 시간 등)
- 액션: 사용자와 상호작용을 했을때 무엇이 일어날지 정의
5. 애니메이션
페이지를 이동할때 어떤 행동을 할것인지?
6. 제스쳐와 모션에 대한 접근성 고려사항
- 제스쳐를 쓰는데 대안 옵션을 제공하기 => 예) 스와이프로 삭제, 탭하고 휴지통 버튼으로 삭제
- 디자인의 스피드와 연착시간을 면밀하게 생각하기 => 너무 빠른 스피드는 괴롭고 사람들에게 경각심을 줌
W3c 애니메이션은 5초 이내로 권장
- 유저들에게 모션을 끌 수 있는 기능 제공
6-1. 접근성
접근성을 염두해 둔다는건, 모든 프로덕트 개발 과정에서 장애를 가진사람들을 지속적으로
이해하고 대변하는 노력을 하는것.
인터뷰, 기초조사, 시장분석을 통해 모든 작업에 장애인을 포함
7. 프로토타입 고도화
- 소리: 수행한 작업에 대한 피드백 향상
- 동영상: 사용자 몰입도를 높임, 즉시 주의를 끌고 특정 영역에 집중
- Sound Advice: A Quick Guide to Designing UX Sounds
=> 사용자가 피드백 받고 싶어하는 동작 생각하기 예) 업로드 완료, 파일 저장 문제, 충전중
=> 스퀴어모피즘을 피하고 은유를 사용하라=>
=> 브랜드 경험에 대한 인식의 기여
- 10 Usability Heuristics for User Interface Design
=> 예측가능 할것, 시스템 내부 전문 용어가 아닌 사용자에게 친숙한 개념 사용,
, 프로세스에서 쉽게 취소하거나 물릴 수 있는 자유를 주어야함, 업계의 규칙 따르기,
미리 오류가 생가지 않도록 오류가 생기기 쉬운 조건을 제거하기, 기억하지 않게 하기,
라이트유저/하드유저 모드 맞춤 작업, 미니멀하게, 오류를 진단하고 복구하도록함, 작업 완료하는데 도움말 제공
=> 영상에만 지나치게 의존하지 않기(다른 방법 정보 수신 필요), 자동 음소거 사용, 긴소개 피하기,
최대한 동영상을 짧게, 사용자가 제어 하도록, 접근성을 위해 비디오 캡션과 전체 스크립트, 영상 후 다음단계 제공
[실습]
피그마에서 클릭시 애니메이션 제공하며, ease in/out 기능도 시간대 별로 제공을 했다.
모듈 5 hi-fi 프로토타입 사용성 테스트
1. 리서치 플랜
유저들과 그들의 요구를 단계별로 검증
1-1. 유저빌리티 테스트
사용자들을 관찰하고 어떻게 테스크를 완료하는지 확인
- moderated/ unmoderated 유용성 테스트
- 여러번 유용성 연구하는 이유: 매 단계마다 외면과 기능은 다르고 당신의 디자인을 바꾸고
UX를 증가하기 위해 많은 테스트를 진행
[작문 테스트]
The most vigilant bias is that the participants share the same thoughts I have. Therefore, there may be cases in which the user test itself pre-set the answer they want or induce them to get the answer they want. It should be recognized that the researcher's complaints, requirements, and mindset are different from those of real users. You have to think in advance that you are always different, narrow the gap, and try to truly sympathize with and understand them.
- 인사이트를 위한 관찰
a. 한군데에 데이터 모으기
b. 데이터 조직화 => 어피니티
c. 데이터의 테마를 찾기
d. 인사이트의 리스트를 만들기
a. 기본 데이터로,
촬영된 UT를 토대로 각 참가자가 어떤 의견을 내었는지 체크하기
b. 수집한 데이터로 어피니티 다이어 그램으로, 공통 주제를 나누어 정렬하기
c. 친화도 맵으로 어떤 말을 했는지, 행동, 감정인지 분류
d. 데이터 테마 식별 어떤 문제를 몇%의 유저과 어려움을 겪는지
e. 테마를 통찰력으로 확장
f. 우선순위 정하기
- P0 제품의 작동하기 위한 중요한 장애물을 알리는 긴급 레이블
=> 제대로 기능하기, 오해받거나 속였다는 기회 주지 않기, 다양한 요구사항을 가진 사용자 접근 가능
- P1 전반적인 경험 향상 가능
- P2 합리적이지만 긴급하지 않은
2. 디자인 완료하기
디자인의 완료를 결정짓기 => 썸네일 하이퍼링크, 조건, 요건을 포함하기
- 디자인이 의도한 UX를 진실로 대표하고 있는가?
- 플레이스 홀더 텍스트, 아이콘, 이미지가 최종봅 에셋으로 대체되어 있는가?
- 참가자나 유저들이 사용자들과 상호작용하는가와 내부적인 가이드 없이 디자인을 해석하는지?
- 기존 디자인 시스템을 따르는지?
- 디자인은 해당 플랫폼의 공통 인터렉션 패턴을 따르는지?
- 문제 발생시 사용자에게 명확한 경로를 제공하는지?
- 디자인이 접근가능한지?
3. 생산을 위한 디자인 핸드오프
기능 별 동시 제작을 하기위한 엔지니어 팀과 협력 방법
디자인이나 개발을 다시할 위험이 있음
4. 케이스스터디
디자인 프로젝트를 요약하는 프레젠테이선
- 프로젝트골과 목표
- 프로젝트에서 당신의 목표
- 팀이 진행한 프로세스
- 프로젝트의 결과
- Trip Tribe: A tale of UX auditing and designing through gifs
- 빅플레이어들은 무엇을 하고 있는지? 아직 아무도 도전하지 않은 공간이 있는지?
[후기]
The company I recently applied for gave me a job assignment. Thankfully, I came up with the Gestalt principles and usability tests that I conducted in that lecture. Thanks to this, the task went smoothly and my own design became persuasive.
Among the design UI libraries you told me, I made a high-implementation neck-up using 'polaris' and 'ADS'. Thanks to this, it is visually beautiful and has shortened time a lot. Thank you so much! :)
'UXUI' 카테고리의 다른 글
| 구글 UX 자격증 - 사회적으로 좋은 사용자 디자인과 직업 준비하기 (1) (0) | 2023.12.01 |
|---|---|
| 구글 UX 자격증 - 웹사이트를 위한 동적 사용자 인터페이스(UI) 구축 (0) | 2023.11.28 |
| 구글 UX 자격증 - 리서치 스터디 계획하기 (0) | 2023.11.13 |
| 구글 UX 자격증 - 와이어 프레임과 low-fi 프로토타입 만들기 (0) | 2023.11.08 |
| 구글 UX 자격증 - 공감, 정의, 아이디어 창출 (0) | 2023.11.06 |