UI/UX 디자인 실무 프로세스

1. 디바이스란

: 화면이 있는 모든 기기

ex. 스마트폰, 놋북, 데탑, 네비...

2. 해상도

DPI: Dot Per Inch

커질수록 화면/종이가 커진다. 

PC: 72dpi

인쇄물: 300dpi 이상

그러나 스마트폰은 화면 사이즈에 비해 DPI값이 높다.

PPI: Pixels Per Inch

아이폰6(326ppi) 750*1334

아이폰6플러스(401ppi) 1242*2208

3. 실무 프로세스

[1] 프로젝트 발주

[2] 기획

기획자가 스토리보드를 만들어 디자이너에게 전달(기획자 연봉이 높다고 함)

<용어정리>

프로토타입
: 가상플레이어 
: 실제 서비스처럼 인터렉션이 결합되어 작동하는 모형. 
: 실무에서는 포스트잇을 붙여가며 가상플레이.
: 이것이 완료되면 와이어프레임을 짠다.

와이어프레임
: UI중심의 화면 레이아웃(화면 설계서)
: 화면디자인에 대한 설명과 기능적 설명이 들어있는 것
(UI정의서. 화면모양에 Header, GNB, Title, Contents, SNS, Footer등이 있음. 부분에 대한 명칭과 내용)

스토리보드
: 정책, 프로세스, 와이어프레임, 설명 등이 포함된 설계문서. 기획자가 최종적으로 디자이너에게 넘겨주는 파일
: 프로토타입, 와이어프레임이 모두 완료되고나면 나옴

마크업
: 디자인된 결과물을 디바이스 환경에 맞는 구조로 바꾸는 과정

[3] 디자인

UI 요소.

폰트 사이즈, 위치, 공간 등은 디자이너가 UI를 해석한 후 진행한다. (요소의 특징을 알아야함)

폰트사이즈는 3가지씩 잡아두고 이 안에서만 사용하여 강약조절을 한다.(강약조절 중요)

[4] 마크업

디바이스언어를 입힌다. 이 단계를 퍼블리싱이라 한다.

모바일 웹은 마크업이 없다.

[5] 개발

마크업 결과물에 세부기능을 입혀준다

[6] QA(Quality Assistant)

최종 체크

<검색 방법>

키워드 + 형식 및 조건

Grunge texture, Button psd, Icon ai

<참고 사이트>

pinterest.com

iconmonstr.com 심플 아이콘

behance.net 세계 디자이너 포트폴리오

fubiz.net 트렌드 리포트

dribbble.com

thefwa.com

awwwards.com 데일리 웹디자인

graphicburger.com 아이콘, 목업, UI, 이펙트

<디자이너 종류>

Common: 메뉴, 탭, 버튼 등 구성요소, 아이콘, 그래픽를 디자인

웹: 브랜드/컨텐츠 디자인

모바일(모바일만 하면 웹 할때 조금 힘들수도 있다고 한다)

서비스: 배너 및 프로모션디자인(주로 그래픽에 특화)

<벤치마킹폴더>

시간날때마다 맘에 드는 앱화면 캡처, 업그레이드 시키고 싶은 화면 캡처