본문 바로가기

Log_UIUX School

 (52)
UIUX 스터디 6주차 학습일지 05 : 프로토파이 실습, 카카오 UX 디자인 프로세스 - 20 1-1. 프로토타이핑 오류와 결함을 찾아내기 위해서 (사용자 테스트 포함) 엔지니어와 소통하기 위해서 경영진 등 비즈니스 이해관계자를 설득하기 위해서 1-2. 프로토타이핑 툴 소개 피그마는 인풋필드에 텍스트를 치는 것까지 구현하기 힘듦 3-4. Trigger & Response Start 트리거: 화면이 시작할 때 Detect 트리거: 어떤 값을 인지하게 함 Detect 트리거 아래에 조건(Condition)을 넣으면 레이어의 어떤 값을 인지해서 색깔을 변하게 할 수 있음 3-6. Record & Cloud 프로토타입을 공유하는 방법 직접 실행할 수 있는 프로토타입을 전달 동작하는 프로토타입 영상을 전달 3-7. Component & Library 컴포넌트는 따로 내보내기할 수 있음 라이브러리에 수정사항..
UIUX 스터디 6주차 학습일지 04 - 디자인 시스템, '트리플' AS-IS 분석 : 19 2-2. 레이아웃과 그리드시스템1 360x640이 전 세계적으로 가장 많이 사용되는 해상도 Layout 사전적 의미로 '설계, 지면의배열, 배치'라는 뜻을 의미 잡지나 광고, 출판물 등을 디자인할 때 텍스트나 이미지 등의 요소를 보기좋게 배열하는 것 Grid System 디자인에서 화면을 구성하는 요소드을 일관된 시스템속에 배치하는 것 화면을 효과적으로 사용하기 위해 가상의 구역을 나누어 놓은 것 한정된 화면을 효율적으로 사용할 수 있고 전달하려는 콘텐츠를 쉽게 읽을 수 있도록 활용 2-3. 레이아웃과 그리드시스템2 4의배수 8의배수를 기준으로 디자인을 해야 함 머테리얼 디자인 기준 컬럼의 경우 휴대폰, 태블릿 각각 4컬럼, 8컬럼, 거터의 경우 휴대폰은 16dp, 태블릿은 24dp 2-4. 컬러시스템 ..
UIUX 스터디 6주차 학습일지 03 - 인터페이스 디자인 : 18 1-6. Define 디자인을 위한 디자인이 아닌 프로젝트 목표를 정하고 이를 위한 디자인 컨셉을 세워야 함 Analysis As-is 분석과 동종 유사업계를 분석하여 어느정도 바운더리 안에서 해당 플랫폼이 구동하는지 바운더리를 파악 좋은 것과 나쁜 것을 분류하여 리스트업 및 분류 이후 디자인 리서치를 통해 어떤 형식으로 시각화할 것인지 시각화에 대해 리서치 진행 Visual Concept 개념적인 측면 서비스나 플랫폼의 가치를 시각화하는 것 추가 리서치를 통해 메타포를 도출하고 특정 가치를 시각화 ex) 아이들과 피카소로부터 한선그리기 컨셉 도출 형태적인 측면 형태의 의미와 가치를 부가하여 형태를 시각화 ex) 직선과 곡선의 감성 등을 반영 > Workshop을 통해 의견을 취합해서 선택 우리 서비스는..
UIUX 스터디 6주차 학습일지 02 : 디자인 기초 - 17 1-1. Design History1 산업혁명 이전 대량생산이 불가능한 시기 장인들이 물건을 만드는 즉시적인 행동패턴 선수요 후공급 산업혁명 이후 디자인이라는 용어의 탄생 소비자의 이목을 끌기 위한 스타일링의 중요성 동일하게 규격화하여 제품을 대량생산 프로세스가 있는 계획적이고 체계적인 행동패턴 디자이너의 역할변화 수요보다 공급이 많은 시기 성능이나 제품만 보기보다 스타일, 가치관 등 스스로의 기준에 따라 선택 프로덕트의 컨셉 정의 및 개발 품질관리 / 협업 / 완결 최종양산 디자인 사고와 소비자 통찰을 겸하면서 실용적이고 가치있는 경험 디자인 (사용자 경험 디자인) 디자인 개념의 변화 사용자에게 쓸모있는 가치의 경험을 제공 사람을 이해하고 사회문화측면, 기술, 트렌드를 적절히 활용 비즈니스 전략을 수립..
UIUX 스터디 6주차 학습일지 01 : '트리플' 유저리서치 정리 - 16 트리플에 필요한 것이 무엇인지 전반적인 문제점을 파악하고 맥락 이해를 위해 내용을 정리해보고자 한다 유저 리서치 목적 1) 사용자가 앱을 찾게 된 이유와 니즈 파악 (User Needs) 2) 이들이 구체적으로 어떤 불편함을 가지고 있는지 파악 (Weakness) 3) 트리플 어플 자체의 강점과 사용자의 니즈가 부합하는지 파악 (Strength) 4) 타 어플대비 차별점은 무엇인지 파악 (Opportunity) 1. 설문조사를 통한 결과 - 11.30. ~ 12.3. 여행 저관여자 & 고관여자 30명 1-1. 긍정적 앱 사용자가 느낀 트리플의 강점 (계속 사용할 의향 71.4%) 동선별 시간과 거리를 알려줌 주변 관광지 & 맛집 추천 여행지를 따라 거리를 고려한 방문 순서 제안 계획에 용이한 각 장소들 ..
UIUX 스터디 5주차 학습일지 03 : '당근' 클론디자인, 인터랙션 실습 - 15 9-1 ~ 9-10 쇼핑몰 실무 실습 Adobe XD와 Figma를 계속 사용해보면서 느낀 점은 하나에 익숙해지면 다른 하나는 금방 따라갈 수 있다는 점이다 쇼핑몰 실무 실습을 하는데 강사님은 Figma를 더 잘다루시는 것 같은지, XD에서는 반복 그리드나 패딩 등에서 효율적이지 못하게 작업을 하셨다 그래도 Lottie, 애니메이션 트랙패드 등 새로운 점을 알게 되어서 의미가 있었다 10-1 디자인 스타일가이드 정리 강의의 순서대로 따라가다보니 디자인가이드를 처음부터 구축하면서 만드는 것이 중요하다는 것을 알게된다 이후에 제플린으로 공유할 때에도 디자인가이드 구축의 중요성이 다시 생각났다 리스트나 컬러 부분에 있어서는 만들기가 쉬웠다 그러나 텍스트의 경우에 앱 화면을 먼저 디자인하고 만드니까 굉장히 불편..
UIUX 스터디 5주차 학습일지 02 : 컴포넌트 가이드라인 실습 - 14 8-1 상단 앱바 1 - 컨테이너, 스테이터스바(상태바), 3 - 타이틀, 2, 4, 5 - 아이콘 아이콘 사이 간격은 손가락 크기를 고려해 24px, 텍스트박스와 아이콘과의 간격도 24 타이틀 베이스라인 20 타이틀의 크기는 Headline 6적용 반응형 크기조정 8-2 탭 1 - 컨테이너, 2 - 활성 아이콘, 3 - 활성 텍스트, 4 - 활성 탭 표시기(인디케이터), 5, 6 - 비활성, 7 - 탭 4개 이상의 탭을 넣을 경우에 고정형이 아니라 스크롤러블 탭을 이용 8-3 내비게이션 드로워 8-4 하단 내비게이션 아이콘 3-5개 메뉴를 사용하도록 권장 3개는 탭바, 5개는 네비게이션으로 만드는 것이 좋음 8-5 버튼과 나인패치 사용자와 상호작용을 위한 접점으로 사용되기 때문에 그림자에 따라 고도를 ..
UIUX 스터디 5주차 학습일지 01 : 모바일 디자인의 이해 - 13 7-1. 모바일 환경의 이해 디자인 스타일가이드는 모바일 어플리케이션, 시스템 설계에 있어 자주 발생할 수 있는 공통적인 문제의 해결법 이 때 사용할 수 있는 최상의 가이드이자 템플릿 IOS와 안드로이드는 UI컴포넌트의 표현, 사용 상황이 조금씩 다름 UI 컴포넌트는 디바이스와 사용자간의 원활한 커뮤니케이션을 위해 필수적인 요소 향후 유지보수, 기능 확장을 할 때 용이함 웹에서 사용되는 것보다 모바일의 컬러 대비가 강하고 폰트의 크기가 큼 모바일기기 화면은 변화하는 환경에 맞도록 디자인과 컬러, 타이포그래피에 있어 동적 사용성을 고려하여 제공해야 함 밝은 환경, 어두운 환경, 동적 환경에서 모두 눈에 잘 띌 수 있도록 해야함 7-2. 디자인 랭귀지 UIUX디자이너는 디자인 랭귀지가 바탕이 되어 시각적인 ..

티스토리툴바