UT (Usability Test) 사용성 테스트는 프로토타입이 있다면 제품 개발 단계 중 언제든 활용할 수 있다! 사용성 테스트란? 제품을 개선할 목표를 가지고, 실제 사용자를 대상으로 어떻게 서비스를 사용하는지 관찰하는 조사이다. 사용자가 실제 사용하면서 의도한 시나리오에 따라 테스크를 수행하는지, 문제는 없는지 관찰한다. 1️⃣ 사용성 테스트 구성 요소 테스크 • 참가자가 테스트 과정 중에 현실적으로 수행할 수 있는 활동으로 구성. •참가자에게 구두 or 안내지로 테스크 지시. • 소리 내어 읽어 안내하면 참가자에게 이해도를 높일 수 있음. 진행자 • 사용성 테스트의 목적과 절차 안내. • 편안한 분위기에서 다연스럽게 행동할 수 있는 분위기 조성. • 참가자에게 테스크 지시 및 참가자 관찰. • 참..

개발환경에 맞게 디자인하기 위해서는 구조적인 부분에 대한 필요하다. 우리가 보는 디지털 화면들은 모두 코드 블록으로 이루어져있는데, 블록들이 서로 더해지거나 빠지더라도 인터페이스가 흔들리지 않도록 오토레이아웃과 컨슨트레이트를 잘 활용하는 것이 매우 중요하다. 코드 블록의 구조 알아보기 우선 코드 블럭은 피그마에서 프레임을 활용해 만들고 "컨테이너"라고 명칭한다. (모든 코드 블록은 내부에 들어있는 개체(콘텐츠)와 개체를 둘러싼 패딩으로 만들어짐!) 패딩(Padding): 코드 블록 안에 있는 개체와 함께 실제 블록의 사이즈가 되는 내부 여백 보더(Border): 코드 블록 내부 공간 바로 바깥의 가장자리. 실제 코드 블록의 테두리 마진(Margin) : 코드 블록 바깥의 여백이자 다른 코드 블록과의 간격..

🖌️ 컨셉에 대한 구상 고급 식자재 커머스를 컨셉으로 디자인 구상중이다. 건강하고 품질 좋은 식재료를 유통하는 곳이라는 것을 표현할 수 있는 컬러를 고민하다가 대표적인 자연의 색 그린 중에서도 편안하면서도 고급스러운 딥그린 컬러를 선정했다. 🖌️ 진행상황 컴포넌트 요소를 하나하나 베리에이션 하며 단기간에 만드는 작업이 꽤 고민을 요한다. 최대한 피그마 심화 요소를 사용해서 시안을 잡아볼 예정!

지난주에 만든 버튼과 텍스트필드 옆에 체크박스와 라디오 컴포넌트를 추가했다! 이번주는 모달에 대한 개념을 이해하고 다양한 컴포넌트 실습을 했다. 모달 알아보기! 전에 팝업 먼저 짚고 가자면 👉 팝업이란? 화면 위에 새로운 화면을 띄우는 것이다. 💡일반적으로 부르는 팝업과 실제 UI 관점의 팝업에는 차이가 있다. • 윈도우 팝업: 새로운 윈도우(브라우저 창)을 띄워주는 방식 • 레이어 팝업: 코드로 만든 컴포넌트를 보여주는 방식 (레이어를 하나 더 띄우는 개념) 모달은 사용자가 행동을 취하기 전까지 딤처리된 화면을 조작할 수 없다. 모달은 UI를 분류하는 기준 중 하나로, 일반적으로 레이어 팝업을 가르킨다. 알림 설정 뒤로 어둡게 처리된 부분을 조작할 수 없다면, 모달이다. * 현업에서 레이어 팝업과 모..

이전 회사에서 그래픽 디자이너였던 나는 어쩌다 신규 플젝의 프로덕트 디자이너가 됐고.. UXUI디자이너 있는데 왜 내가 이걸 하는가 고민할 새도 없이 스타트가 되어버렸다..⭐️ 나는 피그마를 다룰줄 알고 앱 서비스의 콘텐츠를 만들지만, 디자인시스템과 UI 가이드는 어떻게 만들어먹는지조차 몰랐던 무지(말)랭이.. 이번주는 현업에 적용할 수 있는 디자인시스템을 만들기 위한 강의를 수강했다. 그래서 응용차 이전에 만들어놨던 서비스의 러프한 시안들을 다듬고 디자인시스템을 정리해보려고 한다. 우선 디자인 시스템이 필요한 이유 🪜 반복적으로 사용하는 UI를 만들어 보기 쉽게 정리해놓으면 효율적으로 쓸 수 있다. 🧠 다양한 업무를 담당하는 팀원들이 일관적으로 이해할 수 있어야 한다! 🚨디자인 시스템은 결국 팀 전체..

📌 [친구] 탭 화면 🟢 좋은 사례 🔺 나쁜 사례 • 시각적 위계를 지켜 내 프로필 썸네일 사이즈 >친구 프로필 사이즈 • 프로필 썸네일은 좌측에 수직적으로 배열, 멀티프로필과 선물하기 버튼의 경우 수직적으로 배열하되 컬러로 구분 가능한 차이점을 준다. • 펑과 광고배너 영역이 친구 목록을 볼 수 있는 영역을 차지하고 있어 친구목록을 확인할 수 있는 주 기능에 불편함을 준다. ✍️ UX 비주얼 디자인 원칙의 위계와 균형 중요한 순서에 따라 시선의 흐름이 이동하도록 디자인한다. 디자인 요소 간에 적당한 배열이나 비율을 준다. ✍️ 힉의 법칙 의사 결정 시간을 줄이기 위해 선택지의 개수를 최소화하라. 📌 [친구] 탭 화면 🟢 좋은 사례 • 스크롤하면 더 많은 채팅 목록을 볼 수 있음을 알 수 있다. • 읽지..