2021. ("1?!"이 붙으니 기분이 좋지 않나요?!)

세상이 새해에 적응하는 동안 디자이너들도 새해 디자인을 받아들이고 있습니다. 알 수 없는 일들이 많았던 1년 후, 우리는 미래 지향적인 사용자 경험을 강조하면서 편안한 과거로 돌아가게 하는 경향을 보기 시작했습니다.

온라인 작업에서 온라인 구매, 온라인 사교 활동에 이르기까지 사람들은 그 어느 때보다 인터넷과 상호작용하고 있으며 디자이너들은 우리가 함께 경험할 수 있는 것의 경계를 넓히기 위해 대담한 디자인을 수용하고 있습니다.

이것이 완전한 것은 아니지만 2021년에 볼 수 있는 최고의 웹 디자인 트렌드 11가지를 소개합니다.

1. 가로 스크롤이 있는 페이지 레이아웃
2. 사용자 정의 커서
3. 3D 개체
4. 우수한 전자 상거래 경험
5. 두꺼운 선 두께로 보이는 그리드 선
6. 사이트(앱뿐만 아니라)의 사용자 기본 설정 옵션
7. 웹사이트 구축에서 솔루션 구축으로의 전환
8. 장난기 넘치는 일러스트
9. 단순한 단어가 아닌 디자인으로서의 타이포그래피
10. 배경 요소로 기하학적 모양
11. CMS로서의 워드프레스

1. 가로 스크롤이 있는 페이지 레이아웃

롱 스크롤링 웹사이트와 시차 디자인은 몇 년 동안 인기를 얻었습니다. 2021년으로 접어들면서 페이지 길이를 "줄이기" 위해 수평 이동을 사용하는 디자이너의 방향 전환이 보이기 시작했습니다.

물리적 경험은 사용자에게 다르지 않지만(일반적으로 여전히 마우스를 위아래로 스크롤함) 시각적 경험은 예상치 못한 흥미로운 것을 제공합니다. 그것은 사용자가 웹사이트를 어디로 데려갈지 잘 모르는 웹사이트를 가로질러 여행을 만듭니다. 웹사이트에 대해 그러한 일반적인 패턴을 개발한 지금은 드문 일입니다.

프리랜스 영화 감독인 Jony Guedj를 위한 이 웹사이트는 그녀의 작업을 표시하기 위해 사이트의 기본 섹션에 가로 스크롤을 사용합니다. 하단의 다채로운 막대가 마우스와 함께 이동하여 페이지에서 현재 "위치"의 방향을 지정하는 데 도움이 됩니다.

디자인 및 전자 상거래 솔루션에 중점을 둔 대행사인 LinkSture는 가로 스크롤을 사용하여 홈페이지에도 포트폴리오를 표시합니다. 그러나 스크롤하는 동안 수직 및 수평 동작의 조합을 사용하여 페이지 아래에 있습니다.

가상 현실 스튜디오인 We Virtually Are는 수평 이동을 사용하여 모든 콘텐츠가 변경되는 동안 실제로 사이트의 같은 장소에 있는 것처럼 느끼게 합니다. 대부분의 웹사이트에서 기대하는 것과는 완전히 다르며, 새로운 현실 제작을 전문으로 하는 VR 회사에 적합한 경험입니다.

2. 커스텀 커서

저는 특히 이 트렌드가 친숙하면서도 새로운 느낌을 주기 때문에 좋아합니다. 2000년대 중반의 사용자 정의 커서에 대한 고개를 끄덕이는(인정합니다. Myspace 프로필에서 사용했습니다!), 사용자 정의 커서가 우아한 복귀를 하고 있습니다.

최소한의 기하학적 모양에서 완전한 대화형 웹 페이지 경험에 이르기까지, 마우스 커서를 사용자 정의하는 것은 브랜드에 반복을 추가하는 작은 방법이 되고 있습니다. 많은 대행사에서 로고의 모양이나 색상을 반복하거나 사용자를 사이트에 참여시키는 방법으로 사용하고 있습니다.

부티크 디자인 에이전시인 Rox Studios의 이 예에서 마우스는 노란색 원입니다. 마우스를 가져간 배경 콘텐츠에 따라 변경되어 프로젝트를 "보기"하기 위한 CTA 버튼 자체로 바뀝니다.

첫 번째 이미지에서 저 재미있는 작은 얼굴이 보이시나요? Concept Studio의 웹사이트를 방문했을 때 마우스를 사용하세요. 사이트 전체에서 유사한 생물을 볼 수 있으며 다른 섹션에서 커서가 변경되는 것도 볼 수 있습니다.

두 번째 스크린샷에서 마우스는 움직일 때 작은 입자도 떨어뜨리는 지팡이로 바뀝니다. 콘텐츠를 방해하지 않으며 대신 사이트를 경험할 때 기발함과 상호 작용 요소를 추가합니다.

저 하얀색 동그라미 보이시죠? 프랑스에 기반을 둔 프론트엔드 개발자인 Etienne Pharabot의 웹사이트에 있는 귀하의 마우스입니다. 그러나 눈에 보이는 것보다 더 많은 것이 있습니다. 사이트 전체에서 다양한 문장을 스크롤하는 것이 좋습니다. (일부 이모티콘 놀라움이 기다리고 있습니다!)

크리에이티브 에이전시인 Impero는 커서로 마우스를 가져가는 텍스트 뒤에 잘 어울리는 큰 노란색 원을 사용합니다. 그들은 또한 사용자가 사이트를 탐색하는 데 도움이 되는 기회로 사용합니다. 예를 들어 수평 스크롤 섹션 위에 "끌기"를 표시합니다. (이러한 트렌드 중 몇 가지를 결합하는 좋은 방법입니다!)

3. 3D 개체

꽤 오랫동안 평면 디자인이 지배했지만 웹 디자인의 요소에서 3차원적인 변화를 보기 시작했습니다. 이것은 가상 현실과 증강 현실의 부상에서 영감을 받아 우리의 2차원 브라우징 경험에 스며든 것일 수 있습니다.

이탈리아에 기반을 둔 대행사인 Chip&Byte의 이 다채로운 예는 사이트에 재미있는 요소를 추가합니다. 커서를 움직이면(작은 회색 원!) 모양도 함께 움직여 입체감을 더합니다.

"Yellow Telescope"라는 회사의 홈페이지에 3D 노란색 망원경이 자랑스럽게 전시되어 있다는 것이 옳습니다! 사이트에 처음 도착하면 각 부분이 제자리에 놓일 때 "자체적으로 구축"되는 것을 보게 될 것입니다. 이는 아마도 고객이 신뢰할 수 있는 관행을 구축하도록 돕는 방법과 동의어일 것입니다.

Beans Agency는 3D 트렌드를 사용하여 콩에 생명을 불어넣고 사이트 전체의 여러 장면에 표시합니다. 이 추세는 캐릭터에 움직임을 가져오거나 추상적이고 평면적인 일러스트레이션 위에 "현실적인" 느낌을 주는 좋은 방법입니다.

3d 트렌드에 따라 완전히 판매되지 않습니까? C-HM Conseil처럼 항상 미묘한 접근 방식을 취할 수 있습니다. 단색 배경의 우아한 경사와 광채가 과하지 않으면서 소재의 느낌을 살려줍니다.

4. 우수한 전자 상거래 경험

온라인 소매가 작년에 급격히 증가하여 더 의도적이고 더 나은 쇼핑 경험을 제공한 것은 놀라운 일이 아닙니다. 결국, 더 많은 경쟁자들이 그들의 웹사이트를 온라인으로 만들기 위해 서두르게 되면서, 상점이 단지 인터넷 상에 존재하는 것은 더 이상 용인될 수 없습니다. 쇼핑객이 이탈하지 않도록 최적화하고 사용자 경험을 우선시해야 합니다.

펫샵 민섬은 홈페이지에서 바로 상품과 서비스를 쉽게 구매할 수 있도록 도와줍니다. 큰 버튼과 간단한 카테고리로 탐색하기 쉽기 때문에 사이트를 검색하는 데 너무 많은 시간을 할애하지 않고도 빠르게 확인할 수 있습니다.

몰리두커(Molly Dooker)라는 와인숍은 아름답고 예술적인 현장 체험일 뿐만 아니라 원활한 쇼핑도 즐길 수 있는 곳입니다. 멋진 사이트 디자인을 즐기면서 와인을 탐색하고, 장바구니에 무엇이 있는지 미리 보고, 구매하는 것은 쉽습니다.

건강하고 유기농 식품 매장인 Zoya's Pantry는 장바구니에 여러 품목을 추가할 수 있도록 쇼핑 경험을 최적화합니다. "장바구니에 추가"를 클릭하면 창이 변경되지 않으므로 페이지에서 위치를 잃지 않고 탐색을 계속할 수 있습니다. 그런 다음 장바구니를 보려면 상단 탐색 메뉴의 아이콘 위로 마우스를 가져가기만 하면 됩니다(별도의 페이지를 클릭하는 대신).

Cool Club 사이트에서 몇 가지 2021년 디자인 트렌드를 확인할 수 있습니다. 손쉬운 전자 상거래 경험에서 제품 중 하나의 3D 디스플레이(카드 게임!)에 이르기까지 구매하려는 제품을 쉽게 확인하고 장바구니에 담을 수 있습니다. (홈페이지에서 스크롤 없이 볼 수 있는 바로 위까지!)

5. 굵은 선 두께로 보이는 격자선

그리드는 오랫동안 웹 디자인에 유용했지만 우리는 그리드에 팝적인 색상이나 두꺼운 선 두께를 부여하는 추세를 보기 시작했습니다. 디자이너는 최소한으로 유지하는 대신 페이지에 만드는 자연스러운 모양에 기대어 대담하고 기하학적인 모양을 얻기 위해 격자선을 돋보이게 만듭니다.

Eat Sleep Work는 다채로운 선을 사용하여 Windows와 같은 데스크탑에 생기를 불어넣습니다. 너무 두껍지는 않지만 굵은 파란색은 그리드를 눈에 띄게 만들고 사이트 전체에 의도적인 구조를 만드는 트릭을 수행합니다.

이 소프트웨어 개발 스튜디오인 OSM은 사이트 전체에서 몇 가지 흥미로운 방식으로 그리드 라인을 사용합니다. 배경에서 볼 수 있듯이 브랜드와 함께 두꺼운 선 두께와 기하학적 스타일에 기대어 그리드 레이아웃을 포함하여 여러 가지 방법으로 이를 반복합니다.

굵은 격자선이 귀하의 사이트에 적합한지 확실하지 않습니까? 디자이너이자 아트 디렉터인 Rui Ma와 같은 "네거티브 스페이스" 접근 방식을 시도할 수 있습니다. 대비되는 색상으로 격자를 강조하는 것보다 더 미묘하지만 넓은 간격으로 인해 여전히 기하학적 느낌이 빛납니다.

6. 사이트(앱뿐만 아니라)의 사용자 기본 설정 옵션

독특하고 개인화된 경험을 만드는 것이 점점 더 대중화되고 있으며 웹 디자이너가 이를 수행하는 한 가지 방법은 사이트 디자인에 옵션을 구축하는 것입니다. 밝은 모드와 어두운 모드와 같은 기본 설정에서 사용할 언어와 같은 접근성 옵션에 이르기까지 이러한 추세는 사용자가 사이트 경험을 더 잘 제어할 수 있도록 하는 것입니다.

Hoang Nguyen의 웹사이트를 로드하는 즉시 오디오 옵션이 표시됩니다. 기본값은 "꺼짐"으로 설정되어 있으므로 선택하기 전에 사이트가 로드되어도 놀라지 않습니다("켜기"로 설정되어 있어도 놀라지 않습니다. 매우 차분한 음악입니다!) . 이를 통해 경험을 즉시 맞춤화할 수 있으며 나중에 마음이 바뀌면 사이트 상단의 로고 바로 옆에 사운드 옵션이 있습니다.

Sofia Papadopoulou의 사이트는 오디오 설정을 제공한다는 점에서 유사하지만 오른쪽 하단 모서리에 고정되어 있습니다(전통적으로 고정된 뒤로 가기 버튼이 있는 위치). 잔잔한 악기 소리만 포함된 사운드(미친 것은 없음).

프랑스의 크리에이티브 에이전시인 Studio OUAM의 이 예를 사용하면 사이트를 탐색하는 동안 사용할 언어를 쉽게 선택할 수 있습니다. 메뉴 상단에 바로 나열되어 있으며 프랑스어 또는 영어 옵션을 제공하여 웹 사이트를 두 가지 주요 대상에 맞게 조정합니다.

7. 웹사이트 구축에서 솔루션 구축으로의 전환

웹 디자인이 그 어느 때보다 중요하지만(코로나바이러스 시대에 훨씬 더 중요하지는 않더라도) 에이전시는 개별 결과물 대신 전체 솔루션 판매로 초점을 옮기기 시작했습니다. 예를 들어, 크리에이티브 스튜디오는 스스로를 웹 디자인 에이전시라고 부르는 대신에 "브랜드 경험 파트너"라고 하거나 그들이 제공하는 것의 완전한 가치(유형의 부분이 아니라)를 지칭하는 다른 이름으로 부를 수 있습니다.

"혁신 파트너, 디자인 스튜디오, 연구소"인 소다스튜디오입니다. 그들은 제공하는 모든 개별 서비스를 나열하는 데 너무 신경 쓰지 않고 고객을 위한 전체적인 솔루션에 중점을 둡니다.

BORN 그룹은 "인간 중심의 경험이 주도하는 글로벌 디지털 에이전시"입니다. 제공하는 서비스에 대해 자세히 설명하는 서비스 페이지가 있지만 브랜드 경험, 서비스 디자인 및 혁신과 같은 서비스를 통해 더 큰 그림에 중점을 둡니다.

Kappow는 웹 디자인에 중점을 둔 디지털 에이전시이지만 반드시 홈페이지에서 알 수 있는 것은 아닙니다. 대신 그들은 자신의 업무가 고객에게 실제로 제공하는 가치, 즉 비즈니스 성장, 성공적인 제품 출시, 경쟁자보다 유리한 점을 공유합니다. (누가 그 모든 것을 원하지 않습니까?!)

8. 장난스러운 삽화

삽화의 부상은 이제 몇 년 동안 증가해 왔으며, 아직 어디로든 갈 기미가 보이지 않습니다. 사이트에 "인간" 요소를 추가할 수 있는 좋은 방법입니다. 특히 훌륭한 사진작가를 만날 수 없고 스톡 사진을 피하고 싶은 경우 더욱 그렇습니다. 또는 귀하/귀하의 대행사가 일러스트레이션을 전문으로 하는 경우 작업을 과시할 수 있는 완벽한 방법입니다!

브랜딩 및 디지털 에이전시인 RUYA의 사이트에서 탐색할 수 있는 멋진 세상입니다. 그들은 삽화를 홈페이지의 전체 너비로 지정하여 페이지를 로드하는 즉시 눈에 띄게 만듭니다. 더 좋은 점: 이미지의 일부 위로 마우스를 가져가면 이미지가 탐색 요소 역할을 한다는 것을 알게 되어 해당 기관, 서비스 및 작업에 대해 자세히 알아볼 수 있습니다.

웹 디자인 에이전시인 UPQODE의 이 기발한 일러스트레이션은 애니메이션과 결합되어 실제로 생동감을 줍니다. 색상, 크기가 바뀌고 서로 상호 작용하는 것을 볼 수 있어 재미있는 홈페이지 경험을 할 수 있습니다.

전체 일러스트레이션이 귀하의 브랜드에 적합하지 않은 경우 No Clima와 같이 악센트로 사용할 수 있는 옵션이 항상 있습니다. 사이트 전체의 사진 상단에 "doodles"가 표시되어 손으로 만든 예술적인 느낌을 줍니다. 이것은 또한 일러스트레이션과 사진을 결합하는 좋은 방법입니다. 둘 다 사용하는 데 관심이 있다면!

9. 단순한 단어가 아닌 디자인으로서의 타이포그래피

때로는 말은 실용적이고 때로는 예술을 의미합니다. 그리고 오늘날의 웹 디자이너는 텍스트의 단락이나 본문보다 더 많은 디자인 요소로 두 번째 목적으로 사용하는 것을 두려워하지 않습니다.

여전히 읽을 수 있지만 Dystopian Creatives 홈페이지의 텍스트는 실용적이고 시각적인 경계를 매력적인 방식으로 흐리게 합니다. 단락보다 배경 패턴처럼 느껴지며 흥미로운 방식으로 페이지의 다른 이미지와 상호 작용합니다.

종합 서비스를 제공하는 크리에이티브 에이전시인 Loop는 상단에 읽기 쉬운 단락과 함께 홈페이지의 배경 요소로 문자를 사용합니다. 배경 글꼴 크기가 너무 커서(그리고 멋진 노란색 음영) 눈이 혼동하지 않고 두 텍스트 세트를 모두 읽을 수 있습니다. 나는 또한 사용자가 "무엇을 위한 디자인인가?"라는 질문에 답하기 위해 스크롤을 유도하는 방식을 좋아합니다.

Stone & Style에 대한 이 사이트를 아래로 스크롤하면 각 헤드라인이 일반 텍스트 블록으로 표시되지만 배경에 큰 세리프 글꼴이 울려 페이지에서 흘러내리는 것을 볼 수 있습니다. 반복적으로 들리지 않고 메시지를 반복할 수 있는 좋은 방법이며 배경 텍스트가 말하는 내용을 읽으려고 할 때(패턴을 발견하기 전에) 사이트에 우아한 미스터리의 힌트를 추가합니다.

10. 배경 요소로서의 기하학적 모양

사이트 디자인에 관해서는 지나치게 생각하지 마십시오. 기하학적 모양이 너무 "단순"하게 느껴질 수 있지만 친숙하고 복잡하지 않습니다(둘 다 사용자 경험에 좋습니다!). 그리고 이러한 강력한 구성 요소를 사용하면 대행사의 브랜드를 표시하기 위해 할 수 있는 일이 많기 때문에 단순하지 않은 것처럼 느껴집니다.

fourpillars의 이 예는 사용자의 스크롤을 기반으로 한 움직임과 결합된 간단한 모양(기본적으로 블록과 점)을 사용하여 역동적이고 기하학적인 경험을 만듭니다. 페이지를 아래로 스크롤하면 블록이 스스로 쌓이고 무너지며 계속해서 이야기를 전달하기 위해 변화하는 것을 볼 수 있습니다. (잠시 휴식을 취하고 싶다면 "퐁" 게임 이스터 에그도 있을 수 있습니다!)

오해피다니의 알록달록한 타원형 모양은 엄밀히 말하면 기하학적이지 않을 수 있지만, 확실히 같은 장난기 있는 효과를 얻을 수 있습니다. 그녀의 브랜드 색상과 짝을 이루어 그녀의 영웅 이미지 뒤에 멋진 프레임을 만들고 사이트 전체에서 새로운 방식으로 반복되는 것을 볼 수 있습니다.

커뮤니케이션 스튜디오인 블랩(Blab)도 홈페이지에서 기하학적 형태를 활용하고 있다. 이 원형/타원형/달걀 모양의 패턴은 페이지에서 쉬면서 늘어나고 줄어들고 스크롤을 시작하면 옆으로 이동합니다. 스피커에서 나오는 소리가 생각나는데, "너의 목소리가 더 커졌어" 페이지의 카피와 완벽하게 짝을 이룬다.

이 다채로운 스튜디오 illo는 홈페이지의 주요 메시지 바로 뒤에 기하학적 모양을 사용합니다. 밑줄이 그어진 문구 위로 마우스를 가져가면 모양 중 하나가 이동하여 내부의 이미지를 드러내며, 첫 번째 초점인 모션 디자인을 과시하는 영리한 방법입니다.

11. CMS로서의 워드프레스

마지막으로 중요한 것은 이러한 사이트가 구축되는 방식입니다. (결국 백엔드가 필요한 목적을 달성하지 못한다면 프론트엔드가 얼마나 멋진지는 중요하지 않습니다!)

WordPress는 이제 인터넷의 40% 이상을 차지합니다. 이는 모든 웹사이트(CMS에 구축되지 않은 웹사이트 포함)의 거의 절반에 해당하며, 이는 CMS가 수년에 걸쳐 실제로 얼마나 유연해졌는지에 기인합니다.

판매하지 않습니까? 이 요약의 모든 웹사이트는 WordPress를 기반으로 하여 구축할 수 있는 모든 것에 대한 훌륭한 예를 제공합니다! 빠르게 시작하는 데 도움이 되는 아름다운 테마부터 기능 확장에 도움이 되는 55,000개 이상의 무료 플러그인에 이르기까지 WordPress는 거의 모든 작업을 수행할 수 있습니다.

2021년 웹 디자인 트렌드에 대해 어떻게 생각하시나요? 사용자 지정 커서의 부상에 동의하십니까, 아니면 3D 디자인이 단지 유행이라고 생각하십니까? 아래 의견에 어떤 트렌드가 마음에 드는지 또는 이 목록에서 누락되었다고 생각되는 트렌드를 알려주십시오!