2015 웹디자인 트렌드

2014. 11. 27

Version : 1.0.0

This material is proprietary to DGMIT. It contains trade secrets and confidential information which is solely the property of DGMIT.

This material is solely for the Client’s internal use. This material shall not be used, reproduced, copied, disclosed, transmitted,

in whole or in part, without the express consent of DGMIT © All rights reserved.

made by 이정화

크리에이티브 아트팀

2

CONTENTS.

1. 웹디자인의 현재 ……………… 2

2. 반응형 웹디자인과

적응형 웹디자인에 대하여 ……………… 6

3. 웹디자인의 향후 여러 트렌드 모습 ……………… 10

4. 출처 및 참고 사이트 ……………… 16

3

1. 웹디자인의 현재 모바일 퍼스트_모바일 우선주의

모바일 퍼스트(Mobile First) - 기획, 모바일, 태블릿, 데스크탑 순으로

이제는 데스크탑보다 모바일을 더 먼저 고려해야 할 때이고

데스크탑은 그 다음으로 고려해야 한다는 것

4

1. 웹디자인의 현재 2009년 이후 스마트폰과 태블릿이 확산

새로운 기기의 해상도를 지원해야 하는 이슈가 발생

하나의 소스로 다양한 디바이스를 한번에 지원하는

원 소스 멀티 유즈(OSMU:One Source Multi Use)에 대한

관심이 증가하기 시작했으며, 반응형 웹 디자인이 모바일과 데스크탑을 동시에

지원하는 주요 해결 방안

5

1. 웹디자인의 현재 모바일 퍼스트_모바일 우선주의

2010년에 런던에서 열렸던 Over The Air란 행사에서 발표한 영국의 2인 기업 yiibu의 발표 슬라이드

6

2. 반응형.적응형 웹 디자인에 대하여 반응형 웹디자인이란 What is Responsive web design(RWD)?

반응형 웹 디자인

PC, 타블렛, 모바일 등 다양한 디바이스에 대응하여 최소한의 변화(Resizing, Panning, Scrolling)로

내용 탐색을 쉽게 하여, 사이트를 최적의 형태로 제공하는 기술

7

2. 반응형.적응형 웹 디자인에 대하여 반응형 웹디자인이란 What is Responsive web design(RWD)?

반응형 웹의 단점

1. 우리나라는 하나의 화면에 많은 콘텐츠 표현을 선호하는 문화가 자리잡고 있기 때문에

반응형 웹 구축이 꽤 복잡한 편

2. 사용자는 하나의 기기를 사용하지만, 모든 디바이스 페이지가 로드 될 때까지 기다려야

하므로 로딩 시간이 걸림

3. 기존 사이트를 필요에 따라 처음부터 재구축해야 하고 디바이스에 따라 성능이 저하

반응형 웹의 장점

1. 모바일과 PC의 홈페이지를 하나로 운영할 수 있어 제작 및 관리비가 저렴

2. 하나의 URL을 갖고 있어 검색과 노출에 유리함

8

2. 반응형.적응형 웹 디자인에 대하여 적응형 웹디자인이란 What is Adaptive web design(AWD)?

적응형 웹 디자인 PC, 타블렛, 모바일 등 다양한 디바이스에 대응하여 최소한의 변화(Resizing, Panning, Scrolling)로

내용 탐색을 쉽게 하여, 사이트를 최적의 형태로 제공하는 기술

9

2. 반응형.적응형 웹 디자인에 대하여 비교 정리

반응형 웹이 브라우저 크기에 따라 유연성 있게 변화하는 방식이라면,

적응형 웹은 몇 개의 스크린 사이즈를 정해 최적화된 화면을 보여 주는 방식

10

3. 웹디자인의 향후 여러 트렌드 모습 2. 배경 이미지/영상 삽입 Large, Beautiful Background Image & Video

화면을 가득 채우는 아름다운 배경 이미지와 영상은 강력한 인상을 주면서도 간결하며

우아, 개개인의 디자인 철학과 스타일을 나타낼 수 있는 효과적인 방법

11

3. 웹디자인의 향후 여러 트렌드 모습 1. 단일 페이지

마우스 클릭에서 스크롤 형태로 진화

직관적이고 사용하기 쉽기 때문에, 웹사이트와 유저 간의 상호작용이 더욱 편리

12

3. 웹디자인의 향후 여러 트렌드 모습 3. 플랫 디자인의 발전 Flat Design is Growing Up

라인 또는 면으로 구성한 미니멀한 디자인과 그림자 등의 착시 효과를 통해 입체감을 주는 디자인으로 이분화

13

3. 웹디자인의 향후 여러 트렌드 모습 4. 고스트 버튼 Ghost Button

단순한 문구, 외곽선으로 처리한 직사각형의 형태 위주 고스트 버튼

14

3. 웹디자인의 향후 여러 트렌드 모습 5. 타이포그래피 강조 Bigger Emphasis on Typography

다양하고 세련된 폰트로 디자인 부각

15

3. 웹디자인의 향후 여러 트렌드 모습 6. 카드 디자인

카드 디자인은 드릴 다운 유저의 수많은 데이터를 검색하는 좋은 방법

드릴 다운(Drill Down) 더 많은 정보를 찾기 위해 관련 텍스트나 아이콘 등을 클릭하여 드릴로 뚫고 들어가듯이 검색하는 방법

16

4. 출처 및 참고 사이트 이미지, 글 참고

http://tobyyun.tumblr.com/post/58232536556/rwd-3

http://cimple.postype.com/post/746

http://www.dbguide.net/knowledge.db?cmd=view&boardUid=181392

17

본사/기업부설연구소 : 135-874 서울특별시 삼성동 봉은사로 424 TROA빌딩 5층

Tel. 070-8680-1770 Fax. 02-2179-9114 http://www.dgmit.com