본문 바로가기

UXUI/강의학습일지

(30)

[강의학습일지] UXUI 디자인 입문 4주차 숙제 - 피그마 프로토타입 만들기 1. 장바구니 화면의 Button/Menu 버튼 클릭> 메뉴 화면으로 이동(Navigate to)- 메뉴 화면이 흐린 상태에서 진해지며 노출 (Dissolve) 2. 메뉴 화면의 Button/Close 버튼을 클릭하면 장바구니 화면으로 이동 (Navigate to)- 장바구니 화면이 흐린상태에서 진해지며 노출 (Dissolve) 3. 장바구니 화면의 List Item 3을 클릭하면 상세 화면으로 이동 (Navigate to)- 상세 화면이 장바구니 화면 위로 밀어 들어오며 노출 (Move in) 4. 상세 화면의 Button/Back을 클릭하면 장바구니 화면으로 이동(Navigate to)- 상세 화면이 밀려나가며 아래로 장바구니 화면이 노출 (Move out)

[강의학습일지] UXUI 디자인 입문 4주차 강의 인터페이스 디자인 툴 (피그마, XD, 스케치)인터페이스: 다양한 디바이스 화면을 대응하게 됨 (벡터 방식)픽셀디지털 이미지를 구성하는 최소 단위의 점픽셀수가 많을수록 품질↑용량↑, 편집 시 픽셀수가 변해 손상 있음.jpg, .jpeg, .png, .gif (비트맵 이미지)벡터그래픽을 함수공식으로 표현한 것(좌표, 정수로 만들기)비트맵에 비해 용량이 적지만, 그래픽 모양을 좌표로 저장하기 때문에 복잡한 이미지를 벡터로 만들면 파일 용량↑반응형 디자인은 벡터로 제작.svg, .eps, .aiDev mode화면디자인을 하고 파일 그대로 코드변환을 할 수 있음엔지니어와의 협업이 용이해짐 Dev Mode: Design-to-Development | FigmaFigma's Development Mode helps..

[강의학습일지] Figma 활용법(1) 2, 3주차 강의 프레임과 그룹 그룹: 코드 블록 X, 개체를 묶을 때 사용(디자인 복잡한 그래픽). 그룹 내 개체가 따로 지정 X (같이 움직임)프레임: 코드 블록 O, 각각 블록 따로 지정 O (모든 것이 별개인 상태) 프레임그룹용도피그마에서 코드 블록을 만드는 기능이자, 실제 화면으로 인식하는 개체다른 개체나 프레임을 넣을 수 있어서 컨테이너(Container)라고도 부른다.디자인을 정리하는 편의성을 위해 사용디자인이 복잡하거나 그래픽이 필요할 때 사용여러 요소를 한번에 컨트롤할때 사용코드인식코드 블록으로 인식 가능코드블록으로 인식하지 않음묶기묶을 프레임 선택 후 Frame selection (Ctrl+Alt+G)묶을 개체 선택 후 Group Selection (Ctrl+G)개체변경(스타일/크기)스타일 적용 시에 프..

[강의학습일지] UXUI 디자인 입문 3주차 숙제 - 테스트케이스 작성 + 디자인 QA로 발견한 이슈 공유하기 1. 테스트케이스 작성하기 (뱅크샐러드) 화면조건테스트케이스입력값기댓값테스트환경휴대폰 본인인증 정상모든 텍스트 필드에 정상 값 입력name:'홍길동'입력완료 후 다음단계 진행iOS에러형식에 맞지 않는 값 입력 (특수문자)name:'??'텍스트필드 아래에 오류 메시지 노출 '한글 또는 영문으로 입력해주세요'정상모든 텍스트 필드에 정상 값 입력number:'주민등록번호'입력완료 후 다음단계 진행에러형식에 맞지 않는 값 입력 (주민등록번호 앞 7자리)number:'주민등록번호' 아닌 값텍스트필드 아래에 오류 메시지 노출 입력한 정보를 확인해 주세요'정상모든 텍스트 필드에 정상 값 입력number:'000-0000-0000'입력완료 후 다음단계 진행에러형식에 맞지 않는 값 입력 (휴대폰 번호)number:'0..

[강의학습일지] UXUI 디자인 입문 3주차 강의 제품팀 최소 인력제품관리자 1명PM (Project Manager) 제품의 전략을 세우고 우선순위를 결정해 실행함PO (Project Owner) 전체 프로젝트를 관리함디자이너 1명엔지니어 2명조직목적조직=제품팀=스쿼드(Squad), 사일로(Silo)여러 직무의 사람이 모인 팀(기획, 개발, 디자인 등) 기능조직=챕터(Chapter)유사직무끼리 구성된 팀(전문성을 높일 수 있음) TF(Task Force)특정 목적을 위해 구성된 임시 조직 매트릭스 조직(목적조직+기능조직)주로 스타트업 린스타트업빠르게 만들어서 테스트하고 결과를 제품에 반영함 애자일짧은 시간안에 설계-디자인-개발-테스트로 빠르게 만들고반복 디자인 프로세스1. 기획(1) 문제 정의(2) 아이데이션(3) 프로덕트 스펙 문서 작성2. 디자인(1..

[강의학습일지] UXUI 디자인 입문 2주차 강의 디자인 씽킹논리적으로 제품을 만들 수 있도록 도와주는 프레임 워크(틀)가장 보편적이고, 빠른 시간에 논리적, 현실적으로 만들 수 있음데이터를 체계적으로 활용할 수 있음1. 공감하기 Empathy사용자: 제품을 쓰면서 회사에 돈을 벌어다 줌UX/UI 디자이너는 끈질기게 사용자를 조사하고, 분석해서 더 많은 사용자가 제품을 잘 쓸 수 있도록 디자인해야인터뷰나 관찰 등의 다양한 방법으로 사용자와 공감대를 맞추고, 그들의 경험을 완전히 이해하기 위한 노력을 하는 단계A-E-I-O-U 관찰법 (5)가상의 퍼소나를 (생각과 느낌, 말과 행동, 유저가 보게되는것, 듣는것) 생각하고 관찰하는 방법론 활동 Activities (행동, 반응, 제스처)환경 Environments (인터뷰하는 장소 주변 ex.집 / 유저가 ..

[강의학습일지] UXUI 디자인 입문 2주차 숙제 - 디자인 씽킹을 활용해 스카이스캐너 앱 개선 아이디어 도출 주제: 여름휴가때 가성비 좋은 해외여행을 떠나고 싶은 30대 직장인 여성1. 공감지도로 공감하기생각과 느낌 (걱정하는 것, 만족/불만, 요구사항)보는 것 (시간을 보내는 장소, 생활 환경)여행가고싶은데 어떤 여행지가 좋지?여행 테마는 무엇으로 잡아야 하지?휴가시즌이라 항공권 가격이 많이 비싸겠지?항공권이 저렴한 시기는 언제일까?최저가 항공을 모아서 보여주는데, 항공사에서 직접 예매하는것과 차이가 있을까?대중교통으로 출퇴근 할 때회사 책상에 유명한 여행지 사진을 붙여놓음핸드폰, 노트북 배경화면이 과거 여행지에서 찍은 사진임여가시간에 유튜브로 여행 브이로그를 찾아봄듣는 것 (관심,정보를 얻는 곳, 영향 주는 사람)말과 행동 (대화시주로사용하는단어,말과 실제 행동차이)TV 여행프로그램여행 컨텐츠 유튜브SNS에..

[강의학습일지] UXUI 디자인 입문 1주차 숙제 앱 분석하기 - 사운드클라우드 (Soundcloud) Dark Mode | Apple Developer DocumentationDark Mode is a systemwide appearance setting that uses a dark color palette to provide a comfortable viewing experience tailored for low-light environments.developer.apple.com Dark Mode앱 업데이트 이후 디폴트 화면이 다크모드가 됐다.기존에는 배경(Secondary) 컬러가 흰색이었는데 다크모드처럼 변해서 다크모드로 착각하는 사용자가 있을 것 같다. Stream and listen to music online for free with SoundCloudDiscover and play ove..

[강의학습일지] UXUI 디자인 입문 1주차 강의 UX감정을 일으키거나 특정한 경험을 할 수 있도록 이끄는 것브랜드를 이용할 때 느끼는 모든 경험HCI (Human Computer Interaction)인간과 컴퓨터 간의 상호작용에 대해 연구하는 분야사람이 컴퓨터를 더 쉽게 사용할 수 있게 개선CX (Customer Experience)브랜드를 경험하면서 받는 느낌이나 인상CX에는 고객서비스(CS)가 포함됨BX (Brand Experience)브랜드와 상호작용할 때 갖는 전반적 인식, 감정 등CX, UX가 BX에 포함됨이름, 로고, 컬러, 슬로건 등 브랜드 아이덴티티나이키: 스우시 로고, Just Do It 슬로건, 조던 =BXUI 디자이너 (GUI 디자이너/Graphic)화면의 전체적 구조와 시각적 요소를 디자인UX 디자이너기획 및 설계, 사용자 분석..

[강의학습일지] Figma 활용법(1) 1주차 강의 UXUI 디자이너에게 가장 중요한 것1. 사용자의 문제를 해결해주려고 하는 끈기와 집요함2. 논리적으로 생각할 수 있는 것2-1. 상대방에게 설명, 설득할 수 있어야 함2-2. 상대방이 나와 다른 이야기를 했을 때 합리적이라면 수용할 수 있는 열린 사고3. 우리 웹사이트 들어오는 사용자들에 대한 관심, 애정 제품 제작 과정아이데이션 - 와이어프레임, 플로우차트 - UI 설계, 디자인 시스템 - 프로토타이핑 - 개발 핸드오프Figma 둘러보기Drafts (연습파일): 커뮤니티에서 가져온 파일도 여기에 저장됨Tab (탭): 전환하기 Ctrl+Shift+[/]Import (불러오기): .fig 확장자 파일 불러오기Community (커뮤니티): 가격, 저작권 확인하기 (검증된 플러그인 사용)Figma 디자인..

이전 1 2 3 다음

티스토리툴바