초보와 프로는 기본기의 유무로 나뉜다!
웹 디자인 에이전시 20년 실무 노하우와 10년 강의 경험을 담은 웹 디자인 개념서!

내 눈에만 좋은 디자인은 그만! 이제 모두가 고개를 끄덕이는 웹 디자인을 해 봅시다. 20년간 웹 디자인 트렌드의 최전선에서 디자이너와 기획자로 일한 저자가 10년간의 강의 경력을 토대로 웹 디자인의 기본기를 쌓아 줍니다. 웹 디자인의 정의부터 구조, 구성 요소 같은 기본 개념을 자세히 살펴보며 기초를 탄탄하게 쌓고, 실전에서 디자인 계획을 세우는 방법부터 디자인 시스템을 만드는 방법까지 체계적으로 배울 수 있습니다. 이 책은 정답이 없는 디자인의 세계에서 헤매고 있는 초보 디자이너에게는 좋은 길잡이가 되고, 디자인 감각을 키우고 싶은 실무 디자이너에게는 최신 트렌드와 기술을 알려 줍니다. 기본 개념에 실무 활용 팁을 익히고 피그마와 포토샵을 활용한 실습까지 배우고 나면 자연스럽게 자신만의 디자인 해답을 찾을 수 있을 것입니다!

고려대학교에서 디지털정보공학과 석사 학위를, 서울과학기술대학교에서 디지털콘텐츠디자인 박사 학위를 취득했다. 웹 에이전시에서 웹 사이트 개발 팀장으로 근무하고 ‘블루픽스’라는 웹 에이전시를 설립하며 20여 년간 기획자 및 메인 디자이너로 일했다. 실무에서 쌓은 경험을 바탕으로 여러 대학에서 웹 디자인 관련 강의를 이어 오고 있다. 10여 년 강의를 하면서 학생들이나 신입 디자이너에게는 단순히 기능 구현보다 주어진 시간 안에 직관적이고 감각적인 디자인을 해내는 것이 가장 어렵고 막막하다는 것을 백분 이해하게 되었다. 그래서 웹 디자인을 막 시작한 사람도 핵심이 되는 기본기와 노하우를 빠르게 익혀 담당 업무에서 또는 공부할 때 바로 적용할 수 있길 바라며 『Do it! 웹 디자인 교과서』를 집필했다. 현재 서울시립대학교에서 웹 디자인 강의를 진행하고 있다.

첫째마당 기본기가 탄탄해야 응용할 수 있다

01장 웹 디자인이 뭐예요?
01-1 웹이란 무엇인가요?
01-2 웹 사이트의 개발 과정 6단계를 먼저 알아야 해요
01-3 디자인에도 기획이 필요하다! ― 웹 디자인 5단계
01-4 웹 사이트 제작을 위한 어벤저스 ― 기획자, 디자이너, 개발자

02장 웹 디자인의 기본기를 탄탄하게!
02-1 웹 디자인은 어떻게 해야 하나요?
02-2 잘 만든 웹 사이트는 다 갖췄다! ― 웹 디자인의 6가지 요소
02-3 사용자의 마음을 읽는 4가지 디자인 원리
02-4 UI/UX란 무엇인가요?
실전 과제

03장 웹 디자인 감각 깨우기 ― 디자인 리서치
03-1 아는 만큼 보인다! ― 최신 웹 디자인의 트렌드와 기술
03-2 보는 눈을 키우자! ― 유용한 7가지 벤치마킹 웹 사이트
실전 과제


둘째마당 오래 머무는 웹 사이트는 이것이 다르다

04장 정보 전달은 구성이 8할이다! ― 레이아웃
04-1 웹 디자인 레이아웃이란 무엇인가요?
04-2 웹 디자인 레이아웃의 변화
04-3 좋은 레이아웃을 위한 3가지 디자인 원리
실전 과제

05장 레이아웃 구성 도우미 ― 웹 그리드 시스템
05-1 웹 그리드 시스템이란 무엇인가요?
05-2 초보자는 놓치기 쉬워요 ― 웹 그리드 시스템 최적화
05-3 포토샵으로 웹 그리드 시스템 활용하기
실전 과제


셋째마당 웹 사이트를 아름답게! 웹 디자인의 요소

06장 한 장의 마법 ― 이미지
06-1 이미지에는 어떤 것이 있나요?
06-2 그래픽 요소에는 어떤 것이 있나요?
실전 과제

07장 각각의 색에는 의미가 있다! ― 색상
07-1 웹 디자인에서 색상은 어떻게 표현할까요?
07-2 병원 웹 사이트는 왜 파란색을 많이 쓸까요? ― 색상 활용법
07-3 색상 선택에 도움을 주는 8가지 레퍼런스 웹 사이트
실전 과제

08장 크기, 간격, 정렬 ― 타이포그래피
08-1 폰트의 유형 ― 세리프체와 산세리프체
08-2 웹 폰트와 가독성
08-3 가독성을 끌어올리는 3가지 방법
08-4 무료 폰트를 제공하는 4가지 웹 사이트
08-5 웹 사이트에 아이콘 폰트 적용하기
실전 과제


넷째마당 실전 웹 디자인을 위한 화면 설계

09장 화면 설계를 위한 첫 단추 ― 웹 디자인 콘셉트
09-1 웹 디자인 콘셉트란 무엇인가요?
09-2 웹 디자인 콘셉트 정의하기
09-3 무료 스톡을 제공하는 9가지 웹 사이트
실전 과제

10장 웹 디자인 실무를 위한 화면 설계
10-1 화면 정의서란 무엇인가요?
10-2 UI 스타일 가이드라인 설계하기
10-3 피그마와 디자인 시스템
실전 과제

11장 실전! 피그마로 디자인 시스템 제작하기
11-1 컬러 시스템 만들기
11-2 타이포그래피 시스템 만들기
11-3 버튼 시스템 만들기
11-4 인풋 시스템 만들기
실전 과제

찾아보기