[유데미x스나이퍼팩토리] UI/UX 포트폴리오 과정 2기 - 사전직무교육 3일차 UX - 피그마 / UX 기획

본 후기는 본 후기는 [유데미x스나이퍼팩토리] UI/UX 포트폴리오 과정 2기(B-log) 리뷰로 작성 되었습니다.

 

 

컬러를 이용하여 효과적으로 메세지를 전달하고, 궁극적으로는 더 나은 사용자 경험을 만든다 

 

컬러 플러그인 

플러그인 Foundation Color Generato
명도 추출 / 명암비 알려주는 플러그인

 

 

플러그인 Tailwind CSS Color Generator
명도 추출 / 스타일과 베리어블로 만들어 주는 플러그인

foundation : Color Generator /. Tailwind CSS Color Generator

 

 

 

컬러 대비 검사 플러그 인

웹접근성 검사 플러그

Use Contras
Color Contrast

Color Contrast

 

색상 참고 사이트

https://www.colourlovers.com
http://pantone.kr
http://design-seeds.com
https://colorhunt.co/palettes
http://thepatternlibrary.com

 

 

PANTONE 팬톤코리아

 

레이아웃 Layout

레이아웃이란 문자, 사진, 일러스트, 색상 등 각종 레이아웃 요소들 간에 시각적, 기능적 조화를 바탕으로 배열 · 배치하여 디바이스에 전달하려는 메시지를 한눈에 보여주는 역할을 한다.

1. 웹 콘텐츠 읽기의 F 유형

 

닐슨 그룹의 연구에 따르면 사용자가 웹에서 콘텐츠를 읽는 방법으로 F패턴을 많이 사용한다
F자형 패턴은 사람들이 쉽게 스캔 할 수 있는 좋은 시각적 계층 구조를 가진 디자인을 만드는 데 도움이 된다.

 

2. 웹 콘텐츠 읽기의 역 피라미드

가장 중요하고 강력한 정보가 맨 위로 가고 2차 정보가 뒤에 따르며 더 일반적인 정보는 마지막에 오도록 한다.

디자인 구조는 그리드 상단을 효과적으로 이용하고 극대화하는 것이 좋다.

 

Spacing Unit 8px

레이아웃 설계 시 8px 배수로 이용 -> 개발할 때도 4의 배수가 편했는데 일관성있는게 좋을 듯 그래서 8의 배수인듯하다.

 

기본단위를 8px로 한다 

글자크기 - 16 24 32px

버튼 레디우스 - 8 16px

 

그리드 Digital Grid System

 

Grid는 격자나 바둑판 모양의 눈금을 뜻하며 일반적으로는 수직과 수평으로 면이 분할된 것을 의미한다

 

1. 통일성 – 전체 디자인에 통일감을 유지할 수 있다. 여러 페이지에 걸쳐 일정한 구조를 적용할 수 있기 때문에 일관성
있고 안정적인 느낌의 레이아웃을 이끌어 낼 수 있다
2. 편리성 - 사진, 글, 아이콘 등의 구성 요소들이 많을 수록 그리드를 활용해서 수월하게 디자인을 할 수 있다
3. 심미성 -컬럼을 활용하여 지면을 구성하는 것은 구성 요소들이 잘 정돈되어 보이는 효과를 준다.

 

일관성 있고 논리적인 화면 레이아웃을 만드는데 있다.

 

Column이란 구성요소를 이용하여 수직구조로 형태를 잡는다 

 

 

웹 디자인에서는 4, 6, 12, 16,24개를 사용하며 그중 12 컬럼을 선호한다.
2 2,3,4,6으로 나눌수 있어 매직 넘버라 불린다

 

 

 

 

 

 

 

 

 

 

 

 

---

피그마 

 

도형툴 알아보기 

 

도형 툴

- 사각형 (R)

- 원형 (O)

- 라인 (L)

 

모서리

 

Appearance 패널이용

도형편집

도형을 더블클릭 하거나 enter로 이용

esc로 종료

shift + x를 누르면 안에가 채워진다 

반복복제

 

cmd + d로 반복으로 복제가 가능

 

차트플러그인 

 

Figma Chart

 

 

 

마스크 

우클릭 -> Use as mask를 이용

 

디자인 파일 안에 있는 이미지를 도형에 채우기(잘 몰랐던거)

속성을 복사하는건 cmd + opt + C를 하고 붙여넣기

PNG로 복사하기는 cmd + Shift + C로 후 붙여넣기 

 

이미지 자르기 

opt 더블클릭해서 이미지편집모드로 자르기 

프레임을 cmd 누르고 드래그해서 이미지 자르기

[File] -> [Crop]

 

Blur처리 

background Blur는

fill - 30% 

blur는 좀 크게 한 50

 

블랍

blob generator 플러그인 사용

 

 

불투명도 단축키

100%- 0

50% -5

0% -00

12% - 빠르게 12 

 

 

이름 한번에 바꾸기 

 

여러이미지 선택 후 command + R

 

 

Boolean Group(불리언 연산)

 

 

불리언 연산은 2개 이상의 도형을 결합하거나, 교차된 영역을 제거하는 등의 기능이다

Union selection : 2개 이상의 도형을 서로 결합 
Subtract selection : 2개 이상의 도형이 겹쳤을 때 위에 있는 요소의 영역을 제거 
Intersect selection : 2개 이상의 도형이 겹쳤을 때 교차한 부분만 남김
Exclude selection : 2개 이상 도형의 겹친 부분만 제거
Flatten selection : 여러 레이어를 하나로 합친다<Cmd(Ctrl)+E>

 

 

 

 

 

 

검색 아이콘 만들기

Frame (24) 만들기
Layout grid – Grid(size 2) 만들기
정원을 (14, 10) 2개 그린다
Subtract selection 으로 가운데 뚫어준다
사각형을 (2x3pt,4x8) 2개 그린다
모두 선택해서 가운데 정렬 한다
-45 회전하고 프레임 중앙에 배치한다
24px 아이콘의 safe area-2px설정

 

 

사운드 아이콘 만들기
Frame (24) 만들기
Layout grid – Grid(size 2) 만들기
정원을 (20) 그린다
Arc(45/-25/100)변경한다

stroke 2px(end point-round
원을 복사해서 14/8로 크기를 변경한다

 

 

 

 

 

 

 

 

outline stroke 전 / 후

 

outline stroke를 꼭 해라 - 원을 이용해 만든 거라 그냥 클릭시 안보이는 원까지 범위가 되있기 때문이다 

 

 

p를 눌러 펜을 써서 opt(alt)누르고 점을 누르면 점 삭제  

 

 

플러그인

Texture

커뮤니티에서 texture검색하면 파일이 많이 나온다

Marble Textures https://www.figma.com/community/file/1177976680541721076
Plastic Overlay Textures https://www.figma.com/community/file/1406372793776213532
Paper texture https://www.figma.com/community/file/1343333487660958829
1000 Texture https://www.figma.com/community/file/1370508545199042511

Doodles

커뮤니티에서 doodles 검색하면 손그림 낙서 파일이 많이 나옴
https://www.figma.com/community/file/1258079851171283406/dooodles
https://www.figma.com/community/file/1241125633606791793/crispy-doodles
https://www.figma.com/community/file/1114946342742054612/abstract-blob-vector-shapes

 

 

---

UX 기획 

 

Double Diamond Process

클라이언트, 서비스 기획자, 디자이너, 개발자 등 프로젝트 모든 관계자를 위한 가이드라인이다

우리는 더블 다이어몬드 방법론을 이용하기로 했다.

 

개선프로젝트에서 가장 많이 사용하는 프로세스이다.
시장 분석과 타겟 설정을 통해 문제를 발견하고 목표를 세운 후 현장 리서치 결과를 활용하여 전략을 수립하고 프로토타이핑과 테스트 과정을 거친다.

 

Discover(발견)

1번째 단계인 Discover 단계 - 트랜드와 경쟁 현활을 분석, 단서를 찾는 단계

• 목표 수립
• UX 분석
• 이슈제기
• 데스크 리서치
• 필드 리서치

리서치

좋은 리서치를 위해서는 적합한 문제점(Painpoint)에서 출발하며, 명확하고 구체적인 방법이 강구되어야 한다
문제점(Painpoint)은 리서치의 목적이고, 조사포인트는 리서치 방법이다.

 

데스크 리서치

브랜드 조사, 경쟁사 분석, 시장 동향, 사용자 트랜드 등의 정보를 수집하여 프로젝트의 방향을 설정한다;
인터넷 검색, 책, 보고서, 시장조사 등의 다양한 채널에서  필요한 정보를 수집하는 방법이다.

 

트랜드 리서치

최신 트랜드를 파악하고, 타겟 사용자의 소비 패턴, 행동 패턴, 구매 패턴, 선호도 등 파악한다.

 

경쟁사 리서치

경쟁사의 콘텐츠 전략, 유형, 기능 등을 분석하고 차별화된 콘텐츠 전략을 수립한다.

 

SWOT 분석

SWOT분석은 분석 프레임워크이다
S(강점),W(약점),O(기회),T(위협)을 찾아내서 4분면에 나누어 기록한다