버려지는 디자인 통과되는 디자인: 웹&앱디자인(버려지는 디자인 통과되는 디자인)

디자인에는 원칙과 이유가 있어야 합니다.

디자인에는 정답도 없고, 오답도 없습니다. 하지만 분명 선택되는 디자인은 있습니다.
선택되는 디자인에는 분명한 원칙과 이유가 있습니다. 이 책은 실제로 버려졌던 디자인과 통과되었던 디자인 시안 89개를 대조하여 디자인 시 꼭 알아야 할 원칙과 이유를 설명합니다.
다양한 디자인 시안을 통해 디자인을 보는 눈을 키우고 명확한 기준을 세우며, 디자이너로 성장하는 데 있어서 다양한 시각을 넓혀 줄 것입니다.

1. 디자인 이론
웹&앱 디자인을 하면서 통과되는 디자인을 위해 꼭 알아야 할 디자인 이론을 알아보고, 다양한 웹&앱 디자인 사례를 통해서 좋은 디자인과 잘못된 디자인을 살펴봅니다. 이론에 대한 이해를 돕기 위해 설명 이미지와 사례 이미지를 통해 개념을 확실히 이해할 수 있습니다.

2. 디자인 해설
잘 된 웹&앱 디자인 사례를 통해 디자인할 때 어떤 점을 고려해야 하는지 매체의 특성, 주제, 웹&앱 디자인에 사용해야 할 콘텐츠에 따라 어떤 디자인이 효과적인지 알아봅니다. 뚜렷한 기준을 알아두면 디자인이 훨씬 쉬워집니다.

3. 버려지는 디자인(NG)/통과되는 디자인(GOOD)
왼쪽 페이지에는 버려진 디자인이 있고, 오른쪽 페이지에는 통과된 디자인이 있습니다. 실제로 버려졌던 디자인과 통과되었던 디자인을 대조하여 그 차이를 확연히 알 수 있으며, 어떤 점을 수정했을 때 통과되었는지 살펴보면서 좋은 디자인을 위한 힘을 키울 수 있습니다.

Part 1 컬러

디자인 이론 l 디자인은 색의 언어로 말한다
디자인 보는 법 l 메시지가 있는 컬러로 사용자의 감정을 끌어내라

01 배경과 색상을 통일한 인풋 박스 디자인
02 네거티브 요소로 주목성을 높인 탭 디자인
03 바탕색을 조절한 상세 페이지 디자인
04 톤 온 톤 배색의 로그인 페이지 디자인
05 브랜드 컬러를 살리는 인덱스 디자인
06 절제된 컬러를 사용한 인덱스 디자인
07 색상 대비로 강조한 로그인 페이지 디자인
08 스트라이프 패턴으로 구분한 테이블 디자인
09 주제에 맞게 색을 적용한 퍼스널 웹 디자인
10 포인트 컬러를 적용한 CTA 버튼 디자인
11 흰색/배경색으로 정리한 정보 페이지 디자인
12 포인트 컬러로 강조한 주요 메뉴 디자인
13 톤 온 톤 배색을 이용한 테이블 디자인
14 일관성 있는 색상의 전체 페이지 디자인
15 포인트 컬러로 강조한 인덱스 디자인
16 다채로운 색상의 인덱스 디자인

Part 2 그리드

디자인 이론 l 레이아웃과 그리드로 시선을 사로잡아라
디자인 보는 법 l 그리드로 화면에 리듬감을 만들어라

01 비율이 다른 사진을 정리한 레이아웃 디자인
02 가독성을 높인 2단 컬럼 디자인
03 확장 그리드로 공간을 활용한 콘텐츠 디자인
04 사선 그리드로 역동적인 인덱스 디자인
05 레이아웃을 변경해 전문적인 콘텐츠 디자인
06 여백으로 전달력을 높인 인덱스 디자인
07 핵심 정보의 강약을 살린 상세 페이지 디자인
08 2단 그리드를 변형한 정보 페이지 디자인
09 제품 사진으로 구분한 블로그 모듈 디자인
10 배경과 연결해 그리드를 확장한 모듈 디자인
11 테두리를 이용한 모듈 디자인
12 그림자를 활용한 모듈 디자인
13 여백으로 사진을 구분한 모듈 디자인
14 기능에 충실한 로그인 페이지 디자인
15 사용 목적을 고려한 레이아웃 디자인
16 2단 그리드로 한눈에 파악하는 테이블 디자인
17 사선 그리드로 화면을 분할한 인덱스 디자인
18 레이아웃에 변화를 준 콘텐츠 디자인
19 계층 그리드를 나눈 인덱스 디자인
20 경계를 명확히 나눠 구분한 모듈 디자인

Part 3 타이포그래피

디자인 이론 l 속삭이는 글자 크게 외치는 글자
디자인 보는 법 l 이야기의 리듬감을 확인하라

01 서체에 변화를 준 소개 페이지 디자인
02 캘리그래피를 활용한 인덱스 디자인
03 서체 변화로 전달력을 높인 인덱스 디자인
04 글자 크기로 가독성을 높인 인덱스 디자인
05 텍스트를 정렬한 인덱스 디자인
06 영역의 강약을 조절한 상세 페이지 디자인
07 여백을 적용해 가독성을 살린 모듈 디자인
08 이니셜로 시리즈 앱을 표현한 스플래시 디자인
09 중요도에 따라 강조한 관리자 페이지 디자인
10 작아도 가독성 좋은 콘텐츠 메뉴 디자인
11 단에 변화를 준 콘텐츠 디자인
12 콘텐츠 우선순위로 강조한 정보 디자인
13 프레임을 더한 회원가입 페이지 디자인
14 타이틀에 변화를 준 메뉴 디자인
15 타이틀 크기에 변화를 준 메뉴 디자인

Part 4 그래픽 요소

디자인 이론 l 몸짓 언어로 대화하듯 시각 언어로 대화하라
디자인 보는 법 l 멀리서 보면 요소가 보인다

01 여백이 있는 사진을 활용한 인덱스 디자인
02 핵심 내용이 담긴 아이콘 디자인
03 상품의 모티브를 살린 메뉴 디자인
04 도형으로 주제를 상징한 인덱스 디자인
05 그래픽 요소를 줄여 정리한 상품 사진 디자인
06 장식 요소를 줄인 인덱스 디자인
07 전면 사진으로 강조한 인덱스 디자인
08 무형 메시지를 전달하는 상품 목록 디자인
09 배경 없는 이미지를 활용한 콘텐츠 설명 디자인
10 계층 그리드에 사진을 활용한 모듈 디자인
11 라인 일러스트를 활용한 인덱스 디자인
12 사선으로 공간감을 살린 인덱스 디자인
13 통일성과 개성을 모두 잡은 배너 디자인
14 트리밍으로 흥미를 유발하는 상품 디자인
15 원형으로 주목성을 높인 스플래시 디자인
16 블러 처리로 집중력을 높인 팝업 디자인
17 인포그래픽으로 전달력을 높인 블로그 디자인
18 상품을 돋보이게 하는 메인 슬라이드 디자인
19 그래프로 데이터를 시각화한 테이블 디자인

Part 5 UX

디자인 이론 l 사용자와 함께 디자인하라
디자인 보는 법 l 편리한가? 즐거운가? 만족스러운가?

01 페이지 기능을 부각한 헤더 디자인
02 주요 기능을 배치한 메인 슬라이드 디자인
03 이동의 편리성을 높인 내비게이션 디자인
04 접근성을 높인 펼침 메뉴 디자인
05 사진 활용으로 정보력을 높인 게시판 디자인
06 정보를 한눈에 알 수 있는 인덱스 디자인
07 클릭 횟수를 줄이는 이벤트 디자인
08 직관성을 높이는 인포그래픽 디자인
09 사용성을 높이는 인풋 박스 디자인
10 톤 앤 매너를 맞춘 서브 헤더 디자인
11 기능을 더한 인덱스 디자인
12 마음을 읽는 상세 페이지 디자인
13 섬네일 배너를 활용한 슬라이드 디자인
14 구매 이유를 안내하는 상세 페이지 디자인
15 단순해서 눈에 띄는 앱 아이콘 디자인
16 임팩트 있게 구성한 프로필 디자인
17 터치 영역의 크기를 고려한 메뉴 디자인
18 행동을 유도하는 버튼 디자인
19 반응형 웹 사이트를 고려한 카드형 디자인

찾아보기

신승희 ㈜ 더블에스텍 대표, 20년 경력 웹 사이트 디자이너

한양여자대학교 스마트 IT과 겸임교수로 강의하고 있고, ㈜더블에스텍 대표이자 엄마손초마늘 쇼핑몰 경영책임자입니다.
숙명여자대학교 미술대학에서 시각디자인을 전공했으며, 서강대학교 경영전문대학원 MBA 경영학(마케팅) 석사를 졸업하였습니다. 한양여자대학교 스마트 IT과 웹 디자인 및 모바일 앱 기획, 숙명여자대학교 e커머스 창업, 열린
사이버대학교 창업연구소, 소상공인진흥원(서울교육센터, 안산교육센터), 북부여성발전센터, G마켓 옥션 강남 교육센터에서 강의하였습니다.

IBK 기업은행 F-emore 웹 사이트 및 쇼핑몰을 런칭하였으며, 퓨즈Works(프랜차이즈 전용 그룹 웨어)의 웹 사이트 및 모바일 하이브리드 앱 개발, 슈퍼바이저 QCS 네이티브 앱 런칭, 파파이스, 네네치킨 등 다수의 프랜차이즈 웹 사이트와 모바일 웹을 런칭했습니다. ㈜SK브로드밴드 FUSE 프랜차이즈 통합 서비스 모바일 앱 런칭 및 리뉴얼, 평창 동계올림픽 프레젠테이션 그래픽 자료 제작, 보건복지부 콜센터 웹 사이트 구축, ㈜LG텔레콤 뮤직온 리뉴얼, 상명대학교 그린에너지센터 웹 사이트 런칭, 대종상영화제 KAF 웹 사이트 구축, 경기신용보증재단 웹 사이트 구축, ㈜에스콰이어 영에이지 웹 사이트 구축, KB국민은행 웹진 구축, ㈜한국기상 웹 사이트 구축, 대림 중앙시장 웹 사이트를 구축하였습니다.

저서로는 「쇼핑몰 디자인 무작정 따라하기」가 있습니다.