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등이 있음. 부분에 대한 명칭과 내용)
스토리보드
: 정책, 프로세스, 와이어프레임, 설명 등이 포함된 설계문서. 기획자가 최종적으로 디자이너에게 넘겨주는 파일
: 프로토타입, 와이어프레임이 모두 완료되고나면 나옴
마크업
: 디자인된 결과물을 디바이스 환경에 맞는 구조로 바꾸는 과정
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: 메뉴, 탭, 버튼 등 구성요소, 아이콘, 그래픽를 디자인
웹: 브랜드/컨텐츠 디자인
모바일(모바일만 하면 웹 할때 조금 힘들수도 있다고 한다)
서비스: 배너 및 프로모션디자인(주로 그래픽에 특화)
<벤치마킹폴더>
시간날때마다 맘에 드는 앱화면 캡처, 업그레이드 시키고 싶은 화면 캡처