본문 바로가기

UXUI33

[231227]UXUI 디자인 입문 4주차 강의정리/HW_프로토타입 적용해보기 12/27 *강의 정리* 디자인툴 : 디지털로 이미지를 만들거나 편집할 수 있는 컴퓨터 프로그램 1) 인터페이스 디자인 툴: 피그마, 스케치, XD 2) 그래픽 디자인 툴: 포토샵, 일러스트레이 3) 3D: 시네마(유료), 블렌더(무료) 4) 모션 그래픽: 프리미어, 애프터이펙트 비트맵vs백터: 백터 파일 확장자 .svg, .eps, .ai 개발환경에서 사용가능한지 먼저 체크할 것 피그마, 스케치, XD -모두 벡터 기반 그래픽 편집(좌표를 기반으로 함)->왜? 반응형으로 디자인해야하기 때문에 -간단한 Lo-fi 프로토타이핑 -dev mode를 통한 그래픽->코드 변환 이용 용이 (피그마) 클라우드 기반, 멀티 플랫폼 지원 (스케치) 피그마 이전 가장 인기 있던 툴, 로컬 컴퓨터 기반이라 안정적, mac.. 2023. 12. 27.
[231226]UXUI디자인 입문 2주차 강의정리/HW_디자인 씽킹 적용해보기 12/26 2주차 강의 정리 *디자인 씽킹* 공감하기- 문제 정의하기-아이디어 발산하기-프로토타입 만들기-테스트하기 Q. 디자이너는 왜 디자인씽킹을 배워야 할까요? A. 빠른 시간안에 논리적, 현실적으로 눈에 보이는 것으로 만들 수 있도록 도와주기 때문이다. !!!효율적이기 때문!!! -데이터 드리븐: 데이터를 중심으로 의사결정 하는 것 *데이터=사용자에 대한 이해 데이터 드리븐가 중요한 이유 1)정확도 높은 의사결정 가능, 만드는 사람의 취향이나 주관이 들어가지 않도록 객관성 유지 2)빠른 의사결정으로 제품 개발의 속도 향상 -데이터는 다수의 사람이 빠르게 공감할 수 있는 수단, 다수의 의사결정이 빨라질 수 있다. 그러나 데이터는 도구이기 때문에 사용자에 따라 결과가 달라질 수 있음, 그렇기에 데이터를.. 2023. 12. 27.
[231226]UXUI디자인 입문 1주차 HW_자주 사용하던 서비스 분석해보기/강의 정리 12/26 -> UXUI 차이점? UI: 목적을 달성하기 위한 행동을 할 때 무언가와 상호작용하는 것을 도와주는 수단 UX: 감정, 경험 등 모든 것들..! HCI: 인간과 컴퓨터 간의 상호작용에 대해 연구하는 분야 CX: >UX, CS포함, 고객 여정의 모든 측면에서 고객의 모든 경험 BX: 브랜드-고객 ->UI 디자이너: 화면의 전체적인 구조, 시각적인 요소를 디자인한다. -레이아웃, 색상, 크기와 정렬, 컴포넌트 버튼, 아이콘 등을 디자인=GUI 디자이너 -> UX 디자이너: 총체적인 경험을 디자인하는 사람 ->프로덕트 디자이너: UX, UI 포함하여 제품 전반적인 경험을 디자인 ->JD분석! 필요역량: 나의 디자인을 잘 설득, 설명할 수 있어야 함, 커뮤니케이션 능력 ->디자인 가이드/지침서 : .. 2023. 12. 26.
[231222]WIL_클론 디자인 실시간 강의, 개인과제 피드백 12/22 *튜터님 강의_개인과제 클론디자인* -클론 디자인을 할 때는 Major를 선정할 것: 이커머스, OTT, 금융 어플 ->기능이 많고, 유저 많고, 빠르게 변경 되기 때문에(=리소스가 많다.) -비율이 괜찮은지, 배치가 왜/어떻게 되어있는지, 버튼이 왜 여기에 있는 지 등 디자인을 뜯어보고 계획을 세운 후! 진행할 것 -오토레이아웃...잘 활용... ->정렬이 맞아야 함!!!! 실무에서 중요 -도형에서 선으로 바꾸는 단축키 L -좌우 마진 16, 20 등으로 설정! -레스터화 단축키=컨트롤+E -도형 자를 때 그대로 잘리니까 래스터화 활용할 것!! 아마 엔터눌러도 되었던 거 같은데? 각도 조절하고 레스터화!(움직일 수가 있음) 아이콘 영역 잡기!!! *과제피드백* 프로토타입을 적용하는 것은 좋긴.. 2023. 12. 22.
[231221]TIL_과제 수정, UXUI 아티클 읽기, 관련 영상 찾아보기 12/21 *개인 과제 수정* search 화면 삽입 -클론하면서 자간이 다른 부분은 왜 그렇게 디자인 한 건지..? 사용자가 보기에 편하라고 그런걸까? -비교적 쉬운 과제였지만 무에서 유를 만드는 건 어려울 거라는 생각이 든다... -또한 레이어를 보기 좋게 정리하는 게 필요할까?! 주먹구구 식으로 만들었는데... -아이콘들은 기존의 것을 사용해도 좋지만..! 깨진다면 펜툴이나 일러스트로 그리자 https://www.figma.com/proto/pJee3HW8CGQZe5iKN8zvgT/%5BB13%EC%A1%B0%5D-%EA%B0%9C%EC%9D%B8%EA%B3%BC%EC%A0%9C_%EA%B9%80%EC%9D%80%EC%95%A0?type=design&t=gJ0UigeG9B42Z3qR-1&scalin.. 2023. 12. 21.
[231218]1주차 피그마 HW_플러그인 활용, 플로우 차트 그리기 12/18 *Plugins->Flow chart 실행* 요소 클릭 후 콘텐츠 내용 작성 연결 부분 화살표 클릭 후 도형 선택 연결 부분도 내용 작성 *강의 정리* boolean Group 플러그인-> 머터리얼 디자인 아이콘-> 가져오기 투명도 조절 단축키-> 숫자 5 색 스포이트 단축키-> I 그룹 단축키-> ctrl G 스타일 지정(반복할 때) 저장해놓고 사용 이미지를 한번에 내보낼 때 ctrl + shift + e Q. 프레임 안에 요소가 있는데 내보내지 않아진다면? A. 레이어 확인하기 *****!텍스트와 이미지를 함께 늘리는 법 단축키 k-> 답답했던 부분인데,,, 단축키 나이스,,,, !이미지 클리핑 마스크 우클릭 use a mask !클리핑 마스크 해제 마스크 영역인 도형을 선택 !플러그인 u.. 2023. 12. 18.