uxui

배달의 민족 앱이란?    사용된 색상 및 폰트  배달의 민족 주요 기능 1.음식주문사실상 음식배달앱의 가장 중요한 기능 2.주문상세내역 확인자신이 과거에 주문한 음식 및 해당 가게의 상세 내역을 확인할 수 있는 기능 3.음식 및 가게 검색검색창 또는 상단의 검색바를 통해 음식 및 가게를 검색할 수 있는 기능  결과물 (+개선)더보기프로토타입 적용 버전  프로토타입 미적용 버전  검색창 개선    개선한 이유 개선전의 메인화면의 검색창과 검색창화면의 검색창이 서로 아이콘의 위치와 색이달라서둘다 통일성을 주기위해 아이콘위치와 검색바의 형태를 변환함 아이콘 클릭시 형태 개선  개선한 이유 1.가게 메뉴를 고를때는 클릭시 살짝 어둡게 변하는데 다른 사진이나 아이콘들은 색이 변하지 않고살짝 줄어들기만 하여 통일..

TIL (Today I learned) 오늘 나는 무엇을 했나요- 웹 앱 클론 디자인 만들기- 특강(기본적인 웹 개발 구조를 알아보자)오늘은 어떤 것을 배웠나요 1. 특강(기본적인 웹 개발 구조를 알아보자)  강사님과 함께 HTML의 구조에 대해서 이해하고 간단한 실습을 하였다.HTML은 간단히 말해 웹사이트의 뼈대와 같은 역할을 한다고 보면된다.그뼈대 안에 설계도와 내용물을 채워넣어야 비로소 홈페이지가 완성된다.여기서 리액트라는 개발도구를 이용하여 HTML을 개발하는데 리액트를 사용하는 이유는우리가 피그마에서 사용하는 컴포넌트와 같이 여러곳에서 사용할 수 있고 마스터컴포넌트를 바꾸면 모든곳에서 자동으로 업데이트가 되기 때문에 개발이 굉장히 편리해진다는것이다. 2. 웹 앱 클론 디자인 만들기  핵심서비스..

TIL (Today I learned) 오늘 나는 무엇을 했나요- 웹 앱 클론 디자인 만들기- 아티클 스터디 ( 디자이너의 UX 참고서, 듀오링고 전격 해부하기  )오늘은 어떤 것을 배웠나요1. 아티클 스터디 ( 디자이너의 UX 참고서, 듀오링고 전격 해부하기  )듀오링고를 분석해보았다 .듀오링고는 귀여운 디자인과 게이미피케이션을 적절히 적용하였다.아티클 스터디를 하면서 느낀것은  1.이탈률도 줄이는 동시에 앱의 핵심적인 목적을 잃지않기 게임적 요소를 과도하게 도입2.앱을 새로운 레이아웃으로 변경할때, 주요 기능은 동일하게 유지하여 사용자가 불안을 느끼지않게하기더보기듀오링고 장단점듀오링고는 짧은 학습 세션으로 어디서든 쉽게 공부 가능하지만 한국어로는 영어만 지원하며 가끔 발음 오류발생함 UI/UX 특징장..

TIL (Today I learned)오늘 나는 무엇을 했나요- 웹 앱 클론 디자인 만들기- 아티클 스터디 ( 모임 앱은 어떤 모습이어야 할까? )오늘은 어떤 것을 배웠나요1. 아티클 스터디 ( 모임 앱은 어떤 모습이어야 할까? )더보기모임 앱은 어떤 모습이어야 할까? - 앱 개선(1)목차1.메인화면의 문제점2.개선방향3.개선4.참고자료[아티클 요약]1.메인화면의 문제점   약한 정체성1.아이콘과 이름의 매칭이 어렵다2.앱을 켜면 소모임 탭 화면이 먼저나오지만 첫번째 탭은 유료탭임 ( 무슨탭이 메인탭인지 알기 어려움)3.앱의 로고에는 파랑,민트,핑크사용 했지만, 주요버튼 색상은 다홍색임   어려운 모임 탐색 기능1.어지러운 탐색 위계2.한눈에 들어오지 않는 모임 리스트 정보2.개선방향첫 화면에서 브랜드의..

TIL (Today I learned) 오늘 나는 무엇을 했나요- 컴포넌트 만들기- 아티클 스터디 ( AI 투자 일임 서비스 핀트 프로덕트 분석 ) 오늘은 어떤 것을 배웠나요1. 아티클 스터디 ( AI 투자 일임 서비스 핀트 프로덕트 분석 )핀트 앱은 다양한 AI 서비스를 제공을 한다. 투자 성향분석개인의 투자 성향을 분석하여 맞춤형 투자 전략을 제공하는 점은 사용자에게 신뢰감을 주며, 장기적인 고객 충성도를 높일 수 있는 요소이다.모의 투자 기능초보 투자자에게 실전 경험을 쌓을 수 있는 기회를 제공함꾸준히 투자 기능원하는 기간과 원하는 금액을 직접 설정하여 투자하는 기능제공목표 달성 투자 1년 기준으로 목표금액을 세우면 AI가 그 목표를 달성하기 위해 투자하는 방식  핀트는 이러한 서비스를 만들때 사용..

Containment구성요소는 버튼, 메뉴, 칩과 같은 다른 구성요소를 포함하여 정보와 작업을 보관합니다.  바텀 시트 (Bottom sheets) 하단 시트는 화면 하단에 고정된 보조 콘텐츠를 표시합니다. 바텀 시트의 필수 요소1.Container2.Drag handle(optional)3.Scrim (modal only) 카드(Cards)카드는 단일 주제에 대한 콘텐츠와 작업을 표시합니다. 카드의 필수 요소1.Container 2.Headline 3.Subhead 4.Supporting text 5.Image 6.Button 캐러셀 형태 (Carousel)캐러셀 형태는 화면에 스크롤하여 표시할 수 있는 항목 모음을 보여줍니다. 캐러셀 형태의 요소1.Container 2.Large carousel it..

왼쪽이 예시고 오른쪽이 실습결과물입니다. 1.Actions액션 구성요소는 사람들이 목표를 달성하는 데 도움이 됩니다.  1.버튼 일반 버튼은 UI에서 대부분의 작업을 촉발합니다.  2.확장된 FAB 확장된 플로팅 작업 버튼(확장된 FAB)은 사람들이 주요 작업을 수행하는 데 도움이 됩니다.  3.플로팅 액션 버튼 플로팅 작업 버튼(FAB)은 사람들이 주요 작업을 수행하는 데 도움이 됩니다.  4.아이콘 버튼 아이콘 버튼을 사용하면 사용자가 한 번의 탭으로 간단한 작업을 수행할 수 있습니다. 세분화된 버튼은 사람들이 옵션을 선택하고, 보기를 전환하거나, 요소를 정렬하는 데 도움이 됩니다. 2.Communication커뮤니케이션 구성요소는 유용한 정보를 제공합니다. 1.배지 배지는 탐색 항목 및 아이콘에 대..

- FACTS(사실, 객관) :이번 일주일 동안 있었던 일, 내가 한 일-강의-5주차 완 -아티클 스터디-1.게임 속 팝업의 버튼 UX디자인(좋은사례, 나쁜사례)2.목록에서 상세 정보를 얼마나 보여주는 게 좋을까?3.여기어때 퍼소나는 어떻게 만들어졌을까? -퀘스트-1. 내가 생각하는 프로덕트 디자이너의 핵심 역량2. 웹/앱 서비스 조사 및 나의 관심 분야 찾아보기 3. 컴포넌트 만들기- FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌2주차까지 진행을 하면서 점점 작업속도가 빨라지는것 같다. 하지만 본캠프에 들어가게되면 사전캠프보다 더많은 작업량이 있기때문에 걱정이 되지만 사전캠프때 복습과 연습을 꾸준히 한다면 잘 따라갈 수 있을것같다. - FINDINGS(배운 것) : 그 상황으로부터 내가 ..

TIL (Today I learned) 오늘 나는 무엇을 했나요- 디자이너와 프론트엔드 연관성 특강- 피그마 기초 강의 (버튼 컴포넌트 프로퍼티)- 컴포넌트 만들기오늘은 어떤 것을 배웠나요1. 피그마 기초 강의 ( 버튼 컴포넌트 프로퍼티 )-컴포넌트 프로퍼티 컴포넌트는 의사상태가 있다. 이러한 의사상태일때 컴포넌트 안의 요소가 바뀌는 경우가 있는데이러한 과정을 효율적으로 하기 위해 프로퍼티를 사용함먼저 프로퍼티란 속성이라는 뜻임 즉 디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소들을 다룰 때 사용1. Variants2. Boolean3. Instance swap4. Text총 4가지가 있으며 대부분 1번째 기능으로 할 수 있으나 효율적으로 하기 위해서 상황에 따라 2,3,4번으로 해야합니다. 1...

TIL (Today I learned)  오늘 나는 무엇을 했나요- 아티클 스터디 - ( 목록에서 상세 정보를 얼마나 보여주는 게 좋을까? )- 웹/앱 서비스 조사 및 나의 관심 분야 찾아보기 - 마스터 컴포넌트와 인스턴스- UI 만들기 실습 오늘은 어떤 것을 배웠나요1. 아티클 스터디  ( 목록에서 상세 정보를 얼마나 보여주는 게 좋을까? ) 더보기목록에서 상세 정보를 얼마나 보여주는 게 좋을까?커머스에서의 상품목록에서 편의를 위해 다양한 정보를 넣는건 사용자의 피로도를 높인다.하지만 복잡함이 혼란스럽지 않다면 단순함보다 좋을수도 있다.그 이유는 모든 시스템에는 더 줄일 수 없는 일정 수준의 복잡성이 존재하며, 그 복잡함을 없애고 단순함을 추구하면 나머지 복잡함은 사용자가 감당해야 한다.즉 복잡함을 잘..