Web Design Trend

2019

Web Design Trend

이 문서는 나눔글꼴로 작성되었습니다. 설치하기

Web Design Trend

2019 웹 트랜드

1. User Experience

2. User Interface

목차 트랜드를 보기 앞서

1. UX/UI란?

2. Brand에게 Color란?

3. 반응형의 장점/단점/최적화란?

4. UX/UI의 7가지 법칙

5. IE8, 왜 버려야 하는가?

2

Web Design Trend 3

01 트랜드를보기앞서 UX/UI란?

UX Design = User Experience Design 사용자 경험을 디자인!

UI Design = User Interface Design 사용자 인터페이스를 디자인!

말은 쉽습니다. 그래도 모르시겠죠?

이해를 하실 때까지 짚고 넘어가겠습니다.

UX 디자이너 : 이 버튼이 첫 번째에 꼭 필요한 거야 ?

UI 디자이너 : 어떤 색을 써야 사용자들이 바로 볼 수 있을까?

Web Design Trend 4

01

UX Design

어디에 물이 있어야 할지, 소스는 어디가 찾기 쉬울지,포크는 왼쪽에 나이프는 오른쪽에…?

즉,유저테스트, 데이터분석, 사이트 매핑, 사용자 만족도, 분류 등 이러한 모든 사용자 경험을 토대로 사용자를 편리하게 하고 멋지게하고… 이러한 것이 UX DESIGN입니다.

트랜드를보기앞서 UX/UI란?

UI Design

아웃풋 디바이스, 버튼, 사용자 컨트롤, 툴, 인풋, 컨텐츠, 시각화된UI와 UX를 표현한 그림.

즉,시각화에 책임을 두고 있으며, 조립과 구성을 하고 색을 입히는 것들이 바로 UI DESIGN입니다.

Web Design Trend 5

01

UI가 인터페이스 그 자체, 구조와 레이아웃과 색상, 모양과 시각적인 이미지 등이고 UX는 웹사이트 전체.

사이트의 전체적인 면을 미리 구상하고 필요한 것을 설계하고 정보를 수집하는 모든 단계가 UX입니다.

그에 따라 구조를 결정하고 레이아웃을 구상하고 색상과 모양을 결정하는 모든 단계가 바로 UI입니다.

UX는 정보수집가, 프로그래머, 컨텐츠 전략기획, 기능분석 등이 쉽게 말하자면 기획자.

UI는 브랜드디자인, 그래픽디자인, 웹디자인 등의 우리가 잘 아는 디자이너가 됩니다.

트랜드를보기앞서 UX/UI란?

Web Design Trend

01 Brand에게 Color란?

특정색상을 통해 기업을 떠올리는 사용자 인식은 차별화된 컬러를 통해 큰 영향을 미치게 됩니다.

그리고 웹사이트에서 보이는 기업의 이미지와 가치도 정말 중요한 부분입니다.

먼저 “국가대표기업 Samsung”입니다. 주 색상은 답을 안 드려도 아시겠죠?주 색상은 삼성의 로고인 Deep Blue입니다.블루와 그레이 컬러를 이용하여 기본에 충실하며 브랜드의 특성상 유행을타지 않는 웹사이트인 만큼 깔끔하고세련된 느낌이 납니다.

작년 새롭게 최신 트랜드를 반영하여불필요한 이미지를 최대한 줄이고 소비자들로 하여금 상품에 집중할 수있도록 디자인하였습니다.

6

트랜드를보기앞서

두번째 웹사이트는 따로 로고컬러를사용하지 않고 커피브랜드를 시각적으로 알 수 있는 “커피아티제” 사이트입니다.

브랜드가 커피인 만큼 브랜드색상의톤을 이용하여 상당히 고급스러우면서도 서정적인 느낌을 주었습니다.

국내에서 많이 볼 수 없는 유럽스타일의 디자인 느낌입니다.

Web Design Trend

01 반응형웹의 장점/단점/최적화

반응형웹이란?

웹의 혁신적인 기술이라 불리는 반응형 웹!

쉽게 말씀 드려 디스플레이 종류에 따라 화면 크기가 자동적으로최적화되도록 조절되는 페이지입니다.

HTML5와 웹 접근성의 대두, 그리고 다양해진 웹 환경에 따른환경적인 요소로 반응형 웹이 화제가 되는데요.

하지만, 디스플레이의 해상도는 평균화된 해상도만을 가지고 최적화가 이루어지기 때문에 평균화되지 않은 사이즈는 웹 레이아웃이 엉망진창이 되기도 합니다.

무조건 반응형 웹이 좋은 걸까요?뭐가 실이고 뭐가 해인지 알려드리겠습니다.

반응형웹의 장점

1. 어떠한 화면에서도 동일한 웹 페이지를 볼 수 있습니다.2. 모바일과 PC의 홈페이지를 하나로 운영할 수 있어 제작 및 관리비가 저렴합니다.3. 동일한 디자인 컨셉으로 각각의 디바이스에 자연스럽게 어울려 디자인 통일성이 있습니다.4. 하나의 URL을 갖고 있어 검색과 노출에 유리합니다.

반응형웹의 단점

1. 많은 콘텐츠를 표현할 경우 반응형 웹 구현이 꽤 복잡하다.2. 디자인적 통일성은 있으나, 모바일 전용인 APP에 비해 UX/UI최적화를 이루기 어렵다.3. 사용자는 하나의 기기를 사용하지만, 모든 디바이스 페이지가 로드 될 때까지 기다려야 하므로 로딩시간이 길어질 수도 있다.3. 기존 사이트는 처음부터 재구축을 해야합니다.

7

트랜드를보기앞서

Web Design Trend

01 반응형웹의 장점/단점/최적화

1.주된 사용 목적을 결정 후 반응형 디자인의 효율적인 사용

8

Determine Primary Use and Deploy ResponsiveDesign 만약 반응형 페이지를 디자인하고 있다면, 그 페이지의 목적은 방문자들의 생각이나 의견을 변화시키는것입니다.

만약 매거진이나 온라인 출판물을 디자인하고 있다면, 그것의 반응형 버전은 그래픽이나 이미지 없이 빠르게 로딩되어야 할 것입니다.

2.모바일 우선 디자인

모바일-우선(모바일-퍼스트) 디자인은 단순하며 초점이있어야 합니다. 그것은 작업을 간소화하고 모바일 전용웹 사이트를 디자인하는 데 도움이 되는 디자인 방법입니다.

PC를 먼저 최적화하여 디자인을 기획하는 경우에도 모바일 상태에서 변화를 항상 고려하며 디자인이 구현되어야합니다.

3. 반응형 디자인은 단순하게

로딩하는 데 시간이 걸리는 모든 것들은 화면 밖으로 치워버려야합니다.

데스크탑 버전의 웹사이트들은 반응형 버전에 비해 훨씬더 많은 디자인 요소를 가질 수 있습니다. 데스크탑 버전의 디자인 요소들 중 정확히 어떤 것들이 반응형 버전에보여야 할 것인지 확인하는 것은 중요합니다.

반응형 디자인은 반드시 데스크탑 버전의 디자인과 동일할 필요는 없습니다. 고객이 웹사이트에 접속하기 위해사용하는 기기에 맞게 "적응"시키는 것이 "반응형" 디자인의 큰 부분을 차지합니다.

4. 압축

웹사이트의 성능은 웹사이트가 요청할 때 로드해야 하는요소들에 따라 달라집니다.

반응형 디자인에서 페이지 용량, 이미지, 텍스트, 그리고그 밖의 많은 요소들이 잘 실행되려면, 그것들의 품질을최소화하고 잘 압축해야 합니다.

5. 로딩 시간을 최소화

웹사이트를 모바일에서 더욱 빠르게 만드는 방법에 대해유용한 포스트를 집필했습니다.

그가 언급하기를, 연구 결과에 따르면 80%가 넘는 수의사람들이 그들의 모바일 폰으로 웹 브라우징을 하는 경험에 대해 실망하고 있다고 합니다. 적어도 64%의 스마트폰

사용자들이 웹사이트가 로드되는 데에 4초 미만이 걸리기를 기대합니다. 그것이 기회의 창입니다.

6. 종속성을 줄이기.

- CSS를 통해 이미지를 로드한다.- 최소한의 외부 스타일 시트를 유지한다.- 이미지 대신 CSS3를 사용한다.- 이미지 스프라이트를 사용한다.- 웹폰트 아이콘을 사용한다.- 인라인 프레임을 피한다.- 인라인 확장 가능한 벡터 그래픽(SVG)을 사용한다.

반응형웹의최적화!

트랜드를보기앞서

Web Design Trend 9

01 UI의 7가지 법칙트랜드를보기앞서

Web Design Trend 10

01 UI의 7가지 법칙트랜드를보기앞서

Web Design Trend 11

01 UI의 7가지 법칙트랜드를보기앞서

Web Design Trend 12

01 UI의 7가지 법칙트랜드를보기앞서

Web Design Trend 13

IE8과 XP는 쓰레기통에, 미래의 HTML5

우리나라는 전 세계적으로 손꼽히는 IT 강국이라는 수식어가 붙지만 웹 분야에 한해서는 해당 수식어가 무색할 만큼 차세대 웹의 상용화가 많이 뒤쳐져 있습니다. 이를 막고 있는 가장 큰 요인을 꼽자면 윈도우 XP와 IE8의 존재입니다.

웹의 상용화가 뒤쳐진 대한민국

크롬, 파이어폭스, 오페라, 사파리 등의 브라우저는 최신 버전의 경우 대부분의 HTML5의 기능을 지원하지만, IE의 경우, IE8 이하의 버전은 HTML5 기능을 전혀 지원하지 못합니다.더군다나 사용자의 운영체제가 윈도우 XP인 경우는 IE9 이상으로 업그레이드조차 불가능합니다.따라서 HTML5로 아무리 화려한 웹 사이트를 제작한다 하더라도 IE8 브라우저의 사용자 웹 화면에서는 정상적으로 작동되지 않아 이전까지는 많은 기업에서 HTML5로의 웹 사이트 제작을 피하기도 했습니다.

왜 IE8을 버려야 하는가?

경직된 국내 웹시장에 큰 변화의 바람이 불기 시작했는데 바로 마이크로소프트사의 윈도우XP 지원 중단입니다. (이하 MS로 줄임)2014년 4월 8일을 기준으로 MS는 XP에 대한 모든 업데이트 및 지원을 중단하였으며 기존 XP사용자에 대해 윈도우 8이상의 운영체제로 사용을 권장하고 있습니다. 실제로2014년 4월 8일을 기점으로 기존 XP 사용자층이 빠르게 윈도우7 이상으로 넘어가고 있으며 윈도우7 이상의 운영체제를 사용할 경우 강제 업데이트를통해 자동으로 IE11브라우저로 업데이트 되고 있습니다.

따라서 현재 많은 기업이 발 빠르게 자사의 웹 사이트를 HTML5를 이용하여 제작하는 사례가 늘고 있고 앞으로 이러한 시장의 변화는 점차 가속화될 전망입니다.

새로운 HTML5, 시작되었는가?

스마트기기의 대중화로 인해 데스크탑에 국한되어 있던 웹이 휴대폰, 타블렛 등 점차 다양한 포맷의 디바이스로 확장되고 있습니다. 또한, 이런 스마트기기의 보급과 함께 대두되는 것이 HTML5를 필두로 한 반응형 웹 등 차세대 웹의 등장입니다. 이로 인해 기존 ‘테이블코딩+플래시’의 작업구조에서 점차‘웹 표준코딩, 웹 호환성 코딩, JavaScript’의 구조로 90%이상 바뀌고 있습니다.

이렇듯 웹 표준 시장잊 jack 안정화됨에 따라 이제는 단순히 웹 표준을 넘어 기존 플래시에 버금가는 인터랙티브 웹 수요가 높아지고 있습니다. 이를 가능하게 하는것이 바로 HTML5와 Jquery의 등장입니다.

IE8과 XP의 포기, HTML5는 선택이 아닌 필수입니다.

HTML5가 도대체 무엇인가?

01 트랜드를보기앞서

Web Design Trend

User EXperience

14

Web Design Trend 15

02 2019 웹트랜드

1. Google 머티리얼디자인가이드

머티리얼 디자인이란 2014년 구글 I/O 컨퍼런스에 공개되어 신규 안드로이드 운영체계인 롤리팝(5.0)부터 반영된 디자인 언어입니다.생생한 질감표현과 플랫하고 대담한 컬러의 그래픽 디자인, 매끄럽고 유려한 애니메이션이 특징으로 단순히 아름다움을 위해 탄생한 디자인은 아닙니다.

머티리얼 디자인?

머티리얼 디자인은 안드로이드의 여러 앱에서 동일한 사용자 경험(UX)을 제공하기 위해 도입된 것으로 사용자가 웨어러블 와치, 모바일, 태블릿, PC 등다른 해상도에서 다른 앱을 사용하더라도 쉽게 적용할 수 있도록 체계적이고 직관적인 플랫폼을 유지합니다.

머티리얼 디자인의 특징

구글 기본 앱인 크롬, 행아웃, 유투브, Play 스토어, Gmail와 같은 앱들이 순차적으로 머티리얼 디자인으로 업데이트했고 그 뒤를 따라 에버노트, 텀블러, 포켓 등 유명 앱들이 머티리얼 디자인으로 업데이트 되었습니다.

그 결과 앱들의 개성적인 디자인이 사라지고 서로 유사해지면서 비슷한 느낌이 되었다는 단점이 있지만 사용자들은 앱이 어떻게 작동할지 짧은 시간 안에직관적으로 예측할 수 있게 되었다는 장점도 있습니다.

머티리얼 디자인의 적용사례/장점과 단점

User EXperience

Web Design Trend 16

02 2019 웹트랜드

2. 앞으로의플랫디자인2.0? 3.0?

플랫디자인은 단순, 축소라는 의미가 아닙니다.미니멀리즘과 유용성에 초점을 두는 미학입니다.확실한 UX/UI 구조와 레이아웃, 선명한 컬러와 타이포그래피로 빠르고 간결한 디자인을 완성시키는 기준입니다.

2018년부터는 플랫 3.0이라는 기준으로, 조금 더 간결하고 심플해지는게 디자인 추세입니다.

flat?

3. 분할레이아웃및카드디자인

각 카드는 하나의 통합된 개념입니다.컨텐츠를 마치 여러 개의 컨텐츠처럼 보여주어 컨텐츠 구성을 더욱알차게 보여주는 효과와 분할된 레이아웃으로 시각적으로 더욱 빠르게 인식할 수 있습니다.

직사각형 형태의 카드는 ‘콘텐츠 컨테이너’로, 너비가 각기 다른 디바이스에 맞춰 쉽게 재배치할 수 있습니다.

분할레이아웃과 카드디자인의 장점?

User EXperience

Web Design Trend 17

02 2019 웹트랜드

4. 자유로운그리드와비대칭레이아웃

자유로운 그리드와 비대칭 레이아웃의 디자인은 신선하고 눈에 띄는모습으로 디자인 업계 전반에 큰 비중을 두고 있습니다.

오프라인 작업물에서 많이 봐왔던 그리드 시스템의 디자인이지만 웹에서는 볼 수 없었습니다.유사 웹사이트 디자인과 닮지 않는 점과 사용자가 원하는 컨텐츠를새롭고 흥미로운 방식으로 관심을 유도할 수 있어 많은 인기를 얻고있습니다.

자유롭다?

17

5. 모바일우선

Google은 모바일 반응형 웹사이트를 가장 먼저 만들면서, 모바일 웹사이트를 우선적으로 고려함으로, 모바일의 트랜드를 만들었습니다.

다양한 포털의 웹 사용 성향 분석을 보면 모바일이용도가 시간이 지날수록 증가함에 따라 PC의 판매량도 감소하는 추세입니다.그 추세에 맞춰 데스스탑 환경을 아예 버리거나 최적화를 포기하고모바일을 먼저 최적화시키는 현상으로 바뀌고 있습니다.

왜 모바일 우선이 되어야 하는가?

User EXperience

Web Design Trend 18

02 2019 웹트랜드

6. 마이크로인터랙션(상호작용효과)

사용자는 웹에서 어떠한 요청을 하고 결과를 기다립니다.그 결과를 기다리는 동안 사용자는 애가 타죠~내가 제대로 요청을 한 것이 맞는지, 요청과 결과의 중간, 혹은 결과의 상태를 제대로 보여주는 것이 마이크로 인터랙션입니다.대표적인예로 버튼 애니메이션, 로딩 등이 있습니다.

사용자의 설득을 이끌어 낼 수 있고, 예상치 못한 곳에서 놀라운 경험을 줄 수 있습니다.또 사용자의 특정 행동을 유도하는데 도움이 되며, 사용자가 일정 상황을 쉽게 이해하고 기억할 수 있도록 많은 도움을 주고 있습니다.

상호작용?

7. 불완전한여백

더욱 단순화되어지는 컨텐츠의 집중과 가독성이 요구시 되면서, 자연스럽게 여백을 활용하는 디자인이 급증했습니다.

비대칭 레이아웃과 더불어 함께 사용되는 것으로 여백을 잘 활용하는디자이너는 굉장히 드물며, 복잡하고 조잡한 디자인보다 단순한 컨텐츠의 디자인이 더욱 어려우며 시간이 오래 걸린다는 것을 클라이언트들도 알아 주셔야 할텐데 말이죠.

여백이면 여백이지, 불완전한 여백?

User EXperience

Web Design Trend

User Interface

19

Web Design Trend 20

User Interface02 2019 웹트랜드

2. 단색컬러와대담하고다양한컬러

대담하고 밝은 색채를 사용 하는 것은 스큐어모픽 시대를 벗어나‘플랫 디자인(Flat Design)’의 열풍과 함께 찾아와 현재 관공서/기업은 물론 안드로이드, 애플에서도 어디서든 과감한 컬러를 쉽게볼 수 있습니다.

플랫 디자인의 유행

참조 : http://www.baskinrobbins.co.kr/

1. 도형

기하학적인 형태의 도형은 반복적인 패턴을 만들 수 있고, 끊어진 그리드와 비대칭 레이아웃의 계층구조적 느낌을 나타낼 수 있습니다.

도형의 동적인 느낌과 안정성, 또 다른 특정 모양의 조합으로 창의적인 표현과 특정 페이지의 주의를 끌 수 있으며, 사용자들의 웹사이트에서 느끼는 원하는 감정을 형성할 수 있습니다.

도형?

Web Design Trend 21

User Interface02 2019 웹트랜드

합성하거나 너무 의도된 부자연스러운 이미지는 오히려 브랜드의이미지에 가식을 심을 수 있는 요소입니다.

지구는 현재 휴머니티에 목이 말라 있고, 기업은 더 이상 제품을팔아서 수익만 창출하는 곳이 아니다라는 목적으로 브랜드 이미지 상승을 꾀하고 있는 것 같습니다.

애플, 구글, 삼성 등 모든 기업들의 광고에도 더 이상 부자연스러운 이미지는 없어졌습니다.

너무 어려운데?

3. 자연스러운고퀄리티사진 4. 풍부한동영상

빠른 로딩과 플랫디자인의 트랜드에도 불구하고 영상은 여전히강세입니다.영상은 텍스트나 이미지보다 매력적이며 정보전달에 있어서도 신속하고 효과적입니다.

웹사이트에서 영상 배경은 짧고 음소거가 되어 있어 현대적인 모던한 느낌과 함께 브랜딩에도 많은 도움을 줍니다.

또한 동영상 게시물은 타 게시물보다 우선순위가 높아 조회수 또한 많으며 계속 재생되기때문에 웹사이트에서 오래 머물 확률이있습니다.

동영상 흘러가는 메인페이지 보신 적 있죠?

Web Design Trend 22

User Interface02 2019 웹트랜드

절충주의란 독자적이고 창의적인 것이 아니고, 팝아트, 모더니즘등의 다양한 양식을 활용 하는 것입니다.

불완전해 보이지만, 진정성이 돋보이는 하나의 컨셉아트입니다.

프리스타일의 낙서, 색상의 변형, 브러시 획, 유기적인 텍스처가많이 사용될 것으로 보입니다.

뭐… 절충해서 이만큼까지! 그런 뜻인가?

5. 절충주의 6. 그라디언트

다소 촌스럽고 조잡스러워 보였던 그라데이션이 화려한 복귀를마쳤습니다.

호환성과 웹접근성에 다소 문제가 있지만,개성을 추구하는 성향의 웹사이트들의 사용이 늘어가고 있습니다.

그라데이션의 화려한 컴백

Web Design Trend 23

User Interface02 2019 웹트랜드

새것과 옛 것을 더한 어찌 보면 절충주의의 묘사물 이라고 확대해석 할 수 있는데요.

선풍적인 인기를 끄는 이유는 옛날 감성을 통해 추억을 상기하면서 오는 그리운 감정과 시각적으로 눈에 화려한 느낌을 주는 것때문이 아닐까 생각됩니다.

NEW + RETRO = NEWTRO

7. 뉴트로 8. Bold + Reality

미니멀리즘의 영향으로 타이포그래피가 크게 부각되면서, 그래픽적 요소보다 큰 타이포로 이목을 집중시킨 후 사실적인 이미지를통해 홈페이지의 목적성을 도출 시켜주는 디자인 또한 늘어나는추세 입니다.

크고 두꺼운 타이포에 카오스적인 색상이 더해지면 미래지향적인느낌과 떠 있는듯한 이미지의 묘사로, 추상미를 더 할 수 있습니다.

Big Bold Better Reality

Web Design Trend 24

02 2019 웹트랜드 User Interface

직관적인 스트레이트 아이콘이 지겨워 질 때가 되었죠.

자연스럽게 웹 서비스와 연결되는 동적 선형 아이콘은 시각적 계층 구조를 보여주고, 사용자가 주의 해야할 영역에 집중하는데 사용할 수 있습니다.

스트레이트 아이콘의 대체 자원

9. 예시적아이콘 10. 시네마그래프

정적인 사진에 특정 요소만을 움직이게끔 하여 사용자에게 신선한 경험을 주고, 웹사이트에 더욱 오래 머물 수 있게 도와줍니다.

정적인 사진에 동적인 모션

참조 : https://blog.flixel.com/what-is-a-cinemagraph-how-do-they-work/

Web Design Trend 25

별첨 선호도 사전조사

1.어떤 타입의 홈페이지가 구축되어지길 원하십니까? (선호도타입1)

□ 정보제공형 □ 소식제공형 □ 정보소식반반( %)

2.어떤 타입의 홈페이지가 구축되어지길 원하십니까? (선호도타입2)

□ 경쟁사이트와 비슷한 안정감 있는 홈페이지

□ 완전히 차별화된 최신 트랜드 디자인 홈페이지

□ 최신 트랜드와 안정감이 적당히 분배된 홈페이지

3.어떤 타입의 레이아웃을 선호하십니까.

□ 다소 복잡해 보여도 메인 페이지에서 많은걸 보여주는 홈페이지(다중노출)

□ 주요 컨텐츠 몇 가지의 노출과 시각적 비주얼을 강조한 심플하고 깔끔한

페이지(시각적인 안정감)

5.저희 디자인팀에서 벤치마킹(비교분석) 해줬으면 하는 홈페이지를 몇가지 적어주세요.

6. 홈페이지구축 주 타켓층 외에 신경을 써야 할 타켓층이 있다면 골라주세요.

□ 여성 □ 남성 □ 영유아·초등생 □ 중,고생 □ 대학생 □ 학부모

□ 20~30대 □ 30~40대 □ 40대 이후 □ 기업 □ 기타( )

7.구축될 홈페이지에 사용해 봤으면 하는 선호하는 디자인 표현방법이있습니까?

□ 일러스트 □ 사진 □ 캘리그라피 □ 타이포그래피 □ 이미지그래픽

8. 홈페이지 디자인 컨셉을 몇 가지 간단하게 정리하였습니다. 선택해주세요.

□ 한국적이며 동양적인 □ 첨단적인 □ 복고적인 □ 재미있는 □ 귀여운

□ 안정적·신뢰적인 □ 역동적인 □ 여성적인 □ 신비적인 □ 심플한

□ 고급스러운 □ 인간적인(트랜드) □ 클래식한 □ 서정적인

3.구축될 사이트에 어떤 색상조합이 사용되었으면 좋겠습니까?

□ CI, BI(심볼, 로고, 타이프)의 컬러

□ 신뢰를 주는 블루톤, 화이트, 그레이컬러

□ 기타( )