본문 바로가기

UXUI72

[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.
[231220]피그마 개인 과제_클론 디자인 12/20 개인 과제하면서 배운 점 펜으로 누끼 딸 때 shift 누르면 한 쪽 핸들 없어짐 일러, 포토샵할 때 쓰던 게 도움이 되다닝... 누끼 자동으로 따주는 pixcut background remover plugin 왜 나는 appkey 안 먹는 거지,,,,,??????? 중요한 기능도 아닌데 사진 10개 누끼 펜툴로 따느라 시간 왕 잡아먹음,,ㅠ 여튼! 개인 과제 얼추 정리했는데 하면서 배운 것? 느낀 것? -누끼 따는 pulgin이 save가 안된다... 되면 펜툴로 안따도 되었을텐데 결국 펜툴로 따고 마스크 씌워서 배경을 지웠다. -백터가 뒤에 있어야 마스크 씌워짐 -Boolean Group_intersect seclection또한 백터가 밑에 있어야지 원하는 대로 가능(fill 채울것!) -.. 2023. 12. 20.
[231220]4주차 피그마 HW_피그마로 포트폴리오 만들기 12/20 https://www.figma.com/proto/yrdJGYbi0GQiVNC76giVsB/Untitled?type=design&node-id=1-2&t=It1Eq84Itixnwcqp-1&scaling=scale-down&page-id=0%3A1&mode=design Figma Created with Figma www.figma.com 만들면서 느낀 점 prototype 지정하는 게 꽤 까다롭다. 2023. 12. 20.
[231219]4주차 피그마 강의 정리_시각자료 템플릿 만들기, 피그마 기능, 단축키 12/19 *플러그인으로 시각자료 템플릿 만들기* -Plugin_Mockup 소스 활용: 썸네일 등 (제품, iphone 실물 사진 등) -Plugin_Unsplash(랜덤이미지 활용가능): 인덱스 등 -Plugin_Wireframe Desingner: 주제 검색 후 활용 가능 -Plugin_Product Planner -Plugin_Charts: 인포그래픽 차트 활용 -Plugin_Color Paletts: 캔버스에 넣고 스포이드 (단축키 I)로 색 가져오기 *피그마 활용 발표* -Prototype에서 Flow starting point=시작점 설정 가능 -여러개 file->PDF 묶어보낼 때 = File->export to frame(내보낼 파일을 새로운 창에 뽑기) -이미지 저장 후 PDF로 묶는 .. 2023. 12. 19.
[231219]3주차 피그마 HW_프로토타입, 스마트 애니메이션 12/19 *유저 플로우* 사용자가 제품, 서비스를 사용할 때 취하는 전체 경로를 표시하는 다이어그램 *화면 설계서* -오토레이아웃을 잘 활용할 것 -오토레이아웃 리사이징 확인하기 *Prototype* 화면 순서, 플로우 간을 연결시켜 트리거를 통해 어떤 화면으로 어떤 이터랙션 스타일로 이동할 것인지 목업으로 보여주는 것 -다중 컴포넌트로 활용을 같이 하면 좋다. *스마트 애니메이션* -이미지 플러그인: upsplash -레이어 이름 순서 확인!!!!! 핵심화면을 먼저 제작할 것 *피그마 미러 앱* 폰으로도 플로우를 볼 수 있다. 2023. 12. 19.
[231218]2주차 피그마 강의 정리_오토레이아웃 12/18 *오토레이아웃: 컨텐츠에 따라 자유롭게 변형되는 프레임->요소 수정할 때 자동으로 사이즈 변경 된다. ->Auto layout 패널 활용! ->ctrl+shift+G로 해제 ->패딩값 조절 canvas stacking: 겹쳤을 때 정렬 단축키: shift+A 반응형 레이아웃 *오토레이아웃 리사이징: 프레임 생성 시, 상위 프레임 사이즈가 조정될 때 콘텐츠와 컨테이너가 어떻게 반응해야할지 설정하는 속성 1. Hug contents: 안에 콘텐츠가 있어야 뜬다. 2. Fill: 바깥에 컨테이너가 있어야 뜬다. 3. Fixed: 상대적 개념이 아니라 모든 경우에 뜬다. 컨테이너>컨테이너 또는 콘텐츠>콘텐츠 텍스트 대문자-> 더보기에서 대문자 변경 자동으로 가능 *컴포넌트* 컴포넌트가 master -.. 2023. 12. 19.
[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.

티스토리툴바