과제 (21) 썸네일형 리스트형 UXUI 입문_ 6주차 과제 ✔️ 6주차 과제_ 카카오톡 화면 분석하기 화면 구조 분석 → 디자인 원칙 기반 분석 → 개선점 찾기 순서로 분석 👉🏻 화면 구조 분석 카카오톡에서 5개의 메인 탭 화면이 각각 어떠한 구조로 되어있는지 나눠보기 👉🏻 디자인 원칙 기반 분석 좋은 사례와 나쁜 사례, 총 4개의 사례를 찾아서 디자인 원칙에 근거하여 작성하기 디자인 원칙 유사성의 원리 : 크기나 형태, 방향, 색 등의 특성이 비슷한 것끼리 묶어서 지각하려는 경향 균형: 디자인 요소 간에 적당한 배열이나 비율을 주는 것 대비: 눈에 띄게 구별되도록 강조하기 위해 두 요소 간의 차이를 두는 것 디자인 원칙 제이콥의 법칙 : 사용자는 새로운 제품을 사용할 때 이미 알고 있는 익숙한 방식으로 작동하길 원한다는 법칙 대비: 눈에 띄게 구별되도록 강조하.. UXUI 입문_ 5주차 과제 ✔️ 5주차 과제_ 제시한 원칙이 잘 드러난 실제 사례를 찾아보기 👉🏻 게슈탈트 심리학에서 3가지를 골라 실제 사례 찾아보기 크기나 형태, 방향, 색 등의 특성이 비슷한 것끼리 묶어서 지각하려는 경향 공백이 있더라도 틈이나 간격을 메워서 닫힌 형태로 인식하려는 경향 연속적으로 직선이나 곡선을 이루는 요소를 잘 인지하는 경향 👉🏻 UX 비주얼 디자인 원칙에서 3가지를 골라 실제 사례 찾아보기 상대적인 크기를 사용하여 구성의 중요도와 순위를 표시하는 것 디자인 요소 간에 적당한 배열이나 비율을 주는 것 눈에 띄게 구별되도록 강조하기 위해 두 요소 간의 차이를 두는 것 UXUI 입문_ 4주차 과제 ✔️ 4주차 과제_ 피그마로 간단한 프로토타입 만들어보기 버튼을 클릭했을 때 화면이 이동하는 기능을 통해 프로토타입을 진행했다. 👉🏻 장바구니 화면의 Button/Menu 버튼을 클릭하면 메뉴 화면으로 이동하도록 만들기 (메뉴 화면이 흐린 상태에서 진해지며 노출) dissolve 효과 👉🏻 메뉴 화면의 Button/Close 버튼을 클릭하면 장바구니 화면으로 이동하도록 만들기 (장바구니 화면이 흐린 상태에서 진해지며 노출) dissolve 효과 👉🏻 장바구니 화면의 List Item 3을 클릭하면 상세 화면으로 이동하도록 만들기 (상세 화면이 장바구니 화면 위로 밀어 들어오며 노출) slide in 효과 👉🏻 상세 화면의 Button/Back을 클릭하면 장바구니 화면으로 이동하도록 만들기 (상세 화면이 .. UXUI 입문_ 3주차 과제 ✔️ 3주차 과제_ 테스트케이스 작성하고 디자인 QA로 발견한 이슈 공유하기 뱅크샐러드의 회원가입/로그인 과정에서 휴대폰 본인인증 화면에 대한 QA를 시도했다. 👉🏻 QA 진행 화면 1. 테스트 케이스 작성 화면 회원가입 통신사 선택 본인인증 요청 조건 정상 정상 정상 텍스트 케이스 모든 텍스트 필드에 정상 값 입력 통신사 선택 인증 요청 버튼 클릭 입력값 이름 / 주민번호 / 휴대폰 번호 통신사 선택 인증 요청 버튼 클릭 기댓값 정상 입력 확인 휴대폰 번호 입력 화면으로 이동 약관동의 바텀 시트 생김 테스트 환경 iOS iOS iOS 화면 약관 동의 인증번호 입력 잠금번호 입력 잠금번호 확인 조건 정상 정상 정상 정상 텍스트 케이스 약관 체크 인증번호 입력 4자리 비밀번호 입력 4자리 비밀번호 입력.. UXUI 입문_ 2주차 과제 ✔️ 2주차 과제_ 디자인씽킹을 활용해 개선 아이디어 도출하기 스카이스캐너 앱의 홈 화면을 디자인씽킹 프로세스를 활용해 개선 아이디어를 도출했다. 👉🏻 아래와 같은 세 가지 방법론을 사용했다 1단계 : 공감하기에서는 공감지도 (Empathy Map) 2단계 : 문제 정의하기에서는 5 whys 3단계 : 아이디어 도출하기에서는 SCAMPER 1. 공감하기 (공감지도) 2. 문제 정의하기 (5 Whys) 3. 아이디어 도출하기 (SCAMPER) 일단은 주어진 대로 진행했는데 짧은 시간에 사용성 테스트를 하면서 문제점을 찾아내는 것이 쉽지 않은 것 같다. 앱스토어에 있는 스카이스캐너 리뷰를 참고했는데, 누구에게는 불편한 점이 나에게는 그렇게 와닿지 않았다. 모두의 니즈를 만족시키는 것은 참 어려운 일인 것 같.. UXUI 입문_ 1주차 과제 ✔️ 1주차 과제_ 자주 쓰는 앱 서비스 UX/UI 분석하기 내 일상에서 가장 많이 사용하는 토스를 선택했다. 아침에 토스에서 포인트를 받는 것으로 시작해 저녁에 만보기로 포인트를 받는 것으로 하루를 마무리한다. 아무 생각 없이 버튼을 눌렀던 그때와 다르게 UX/UI 관점으로 분석하는 것은 쉽지 않다. 👉🏻 토스의 많은 요소 중 세 가지를 가져왔다. 리스트 터치효과 버튼 색상 변화, 팝업 버튼 비활성화, 활성화 1. 리스트 터치효과 목록을 터치했을 때, 실제로 누른듯한 느낌을 받도록 해당 목록의 배경색과 콘텐츠들이 살짝 작아진다. 사용자가 해당 버튼을 눌렀다고 인지하게끔 도와주는 역할 서비스 사용에 있어 재미를 부여 2. 버튼 색상 변화, 팝업 포인트를 받기 전과 후의 하단 버튼색 변화, 그리고 포인트 .. [데일리미션 1-16] 자주 사용하는 웹 서비스 홈 화면 분석 01. 웹 서비스 선정 https://www.musinsa.com/app/?NaPm=ct%3Dlso5fo4o%7Cci%3Dcheckout%7Ctr%3Dds%7Ctrx%3Dnull%7Chk%3Dcc19dea517fe1d1f3b448c8d559a5d5d6802b728 무신사 패션의 모든 것, 다 무신사랑 해! 24 S/S 신상을 온라인 & 오프라인에서 만나보세요. www.musinsa.com 선정 이유 : 학생 시절 많이 이용했던 무신사 스토어, 지금은 어떻게 변했는지 알아보자! 서비스 소개 : 대한민국 최대 규모의 온라인 편집숍이자, 대한민국의 10번째 유니콘 기업이다. 02. UI/UX 디자인 분석 1️⃣ 화면 구성 크게 세 가지로 나누어 보자면 아래와 같이 나눌 수 있을 것 같다. GNB (Global.. [데일리미션 1-15] 자주 사용하는 웹 서비스 홈 화면 분석 01. 웹 서비스 선정 https://www.disneyplus.com/ko-kr/home 디즈니+ | 디즈니, 마블, 픽사, 스타워즈, 내셔널지오그래픽이 모두 모인 곳 디즈니+는 디즈니, 픽사, 마블, 스타워즈, 내셔널지오그래픽이 만든 인기 영화와 TV 시리즈를 만날 수 있는 유일한 곳입니다. 오늘 바로 스트리밍을 시작하세요. www.disneyplus.com 선정 이유 : 자주 이용하는 OTT 플랫폼에 대해 알아보기 위해서 서비스 소개 : 2019년에 디즈니가 출시한 가입형 온라인 스트리밍 OTT 서비스 02. UI/UX 디자인 분석 1️⃣ 화면 구성 탭, GNB (Global Navigation Bar) 프로필 상단배너 캐러셀 브랜드 버튼 콘텐츠 리스트 2️⃣ 클릭 시 동작 프로필에 마우스 오버 시.. 이전 1 2 3 다음