모바일 환경을 고려한 웹 시대의 디자인 추세

모바일 우선주의
“Patterns, Lines and Circles; Geometric Shapes”

2018년의 웹디자인 트렌드는 가상 현실, 기계 학습 및 음성 사용자 인터페이스와 같은 기술이 발전하여 주류가 될 것입니다. 패턴, 선과 원, 기하학적 패턴은 2017년에도 각광을 받았지만 디자인 분야에서 디자인과 레이아웃이 높이 평가되어 2018년에도 지속 될 예정입니다

1. Making Mobile a Priority

구글에서 Mobile First Index 를 시작하게 되면서 첫 화면을 상당히 중요하게 생각하게 되었고, 좀 더 친근하며 접근성이 좋은 디자인이 트렌드가 되기 시작했다.

AMP 또한 중요해지는데, 게시판을 통해 사이트를 빠르게 이동 할 수 있는 것을 말한다.
전통적인 모바일 웹사이트는 다소 폐쇠적이지만 미디어파일을 병렬사용하고 즉시 로딩할 수 있도록 스크립트를 실행하도록 한다.

2. Irregular Grid Layouts

그리드 레이아웃은 디자이너가 꼭 지켜야할 사항으로 존재해왔지만, 사용하는 방식에 변화가 있었다.
워드프로세스 등 많은 컨텐츠 관리 시스템이 이런 그리드 시스템 기반으로 되어있으며, CSS그리드가 설계자들에게 더 많은 옵션을 제공하도록 소개되었다.

또한, Whitspace는 여백을 최대한 많이 사용하여 사용자들의 가독성을 높이는 디자인을 추구하고 있다.

3. Bold Fonts & Bright Colors

굵은 폰트는 사용자가 컨텐츠에 집중하기 위한 도움이 된다. 2018년에는 이런 글꼴과 색상이 이미지를 대신하는 모습을 볼 수 있다.
로딩이 느려지는 이미지와는 달리, 폰트는 성능에 영향을 주지 않고 더 깨끗한 페이지를 호출하도록 한다.

4. Increase in Micro-Interactions

페이스북과 같은 SNS은 가까운 지인, 사용자와의 커뮤니케이션을 통해 인기가 많아졌다.
이러한 마이크로 탐지기능을 사용하면 사용자가 페이지를 재로드하지않고도 다른사람과 상호작용을 할 수 있다.

5. More Advanced Scroll Triggered Animation

스크롤된 애니메이션 트리거를 사용하면 사용자가 참여한 대화형 요소를 사용하여 웹페이지를 계속 스크롤 할 수 있습니다
대표적인 예로 Apple에서 이러한 애니메이션 트리거는 새로운것이 아니라 새로운 방식으로 사용되기 시작했습니다.

6. Top Sticky Elements vs. Bottom Sticky Elements

사용자가 왼쪽에서 오른쪽으로 읽어본 적 있습니까? 사용자가 스마트폰 혹은 모바일 앱의 하단을 클릭하여 탐색하는데 사용되고 있다는 사실을 알고 계십니까?
모바일 앱 디자인이 현대 웹 디자인에 매우 중요하기 때문에 웹사이트 개발자가 사이트의 맨 위에 있는 것과 반대로 사이트 하단에 메뉴항목들이 만들어지고 있습니다

점진적인 웹 응용 프로그램은 개발자들이 현대적 기능을 설계하기 시작함에 따라 이러한 디자인도 발전화되고 있다.

7. Resonsive Design

반응형디자인은 원칙적이라기 보단 몇년간 지속되어 왔다. 반응형디자인은 웹사이트가 모바일, TV, 테블릿, 웨어러블, 데스트캅 등 다양한 크기에 매력적이게 디자인되었다.
2018년에는 증강현실과 가상현실과 같은 새로운 형태의 기술을 지속적으로 확장할 것으로 기대한다.

8. Maching Learning and Artificial Intelligence

2016년 구글의 알파고는 숙련된 바둑선수를 처음으로 이겼고, 오랫동안 추구되었던 패배는 수백만개의 장치들과 시리와 같은 수백만개의 장치들을 이용할 수 있게 했다.
그러므로 Adobe Sensei가 전 세계 웹개발자가 쉽게 사용할 수 있도록 하는 것은 놀라운 일이 아니다. Thujrid는 2014년 이후로 에이즈기반의 웹디자인을 제공했다

9. SVG

새로운 형식은 아니지만 2018년에는 SVG형식이 PNG, GIF, JPG와 같은 기존 파일 형식을 능가할 수 있다.
SVG는 픽셀이 아닌 벡터형식이고, 많은 이점을 제공한다. HTTP요청이 필요하지 않기 때문에 호출 시 호출 속도에 영향을 주지 않는다.
SVG는 2018년 사용자에게 고품질 멀티 미디어 환경을 제공하는데 필수적이게 될 것이다.

10. Progressive Web Apps

앱은 모바일 미디어 타임의 상당 부분을 차지하며 웹디자이너들은 웹과 어플리케이션의 최상의 동작을 취하고 혼합하는 것을 시작한다.
이 하이브리드생성은 Progressive web app이라한다. 2018년의 웹 사이트는 애니메이션페이지전환, 알림, 스플래시 스크린 같은 요소를 추가할 수 있다
미디어센터와 같은 일부 웹사이트는 이미 액세스 할 수 있는 앱을 제공한다. 이러한 어플리케이션은 각 사용자의 개별적 취향에 맞게 지속발전해 나갈 것 이다

사용자는 브라우저 탭 첫 방문을 통해 사용자에게 유용하고 설치가 필요 없도록 하고, 사용자가 앱과 관계를 지속적으로 구축할 수 있도록 점점 강력해진다.
로딩속도가 빨라지고, 푸시알람도 전송되며, 관련 푸시 알림을 보내고, 홈 화면에 아이콘을 올려놓고 전체화면을 로드할 수 있다.

11. Simple, Functional, Futuristic Design

2018년에는 모바일 기기에 최적화 되고 사용자 환경에 집중하는 단순하지만 강력한 웹사이트 디자인을 중점적으로 다룰 예정이다.
플랫디자인은 모든것이 2차원으로 축소된다는 것을 의미하는 것이 아니다. 미니멀리스트와 유용성에 관한 이야기 인데 웹사이트의 중요한 부분을 없애고 집중하는 것이다.
밝은 색상 깔끔하고 선명한 모서리와 넓은 공간을 활용하는 플랫 디자인은, 산만하고 느린이미지 기반을 신선한 디자인으로 바꾸는 것이다.

또한, 팝업창 / 배너광고 / 사이드바 등 자질구레한 요소들을 없애고, 소셜미디어 링크버튼 등 최대한 심플한 네비게이션 UI속에 감춘채,
오직 핵심적인 텍스트와 화면을 전체 가득 채우는 Full Screen이미지 또는 영상을 단순 명료하게 메세지를 웹사이트로 보여줄 것이다.

12. Animation

애니메이션은 매끄러운 전환을 주로 사용자인식을 위한 디자인으로 진보될 것이다. 동적 시각 자료는 사용자들에게 더 쉽게 이해할 수 있으며, 기억되게 한다.
비디오컨텐츠가 인기있고 유용한 이유중 하나로 특정 부분에 대한 애니메이션 삽입은 보다 진보될 것이다.

13. Virtual Reality Video

2017년에 올라온 가상현실비디오는 점차적으로 서비스들이 증가하는 걸 볼 수 있었다. 2018년의 웹은 공상과학소설에만 나왔던 새로운 생동감 넘치는 장소에서 동영상을 찍고
비디오, 모델링, 비디오맵핑, 대화형 비디오를 통해 웹사이트를 검색할 것이다.
이런 비디오는 비용이 많이들고 시간집약적인 것 처럼 보이지만, 실제로 가상현실비디오를 쉽게 액세스 할 수 있는 몇가지 앱들이 있다. (해당링크)

At TheeDesign, we’re ahead of the game. Just last year we created a website for ImagineOptix that featured an interactive 3D model and it won a 2017 Summit Creative Award.

14. Breaking the Grid

화면 여백이 넓고 그리드를 파괴하는 디자인은 PC와 모바일 등 다양한 디바이스 화면에 대응하기 위한 반응형 웹 시대의 산물이라 얘기할 수 있다.
오랜기간 그리드는 UI디자인의 왕좌에 있었다. 그리드는 모든 프로젝트 레이아웃 중 가장 기초적인 레벨이며, 인체를 똑바로 유지하는 골격으로써
페이지의 리듬과 구조를 유지해왔다. 그러나 오늘날의 웹디자인에서는 레이아웃보다 유연하고 매력적으로 만들기 위해 그리드를 깨뜨려서 더 세련되고
초 현대적인 디자인을 창조하는 것이 트렌드가 되고있다. ‘혁신적인 스콜링과 패럴렉스’ / 그리고 ‘Long Scroll Page’라는 유행도 일맥상통하다

15. Microinteraction

모바일 앱이나 웹사이트에서 버튼을 누르거나 전자 메일을 보내고 아침에 알람을 끄고 캘린더 작업관리자 응용프로그램에서 매일 작업을 설정하는 등등 수 많은 ‘상호작용’을 한다
우리 주변의 거의 모든 사물과 응용 프로그램은 미세 상호작용 또는 미세 애니메이션으로 채워지는데, 마이크로인터랙션은 우리가 시스템 또는 UI상호작용한 후 피드백을 얻고 사용자의 습관을 형성하고
직관적인 방법으로 웹사이트를 체험하는데 도움이 되는 간단하고 작은 애니메이션이다.

출처 :
http://merehead.com/blog/web-design-trends-2018/
https://brandwave.co.kr/2017-%EC%9B%B9-%EB%94%94%EC%9E%90%EC%9D%B8-%ED%8A%B8%EB%A0%8C%EB%93%9C/
https://digitalmarketinginstitute.com/blog/2017-11-07-11-web-design-trends-to-watch-in-2018
https://www.theedesign.com/blog/2017/top-web-design-trends-2018
https://blogs.adobe.com/creativedialogue/ko/design-ko/the-future-is-now-10-design-predictions-for-2017-kr/
http://merehead.com/blog/web-design-trends-2018/
https://www.awwwards.com/web-design-trends-for-2017.html
https://www.behance.net/gallery/47810259/2017-Design-Trends-Guide?utm_content=buffer32ccb