본문 바로가기

달밤에 디자인 초심찾기/디자인 프로세스

#4 - 디자인 시작

 

디자인 프로세스 중 마지막 항목인 정의에 대해 설명한다.

 

정의 사전 준비 디자인
디자인 목표 설정
디자인 컨셉 아이데이션
비쥬얼 컨셉 설정
프로토 타이핑 만들기
디자인 진행
스타일 가이드

디자인 템플릿
디자인 검수

 


 

 

디자인 진행

디자인 진행 전, 매일 공부

디자인은 설명할 수 없는 각자의 영역이다. 디자인 툴 사용에 대해 알 수는 있지만 디자인 자체를 도식화하여 배우기는 힘들다. 그래서 타인의 디자인을 많이 보고 따라 해 보는 것이 중요하다. 초심 찾기 프로젝트이니만큼 나는 Interactive Developer님(유튜버)이 소개해준 방법대로 디자인 공부를 열심히 할 예정이다. 

 

Interactive Developer 님의 디자인 실력 키우는 방법

  1. 다른 사람들 디자인 많이 보기
  2. 마음에 드는 디자인 컴포넌트 별로 저장하기
  3. 모작하기

 

나도 매일 디자인 인사이트를 얻는 습관을 기르기 위해, 아래 인사이트 편과 유튜브 채널 편을 정리했다. 이제 주기적으로 정리된 사이트 또는 유튜브 채널에 들어가 디자인 보는 눈을 기를 것이다.

 

 

#디자인 공부하기 - 인사이트를 얻을 수 있는 사이트

rosakim90.tistory.com/entry/1-%EC%9D%B8%EC%82%AC%EC%9D%B4%ED%8A%B8%ED%8E%B8?category=955595

 

#1 - 인사이트편

디자인 실무를 하는 사람이라면 다 알겠지만, 내가 까먹지 않으려고 기록하는 디자인 사이트 추천 인사이트 편. 모르면 안 되는 디자인 사이트 3 대장 #비핸스 www.behance.net/ Search projects | Photos, vid

rosakim90.tistory.com

 

#디자인 공부하기 - 디자인 공부 / 정보 습득에 좋은 유튜브 채널

rosakim90.tistory.com/entry/2-%EC%9C%A0%ED%8A%9C%EB%B8%8C-%EC%B1%84%EB%84%90-%ED%8E%B8?category=955595

 

#2 - 유튜브 채널 편

디자인을 하면서 보게 된 사이트 추천 유튜브 채널 편 실무 UX/UI 디자이너의 유튜브 채널 아래 두 채널은 시청자 포트폴리오를 컨펌해주는 컨텐츠를 진행하고 있다. 포트폴리오 컨펌 컨텐츠는

rosakim90.tistory.com

 

 

기준 해상도 / 그리드 / 컬럼 셋팅

디자인을 진행하기 전, 어떤 디바디스와 그리드로 몇 개의 컬럼의 디자인 산출물을 제작할지 설정한다. 자세한 설명은 양이 많아 아래 링크에 별도로 정리해 놓았다.

 

 

#디자인 시작 - 해상도 / 그리드 / 컬럼

rosakim90.tistory.com/entry/4-%EB%94%94%EC%9E%90%EC%9D%B8-%EC%A4%80%EB%B9%84-%ED%99%94%EB%A9%B4-%EC%85%8B%ED%8C%85

 

#8 -디자인 시작 - 화면 셋팅

디자인 시작에서 설명하지 못한 화면 셋팅에 대한 설명을 진행한다. 해상도 설정 해상도는 아래와 같이 여러 기준에 따라 환경을 달리한다. 모바일 작업 벡터 작업 사용 프로그램 : 스케치, 피그

rosakim90.tistory.com

 

디자인 진행

위의 사이트 또는 유튜브 채널로 보는 눈을 키우고, 해상도 / 그리드 / 컬럼 등을 설정했다면 아래 강의를 통해 스케치 강좌를 듣고 실제로 디자인을 해보자. 내가 처음 스케치를 접할 때 봤던 강의를 링크했다. 간단하게 보기 좋은 강의다.

 

 

#스케치로 디자인하기

designbase.co.kr/category/sketch_course/

 

스케치 | 디자인베이스

혹시 사이트가 이상하게 나오시나요? 브라우저 설정에서 캐시를 삭제해주시고, 최신 브라우저 사용을 권장 드립니다.

designbase.co.kr

 

 

아이콘 디자인

해당 부분은 내용이 많아 아래 링크에 따로 정리했다.

 

#디자인 시작 - 아이콘 

rosakim90.tistory.com/entry/7-%EB%94%94%EC%9E%90%EC%9D%B8-%EC%A4%80%EB%B9%84-Gesture

 

#7 - 디자인 준비 - 아이콘

런처 아이콘 Product Icon / App Icon / Launcher Icon등 칭하는 단어가 많다. 궁극적으로 앱을 실행시키는 아이콘을 말한다. OS별 규격이 다르기 때문에 하단 내용에 따라 가이드를 따라야 한다. Android Mater

rosakim90.tistory.com

 

 


 

 

스타일 가이드

디자인 가이드는 제플린을 많이 활용한다. 사실상 스케치 파일을 그대로 업로드하는 방식이라 크게 어려운 부분은 아니다.

 

#제플린 사용 방법

designbase.co.kr/sketch-10/

 

스케치에서 제플린을 올바르게 사용하는 방법 - 스케치 강좌

스케치 강좌 열 번째입니다. 이번에는 핸드오프 툴로 아주 유명한 제플린을 알려드릴게요. 제플린 회원가입부터 제플린 맥 OS 툴 설치, 스케치 전용 제플린 플러그인 설치까지 해보고 어떻게 작

designbase.co.kr

 

#스타일 가이드 형태

디자인 가이드에서 자주 사용하는 스타일 가이드 형태이다. Pinterest에서 Style Guide라고 검색하면 더 많은 정보를 확인할 수 있다.

www.pinterest.co.kr/pin/46936021097096244/

 

Pinterest에서 발견

회원님을 위한 아이디어를 더 많이 발견하세요.

www.pinterest.co.kr

 

디자인 템플릿

제플린으로 설명되지 않는 공통 요소에 대해서는 PPT 파일을 별도로 만들어 퍼블리셔 또는 프론트엔드에 제공한다. 본인은 위키에 디자인 템플릿을 제작하는 방식을 사용한다.

 

 

디자인 검수

가이드와 일치하지 않는 부분을 엑셀 파일에 정리하여 퍼블리셔 또는 프론트엔드에게 전달한다. 

 

'달밤에 디자인 초심찾기 > 디자인 프로세스' 카테고리의 다른 글

#6 - 디자인 정의 - 폰트  (0) 2020.12.03
#5 - 디자인 정의 - 컬러  (0) 2020.12.03
#3 - 사전 준비  (0) 2020.12.01
#2 - 디자인 정의  (0) 2020.12.01
#1 - 디자인 순서와 사용 툴  (0) 2020.11.29