본문 바로가기

전체 글

 (112)
[강의학습일지] Figma 활용법(2) 3주차 강의 프로토타입 실제 제품을 만들지 않고 아이디어를 테스트해 볼 수 있는 것Lo-fi(Low/High): 전체 흐름을 빠르게 맞춰볼 수 있는 수준. 와이어프레임. 피그마는 Lo-fi를 만드는데 특화됨Hi-fi(High Fidelity): 실제 제품과 거의 같거나 유사한 수준(사용자 대상으로 사용성 테스트, 제품 피드백 수집 가능)프로토타입을 만들거나 사용해 테스트하는것을 프로토타이핑이라고 함프리뷰 모드: Shift+Space문장으로 이해하면 편함: ~하면(조건,트리거) 어떻게(애니메이션) ~한다(액션) 1) 핫스팟(Hot Spot): 프로토타입을 시작하는 지점인터랙션(Interaction)에서 +를 클릭해도 OK 2) 커넥션(Connection): 화면을 서로 이어주는 연결선  3) 종착점(Destinatio..
[TIL] 24/06/19 디자인 스낵타임  A통화 거절/수신이 있어서 고민 없이 사용자가 원하는 선택을 할 수 있다.B슬라이드 형식이라 버튼이 잘못 눌리는 경우를 대비할 수 있다.화면에 통화 거절 버튼이 없어 사용자가 당황할 수 있다.회의 후 느낀점A 화면은 버튼을 끝까지 눌러야 해서 불편했다는 팀원의 의견이 있었다.휴대폰을 사용하는 도중에는 A로, 잠금상태일 때는 B로 떴는데 현재 A는 상단 팝업 알림 형태로 뜬다.주머니 속에 핸드폰을 넣어뒀을 때 실수로 버튼이 눌리는 경우가 종종 있는 것 같다.  전화 받기 방식 어떤 것을 선택하시겠어요? | 디자이너스전화 받기 방식 어떤 것을 선택하시겠어요?designus.io Figma 활용법 (2) 2주차 숙제 와이어프레임 라이트박스를 60% 했는데 컴포넌트가 있어서 그런지 전체 화면이..
[TIL] 24/06/18 디자인 스낵타임 AA가 익숙해서 편해 보인다.별점은 전체 평점이 있어 빠른 시간 내에 판단하기 쉽다.별점은 높은/낮은 별점순으로 볼 수 있어 유용하다.B처럼 키워드를 파악하려면 리뷰를 하나씩 봐야 하는 단점이 있지만, 리뷰를 자세히 보지 않고 별점으로만 판단해서 물건을 구매하는 사람에게는 A가 훨씬 편리한 방법일 것이다.B네이버 마이플레이스 리뷰나와있는 선택지가 키워드 칭찬위주라서 별점의 ‘낮은 별점순’처럼 안 좋은 리뷰를 찾아보기 어렵다.회의 후 느낀 점 A는 별점이 높지만 “어떤 점에서” 좋은지 리뷰를 하나씩 들어가서 근거를 찾아봐야 한다. 하지만 B는 근거를 한눈에 알 수 있어서 정보 탐색에 피로를 줄여준다.사용자 입장에서 리뷰를 굳이 쓰지 않아도 (최소 10글자 이상 적어야 하니까) 키워드로 선택..
[강의학습일지] Figma 활용법(2) 2주차 강의 다양한 환경에서의 UI 차이  UI는 기능과 목적이 중요하다 = UI 차이가 있다 = 목적에 차이가 있다 = UX에도 차이가 있다앱과 웹 둘 다 서비스를 하는 곳 비교해 보기주소입력해서 접근할 수 있는 화면들이 어떤 화면들인 가?거기에 사용자가 접근했을 때사용자를 어떻게 뒤로 돌려보낼지(ex. 잘못된 요청)오류처럼 받아들일 수이는 화면에 갈 수 없도록 대비하기 뒤로 가면 안 되는 화면에 뒤로 가기 접근하는 경우결제가 뒤로 가거나, 취소가 여러 번 돼서 서버에 문제가 되는 등 뒤로 가면 안 되는 화면 보호장치를 개발팀과 논의하기디자인 목적: 사용자가 더 편하고 수월하게 목적을 빠르게 달성할 수 있는 방향으로 수렴함웹이라고 반드시 메뉴가 상단, 앱이라고 하단이 아님! 디자인 목적을 생각해보기. 사용자가 편하..
[TIL] 24/06/17 디자인 스낵타임  오늘의 주제는 윈도우 시작 페이지의 변화에 대한 내용 A서치바가 따로 나와있는게 편리해 보이지만 심미적인 관점에서는 B가 더 낫다.B심미적인 관점에서는 B를 선호. 정리된 느낌윈도우 업데이트 이후 이 버전을 사용하고 있는데, 메뉴가 가운데 있는 게 전보다 편하게 느껴졌다.맥을 사용하다가 윈도우를 사용하게 됐는데 업데이트 이후 두 버전이 비슷해져서 이용체계가 달라져도 금방 적응할 수 있을 것 같다.회의 후 느낀점익숙한 게 편리할 거라고 생각하긴 했지만 A를 고른 사람이 71%나 됐다.. 사람들은 익숙한 것을 더 선호하나 보다 제이콥의 법칙 😀계속 A로 사용하다가 B로 바뀌니 상태표시바 왼쪽에 아무것도 없는 게 어색하다.작업을 하다가 메뉴를 사용할 때 바로 중앙에서 처리할 수 있어 좀 더..
[WIL] 24/06/14 디자인 스낵타임 어제 퇴실 후에 다른 팀 노션 구경하면서 디자인 스낵타임을 어떻게 진행하고 있는지 살펴보았다. 우리 조는 디자인 스낵타임 링크에 있는 첫 번째 토픽으로 진행했는데, 다른 팀은 선정해서 하는 것 같아 우리도 그렇게 하자고 제시했다. 팀원분이 하루에 하나씩이니까 한 명씩 돌아가면서 정하자는 의견을 내주셔서 그렇게 하기로 했다.  회원가입 생년월일 입력, 키보드와 피커 중 이탈률이 더 낮은 방식은 무엇일까요? | 디자이너스회원가입 생년월일 입력, 키보드와 피커 중 이탈률이 더 낮은 방식은 무엇일까요?designus.io 오늘의 주제는 회원가입 생년월일에 대한 내용! A키보드라서 계산기, 휴대폰 번호에 쓰일 것 같은 느낌생년월일을 6글자 (00/00/00)으로 입력해야하는지, 8글자 (0000/..
[강의학습일지] Figma 활용법(2) 1주차 강의 컨테이너 컴포넌트 컴포넌트의 분류 6가지 중 하나합성 컴포넌트 (Compound Component)ex) 버튼은 이미 컴포넌트이지만 +폰트, 컬러, 여백 등등 만들어 다시 컴포넌트를 만듦팝업과 모달 팝업(Pop-up)일반적인 팝업의 뜻과 UI관점의 팝업은 다름 (회사/사람마다 부르는 이름이 다름)일반적 팝업: 현재 화면+새로운 화면모달(Modal)이름X, UI의 속성(팝업, 토스트, 바텀시트, 다이얼로그, 사이드바 등)어두운 화면: 뒤쪽의 화면이 멈추고 조작할 수 없음을 안내새로 떠있는 화면에만 시선을 집중시킴라이트박스(Lightbox) =스크림(Scrim), 딤드(Dimmed), 딤레이어(Dim Layer), 오버레이(Overlay)모달 UI를 사용할 때 어둡고 반투명한 층원래 있던 화면을 잠그고 사용..
[강의학습일지] Figma 활용법(1) 4주차 강의 컴포넌트 모양보다 기능이 중요함 (모양보다 무엇을 하는지 정의에 집중!)Action : 사용자가 중요한 행동을 수행할 때 (ex. 버튼)Input : 사용자의 입력을 받을 때 (ex. 텍스트 필드)Information : 사용자에게 서비스의 상태나 안내 사항을 전달할 때Container : 컴포넌트 여러개가 결합되어 하나의 덩어리를 이루는 컴포넌트Navigation : 사용자가 페이지를 이동할 때Control : 사용자가 설정이나 값을 수정할 때컴포넌트 1. 의사상태 버튼의 기본값에 (~했을) 때 (~)이 변하는 것Hover (마우스가 올라갔을 때)Pressed (눌렀을 때)Active VisitedLinkFocusCheckedDisabled컴포넌트 2. 마스터 컴포넌트와 인스턴스 원본: 마스터 컴포넌트..
[TIL] 24/06/13 [강의학습일지] Figma 활용법(1) 2, 3주차 강의프레임과 그룹 그룹: 코드 블록 X, 개체를 묶을 때 사용(디자인 복잡한 그래픽). 그룹 내 개체가 따로 지정 X (같이 움직임)프레임: 코드 블록 O, 각각 블록 따로 지정 O (모든 것이 별개인 상태) 프byroe.tistory.com오늘부터 새로운 팀원과 함께하게 되었다. 이번 조는 나를 제외한 모든 팀원이 MBTI가 똑같아서 신기했다.개인과제지만 2주+a 시간 동안 팀을 이끌어가야 하는데 팀장으로서 역할을 어떻게 하면 잘할 수 있을지 생각해 봐야겠다.  Learn : 레이어 순서와 오토레이아웃 순서가 반대인것, 칼럼과 디자인 시스템 복습Feel : 피그마 활용법 (1)은 이미 수강한 강의지만 다시 들으니 복습이 되어 좋았다.Action : 피..
[TIL] 24/06/12 Keep (지속할 것)오늘 계획한 것은 끝내고 퇴실한 것 (계획했던 것을 다 하고 끝내는 습관)팀원들끼리 진척도, 아이디어를 나누고 공유한 것튜터님에게 피드백을 받은 것을 팀원들에게 공유한 것Problem (문제가 된 것)기사, 논문 등을 참고만 하고 자료를 쓰지 않은 것 (기사 발췌하기, 논문 인용하기) 계획을 해도 더 많은 시간이 필요해서 결국 시간이 오버되는 경우가 많았다. 그래서 21시 이후에도 추가로 남아서 했는데, 시간 내에 끝낼 수 있도록 해야겠다.중간에 의문점이 있어도 시간에 쫓겨서 제때 튜터님께 질문하지 못한 것이해가 가지 않았을 때 더 생각해보지 않고 바로 예시 찾아본 것화면 디자인 할 때 와이어프레임 없이 바로 화면 디자인부터 무작정 해보려고 했던 것Try (다음에 시도할 것)의문점이..
반응형

티스토리툴바