3일차입니다
아자아자....!!
아래는 수업 필기 내용입니다
- 피그마 툴 다루는 법
*** 여기저기 많이 쓰는 블러처리 !
플러그인
blobs => 요상한 모양 도형 자유롭게 만들 수 있음
ctrl + alt + c (속성복사)
Rename to = 이미지/
Number 상승
--> 선택 이미지들 상승 넘버링 name으로 변경됨
* BOOLEAN GROUP
ctrl + E = 진짜 완전히 하나의 도형으로 만들 때 = Flatten
아이콘 제작 전 준비사항
o 탭에 들어가는 아이콘의 크기가 모두 같아야 함
o 아이콘을 감싸는 24x24 크기로 모든 아이콘의 크기를 동일하게 만든다
o Figma > View – Pixel grid, Snap to pixel grid 체크하고 만들기 !
* 펜 그릴 때 드래그 X. 점 클릭 후 ESC 과정 반복.
*펜으로 그린 건 outline stroke 해주기
*shift + x = 면 선 색상 교체
*export 전 fill 빼기 해야 함
png는 잘 깨지고 그래서 아이콘으로 안 씀 svg로 써야 함 (export 할 때 svg로 하기)
* stroke는 가급적 inside를 사용할 것을 권장 (그래야 다른 오브젝트와의 거리에 변화가 안 생김)
WEBSITE LAYOUT
1. 헤더
브랜드의 이미지를 대표하는 핵심 영역
모든 화면에 일관성 있게 배치되며 로고, 회원가입, 장바구니, 메뉴, 다국어, SNS등 핵심 탐색 수단 제공
**** 헤더의 구성요소
1. 로고 또는 브랜드 식별자
2. GNB (GLOBAL NAVIGATION BAR)
3. 이벤트
4. 로그인 / 회원가입
5. 언어선택
*******
GNB = GLOBAL NAVIGATION BAR
어느 페이지에서든지 GNB를 이용하여 원하는 페이지로 이동하도록 배치한다
헤더 아래에 위치하거나 헤더 영역에 위치하기도 한다
LNB = LOCAL NAVIGATION BAR
GNB의 하위 개념
2. 히어로(=비주얼 섹션 / 메인 비주얼)
: 웹 사이트의 처음 주목을 끄는 이미지를 말한다.
* 사용자의 시선을 사로잡는 히어로 디자인
- 고퀄리티 이미지 또는 비디오를 사용하여 강렬한 메세지를 전달한다.
- 명확하게 사용자의 다음 행동을 유도한다.
- 사용자가 방문 목적과 가치를 빠르게 이해할 수 있게 한다.
- 다양한 디바이스를 고려하여 이미지 최적화를 한다.
3. 콘텐츠 섹션
4. 풋터
: 회사명, 개인정보, 연락처 등
가변영역 : 다양한 디바이스에 대비하기 위해 변하는 영역을 말함.
* UX 기획
리서치
= 진짜 문제점.
나만이 아니라 모두가 생각하는 명확한 문제점을 찾아와야..
-데스크 리서치
-트랜드 리서치
-경쟁사 리서치 (경쟁사 리서치 분석표 사용)
-SWOT 분석(강점, 약점, 기회, 위협)
-필드 리서치(설문조사 등)
어플 스토어 리뷰 따와도 됨
인터뷰도 진행 GO
설문조사 포폴에 꼭 넣기 !
1920 X 1280 - 포폴
본 후기는 [ 유데미 x 스나이퍼팩토리 ] UI/UX 포트폴리오 과정 2기(Blog) 리뷰로 작성 되었습니다.
'UIUX 포트폴리오 과정' 카테고리의 다른 글
| [유데미x스나이퍼팩토리] UI/UX 포트폴리오 2기 - 5일차 : 피그마 / 설문조사 제작, 모바일 UI (1주차) (1) | 2024.11.22 |
|---|---|
| [유데미x스나이퍼팩토리] UI/UX 포트폴리오 2기 - 4일차 : UX 기획 / 피그마 (1주차) (3) | 2024.11.21 |
| [유데미x스나이퍼팩토리] UI/UX 포트폴리오 2기 - 2일차 : UX/UI , 피그마 기초 배우기 (1주차) (3) | 2024.11.19 |
| 내가 보려고 정리하는 FIGMA 피그마 기본 단축키 (0) | 2024.11.18 |
| [유데미x스나이퍼팩토리] UI/UX 포트폴리오 2기 - 1일차 UI / UX란? (1주차) (4) | 2024.11.18 |