1주차(2/3)-웹사이트 설계[XD,스케치,피그마 차이/피그마 시작/Behance만들어보기]

User Experience

User Interface - 서로 다른 두 개의 시스템, 장치 사이에서 정보나 신호를 주고 받는 경우의 접점이나 경계면

게임 ui

---

UX

1. 스마트폰에서 사진을 확대하거나 축소할 때, 스크롤을 내릴 때 손가락 제스쳐

2. 디자인 외에 확장의 개념으로 사용자에게 좋은경험을 줄 수 있는 무언가. 예를 들면 액션이나 사진을 보기까지의 프로세스를 고민한다. 보다 쉽게 편하게 할 수 있도록 한다.

3. 행동에 대한 사용자의 경험을 좋게, 편하게 만들자.

4. 신한은행 앱 vs 토스 앱

토스는 프로세스를 줄여나가는 고민을 함

---

데이터 드리븐 디자인(마케팅)

AB test

1. 한달동안 빨강, 초록 버튼을 만들어두고 두 색 중 어느 버튼이 더 많이클릭되었나? 초록으로 결정

2. 폰트, 폰트 사이즈 등 사용자의 행동패턴을 데이터로 만들면 디자인에 도움이 된다. 

3. 포탈 사이트 네이버 카카오 아마존 페이스북 등 많이 사용함

4. 회의감 : 품절 상품 숨기기 버튼을 사용자의 요구에 의해 크게 만들었을 경우

데이터만 봤을 땐 크게 만드는게 맞는데 클릭률만 높이는게 중요한게 아니라 전체적인 밸런스 상하관계가 중요하다.  

브랜드 가치를 망치진 않는지 고려해봐야한다. 

5. 데이터도 중요하지만 종합적으로 생각 할 수 있는 사고가 중요하다. 다양한 시각과 다양한 분야의 지식이 필요하다. 

---

스케치

 :프로그램 완성도가 좋다. 맥에서만 사용가능함. 가볍고 퀄리티가좋다. UIUX가 직관적으로 잘 잡혀있다.

1. 컴포넌트

회사소개 찾아오시는길 인사말 등 10페이지

앱에는 공통으로 들어가는 요소가 많다. 100페이지에 들어간 공통 요소를 수정할 때 하나하나 수정해야 됐다. 

컴포넌트를 사용한다면 어딘가에 그려놓고 가져다 둔다. 예를 들어 하단 메뉴가 한번에 수정된다.

2. 제플린

개발자는 몇픽셀 떨어져있는지 폰트 사이즈가 몇인지 알 수 없기때문에 기존에는 디자이너가 가이드를 만들었다.

요소가 많아서 각각의 가이드를 준다는게 피곤한 작업이다. 수정이 될때마다 가이드를 바꾸는 번거로운 상황이었는데 제플린이라는 프로그램이 해결해준다.

마우스를 가져다주면 사이즈 간격 색 등 수치적으로 알려준다.

피그마는 통합되어있어 제플린이 필요없다.

---

Xd

 :다른 어도비 프로그램과 호환성이 좋음. 프로그램 완성도나 UIUX가 셋중에 가장 떨어지고 무겁다.

---

피그마

 :협업에 최적화되어있다. 올인원 패키지 프로그램. 부분 무료

1. 웹기반

링크 주소로 협업가능하다.

버전관리 수월함. 

2. 벡터

이미지를 표현하는 방식

비트맵 : 점묘화, 확대시켜보면 깨진다. jpg, png 등

비트맵

벡터 : 수학공식으로 만들어낸 그림. 아무리 확대해도 깨지지않음. 고해상도에 최적화 되어있음.

벡터의 단점. 풍경이나 복잡한 이미지는 그려낼 수 없다. 로고, 아이콘 단순한 형태들은 가능함.

비트맵과 비교했을 때 벡터가 가볍다. svg 확장자 사용함. 

벡터

---

피그마

아이폰

너비 370 높이 620

앱은 전체를 쓴다 하지만 모바일 웹은 일반적으로 상단 하단 잘리는걸 감안해야함

단축키

1. 축소 확대

ctrl + - 

2. 작업영역 이동

스페이스 드래그

3. 메뉴바 숨기기

ctrl |

4. 텍스트 

T

5. 프레임 

F

6. 커서

V

7. 각각의 간격

alt 

alt 방향키

코멘트

프로젝트 쉐어

 

---

Search Projects | Photos, videos, logos, illustrations and branding on Behance

 

Search Projects | Photos, videos, logos, illustrations and branding on Behance

우클릭 > 검사 > 소스코드로 복사하기 "svg"

등록에 파란색 찾기

비슷하게 만들어보기

000000 검정은 잘 쓰지않는다 부자연스러움

그룹(ctrl+g)도 잘 쓰지않음