Divi 디자인 쇼케이스: 2021년 5월부터 새로운 제출물

월간 Divi 쇼케이스에서는 커뮤니티 회원이 만든 10개의 놀라운 Divi 웹사이트를 살펴봅니다. 매월 우리는 커뮤니티에서 제출된 최고의 Divi 웹사이트를 선보이며 오늘은 5월의 상위 10개 웹사이트를 공유하고자 합니다. 게시물 전체에서 각 웹 사이트로 나를 끌어들이는 내가 가장 좋아하는 디자인 기능 중 일부를 지적할 것입니다.

나는 당신이 그들을 좋아하기를 바랍니다!

Divi 디자인 쇼케이스: 2021년 5월부터 새로운 제출물

1. 국가 과학의 날

이 사이트는 Omshivaprakash에 의해 제출되었습니다. 색상과 레이아웃 디자인을 흥미롭게 사용하는 한 페이지 웹사이트입니다. 영웅 섹션에는 전경에 CTA가 있는 겹치는 이미지가 표시됩니다. 이것은 큰 텍스트 및 카운트다운 타이머가 있는 큰 색상 블록과 겹치는 로고가 있는 섹션으로 이어집니다. 여러 섹션은 왼쪽에 세로 제목과 함께 한쪽에 텍스트를 표시합니다. 이러한 제목은 웹사이트의 다른 요소와 일치하는 배경색이 다릅니다. 여러 섹션에서 이미지나 그래픽을 사용합니다. 나는 특히 텍스트 또는 텍스트 뒤의 배경에 색상을 사용하는 것을 좋아합니다.

웹사이트 방문

2. 바이틱

이 사이트는 Joao Martins가 제출했습니다. 이것은 색상과 배경 각도를 흥미롭게 사용합니다. 배경은 각진 패턴을 표시합니다. 파란색 배경은 파란색 음영을 표시하고 흰색은 그래픽의 관점에서 작동하는 녹색 선으로 밝은 회색 패치를 표시합니다. 파란색과 녹색은 화면의 거의 절반을 차지하는 큰 2색 그래픽에 사용되며 해당 섹션으로 스크롤할 때 왼쪽 또는 오른쪽에 나타납니다. 많은 아이콘, 버튼 및 텍스트 요소가 동일한 녹색에 있습니다. 그래픽은 최소화되고 동시에 시각적으로 놀랍습니다. 그래픽과 텍스트가 완벽하게 결합하여 깔끔한 레이아웃을 만듭니다.

웹사이트 방문

3. 내 비즈니스 성장

이 사이트는 Ben Elwood가 제출했습니다. 이것은 회색 또는 흰색 배경에 노란색 하이라이트를 훌륭하게 사용합니다. 노란색은 메뉴, 제목, 버튼, 링크, 테두리, 따옴표, 아이콘 등에 사용됩니다. 대부분의 배경은 흰색이며 노란색 하이라이트와 잘 어울립니다. 회색의 몇 개는 훨씬 더 잘 보이고 몇 개 밖에 없기 때문에 더욱 눈에 띕니다. 회색 배경의 여러 전각 섹션은 평가를 표시하거나 CTA를 생성합니다. 나는 특히 세 개의 광고 문구 섹션을 좋아합니다. 여기에는 회색, 흰색 및 노란색 배경이 포함됩니다. 각각에는 원 아이콘이 있으며 원과 아이콘에 대해 회색과 노란색이 번갈아 나타납니다. 나는 또한 색상을 변경하는 사이트 전체의 호버 애니메이션을 좋아합니다.

웹사이트 방문

4. 미래의 축구 교수

이 사이트는 Maurice Veraa가 제출했습니다. 이것은 파란색 배경과 노란색 하이라이트를 우아하게 사용합니다. 또한 호버링에 응답하거나 반복되는 많은 마이크로 애니메이션이 있습니다. 영웅 섹션의 배경 비디오 위에 나타나는 제목 텍스트 디자인도 마음에 듭니다. 배경과 분리되어 있으며 텍스트 뒤에 작은 각진 노란색 블록을 포함하여 색상을 지정합니다. 많은 제목에는 제목 안에 각진 블록의 더 작은 버전이 포함되어 있습니다. 파란색 또는 노란색의 유사한 각진 블록이 이미지를 겹치거나 분리합니다. 많은 이미지에 이미지와 겹치는 블록 제목이 포함되어 있습니다.

웹사이트 방문

5. 바틀렛 농장

이 사이트는 Andrew Bartlett이 제출했습니다. 이것은 이미지와 메뉴를 잘 활용합니다. 영웅 섹션에는 전경에 큰 CTA가 있는 전체 너비 슬라이더가 표시됩니다. CTA는 텍스트를 흥미롭게 사용합니다. 제목의 맨 윗줄은 명확하고 녹색으로 윤곽이 그려져 있습니다. 제목의 맨 아래 줄은 녹색입니다. 여러 섹션에는 정보, 타임라인, 글머리 기호 등을 제공하는 겹치는 문구가 포함됩니다. 블로그 게시물에는 메타에 대한 고유한 디자인이 있습니다. 내가 가장 좋아하는 섹션에는 제품에 대한 링크로 카드가 표시됩니다. 카드는 거의 책갈피처럼 보이는 깔끔한 디자인을 가지고 있습니다. 카드에는 섹션으로 구분된 이미지와 정보가 포함됩니다. 제목과 이미지만 있는 메가 메뉴에도 비슷한 디자인이 사용되었습니다.

웹사이트 방문

6. 팝업 콤비

이 사이트는 Justine Carter가 제출했습니다. 이 사이트는 사진과 비디오를 잘 활용합니다. 영웅 섹션은 제품의 독특한 데모를 만드는 배경 비디오를 보여줍니다. CTA는 연락처 페이지에 대한 링크와 팝업에서 연락처 양식을 여는 링크가 있는 섹션의 중앙에 있습니다. 제품은 비디오와 일치하는 전체 너비 갤러리에도 표시됩니다. 제품의 이미지는 서비스에도 사용됩니다. 많은 링크와 아이콘이 제품 사진의 빨간색과 일치합니다. 메뉴의 CTA와 문의 양식 버튼은 제품 사진의 황갈색과 일치합니다. 하이라이트는 사이트와 사진을 함께 연결하는 데 잘 작동합니다.

웹사이트 방문

7. 브란다르티카

이 사이트는 Jeff Litcofsky가 제출했습니다. 브랜드 컬러를 잘 활용한 제품이기도 합니다. 브랜드 블루 컬러의 멋진 애니메이션이 웹사이트를 소개하고 마지막에 로고와 태그라인으로 바뀝니다. 파란색은 이미지 오버레이, 버튼, CTA 배경, 맨 위로 이동 버튼 및 햄버거 메뉴에도 사용됩니다. 작품은 모자이크 레이아웃 내에서 표시됩니다. 메뉴는 웹 사이트를 볼 수 있도록 파란색 배경의 전체 화면에서 열립니다. 페이지에는 제목 뒤에 스타일 구분선이 있는 패턴 배경이 표시됩니다. 이 페이지는 또한 팟캐스트, 아이콘, 고정 버튼 등에 파란색 브랜드 색상을 사용합니다. 사이트는 또한 작업의 예를 보여주기 위해 전후 슬라이더를 잘 활용합니다.

웹사이트 방문

8. 카산드라 워디

이 사이트는 Alfonso Perez-Verdia Ochoa가 제출했습니다. 이것은 또한 색상과 배경 패턴을 잘 활용합니다. 영웅 섹션은 피사체 뒤에 흰색 핫스팟을 만드는 파란색 배경의 전체 화면 이미지를 표시합니다. 흰색 텍스트는 동영상을 볼 수 있는 애니메이션 버튼이 포함된 CTA를 만듭니다. 여러 섹션에는 원 도트 패턴이 있는 검정색 배경이 포함됩니다. 이러한 섹션의 대부분은 단일 평가, 포함된 비디오 또는 유사한 요소를 표시합니다. 내가 가장 좋아하는 것은 단계를 보여주는 섹션입니다. 계단의 숫자는 대담한 색상의 우아한 디자인으로 동그라미로 표시됩니다. 단계와 설명은 서로 오프셋되어 있습니다. 나는 또한 한 면에 이미지를 표시하고 다른 면에 대담한 색상 배경에 대한 설명을 보여주는 서비스 섹션을 좋아합니다.

웹사이트 방문

9. JP 이벤트

이 사이트는 Tom Carmona가 제출했습니다. 이것은 사이트를 스크롤할 때 부드러운 색상에서 굵은 색상까지 다양한 색상으로 우아한 레이아웃을 사용합니다. 영웅 섹션의 배경에는 독특한 패턴을 만들기 위해 겹치는 여러 개의 부드러운 색상이 포함됩니다. 슬라이더의 이미지는 동일한 색상 중 일부를 강조 표시합니다. 버튼과 구분선의 하이라이트는 페이지를 아래로 스크롤할 때 더 두드러지는 어두운 색입니다. 서비스는 영웅 섹션보다 약간 더 굵게 테두리가 있는 이미지를 표시합니다. 하이라이트가 어두워질수록 배경은 더 부드럽게 유지됩니다. 아이콘은 영웅 섹션의 CTA에서 더 어두운 색상을 사용하고 바닥글은 배경으로 더 어두운 색상을 사용합니다. 나는 이것의 메가 메뉴를 좋아한다. 링크에는 아이콘이 포함되어 있으며 웹사이트의 모든 색상을 사용합니다. 색상은 사이트의 축하 초점에 잘 맞습니다.

웹사이트 방문

10. 볼니 스튜디오

이 사이트는 Volny Studio에서 제출했습니다. 이 웹사이트는 최소한의 디자인을 우아하게 사용합니다. 배경은 미색이며 대부분의 텍스트와 시각적 요소는 검은색입니다. 하이라이트와 이미지에 충분한 색상을 가져와 흥미롭게 만듭니다. 영웅 섹션에는 그 아래의 CTA와 겹치는 이미지가 표시됩니다. 여러 섹션의 한 면에는 이미지가 표시되고 다른 면에는 텍스트가 번갈아 가며 표시됩니다. 일부는 눈에 띄는 색상 블록을 포함합니다. 내가 가장 좋아하는 섹션에는 번호가 지정된 열에 서비스가 표시됩니다. 숫자는 색상 블록으로 만든 로마 숫자입니다. 프로젝트 섹션은 오른쪽에 더 큰 이미지가 있는 단일 행에 두 개의 이미지가 있는 것도 흥미롭습니다. 이미지에는 최소한의 배경이 있으므로 프로젝트가 돋보입니다. 프로젝트 페이지에서 겹칩니다. 나는 또한 정보를 섹션으로 분리하는 최소한의 바닥글 디자인을 좋아합니다.

웹사이트 방문

다음달까지!

5월 한 달 동안 최고의 커뮤니티 Divi 웹사이트 제출물 10개입니다. 이 사이트는 정말 멋져보이며 언제나처럼 제출해 주신 모든 분들께 감사드립니다!

자신만의 디자인을 고려하고 싶으시다면 언제든지 우아한 테마 닷컴의 nathan 편집자에게 이메일을 보내주십시오. 이메일 제목은 "DIVI SITE SUBMISSION"으로 하십시오.

우리는 또한 당신의 의견을 듣고 싶습니다! 이 웹사이트에 대해 마음에 드는 점과 웹사이트에서 수행한 작업이 있으면 블로그에서 가르치고 싶은 내용을 알려주십시오.

Mascha Tace/Shutterstock.com을 통한 추천 이미지