2017 년에 보는 20 가지 웹 디자인 동향

또 하나의 해가 지나고 디자이너들은 미래를 향해 앞을 내다보고 있습니다. 많은 유망한 디자인 트렌드 작년에 나는 2016 년의 최고 디자인 트렌드를 다루었으며 우리는 많은 변화 그때부터.

그래서,이 포스트를 위해 나는 상위 20 개 트렌드 내가 알아 차 렸던 2017 년에 견인을 얻다.. 이러한 디자인 트렌드 어떤 웹 사이트에도 적용 가능, 그래서 우리가 2017 년을 지나서 나아갈 때이 기술에 대해 눈을 떼지 마십시오..

1. “에서 추천” 배지

신생 기업, 블로그, SaaS 프로젝트 및 소규모 기업에서도 현재 “에서 특집으로” 배지 그들의 웹 사이트에. 이 배지는 종종 주류 블로그의 기사 링크 HuffPo, Forbes, CNN, Fox 및 기타 뉴스 아울렛.

목표는 웹 사이트의 유효성을 검사하다. 과 신뢰를 쌓다 새로운 방문자와. 사람들이 웹 사이트를 신뢰할 수있을 때 쉽게 신뢰할 수 있습니다. 권위있는 출판물에 언급 된.

사실 많은 상위 블로그 노출을 높이 평가하다, 그래서 그것은 정말로 모든 사람을 돕습니다. 이러한 큰 사이트는 종종 온라인에서 로고를 공개하십시오. 인터넷 검색을 통해 투명 PNG 또는 SVG를 찾을 수도 있습니다..

또한 귀하가 원래 기사로 다시 연결 귀하의 사이트를 언급합니다. 이것은 너는 정말로 언급되었다. 사이트에서 귀하는 클레임을 제기하는 것이 아닙니다..

2. 대담한 모든 대문자 링크

나는 본 적이 매끄러운 탐색 메뉴 수십 모두이 같은 디자인에 의존합니다. 이 nav 링크 글꼴과 크기가 다양하다. 그러나 그들은 보통 비슷한 특징을 가지고있다., 예 :

• 모두 대문자
• 굵게
• 균등 한 간격
• 오른쪽 구석으로 정렬

Zazzle의 홈페이지는 좋은 예입니다. 하지만 이걸 찾을 수 있어요. 많은 스타트 업 웹 사이트에서 왜냐하면 그것은 링크를 공유하는 깨끗한 방법 쉽게 읽고 쉽게 탐색 할 수있는.

나는이 경향을 주로 연상시킨다. 기업 및 기술 벤처 기업 블로그에도 널리 퍼져있을 수 있습니다..

다음 번에이 추세를 볼 수 있습니다. 그리고 나는 그것이 2017 년까지 잘 자라기를 기대합니다..

3. 잡지 스타일의 블로그

블로깅은 2000 년대 초반의 틈새 개념이었습니다. 당신이 2003 년에 블로그를 운영했다면 그것은 귀여운 작은 취미로 여겨졌습니다. 불과 10 년 만에 그 추세가 급격히 변했습니다. 이제 블로그에서 전일 수입을 제공하다, 그리고 그들은 시작하고있다. 디지털 잡지와 훨씬 더 흡사하다..

TechCrunch가 2006 년에 처음 출시되었을 때의 원래 디자인을 돌아보십시오. 일반적인 WordPress 블로그처럼 보입니다.?

이제 2017 년 Techcrunch의 현재 홈페이지를 살펴보십시오.

그것은뿐만 아니라 잡지처럼 보인다., 또한 하나와 같은 기능. TechCrunch는 매일 수십 개의 새 게시물을 게시합니다. 그들은 스타트 업 뉴스를위한 최고의 소스입니다..

잡지 스타일의 디자인 트렌드는 큰 차이를 만듭니다. 홈페이지는 큰 특색 지어진 이야기 단면도, 각 지위 자체 미리보기 이미지가있다., 및 기사 페이지 표제를 중심으로하다.

그것에 대해 생각할 때 TechCrunch는 많이 변경되지 않았습니다. 여전히 “그냥 블로그”. 그러나 잡지처럼 디자인되고 관리됩니다., 그리고 이것은 모든 차이를 만든다..

4. 비디오 배경

자동 재생 사운드는 웹에서 가장 성가신 경향 일 것입니다. 그러나 놀랍게도, 자동 재생 비디오 (사운드 제외) 급속히 증가 추세입니다. 비디오 배경이있는 수십 개의 비즈니스 사이트에서이를 확인할 수 있습니다 전체 화면을 차지하다.

제대로 적용되면이 기법을 정말 좋아합니다. 만큼 비디오는 사이트와 관련있다. 과 콘텐츠를 방해하지 않는다., 헤더에서 사용하는 멋진 효과라고 생각합니다..

5. 유령 버튼

같이 미니멀리즘은 더욱 발전한다. 웹 디자인에 많은 새로운 트렌드가 등장하고 있습니다. 그러한 경향 중 하나는 귀신 단추의 상승 안쪽에 채우기가 없지만 바깥 쪽 테두리가있는.

대부분이 버튼 다른 사람들과 대조하다 주의를 끌기. 인스턴트 모조의 홈페이지에서 초록색 가입 버튼을 볼 수 있습니다. 바로 옆에있다. 라이브 데모에 연결되는 유령 버튼.

다른 사이트는 채택했습니다. 순전히 유령 디자인 스타일 바깥 쪽 단추에. 좋은 예가 새로운 부트 스트랩 레이아웃입니다..

유령 버튼이 사이트에서 작동한다고 생각합니다. 미니멀리즘에 기대다. 그것들은 모든 웹 사이트에 적합하지 않을 수도 있지만, 지나가는 해가 갈수록 그들의 사용이 증가하는 것을 보았습니다..

6. 모달 창 옵트 인

모달 창은 매우 성가시다. 나는 어떤 사용자라도 그들을 좋아할 것이라고 상상할 수 없다. 하나 가입을 늘리는 것으로 입증되었습니다., 마케팅 담당자는 작동하는 기술을 무시할 수 없습니다..

그렇기 때문에 모달 옵트 인 창은 계속 오르다. 2017 년.

그들은 내가 제일 좋아하는 것이 아니며, 나는 결코 그것을 내 웹 사이트에 추가하지 않는다. 그러나 가입의 수위를 높이는 것이 목표라면 모달 창은 확실한 방법으로 진행됩니다..

새로운 플러그인은 목표 이탈 의도 어느 모달을 발생시킨다. 사용자가 사이트를 떠날 때마다 다른 모달은 x 초 후에 나타나거나 사용자가 충분히 멀리 내려갈 때 열리도록 설정됩니다..

모달 (modal)이 어떻게 작동하는지, 어떻게 디자인되었는지, 어떻게 생각하는지에 관계없이 장거리 이동이 가능할 것이라고 생각합니다..

7. 일러스트레이션 및 벡터 아트

Sketch and Affinity Designer와 같은 새로운 벡터 디자인 프로그램을 통해 일러스트 레이터의 새로운 물결이 웹에 침투합니다. 그래픽 디자인 및 인터페이스 디자인은 전보다 더 많은 전문 분야의 디자이너와 끊임없이 융합됩니다..

이것은 우리가 볼 수 있음을 의미합니다. 더 많은 사용자 정의 아이콘 과 전체 페이지 삽화 가까운 미래에.

많은 삽화가들이 연습 예술가이기 때문에 우리는 볼 것입니다. 전체 페이지 배경 컨셉 아트와 같이 세부적으로 렌더링 된 디지털 페인팅 소프트웨어로 제작되었습니다..

8. 고정 스크롤 사이드 바

고정 디자인의 첫 번째 물결 탐색 바에 초점을 맞추다.. 이것들은 특히 반응 형 디자인에서 너무 일반적입니다. 고정 된 navbar 네이티브 모바일 애플리케이션의 느낌을 그대로 재현.

하지만 2017 년에는 끈적 끈적한 요소가 하나 더 생길 것으로 예상됩니다.-끈적한 사이드 바.

거의 모든 주요 블로그는 이런 종류의 끈적한 사이드 바를 사용합니다. 그것 내용을보기에 유지한다. 언제나 사용자가 할 수있는 가능성을 높입니다. 사이드 바 콘텐츠와 상호 작용.

또한 수십 개의 무료 jQuery 플러그인으로 끈적한 사이드 바 효과를 복제한다.. 모든 웹 사이트에서이 설정을 이전보다 쉽습니다..

9. 인 페이지 목차

최근 사례 연구에서 긴 형식의 콘텐츠가 짧은 형식을 능가합니다. 사용자 유지의 순위와 품질 모두에서 일부 쿼리에 신속하게 응답 할 수 있기 때문에 이것이 항상 사실 인 것은 아닙니다..

그러나 웹상의 길고 긴 형태의 콘텐츠를 볼 때 자연스럽게 볼 수 있습니다. 더 많은 목차가 기사에 추가되었습니다.. 긴 검토 사이트 또는 나열된 항목으로 분류 된 기사에서이 내용을 볼 수 있습니다..

목차를 추가하면 사용자 환경 개선 도와주고 독서를 끊다 작은 덩어리로. 목차도 가능하다. 사이트 순위 향상에 도움! Google에서 귀하의 페이지를 소중하게 생각한다면 점프 링크를 얻으십시오. 검색 결과.

ToC는 현재 매우 희귀합니다. 그러나 나는이 추세가 2017 년과 몇 년 후에 폭등 할 것으로 기대한다..

10. 밝은 화려한 디자인

이 추세가 미니멀리즘이나 Google의 소재 디자인에 대한 반응으로 드러났는지 확실하지 않습니다. 그러나 나는 수십 개의 웹 사이트를 우연히 발견했다. 밝은 파스텔 색상과 다른 생동감 넘치는 색상 매우 기발한 모습을 만들기 위해.

Rentberry 홈페이지는 좋은 예입니다. 톤의 그라데이션. 그리고 심지어 위에서 언급 한 “에서 추천” 아래에있는 배지! 한 사이트의 두 가지 추세.

당신은 색상이 전체 페이지에 스며 들지 않는다., 흰색 & 회색 음영으로 음소거되어 있습니다..

나는 이것들을 충분히 보아왔다. 생동감있는 색채 그들이 성장하고 있다고 믿는다..

11. 애니메이션 스크롤

웹 디자이너는 스크롤 자키 (scroll-jacking)와 그 끔찍한 사실을 알고 있습니다. 그러나 그것은 내가 타이틀과 의미하는 바가 아니다. “애니메이션 스크롤”. 나는 지금 많은 사이트를 보았다. 내용을 애니메이션으로보기 페이지의 특정 섹션을지나 스크롤 할 때.

이 추세는 대부분 창업가 및 SaaS 업체에 한정 그들의 디자인에 약간의 피자를 원한다..

특히 유익한 추세인지는 말할 수 없습니다. 확실히 눈을 사로 잡다. 그러나 나는 그것이 미학을 훨씬 뛰어 넘는 것이라고 생각하지 않는다. 여전히 빠르게 확산되고있는 추세이며, 아껴서 사용했다. 정말 멋지다..

12. 단일 페이지 응용 프로그램 (SPA)

단일 페이지 응용 프로그램은 웹 사이트입니다. 순전히 Ajax 호출로 작성. 자바 스크립트 서버에서 콘텐츠를 가져옵니다. 과 동적으로로드, 그래서 페이지 결코 리프레시하지 마라..

일반적인 예로는 Gmail 및 Facebook과 같은 사이트가 있습니다. 하지만 함께 더 많은 JS 기술, 더 많은 SPA가 항상 개발되고 있습니다. 지옥, CodePen조차도 SPA로 간주 될 수 있습니다..

React & Aurelia와 같은 강력한 프론트 엔드 라이브러리를 사용하면 2017 년부터 처음부터 SPA를 만드는 것이 훨씬 쉬울 것입니다..

13. 전환 가능한 검색 막대

이전에는 검색 필드였습니다. 항상 전망에 있었다. 사이드 바 또는 탐색에서 웹 페이지의 어딘가에 있습니다. 하지만 최근에 나는 더 많은 검색 필드를 발견했습니다. 기본적으로 숨김, 반드시 있어야합니다. 보기로 전환하다.

확실히 편리한 트렌드 페이지의 공간 절약 여전히 검색 기능을 계속 사용 가능하게 유지. 새로운 디자인에 검색 양식을 배치 할 위치가 확실하지 않은 경우 네비게이션의 돋보기 아이콘에 연결된 토글 필드를 사용하는 것이 좋습니다.

14. Adblock 메시지

사실을 부인할 수는 없습니다. 광고 차단이 증가하고 있습니다.. 유일한 문제는 게시자가 이러한 추세를 어떻게 처리 할 것인가입니다. 정중 한 사이트 광고 공간에 메시지 추가 Time.com처럼. Hongkiat에서 알 수 있습니다. 내부 광고는 공백을 채우기 위해 그 사이트로 더 링크.

내가보기에 진지한 경향 중 하나는 adblock 콘텐츠 블록. 이것은 “광고 차단기 차단”. 이 기능은 Business Insider 및 Forbes와 같은 많은 대형 사이트에서 이미 구현되었습니다. 불행하게도 이는 사용자와 게시자 모두에게 피해를 주며 이는 모두 품질이 낮은 광고 기술로 인해 발생합니다..

궁극적으로, 귀하가 누구를 비난했는지, 또는 귀하가 광고 차단 토론에 참여한 위치가 중요하지 않습니다. 더 많은 사람들이 adblock 플러그인을 설치하고 있으며 기대하고 있습니다. 더 많은 게시자가 뒤로 물러나야합니다..

15. 순수한 SVG 아이콘들

SVG 그래픽 이미 웹에 스며 들었지만 하루가 갈수록 커지고 있습니다. 그리고 저는 2017 년이 될 느낌이 있습니다. SVG를위한 거대한 해 웹에서.

수천 가지를 찾을 수 있습니다. 무료 SVG 아이콘 세트 Flaticon과 같은 사이트의 경우 검색 방법을 알고 있어야합니다. 하지만 당신은 또한 SVG를 HTML로 코딩, 예를 들어 CodePen에서이 예제를 사용하여.

따라서 디자이너에게는 SVG를 사용하는 방법이 있으며 개발자는 SVG도 사용할 수있는 방법이 있습니다.. 최신 브라우저 지원이 좋아 보인다. 따라서 전반적인 호환성 문제는 없습니다. 필요한 모든 디자이너가 충분합니다. SVG의 힘을 알아라. 사용을 시작하십시오.!

16. Adobe XD

어도비 Adobe XD의 전체 베타 버전 이후 2016 년에는 급속히 성장했습니다. 현재 Mac 및 Windows 모두 지원, 그리고 그것은 테스트 단계에서 완전히 펼쳐지기 전에.

Sketch를 추월하는 프로그램에 대한 비웃음을 비웃을 수도 있지만 Adobe는 이유 때문에 창의적인 작업의 주된 소프트웨어 회사입니다. 플러스 스케치는 여전히 Mac 전용이며 Adobe는 모두를 지원하기 위해.

나는 우리가 내년에 Adobe XD에 대해 더 많이 읽을 것이라고 단호하게 믿습니다. 그것을위한 소프트웨어가 될 수 있습니다. UI 모형 만들기-그래서 Photoshop을 사진 조작 도구로 사용할 수 있습니다 (의도 한대로)..

새로운 소프트웨어의 등장으로 수십 개의 자습서 및 공짜 GUI 키트 게다가. Dribbble에서 많은 Adobe XD 공짜를 찾을 수 있습니다. 두 개의 새로운 XD 중심의 공짜 사이트 Designmine 및 XD 전문가.

17. 더 많은 햄버거 메뉴

그것을 사랑하거나 미워하십시오. 햄버거가 여기 있습니다.. 많은 유용성 연구가 있습니다. 보기에 숨겨진 메뉴에 대해 논쟁하다.. 그러나 작은 화면과 너무 많은 대안으로, 지금은 더 좋은 대안이 없습니다..

햄버거 아이콘이 천천히 있습니다. 인식 가능한 상징이 됨 탐색 메뉴 용. 돋보기 아이콘과 마찬가지로 “수색”, 3 바 햄버거 아이콘은 곧 “메뉴”.

이것은 기술에 정통한 대부분의 사람들에게 이미 사실입니다. 그러나 1 년이지나면서 더 많은 사람들이 스마트 폰을 사용하고 모바일 웹을 탐색하기 시작합니다. 그리고 그들은 배우고 있습니다. 그 햄버거를 nav 메뉴와 연관시키다. 끝이 보이지 않는.

18. 제품 기능 아이콘

나는이 트렌드에 관해 Treehouse에서 썼지 만 최근에 언급하지 않았다. 그리고 2017 년에이 경향은 거대한 될 거 야. 아마도 가장 일반적인 방법 일 것입니다. 홈페이지에 제품 기능 공유.

너부터 시작해. 지형지 물 목록 만들기 귀하의 제품에 적합합니다. 이 제품은 SaaS 프로그램에서부터 WordPress 테마 또는 실제 제품에 이르기까지 다양합니다..

그런 다음 디자인 사용자 정의 아이콘 또는 아이콘 세트를 찾는다. 이러한 기능을 나타냅니다. 가장 좋은 방법은 일반 기능 사용하지 않기 와 같은 “신뢰할 수있는” 또는 “빠른” 대부분의 사람들이이 물건을 기대하기 때문에.

대신 목록 기능 그게 중요해.. 프리미엄 WP 테마일지도 모르지만 반응 형인지, 얼마나 많은 위젯이 제공되는지 또는 메뉴 작동 방식을 나열하십시오..

이 기능 아이콘 비주얼과 같은 작업 도움을주는 각 기능 판매. 혼자있는 텍스트 소비하기가 어렵다. 시각적으로 훨씬 쉽습니다. 한 눈에 이해하다.

19. 접을 수없는 CTA

클릭 유도 문안 전통적으로 배치되었다. 온통 한 웹 사이트. 그러나 방문자들과 웹 사이트에서 보내는 시간 단축, 강력한 CTA를 유지하는 것이 중요합니다. 스크롤없이 볼 수있는 부분 바로 위에.

이러한 클릭 유도 문안은 버튼, 옵트 인 양식 또는 사람들이 어떤 행동을 취하도록 유도하십시오. 블로그 게시물에 서명하거나 읽는 것과 같은.

CTA를 디자인하는 방법이나 전환 최적화 방법을 설명 할 수는 없습니다. 하지만 이러한 추세가 이러한 CTA를 배치하고있는 것으로 보입니다. 접은 부분 위에 그리고 선명한보기 모든 방문자가 볼 수 있도록.

20. 더 작은 내용 영역

모니터가 너무 커져서 대부분의 웹 사이트는 최대 폭을 설정하십시오. 문장의 길이가 2,000px이고 폭이 700px 인 경우 문장을 읽는 것이 훨씬 어렵습니다..

콘텐츠가 작습니다. 소비하기 쉽다., 궁극적으로 콘텐츠가 많은 웹 사이트에 대한 더 나은 경험.

더 많은 디자이너가 이것을 실현하고 있으며 천천히 콘텐츠 영역의 크기를 줄이십시오.. 750px의 최대 너비를 선호하지만 600px 이하로 작게 갈 수 있습니다..

짧은 단락 와 문장이 적다. 과 더 작은 콘텐츠 영역 언제나 가독성 향상. NY Times와 같은 주요 간행물은 자신의 구조적 지침을 벗어날 수 있습니다. 그러나 간단한 블로그 나 비즈니스 사이트의 경우 추세가 작은 단락 및 콘텐츠 영역을 가진 더 긴 콘텐츠.

마무리

이 게시물에서 다루지 못했던 많은 다른 트렌드가 있지만, 저는이 20 가지가 가장 흥미 롭다고 생각합니다. 우리가 2017 년으로 나아감에 따라, 어떤 추세가 폭발하고 어떤 것들이 폭발적인지는 분명해야합니다.

다가올 디자인 트렌드에 대한 다른 아이디어 나 제안이 있다면 아래의 의견을 자유롭게 들려주십시오..