달밤에 디자인 초심찾기/디자인 프로세스 (11) 썸네일형 리스트형 #10 - 스케치 스케치 기본 스케치는 최근 많이 사용했고, 무료 강의가 워낙 잘되어있기 때문에 간단하게 짚고 넘어가는 수준으로 넘기려고 한다. 나도 디자인 베이스에서 처음 스케치 사용법을 익혔으며, 포토샵을 사용했던 사람이라면 10개 정도의 강의만 봐도 쉽게 이해할 수 있는 정도이다. #스케치 무료 강의 링크 designbase.co.kr/category/sketch_course/ 스케치 | 디자인베이스 혹시 사이트가 이상하게 나오시나요? 브라우저 설정에서 캐시를 삭제해주시고, 최신 브라우저 사용을 권장 드립니다. designbase.co.kr 스케치 인터페이스 The Canvas : 작업 공간 Toolbar : 기능을 제공하는 부분. 우클릭을 하여 편집할 수 있다. The Inspector : 선택한 요소의 속성 정보.. #9 - 제스쳐 Gesture 행동에 대한 가이드를 정확하게 내리기 위해 제스처에 대한 명칭을 알고 있어야 한다. Navigation Gestures Tap : 터치 scroll : 위아래 스크롤링하는 제스처 pan : 화면에 손가락을 대고, 계속적으로 드래그하는 움직임. 지도 화면에서 많이 관찰됨 drag : 특정 오브젝트에서 손가락을 대고, 정해진 방향으로 움직인 후 손가락을 떼는 행위 swipe : 손가락을 터치한 상태에서 일정한 직선거리를 움직이는 행위 pinch : 두 개의 손가락으로 확대 / 축소 / 회전하는 행위 Action Gestures Tap : 터치 Long Press : 꾹 누름 swipe :손가락을 터치한 상태에서 일정한 직선거리를 움직이는 행위 Transform Gestures Doule Tap.. #8 -디자인 시작 - 해상도 / 그리드 / 컬럼 디자인 시작에서 설명하지 못한 화면 셋팅에 대한 설명을 진행한다. 해상도 설정 해상도는 아래와 같이 여러 기준에 따라 환경을 달리한다. 모바일 작업 벡터 작업 사용 프로그램 : 스케치, 피그마와 같은 벡터 기반 프로그램 작업 방법 : 최소 사이즈인 360 x 640기준 작업 해상도 대응 : 최소 사이즈에서 각각에 맞는 배수로 늘려 사용 비트맵 작업 사용 프로그램 : 포토샵과 같은 비트맵 기반 프로그램 작업 방법 : 최대 사이즈 또는 중간사이즈인 2 배수/4배 수로 작업 해상도 대응 : 중간 사이즈에서 축소/확대하거나, 최대 사이즈에서 축소하여 사용. 그래픽 리소스 때문에 2 수 기준(720x1280)으로 작업하는 경우가 많음 공통 작업 방식에 따라 기준 해상도를 정하여 퍼블리셔 또는 프론트엔드와 공유 작.. #7 - 디자인 시작 - 아이콘 디자인 시작에서 설명하지 못한 아이콘에 대한 설명을 진행한다. 런처 아이콘 Product Icon / App Icon / Launcher Icon등 칭하는 단어가 많다. 궁극적으로 앱을 실행시키는 아이콘을 말한다. OS별 규격이 다르기 때문에 하단 내용에 따라 가이드를 따라야 한다. Android Material Design에서 런처 아이콘(Product Icon)에 대해 가이드를 제공한다. 안드로이드의 경우 Crop을 염두해놓고 잘리지 않도록 고려해야 하며, 런처 아이콘을 시뮬레이션할 수 있는 사이트에서 테스트가 가능하다. #Material Design에서 권장하는 런처 아이콘 가이드라인 material.io/design/iconography/product-icons.html#design-princip.. #6 - 디자인 정의 - 폰트 디자인 정의에서 설명하지 못한 컬러에 대한 설명을 진행한다. 서체 관련 단어 서체를 뜻하는 단어 typo : 오타 typography : typeface를 가지고 제작하는 그래픽 typeface : 서체가 가지고 있는 느낌을 포함한 큰 범위 font : 특정한 서체 하나 서체 스타일 serif : 돌기형 장식 요소가 있는 경우/각진 세리프도 있음 san-serif : 돌기형 장식 요소가 없는 경우 script : 손글씨 decorative : 장식적 요소가 많은 서체 서체 관련 세부 명칭 baseline : y나 P와 같이 밑으로 돌출되어 있는 형태를 제외한 기본 바닥 줄 Cap Height : M이나 I와 같이 평평한 대문자의 최 상단 줄 x-height : 소문자 X의 높이를 나타낸다. 본문용 서체는.. #5 - 디자인 정의 - 컬러 디자인 정의에서 설명하지 못한 컬러에 대한 설명을 진행한다. 컬러 시스템의 이해 웹에서는 RGB를 주로 사용하지만, 상황에 따라 CMYK나 HSB, HBL 등을 사용한다. 자세한 설명은 아래와 같다. 항목 내용 RGB 1. Red Green Blue 빛의 혼합 2. 빛의 혼합이기 때문에 많은 색을 혼합할 경우 밝아짐 3. RGB 색상을 웹에서 단순하게 표현하기 위해 만들어진 코드가 HEX code 4. 헥사 코드는 #과 6개의 숫자로 구성되어 있으며, 앞에서 부터 2자리 씩 레드 그린 블루 색상값을 표현함 5. 이때 생상 값은 "0123456789abcdef"순으로 표현하며, 0에 가까울 수록 빛이 어둡고/ F에 가까울 수록 빛이 밝음 CMYK 1. 출판 인쇄에서 많이 사용됨 2. Cyan Magenta.. #4 - 디자인 시작 디자인 프로세스 중 마지막 항목인 정의에 대해 설명한다. 정의 사전 준비 디자인 디자인 목표 설정 디자인 컨셉 아이데이션 비쥬얼 컨셉 설정 프로토 타이핑 만들기 디자인 진행 스타일 가이드 디자인 템플릿 디자인 검수 디자인 진행 디자인 진행 전, 매일 공부 디자인은 설명할 수 없는 각자의 영역이다. 디자인 툴 사용에 대해 알 수는 있지만 디자인 자체를 도식화하여 배우기는 힘들다. 그래서 타인의 디자인을 많이 보고 따라 해 보는 것이 중요하다. 초심 찾기 프로젝트이니만큼 나는 Interactive Developer님(유튜버)이 소개해준 방법대로 디자인 공부를 열심히 할 예정이다. Interactive Developer 님의 디자인 실력 키우는 방법 다른 사람들 디자인 많이 보기 마음에 드는 디자인 컴포넌트 .. #3 - 사전 준비 디자인 프로세스 중 두 번째 항목인 사전 준비에 대해 설명한다. 정의 사전 준비 디자인 디자인 목표 설정 디자인 컨셉 아이데이션 비쥬얼 컨셉 설정 프로토 타이핑 만들기 디자인 진행 스타일 가이드 디자인 템플릿 디자인 검수 비쥬얼 컨셉 설정 비쥬얼 컨셉 정리 앞에서 진행한 디자인 컨셉 아이데이션을 바탕으로 어떤 디자인을 진행할 것인지 구체화하고 아래 내용에 대해 정리한다. 무드 보드에 대한 설명 선택한 컬러를 사용한 이유 선택한 폰트를 사용한 이유 #디자인 정의 rosakim90.tistory.com/entry/2-%EB%94%94%EC%9E%90%EC%9D%B8-Define #2 - 디자인 정의 디자인 프로세스 중 첫 번째 항목인 정의에 대해 설명한다. 정의 사전 준비 디자인 디자인 목표 설정 디자인 컨.. 이전 1 2 다음
