다음 웹사이트 프로젝트에 영감을 주는 2022 웹 디자인 트렌드

TOO 유행에 문제가 있습니까?

나는 많은 웹사이트 디자이너들이 길을 잃는 것을 봅니다. 그들의 웹사이트가 사용 가능하고 기능적이라는 대가로 '매우 멋진' 디자인에 끌립니다.

“대부분의 디자이너는 일종의 대체 현실에 살면서 서로에게 불필요한 것을 만들어냅니다. 그러면 트렌드가 됩니다.” – Webflow 사용자 Blazej

오늘 우리는 2022년의 3가지 트렌드를 살펴볼 것입니다. 웹사이트 프로젝트의 유용성을 희생시키지는 않지만 다음 단계로 끌어올리는 데 도움이 될 것입니다.

2022 웹 디자인 트렌드 #1 - 화려한 배경의 주제 컷아웃

이 2022 웹사이트 트렌드를 당신에게 적합하게 만드십시오:

• ShapeDivider.app과 같은 '모양 만들기' 앱 을 사용하면 멋진 단축키를 원할 경우 이러한 자연스러운 모양을 만드는 데 도움이 될 수 있습니다.
• 완벽한 사진을 선택하는 것이 더 중요할 것입니다. 흰색 배경을 가진 인터넷에서 많은 사진으로 너무 '스톡 포토-y'가 되기 쉽기 때문입니다.

2022 웹 디자인 트렌드 #2 – 모노크롬 작업

• 흑백 외에 다른 컬러를 선택하면 디자인이 POP!
• 작업할 색상이 적으면 실제로 이러한 유형의 웹 사이트를 더 쉽게 디자인할 수 있습니다!
• 색상을 작업하고 키 버튼에 사용 하고 시선을 끌고 싶은 항목에 사용하십시오.

2022 웹 디자인 트렌드 #3 – 팬텀 디자인 요소

이 2022 웹 디자인 트렌드를 당신에게 적합하게 만드십시오:

• 아픈 엄지손가락처럼 튀어나오고 싶지 않은 요소를 혼합하십시오.
• 이 미묘한 룩을 활용하여 고급스러운 미학 을 연출하세요.

지난 몇 년간의 웹사이트 동향

우리는 사용자 경험에 중점을 두고 스타일리시하고 시대를 초월한 방식으로 구축된 아름다운 웹사이트를 좋아합니다. 핵심은... "시차 애니메이션"이라고 말하기 전에 유행에 뒤떨어지는 방식으로 너무 유행하지 않는 것입니다.

• 모든 새로운 트렌드에 뛰어들지 마십시오.
• 스타일리시하고 효과적인 것이 무엇인지 계속 주시하십시오.
• 아래에 소개 된 각 트렌드에는 왜 스타일리시한지에 대한 약간의 발췌문과 효과적인 이유 또는 효과에 대한 별도의 발췌문이 있습니다.

2020년 3대 웹 디자인 트렌드

1. 빅 타이포그래피

스타일리시한 이유는? 모두가 200명의 이해 관계자를 만족시키기 위해 최대한 많은 텍스트를 디자인에 채우고 있는 세상에서... 매우 짧고 크게 만드는 하나의 핵심 메시지로 요약할 수 있다면 당신이 이깁니다.

효과적입니까? 사람들이 무엇에 집중해야 하는지 알기 때문에 매우 효과적입니다! 모든 텍스트 조각이 같은 크기이거나 서로 약간만 다를 때의 문제는 물론 가장 중요한 부분이 무엇인지 불분명하다는 것입니다.

2. 더 작은 영웅, 더 영향력 있는 영웅 이미지

스타일리쉬한 이유는? 아름다운 이미지를 가리지 않는 것이 얼마나 영광스러운 일입니까? 사람들은 이것이 응집력이 있고 어려운 레이어링 문제를 경험할 가능성이 적기 때문에 이것을 좋아합니다(다음 항목의 예).

효과적인가: 확실히 그럴 수 있습니다. 중요한 점은 이미지가 좋고 사람들이 제품이나 서비스로부터 혜택을 받고 있다고 상상하는 데 실제로 도움이 된다는 것입니다. 좋은 이미지가 없으면 촌스러워 보일 수 있습니다.

3. 계층화된 요소

스타일리쉬한 이유는? 패션과 마찬가지로 의도적인 레이어링은 예술적입니다. 의도적으로 느껴지므로 매우 멋지게 보일 수 있습니다.

효과적인가: 이것은 실제로 특정 항목에 따라 다릅니다. 올바른 사진, 올바른 지원 요소, 대비를 위한 올바른 오버레이 또는 올바른 타이포그래피가 없으면 실제로 효과가 없습니다. 함께 작동하는 견고한 요소가 있고 '그 요소를 제어'할 때. 종종 클라이언트는 지금 작동하지 않는 이미지를 교체할 수 있습니다. 따라서 자주 변경되지 않을 것임을 알고 있는 경우 올바른 구성 요소로 수행하는 것이 중요합니다.

기타 명예로운 언급:

수직 타이포그래피 – UI 요소에 사용되며 디자인에 보다 의도적인 느낌을 줄 수 있습니다.

유기농 모양 컷아웃 - 위의 당뇨병 팝스(Pop Diabetes) 예도 이 추세를 활용합니다.

10% 오프셋 이미지 – 또한 위의 Schaefco 항목은 다음을 특징으로 합니다.

Typographic Cutouts – 이에 대한 몇 가지 멋진 예를 보았습니다. 큰 굵은 글자는 공백을 잘라내고 때때로 그 뒤에 비디오가 있어 정말 멋진 레이어 효과를 줍니다.

모든 페이지의 비디오 – 정기적으로 비디오를 만들고 있다면 주요 서비스별로 하나씩 수행하고 이를 포함하여 "사이트에 머문 시간"을 늘리는 것이 어떻습니까? SEO에 적합하며 독서를 좋아하지 않는 사용자에게도 적합합니다. (힌트: 우리 대부분은 비디오 시청을 선호합니다.)

가벼운 보완 애니메이션 – 애니메이션은 특히 약간 움직이는 경우 시선을 끌지만 사람들의 시선을 올바른 방향으로 이끌어야 합니다. 또는 애니메이션이 실제로 좋은지 확인하십시오 / 귀하의 브랜드를 정말로 칭찬하는 스타일을 가지고 있는지 확인하십시오.

더 많은 세리프 글꼴 – 더 읽기 쉬운 세리프 글꼴! 2020년과 그 이후에 세리프가 컴백하는 모습을 보게 되어 기쁩니다!

다른 디자이너들은 2020년 웹 디자인 트렌드를 받아들입니다(크라우드소싱).

최근 웹 디자인 서비스는 사용자가 웹 사이트를 탐색하는 시점에 최상의 경험을 제공하는 데 중점을 두고 있습니다. 따라서 개발자가 적절하게 작동하는지 확인하는 것이 매우 중요합니다.
그래서 여기 2020년의 상위 17개 웹 디자인 및 UI 트렌드 목록이 있습니다.

1. 개방적이고 다채로운 미니멀리즘
요즘은 흑백 배경을 사용하여 미니멀한 디자인을 생각하고 있다면 그런 시대는 지났습니다. 개방적이고 다채로운 미니멀리즘은 웹 디자인에 응집력 있고 눈길을 끄는 느낌을 주는 최신 트렌드입니다.

2. 모바일 친화적
모바일 사용이 증가함에 따라 디자이너는 각 사용자가 모바일을 통해 웹 사이트를 쉽게 볼 수 있도록 웹 사이트가 모바일 친화적인지 확인해야 합니다. 이것이 바로 반응형 웹 디자인 서비스가 구출되는 곳입니다.

3. 대형 제목
웹사이트에서 보내는 시간이 훨씬 적기 때문에 독자의 관심을 끌기 위해 최근에는 대형 제목과 헤드라인이 매우 보편화되었습니다. 따라서 헤드 라인은 독자의 관심을 끌 수 있도록 만들어집니다.

4. 생생한 색상, 도전적인 그라디언트 및 어두운 배경
오늘날의 웹 사이트는 최고의 사용자 경험을 제공하는 데 중점을 두고 있으므로 웹 디자인 서비스는 특히 동일한 것에 중점을 둡니다. 2019년에는 어두운 배경의 환상적인 색상 표현과 함께 더 복잡한 그라디언트를 사용하는 것이 더 일반적이 되었습니다. 이 세 가지의 고전적인 혼합이 트렌드입니다.

5. 웹사이트 로딩 속도
오늘날의 고객은 항상 서두르므로 느린 로딩 웹사이트는 단순히 사용자에 의해 건너뜁니다. 따라서 웹 사이트의 로딩 속도는 사용자 경험 향상을 위한 최신 트렌드가 된 훨씬 더 빨라야 합니다.

6. 애니메이션 및 차세대 일러스트레이션
사용자는 항상 새로운 것을 기대합니다. 이것은 애니메이션과 다음 레벨 일러스트레이션으로 쉽게 달성할 수 있으며 이것이 바로 이것이 최신 트렌드가 된 이유입니다.

7. CSS 그리드
CSS 그리드는 웹 디자인을 훨씬 쉽게 만드는 데 중요한 역할을 하는 가장 인기 있는 웹 디자인 트렌드 중 하나입니다. 최근에는 몇 가지 새로운 도구와 기존 기능이 혼합되어 있습니다. 오늘날의 현대 CSS는 완전히 새로운 수준의 응답성, 상호 작용 및 데이터 시각화를 제공합니다.

8. 밝고 어두운 색 구성표
사용자에게 흥미로운 것을 만들기 위해서는 밝고 어두운 색 구성표를 사용하는 것이 좋습니다. 이것은 사용자에게 긍정적인 인상을 주어 유익합니다.

9. 몰입형 3D 경험
3D 이미지와 그래픽은 의심할 여지 없이 웹 디자인 서비스에 너무 적합하므로 사용자의 시선을 사로잡는 매력적인 웹 디자인을 만들 수 있습니다. 몰입형 3D 경험은 웹사이트에 생기를 불어넣고 사용자에게 훌륭한 경험을 제공합니다.

10. BrutalismBrutalism은 또 다른 주요 트렌드로, 더 많은 브랜드가 내부의 반항적인 면을 수용하기 위해 대담하고 투박하며 과감한 개념을 사용하는 것을 선호한다는 사실에서 매우 분명합니다.

11. 플라잉 및 플로팅 요소
사용자의 시선을 사로잡기 위해서는 비행뿐만 아니라 떠다니는 영상도 매우 효과적입니다.

12. 유기적 및 기하학적 모양
웹 디자인 서비스를 위한 기하학적이고 유기적인 모양의 사용은 평면 디자인과 깨진 격자 사이 어딘가에 자리 잡고 있습니다.

13. 겹치는 것들
겹침 효과는 확실히 2020년의 가장 핫한 트렌드 중 하나입니다. 겹치는 것은 특정 유형의 콘텐츠에 시각적인 흥미를 불러일으킵니다. 이 개념은 사람들의 흥미를 끌기 위한 훌륭한 트릭이지만 웹 디자인 서비스에서는 신중하게 수행해야 합니다.

14. 비디오 증가
더 많은 비디오를 추가하면 웹사이트에 더 많은 생명을 불어넣을 수 있으며 다른 어떤 형태의 미디어에서도 볼 수 없는 거의 모든 사람들의 관심을 끌 수 있습니다. 이것은 의심할 여지 없이 2020년 트렌드이며 오랫동안 계속될 것입니다.

15. 비대칭 레이아웃과 깨진 그리드
웹 디자인시 깨진 격자의 사용과 함께 웹 사이트의 비대칭 레이아웃이 요즘 보편화되었습니다.

16. 증강 현실
화면 전용 인터페이스는 오늘날의 세계에 충분하지 않으며 사용자는 실제 세계 내에서 물리적 상호 작용이 일어나기를 원합니다. 이것은 웹 디자이너가 증강 현실 기능을 제공하기 위해 새로운 것을 생각해야 하는 곳입니다.

17. 마이크로 인터랙션
마이크로 인터랙션의 중요성은 어떤 대가를 치르더라도 무시할 수 없습니다. 이는 2020년에 증가할 매우 매력적인 이벤트를 만드는 데 아주 좋습니다.
이제 2020년 최고의 웹 디자인 및 UI 트렌드를 알았을 때 더 많은 시간을 낭비하지 말고 웹사이트에 통합하여 사용자에게 환상적인 경험을 제공하십시오.

잘 사용되지 않는 일반적인 웹 디자인 트렌드의 예

추세가 제대로 사용되지 않는지 어떻게 확인합니까? 공감과 직관. 내면의 지미니 크리켓과 상의하세요. 누군가 자신의 웹사이트를 통해 당신에게 이런 짓을 했다면 당신은 그것을 원합니까? 대답이 '아니오'인 경우 '뉴스레터 신청이 너무 많아' 평생 스팸 메일을 보낼 수 있다고 해도 50개의 팝업을 무시해야 합니다.

작동합니까? 축하합니다. 5명을 더 개종시켰고 다른 40명에게 화를 내서 브랜드 인지도를 망치고 자축 콘텐츠를 다시 클릭하는 것을 재고하게 만들었습니다. 예, 제대로 사용되지 않는 웹 디자인 트렌드의 첫 번째 예는 다음과 같습니다.

침입 팝업

침입 팝업 및 닫는 방법을 알 수 없거나 터무니없는 질문에 대답하도록 강요하는 종류는 끔찍합니다.

더 잘 하는 방법 – 누군가 떠날 때 가치 있는 것을 제공하십시오.

누군가를 이메일 목록에 밀어 넣으려는 대신 끌어오십시오. 당신이 나에게 가치있는 것을 제공한다면 당신이 내 얼굴에 큰 오래된 팝업을 넣어 화를 내지 않습니다. 사실, 나는 약간 흥미를 가질 수 있습니다. 주목해야 할 중요한 것은 내용이 변수라는 것입니다. 엉터리 백서의 먼지를 털어내지 말고 멋진 것을 만드십시오. 팀과 협력하여 멋진 것을 만드십시오. 해야 하는 모든 작업을 수행한 다음 그것을 중심으로 만드십시오. 그것을 '종료 의도' 팝업과 짝을 지어 결정을 내리도록 강요하지 마십시오. 항상 팝업을 표시할 명확한 방법을 제공하십시오.

무한 스크롤

마지막에 명확한 클릭 유도문안이나 잘 설계된 탐색이 포함된 아름다운 바닥글이 필요하지 않습니다.

트위터가 별에서 하트로 바뀔 때조차 처리할 수 없기 때문에 이것이 내 냉소적인 노인 두뇌의 한 예일 수도 있습니다. 하지만 여기에 황금률을 적용하면 기사를 끝내고 다른 사람이 선택하게 하는 것이 싫습니다. 다음에 읽고 싶은 기사. 그들을 위한 결정을 내리는 것은 페이스북과 유튜브 비디오로 즐거울 것입니다 왜냐하면 이봐, 그것은 비디오이고 나는 어쨌든 야심차게 준비하고 있기 때문입니다. 그러나 당신이 읽어야 하는 콘텐츠에 대해서는 유감스럽게도 당신이 결정을 내리지 않을 것이라고 생각합니다 내가 완성한 하나의 기사나 콘텐츠를 기반으로 내 선호도를 정확하게 결정합니다.

다양한 항목을 탐색하는 갤러리 유형/Pinterest-esque 사이트는 이러한 유형의 탐색에 약간의 이점이 있는 것처럼 보이지만 소셜에 제한될 수 있다는 사실로 이것을 경고하겠습니다. 나머지 우리는 결론에 대한 만족과 더 많은 탐색이 필요합니다.

더 잘 하는 방법 – 사이트에서 이 카테고리나 콘텐츠 유형을 읽은 후 사람이 무엇을 하고 싶어하는지 생각해 보세요.

사이트의 각 콘텐츠 유형에는 다른 유사한 기사, 탐색 요소 및 이상적으로는 방금 완료한 내용에 맞게 조정된 몇 가지 명확한 다음 단계가 포함된 일종의 사전 바닥글이 있을 수 있습니다. 위의 예(Messages Home)에서 '랍스터' 글꼴이 싫은 만큼 Jared는 콘텐츠 페이지를 읽은 후 사람들이 관심을 가질 만한 내용에 대해 오랫동안 고민하고 시각적인 방법으로 공유했다고 생각합니다. 명확하고 간단합니다. 다른 바닥글이 운이 좋았다면. 인정합니다, 저는 바닥글 페티쉬가 있습니다.

3. oooh-ahhh의 1밀리초를 제외하고는 아무 가치도 추가하지 않는 고통스럽게 주의를 산만하게 하는 시차.

이 예술 및 문화 조직에는 움직임이 있고 깊이가 있습니다. 하지만 의미가 있습니까? 뒷면에 있는 원이 원래의 것이거나 아직 많이 수행되지 않은 시점을 제외하고 유용한 요소를 추가하는 방법을 상상할 수 없습니다. IE 특수 효과 – 하지만 그들은 사이트 상을 수상했습니다... 그래서 사이트가 좋아야 하지 않습니까?

움직임과 깊이는 세련되게 구현될 때 훌륭할 수 있지만 불행히도 많은 사람들이 시차를 구현하기 위해 서두르게 되었습니다. 시차가 방문자에게 실제로 도움이 되고 가치를 추가하는 방법에 대한 깊은 생각 없이 말입니다. 큰 공간 디자인은 아름답지만 웹 사이트 콘텐츠의 핵심에 도달하고 회사와 협력하거나 제품을 구매하려는 방법 또는 이유에 대해 정말로 배우려고 하는 경우 긴 시차 사이트는 요점을 놓치게 됩니다.

더 잘하는 방법 – 미묘하게 구현하여 깊이를 추가하고 적절한 경우 제품에 약간의 흥미를 더하는 방식으로 아껴 사용합니다.

지금쯤이면 많은 분들이 2012년에 발표된 New York Times Snow Fall 기사를 보셨을 것입니다. 이 기사는 시차와 영상을 당시 매우 진보적이어서 무장해제에 가까운 방식으로 사용하고 있습니다.

이 사이트를 매우 아름답게 만드는 열쇠는 무엇입니까?

• 내용에 대한 강한 강조 - 인쇄상의 요소는 매우 잘 생각되고 읽기 쉽습니다.
• 제목 처리는 명확한 계층 구조를 제공합니다.
• 이 모든 것이 아주 잘 어우러져 시차 측면이 중앙 무대가 아니라 더 큰 그림에 대한 유쾌하고 미묘한 부분이 되도록 합니다.

이것이 바로 2016년에 시차를 기믹 같은 느낌 없이 세련되게 사용할 수 있는 방법입니다.

2019년 웹 디자인 트렌드

웹 디자이너는 패션 디자이너와 다르지 않습니다. 웹 디자인에서 다가오는 해의 최신 트렌드가 무엇인지 귀를 기울여야 한다는 점에서 항상 귀를 기울여야 합니다.

현명한 웹디자이너는 사이트의 레이아웃을 만들 때 브랜드 이미지를 염두에 둘 뿐만 아니라 사용자의 사용성을 고려합니다. 이 때문에 디자이너는 매년 사용자가 좋아하지 않는 디자인 세부 사항을 제거하고 사용자가 좋아하는 디자인 세부 사항을 확장합니다.

올해도 다르지 않으며 2019년 웹 디자인에서 찾아야 할 주요 트렌드 목록은 다음과 같습니다.

비디오 배경

사용자의 참여를 유도하기 위해 큰 비디오 배경을 포함하는 웹사이트를 꽤 많이 보았을 것입니다. 비디오 배경은 사용자에게 귀하의 비즈니스에 대한 내부 모습을 제공하는 좋은 방법입니다.

부동산 개발 회사인 Ditto의 웹사이트 를 확인하십시오. 이 웹사이트는 사람들이 하루를 보내는 주거 개발을 강조하여 사용자에게 매력적인 방식으로 단위 내부를 볼 수 있는 기능을 제공합니다.

우리는 Deneen Pottery와 협력하여 배경에 비디오를 구현하는 데 도움을 주었습니다. 이 비디오에는 그들의 도자기가 수제되는 실제 장면이 포함되어 있습니다.

입자 배경

여전히 웹사이트에 모션을 통합하려는 기업의 경우 파티클 배경은 비디오 배경에 대한 훌륭한 대안입니다. 특히 더 큰 배경 비디오로 로드 시간이 걱정되는 경우에는 더욱 그렇습니다. 이 애니메이션은 배경의 일부로 자연스럽고 매력적인 움직임을 만드는 자바스크립트입니다.

Heystack은 사이트에 복잡한 입자 배경을 사용했으며 더 많은 디자이너가 동일한 작업을 수행할 것으로 기대합니다.

비대칭 레이아웃

비대칭 웹 디자인의 독특하고 독특한 측면은 귀하의 사이트를 다른 사이트와 차별화한다는 점에서 매력적입니다. 몇 년 동안 인기를 얻은 미니멀리스트 스타일과 달리 비대칭 디자인은 더 바쁘지만 제대로 하면 여전히 깨끗하고 전문적으로 보입니다.

우리는 최근에 Sustainable 9용 웹사이트를 시작했습니다. 이 웹사이트는 겹치는 모양을 특징으로 하며 균형이 맞는 것처럼 보이지만 확실히 비대칭 요소가 있어 깊이를 더합니다.

볼드 타이포그래피

올바른 타이포그래피를 선택하는 것은 높은 이탈률보다 낮은 이탈률을 갖는 차이일 수 있습니다. 특히 큰 글꼴 크기에서 굵은 활자체를 선택하면 사이트 사용자의 관심을 끌 수 있습니다.

웹 디자이너가 Dribble에서 만든 이 두 웹사이트 홈 페이지는 볼드체의 단순하고 현대적인 특성을 완벽하게 보여줍니다.

통합 애니메이션

통합 애니메이션은 말 그대로 웹사이트 전체에 배치되어 웹사이트에 생동감, 움직임, 참여의 느낌을 더해줍니다. 아시다시피, 모션은 올해 웹 디자인에서 찾아야 할 큰 테마입니다.

멸종 위기에 처한 동물에 대한 교육을 전문으로 하는 웹사이트인 30 Species in Pieces는 생생하고 생생한 애니메이션을 단순한 웹 디자인에 사용합니다.

동적 그라디언트

이전에 언급했듯이 색상 그라디언트가 다시 등장하기 시작했습니다. 그라디언트를 사용하면 웹사이트 색상으로 사용자 정의하여 브랜드를 진정으로 구현하는 무언가를 만들 수 있습니다.

Apple은 새로운 iPhone X 광고의 테마를 유지하기 위해 글꼴 색상에 그라디언트를 사용했습니다.

2018년 과소평가된 웹 디자인 트렌드

매년 웹 디자인 트렌드는 끊임없이 변화하고 있습니다. 따라서 몇 년 전에는 '트렌디한' 것처럼 보였던 것이 오늘날에는 최선의 선택이 아닐 수도 있습니다. 따라서 모든 비즈니스 소유자는 비즈니스를 판매하고 방문자의 관심을 유지하기 위해 최신 웹 디자인 트렌드를 파악하는 것이 중요합니다. 2018년 가장 저평가된 웹 디자인 트렌드 6가지를 알아보려면 계속 읽으십시오.

깨진 그리드 레이아웃

많은 웹사이트는 그리드를 사용하여 텍스트, 이미지 및 탐색 버튼 뒤에 구조가 있는지 확인합니다. 그리드는 디자이너에게 지침을 제공할 뿐만 아니라 방문자가 웹 사이트를 쉽게 탐색할 수 있도록 도와줍니다. 그러나 올해는 일반적인 그리드 레이아웃이 깨졌습니다. 정해진 규칙을 따르기 보다는 웹 디자인으로 뭔가 다른 것을 할 수 있는 기회가 생겼습니다. 개발자는 덜 제한적인 깨진 그리드 레이아웃으로 이동했습니다. 깨진 격자 레이아웃을 사용하면 텍스트와 이미지가 페이지 안팎으로 더 자유롭게 이동할 수 있습니다. 요소가 겹칠 때 방문자에게 자연스럽게 흐르는 조화로운 웹 디자인을 만듭니다. 깨진 그리드 레이아웃은 페이지를 더 매력적으로 만드는 레이어, 비정상적인 위치 및 미묘한 터치를 통해 얻을 수도 있습니다.

2. 챗봇

점점 더 많은 웹 디자이너가 챗봇을 웹사이트에 구현하기 시작했습니다. 챗봇은 일반적으로 화면 오른쪽 하단에 위치한 비즈니스 웹사이트에서 볼 수 있습니다. 작은 팝업 창을 통해 방문자는 비즈니스 담당자와 이야기하거나 문의 사항에 대해 자동화된 도움을 받을 수 있습니다. 웹 디자인에 채팅 창을 추가하면 질문이 있는 모든 방문자가 즉시 답변을 받을 수 있습니다. 일부 기업에서는 직원이 채팅할 수 있는 데 문제가 있습니다. 그러나 가장 일반적인 질문에 답하고 질문에 대한 답을 모르는 경우 비즈니스에 연락하는 방법에 대한 세부 정보를 제공하도록 챗봇을 프로그래밍할 수 있습니다.

맞춤형 일러스트레이션

과거 웹디자인 이미지는 주로 제품샷, GIF, 제품의 특징, 기능, 인체적 차원을 강조한 편집사진으로 구성되었습니다. 2018년에는 삽화가 시장을 지배하면서 이것에서 약간 벗어났습니다. 개발자들은 일러스트레이션이 더 매력적이고 매력적이라는 것을 알게 되었습니다. 브랜드에 맞춤화된 명확하고 집중적인 메시지가 있습니다. 일러스트레이션은 일반적으로 웹 디자인의 가독성을 유지하면서도 긴장감을 조성하면서 다양한 대비를 실험하는 비전통적인 색상 조합으로 완성됩니다.

페이지 전환

사용자 경험이 중단될 때마다 웹사이트를 떠날 가능성이 높습니다. 이것은 한 페이지에서 다른 페이지로 변경될 때도 발생할 수 있습니다. 일부 웹 사이트는 로드하는 데 너무 오래 걸리는 반면 다른 웹 사이트는 새 페이지가 열리기 전의 컨텍스트에서 사용자를 데려갑니다. 따라서 모든 웹 디자인에는 페이지 간에 원활하고 효율적인 전환이 있어야 합니다. 올해 점점 더 많은 웹사이트에서 방문자를 위해 일관된 페이지 전환을 도입하고 있습니다. 방문자는 새 페이지로 이동하는 대신 동일한 페이지에서 다른 정보를 볼 수 있습니다. 이러한 부드러운 페이지 전환은 사용자 경험을 향상시키고 브랜드 참여를 높일 수 있습니다.

잔인함

2018년에는 웹 디자인에서 브루탈리즘의 사용이 증가했습니다. 브루탈리즘은 개발자와 디자이너가 해야 할 일보다 원하는 일을 할 수 있는 공간을 열어주고 있습니다. 이 스타일의 웹 디자인은 단순하고 비용 효율적이며 실용적인 1950년대 아키텍처에서 영감을 받았습니다. 잔인한 웹 디자인은 원시적이고 매혹적입니다. 방문자가 시각적으로 즐겁게 만드는 것이 중요하기 때문에 주요 초점은 콘텐츠에 있습니다. 잔인한 웹 디자인은 노출된 구조, 거친 느낌 및 사려 깊은 프로세스를 통해 나타납니다.

비디오 콘텐츠

올해는 웹사이트에서 비디오 콘텐츠의 사용이 증가했습니다. 비디오는 복잡한 정보를 시각적 형식으로 전달하는 좋은 방법입니다. 비디오 콘텐츠는 웹사이트를 보다 현대적으로 보이게 할 뿐만 아니라 정적인 이미지만으로는 할 수 없는 예술적 감각을 만들어냅니다. 비디오는 웹 디자인에 매끄럽게 통합될 수 있고 색상, 그라디언트 및 디테일이 풍부하더라도 여전히 매우 높은 품질을 유지할 수 있기 때문에 강력한 도구입니다. 사본의 세부 사항과 비디오의 세부 사항이 조화를 이루도록 비디오를 반복할 수도 있습니다. 많은 웹 사이트 개발자는 방문자가 비디오 콘텐츠가 있을 때 웹 사이트에 더 오래 머무르고 방문자가 제품 및 서비스 제안에 가입하거나 옵트인할 가능성이 더 높다고 봅니다.비즈니스 관점에서 – 2017년 웹 디자인의 어떤 트렌드가 중요합니까?

바늘을 움직이는 웹 디자인 트렌드

1. 각 페이지의 문의 양식

왜곡하지 마십시오. 웹 사이트가 리드 생성 웹 사이트인 경우 연락처 양식을 찾기 어렵게 만들고 싶지 않습니다. 모든 페이지에 포함할 수 있다면 더욱 좋습니다.

간단한 트릭처럼 보일 수 있지만 최고의 '트릭'입니다.

2. 항상 존재하는 CTA: 지속적이고 강력한 클릭 유도문안 버튼

사람들이 당신에게 연락하도록 유도하거나, 데모를 받거나, 견적을 받거나, 고객이 취하도록 유도하려는 주요 조치가 무엇이든 연락 양식이 없어도 됩니다. 대신 항상 오른쪽 상단에 큰 버튼을 포함할 수 있습니다. 스크롤할 때 방문자를 따라가는 '고정' 헤더가 있는 화면 상단의 클릭 유도문안 버튼을 그대로 두십시오.

3. 조직 배지 및 평가와 같은 신뢰 요인으로 디자인 과부하

나는 청중 중 일부가 이전에 인식하지 못했을 수 있다는 것을 알고 있는 가장 효과적인 것들만 고수하고 있습니다. 신뢰 요인은 웹 디자인의 모든 것입니다. 깨끗하고 현대적이며 심미적으로 즐거운 시각 디자인 외에 제가 생각하는 거의 모든 것입니다.

사람들이 행동을 취하도록 하는 유일한 방법(큰 클릭 유도문안 버튼, 지금 구매 버튼 등)은 이러한 요소를 둘러싸고 계속하도록 유도하는 것입니다. 왜냐하면 신뢰는 모든 거래에서 절대적으로 중요하기 때문입니다.

무료 반품이 있습니까? 빠르고 무료 배송이 있습니까? 보증이 있습니까? 이러한 것들을 보여주십시오.

지역 무역 그룹의 일부입니까? 더 나은 비즈니스 뷰로? 온라인 상점에 SSL 인증서가 있습니까?

이러한 항목에 대한 시각적 표현을 추가하고 웹사이트 스타일에 브랜딩하여 신뢰를 더욱 높일 수 있습니다.

대부분의 우수한 기업이 가지고 있는 신뢰 요인 범주에서 가장 큰 항목 중 하나는 온라인 리뷰 및 평가입니다. 귀하의 사이트에서 매우 시각적으로 눈에 잘 띄는 방식으로 이를 표시하는 것이 좋습니다. 고객 평가의 경우 고객이 자신의 제품이나 서비스에 대해 말한 내용을 더욱 신뢰할 수 있도록 고객의 사진이 있는 것이 가장 좋습니다.

4. 핵심 가치 제안을 보여줄 동영상 만들기

내가 DeneenPotery.com을 처음 디자인했을 때 나는 클라이언트가 가지고 있는 고품질 머그의 이미지와 디자인에서 약간 숨겨져 있는 비디오로 작업했습니다. 우리는 머그의 수제 특성을 명백하게 보여주고 사람들에게 과정을 맛볼 수 있도록 약간의 하이라이트를 주어 이 비디오를 그렸습니다.

5. 공백이 있는 매우 매력적인 디자인 - 의미 있는 전환, 겹치는 그리드 시스템 및 분할 콘텐츠를 사용하여 이분법을 그리는 것을 고려하십시오.

여백은 모든 것을 더 '고급'으로 느끼게 만드는 유쾌한 디자인 요소입니다.

이 웹사이트에서는 사진의 자연스러운 개방성을 활용하여 여유 있는 데카당스를 연출하기로 했습니다.

Apple은 공백을 이해합니다. 배경이 흰색이라는 의미가 아니라 디자인의 주요 주제 주위에 열린 공간을 의미합니다.

다음은 Apple이 사이트에서 공백을 사용한 사례입니다.

의미 있는 전환

Google은 수년 동안 '머티리얼 디자인'에서 의미 있는 전환을 사용했지만 점점 더 많은 웹 디자이너가 사용자가 사이트에서 수행하는 작업에 더 많은 컨텍스트를 제공하는 효과적인 방법을 만들기 위해 이를 사용하고 있습니다. 아래 버튼의 호버 상태, 사용자가 버튼을 클릭할 때 색상이 퍼지는 것과 클릭 후 모달/팝업 창이 커지는 방식을 확인하세요.

이 웹사이트에서 머티리얼 디자인을 사용하여 사이트를 매우 인터랙티브하고 현대적인 느낌으로 만들 수 있었습니다. 또한 Material Design의 규칙을 사용하여 Google.com 및 Google의 많은 제품에서 사용자 경험의 종류와 자신을 미묘하게 연관시키는 데 도움이 됩니다. 모두 이러한 규칙과 일치하고 사용하기 때문입니다.

중첩 그리드 시스템

웹 디자인의 상자는 나란히 배치되어 있는 전통적인 방식이지만 많은 디자이너가 2017년 스타일인 겹침 그리드 시스템 또는 오프셋 그리드 시스템을 활용하고 있습니다. 이 스타일은 상자와 사진을 나란히 배치하여 보다 유기적이고 자유로운 효과를 줍니다.

이분법을 그리기 위해 색상 분할 또는 이미지 분할

이분법은 '뜨거운 것과 차가운 것' 또는 '선과 악'과 같은 두 가지를 분리하는 것입니다. 웹 사이트의 양면을 서로 매우 다르게 만들어 방문자의 관심을 사로잡습니다.

이것을 사용하여 반대되는 감정적 요소 또는 '감정적이고 논리적인', '창의적이고 시스템 지향적인' 두뇌의 양면을 끌어내거나 Mateusz Koziorowski의 이 디자인과 같은 시각적 매력을 만드는 데 사용할 수 있습니다. .

무엇을 하든지 웹 디자인 트렌드에 뛰어들지 마십시오. willy nilly

비즈니스 목표를 가장 먼저 고려하십시오. 시각적 디자인 트렌드는 수익으로 바늘을 움직이는 한 그것이 무엇을 할 것인지 고려하지 않고는 아무 것도 아닙니다.

더 나은 웹사이트가 바로 눈앞에 있습니다
우리는 최초의 웹사이트가 출시된 이후로 먼 길을 왔습니다. 웹 디자이너는 더 자세하고 모험심이 강해지고 솔직히 말해서 더 좋아지고 있습니다. 웹 디자인의 다음 몇 년은 한계를 뛰어넘고 대담한 새로운 아이디어를 시도하는 것이 전부가 될 것입니다. 여기 Hook에서 우리는 당신이 질려버린 오래된 사이트를 당신 브랜드의 최첨단, 독창성을 진정으로 캡슐화하는 무언가로 바꾸는 것을 좋아합니다. 사용자의 참여를 유도하고 더 많은 전환을 유도할 수 있는 새 사이트를 구축하려는 경우 지금 Hook Agency에 연락하여 회의를 열고 귀하의 비즈니스 목표와 구현 방법에 대해 이야기할 것입니다. 귀하의 새 사이트로 이동합니다.