2022년 웹 디자인 트렌드

지난 2년 동안 배운 것이 있다면 항상 새로운 것에 계속 적응해야 한다는 것입니다. 이것은 삶과 디자인 모두에 해당되며 2022년으로 접어들면서 디자이너들은 삶의 혼돈을 받아들이고 디자인을 통해 표현하기 시작했습니다.

2022년의 트렌드는 더 대담하고 창의적이며 인터랙티브한 디자인으로 이동하고 있습니다. 제작자는 좀 더 혼란에 빠져 "좋은" 웹 디자인으로 간주되는 범위를 넓히고 있습니다.

2022년에 더 많이 나타날 것으로 예상되는 몇 가지 트렌드를 구현하여 새해에 창의성을 강화하십시오.

• 대화형 미니 사이트
• 레트로에서 영감을 받은 디자인
• 오픈 컨셉 디자인
• 더 많은 사용자 정의
• 3D 개체, 2D 스크롤
• 야만적 인
• 유리형태
• 창의적인 스크롤 효과
• 오버사이즈 타이포그래피
• 보이는 테두리
• 추상적인 시각 효과가 있는 콜라주 구성 요소

대화형 미니 사이트

당신은 당신이하는 일에 훌륭합니다. 그것을 과시하십시오! 기술을 발표하는 것은 고도로 전문화된 콘텐츠와 상호 작용이 포함된 더 작고 통제된 환경에서 디자이너가 새로운 고객을 유치하는 한 가지 방법입니다. 단순히 창작을 위한 무언가를 만들어냄으로써 진정으로 독특한 경험을 만들 수 있다는 것을 잠재 고객에게 보여주십시오.

한국 개발자 이정익은 사용자가 세 가지 간단한 작업 중 하나를 완료할 수 있는 이 미니 사이트를 만들었습니다. 다양한 색상과 간단한 지침을 사용하여 다양한 개체를 만들거나 이동하며 페이지를 다채로운 원으로 채우는 것은 실제로 꽤 재미있습니다.

암스테르담에 기반을 둔 웹 디자이너 Victoire Douy는 작은 포트폴리오 사이트에서 상호작용 기능을 사용하여 관심을 사로잡습니다. 단순히 커서를 이동하여 색상을 방해하고, 문자열을 잡아당기고, 개체를 이동하는 등의 작업을 수행할 수 있습니다.

레트로에서 영감을 받은 디자인

미국 웹디자이너의 평균 연령은 37세로 밀레니얼 세대에 확고히 자리잡고 있다. Millennials는 일상적인 사용자로 인터넷을 진정으로 채택한 첫 번째 세대이기 때문에 많은 디자이너가 웹 초기에 유행했던 예술, 타이포그래피 및 색상에서 영감을 얻은 것은 놀라운 일이 아닙니다.

Wild Souls는 다채로운 모양과 겹치는 스타일을 결합하여 식품 회사에 적합한 재미있고 활기찬 미학을 만드는 전자 상거래 사이트를 보유하고 있습니다. 그들은 견과류, 견과류 버터, 꿀 및 마멀레이드를 전문으로 하는 소매업체이며, 제품에 대한 호버 효과는 90년대에서 영감을 받은 시각적 테마를 세련되게 구축하는 새로운 질감과 모양을 추가합니다.

Cartoon Network 자체는 Y 및 Z 세대의 많은 사랑을 받는 브랜드입니다. 스튜디오 웹사이트는 흑백 베이스와 대담한 색상 및 유쾌한 애니메이션을 사용하여 레트로하면서도 매우 트렌디한 느낌을 주는 사이트를 만듭니다.

오픈 컨셉 디자인

디자인에 많은 여유 공간을 남겨두는 새로운 경향이 있기 때문에 팬데믹은 디자인 선호도와 대면 행동에 영향을 미치고 있습니다. 6피트가 아닐 수도 있지만 디자이너는 헤드라인에 집중하고 때로는 영웅 이미지를 완전히 스크랩하여 사용자에게 숨을 쉴 수 있는 충분한 공간을 제공하면서 섹션 사이에 점점 더 많은 공간을 남기고 있습니다.

모든 종류의 증류주는 날카롭고 상쾌하며 콜로라도 주 덴버에 있는 Bear Creek Distillery 웹사이트에도 추가 첨가물이 없습니다. 그들의 웹사이트 디자인 컨셉은 그들이 정제하는 보드카, 버번, 럼, 위스키만큼 깨끗합니다.

Atalson은 뉴욕시에 본사를 둔 제품 및 포장 디자인, 재료 소싱 및 제조 회사입니다. 지속 가능성은 프로세스의 핵심이며 깨끗한 제조에 대한 아이디어는 공백을 사용하여 사이트에 시각적으로 반영됩니다. 이 열린 공간은 그들이 디자인한 제품이 스포트라이트를 받을 수 있도록 하며, 이미지 위의 호버 효과는 제품의 개요나 회사 가치에 대한 설명을 표현합니다.

더 많은 사용자 정의

사용자가 온라인에서 더 많은 시간과 돈을 소비함에 따라 제공업체는 더 많은 잠재고객에게 어필할 수 있는 새로운 방법을 찾고 있습니다. 이를 위해 모든 사이트가 따라야 하는 표준 접근성 모범 사례를 넘어서는 포함 기능에 대한 대대적인 개선을 포함하여 많은 사람들이 사이트와 앱에서 사용할 수 있는 개인화 수준을 높이고 있습니다.

Pinterest의 "아름다움" 카테고리는 사이트에서 가장 많이 검색되는 카테고리 중 하나이며, 회사는 모든 사용자에게 보다 포괄적이어야 할 필요성을 인식했습니다. Pinterest는 이제 "피부색 범위" 기능을 제공하여 해당 범주에서 보다 빠르고 개인화된 경험을 제공합니다. 많은 사용자에게 이것은 앱의 밝은 피부 톤이 과도하게 포화된 것에 대한 답변이므로 모든 Pinterest 사용자는 자신에게 맞는 룩을 더 빠르고 쉽게 찾을 수 있습니다.

마스터카드는 "실명" 시스템을 만들어 더 많은 카드 소지자가 거래 중에 자신의 진정한 신분을 표현할 수 있는 방법을 찾았습니다. 이를 통해 트랜스젠더 및 논바이너리 마스터카드 소지자는 이름이 법적으로 변경되었는지 여부와 상관없이 카드에 실명 대신 실명을 기재할 수 있습니다.

3D 개체, 2D 스크롤

3D 모델과 평평한 2D 콘텐츠 프리젠테이션이 포함된 디자인은 매력적이고 완전히 응집력이 있어 보입니다. 배경에 대화형 3D 요소를 사용하여 예측 가능한 방식으로 쉽게 소화할 수 있는 콘텐츠를 제공하는 것은 사용자가 물리적 개념을 더 잘 이해하도록 도울 때 특히 유용합니다.

러시아 모스크바 중심부 근처에 있는 이 새로운 비즈니스 지구를 홍보하는 웹사이트는 단순하고 평면적인 콘텐츠와 함께 3D 센터피스에 초점을 맞춘 좋은 예입니다. 홈페이지는 Skolkovo Park의 이동 가능한 모델을 보여주지만 눈에 띄게 배치된 콘텐츠를 가리지 않습니다.

One Ocean Science는 다학제적 관점에서 해양 보존 및 연구 분야의 글로벌 리더를 연결하는 것을 목표로 하는 지식 공유 서밋입니다. 그들의 웹사이트 홈페이지는 지구본의 3D 모델 위의 2D 스크롤로 여러분을 환영합니다. 이 모델은 스크롤할 때 움직이며 다른 영역과 그곳에서 진행 중인 연구를 강조 표시합니다.

야만적 인

잔인함은 매우 뭉툭하고 기하학적이며 거친 예술 및 건축 스타일을 나타냅니다. 웹 디자인에서 이 뻔뻔하지만 단순한 스타일은 미니멀리즘에 찬성하여 웹사이트가 따르는 전통적인 규칙 중 일부를 피하는 경향이 있기 때문에 두드러집니다. 종종 흑백으로 수행되는 이 스타일의 사이트는 프릴이 거의 또는 전혀 없으며 뚜렷한 마감을 위한 굵은 텍스트가 특징입니다.

이탈리아 크리에이티브 에이전시 Carosell은 정직하고 솔직한 브랜드 아이덴티티를 가지고 있습니다. 그들은 현실적인 기대치를 설정하고, 전략의 결과를 생각하고, 고객의 시간과 예산 제약을 존중한다고 믿습니다. Brutalistic 사이트는 군더더기 없는 대행사 파트너로서의 자신의 이야기를 설명하는 데 도움이 됩니다.

파리에 기반을 둔 캘리포니아 태생의 디자이너 Rick Owens는 가구 디자인에 대한 자신의 철학을 "Brutalist 동굴의 Brutalist 화재 옆 Brutalist 바위 위의 Brutalist 모피"라고 표현했습니다. 그의 의류 및 액세서리 라인에 대한 웹사이트에는 가구가 없지만 이미지와 레이아웃에서 분명한 Brutalist 영감을 찾을 수 있습니다.

유리형태

이름에서 알 수 있듯이 Glassmorphism은 일반적으로 사용자 인터페이스의 배경을 흐리게 하는 데 사용되는 유리로 만들어졌거나 유리로 덮인 것처럼 화면을 만드는 기술입니다. 2022년에는 디자이너가 유리와 같은 애니메이션 개체와 텍스트를 만들어 프론트 엔드 경계를 확장함에 따라 이러한 추세가 계속해서 인기를 끌 것입니다.

디지털 제품 에이전시 Dovetail Studios는 서로 다른 각도로 회전하는 이 Glassmorphic 중첩 링 세트에 애니메이션을 적용했습니다. 시선을 사로잡으며 팀의 3D 모델링 능력을 과시합니다. 사이트의 다른 아이콘도 이 효과를 반영합니다.

또 다른 디지털 크리에이티브 에이전시인 Lo 및 Behold Studios도 홈페이지에서 애니메이션 Glassmorphic 개체를 사용합니다. 그러나 더 가벼운 전체 테마는 사용자가 Dovetail을 볼 때와 완전히 다른 효과를 사이트에 제공합니다.

창의적인 스크롤 효과

많은 디자이너들이 작년의 가로 스크롤 트렌드를 확장하고 스크롤 효과를 더욱 실험하고 있습니다. 수평적이든, 나란히 있든, 다방향이든 관계없이 사이트를 통한 사용자 여정의 방향을 변경하면 전반적으로 보다 역동적인 경험을 제공할 수 있는 쉬운 방법입니다.

네덜란드 가구 회사 Moooi는 사용자가 스크롤할 때 컬렉션으로 점점 더 깊이 들어가게 합니다. 그들의 사이트는 Beauty Blooms, Defy Gravity 및 Paper Play의 세 가지 경험을 제공합니다. 각 컬렉션에서 화면이 열리고 컬렉션 이후의 컬렉션이 표시되며 스크롤하면서 새로운 패턴과 삽화를 살펴볼 수 있습니다.

우리가 이전에 이야기한 사이트의 사진작가인 Kayla Fisher는 화면 왼쪽에 메뉴가 고정되도록 나란히 스크롤을 사용합니다. 이를 통해 사용자가 더 깊이 들어가게 만드는 큰 버튼을 놓치지 않고 시각적으로 매력적인 방식으로 그녀의 작업을 볼 수 있습니다.

오버사이즈 타이포그래피

귀하의 웹사이트는 회사로서 귀하가 누구인지에 대해 대담한 진술을 해야 합니다. 많은 회사들이 헤드라인이나 영웅 이미지 대신에 대형 타이포그래피를 사용하여 이 아이디어를 진지하게 받아들이고 있습니다.

기술 연구 집단 HUMAIN은 인간의 경험과 기술 혁신 사이의 간극을 메우기 위해 노력하고 있습니다. Cronos Group의 지원을 받는 그들의 목표는 온라인과 생활 모두에서 인간의 경험을 향상시키기 위해 새로운 기술을 사용하는 새로운 방법을 찾는 것입니다. 영웅 이미지 대신 텍스트를 사용하여 복잡한 스토리를 가진 이 회사는 사이트에 들어가는 순간부터 사명을 외칩니다.

헤드폰을 생각할 때 떠오르는 아이디어는 시각적인 것만큼이나 청각적인 것입니다. 헤드폰 회사 AIAIAI의 이름은 이름만큼이나 느낌표이며 사이트를 방문하는 사용자에게 대담한 성명을 외칩니다. 큰 텍스트는 회사를 소개하고, 스크롤 없이 볼 수 있는 바로 아래에 영웅과 인접한 더 작은 비디오가 나타나며, 영웅 이미지 다음 텍스트의 전통적인 패턴을 파괴합니다.

보이는 테두리

눈에 보이는 테두리는 디자인에 구조를 부여하고 콘텐츠를 통해 사용자의 관심을 끕니다. 테두리는 단순한 선을 사용하여 깔끔하고 깔끔한 사이트가 필요한 클라이언트를 위해 디자인할 때 도움이 될 수 있습니다. 반면에 재미있고 펑키한 인터랙티브 테두리는 굵은 색상이나 인터랙티브 효과를 사용하여 온라인 방문자에게 시각적인 흥미를 더할 수 있습니다.

독립 에이전시 Bonjour Paris는 눈에 띄는 테두리와 가로 스크롤을 결합하여 사이트가 미니멀하면서도 여전히 많은 흥미를 불러일으키도록 합니다. 라인워크 경계는 사이트를 가로질러 프로젝트 섹션까지 계속되어 모호하거나 바쁘게 보이지 않고 새로운 형태를 취합니다.

호주 레스토랑인 Curry Cafe에는 두 곳이 있으며 사이트의 스크롤 테두리는 사용자가 나머지 매우 다채롭고 매력적인 콘텐츠를 소비할 수 있는 견고한 프레임워크를 제공합니다.

추상적인 시각 효과가 있는 콜라주 구성 요소

우리는 웹이 시작된 이래로 먼 길을 왔습니다. 일부 디자이너는 구조화된 미학을 수용하지만 다른 디자이너는 반대 방향으로 움직이고 있습니다. 각 요소를 신중하게 디자인하면 대담한 색상, 겹치는 이미지 및 여러 질감이 모두 매끄럽게 결합될 수 있습니다.

Illuminating Radioactivity는 Stimson Center, Reinventing Civil Defense 프로젝트 및 Bombshelltoe Policy x Arts Collective가 공동으로 만든 교육 웹사이트입니다. 이 책은 "방사능"이라는 단어의 역사와 의미, 우리와 그 관계, 그리고 그것이 과학, 엔터테인먼트, 의학 등에서 어떤 역할을 했는지 자세히 설명합니다. 스크롤하면 밝고 추상적 인 모양과 함께 역사를 알려주는 데 도움이되는 오래된 그림이 넘쳐납니다.

호주 회사인 Loved Up Co는 파트너와의 하룻밤에 필요한 모든 것을 제공하는 편리한 키트로 데이트의 밤을 즐겁게 도와줍니다. 그들의 홈페이지에는 흑백 사진에서 몸을 가져오고 웃는 입, 꽃, 칵테일이 머리에 겹쳐진 콜라주 스타일의 사람들이 있습니다! 추상적인 모양, 원 및 구불구불한 선이 디자인 전체에 나타나 콘텐츠를 통해 계속 눈을 움직입니다.

웹의 미래를 디자인하다

이러한 경향을 주시하고 주의를 끄는 몇 가지 개념을 시도하십시오. 트렌드를 추적하는 눈이 예리하다면 2022년 웹 디자인 트렌드 중 일부가 작년 트렌드의 확장 또는 순열이라는 사실을 눈치채셨을 수도 있습니다.

당신이 좋아하는 일부를 참조하십시오? 우리가 빠뜨린 것이 있습니까? 아래 의견에 알려주고 기억하십시오. 계속 남아 있는 스타일과 일시적인 유행을 지나는 스타일은 모두 귀하와 같은 디자이너가 올해 귀하의 클라이언트와 함께 무엇을 만들기로 결정했는지에 달려 있습니다!