WordPress 포트폴리오 사이트의 그리드 레이아웃: 디자인 팁 및 예

모든 WordPress 포트폴리오 사이트의 가장 일반적인 구조는 그리드입니다. 한 번에 몇 가지 작업을 모두 보여주므로 보는 사람이 빠르게 스캔하고 눈에 띄는 것을 선택할 수 있습니다.

그러나 포트폴리오에 대한 강력한 그리드 레이아웃을 만드는 것은 무엇입니까? 그리고 자신의 포트폴리오 사이트를 시작할 때 고려해야 할 사항은 무엇입니까?

이 게시물에서는 WordPress 포트폴리오에 가장 적합한 그리드 레이아웃 디자인에 대한 몇 가지 팁과 조언을 공유합니다.

타이트한 그리드 디자인

그리드를 사용할 때는 디자인을 타이트하게 유지하는 것이 좋습니다. 이렇게 하면 항목이 가까이에 있어 빠르게 탐색하고 사용자가 콘텐츠와 상호 작용할 수 있습니다.

그리드 구조는 일반적으로 포트폴리오 콘텐츠 유형에 따라 다릅니다. 사진과 레이아웃에 따라 패딩을 늘리거나 줄여야 할 수도 있습니다. 예를 들어, 아트웍은 가까이 있을 때 흐릿하게 느껴질 수 있으므로 디지털 아트 포트폴리오는 추가 공간을 활용할 수 있습니다.

그러나 스크린샷은 멀리서도 쉽게 알아볼 수 있기 때문에 디자이너는 작업을 서로 가깝게 유지할 수 있습니다. WordPress의 Ink 테마에서 좋은 예를 볼 수 있습니다.

이것은 그리드 요소 사이에 패딩을 절대 사용하지 않습니다. 이 정사각형 블록은 사용자가 한 번에 모든 것을 볼 수 있도록 서로 밀접하게 정렬됩니다.

또한 더 작은 축소판을 사용하여 빠르게 관심을 끄는 경향이 있습니다. 저는 이 스타일이 너무 마음에 들고 강렬한 인상을 남기기 때문에 개인적으로 가장 좋아하는 스타일입니다. 각 사진이 다른 모든 사진과 대조적으로 어떻게 명확하게 보이는지 확인하십시오.

이 스타일의 이점을 얻을 수 있는 작업이 있는 경우 잉크 테마를 살펴보세요. 처음부터 코딩하지 않고 이러한 유형의 포트폴리오 그리드를 만드는 것은 쉬운 방법입니다.

그러나 한 가지 좋은 대안은 각 조각 사이에 약간의 공간이 있는 Bramble입니다.

이 WordPress 테마는 여러 포트폴리오 레이아웃과 함께 제공되므로 실제로 가장 좋아하는 스타일을 선택할 수 있습니다. 일부 포트폴리오 레이아웃에는 썸네일이 더 가깝고 다른 레이아웃에는 그리드의 요소 사이에 많은 여백이 있습니다.

그러나 고려해야 할 첫 번째 사항은 분석 마비입니다. 이것은 누군가가 그 중 아무 것도 고를 수 없다고 느낄 수 있는 너무 많은 선택이 제시될 때 발생합니다.

포트폴리오 항목이 독특하고 단독으로 설 수 있는 충분한 공간(또는 공간 부족)이 있는 한 많은 클릭률을 얻을 수 있습니다. 그리고 그것이 포트폴리오의 요점 아닌가요?

벽돌 격자

석조 그리드에 대해 아는 사람은 많지 않지만 오랫동안 사용되어 왔습니다.

이들은 일반적으로 JavaScript를 사용하여 다양한 수직 높이를 기반으로 항목을 그리드로 정렬합니다. 따라서 픽셀 단위의 썸네일을 모두 같은 크기로 추가하는 대신 다양한 크기의 다양한 포트폴리오 요소를 추가하고 여전히 맞출 수 있습니다.

Weston WordPress 테마는 미니멀리스트 사진 포트폴리오 페이지에 이 기능이 있습니다. 이것은 자연스럽게 온라인으로 작업을 하려는 사진 작가를 대상으로 하며 벽돌 격자는 다양한 높이 사진에 적합한 옵션입니다.

각 사진은 적절한 양의 공간을 차지하는 격자에 자연스럽게 들어갑니다. 일반적으로 정확한 열 수와 열 높이를 사용자 지정할 수 있지만 장치 크기에 따라 다릅니다.

전체 화면 레이아웃이 마음에 들면 Notio 테마를 살펴보십시오. 타이트한 썸네일과 맞춤형 애니메이션 효과가 있는 벽돌 격자 디자인을 사용합니다.

이 두 테마의 격자도 조도가 다릅니다. 하나는 이미지 사이에 추가 공백이 있고 다른 하나는 축소판 그림이 서로 밀접하게 정렬되어 있습니다.

그리드 레이아웃은 소수의 트렌드를 따르며 가장 좋아하는 트렌드를 따르도록 선택합니다.

호버 세부 정보: 예 또는 아니요?

많은 포트폴리오에는 마우스를 가져가는 동안 축소판 위에 표시되는 호버 세부 정보가 포함됩니다. 이 효과는 일반적으로 모바일에 적용되지 않지만 큰 썸네일이 있는 데스크톱 포트폴리오 사이트에서는 확실히 일반적인 추세입니다.

각 썸네일은 내부 포트폴리오 항목 페이지로 연결되거나 최소한 해당 작품과 관련된 이미지 갤러리를 열어야 합니다. 썸네일이 전체 포트폴리오를 구성해서는 안 됩니다.

그러나 세부 정보를 추가하면 더 많은 클릭을 유도하고 사람들이 사이트를 더 깊이 파고들 수 있습니다. Create WordPress 테마는 호버링 세부 사항에 주의를 끌기 위해 호버링하는 동안 사용자 정의 애니메이션 효과를 사용합니다.

커서를 포트폴리오 항목에 가져가면 두 가지 중요한 정보를 찾을 수 있습니다.

• 포트폴리오 항목의 이름/제목
• 아이템의 카테고리

때로는 이러한 작은 세부 사항이 사용자 경험을 근본적으로 개선할 수 있습니다. 누군가가 특정 그래픽 디자인 작업을 탐색하는 경우 범주별로 탐색하고 클릭하기 전에 제목을 확인할 수 있습니다.

그러나 다른 경우에는 이러한 세부 정보가 불필요하게 장황할 수 있고 너무 많은 공간을 차지할 수 있습니다. 그렇기 때문에 일부 디자이너는 WordPress Gather 테마에서 볼 수 있는 것과 같이 이러한 세부 정보를 건너뛰게 됩니다.

단순한 호버 효과가 있는 평범한 썸네일입니다. 눈이 편안하고 모든 세부 사항이 축소판 아래에 있으므로 이미지를 가리지 않습니다.

이 추세에는 명확한 "정답"이 없습니다. 호버 세부 정보는 일부 사람들에게는 훌륭하게 작동하지만 다른 사람들에게는 이 기능이 약간의 성가심의 원인이 될 수 있습니다.

사이트에서 가장 잘 보이는 것을 찾고 자신의 취향에 따라 측정하십시오. 그러나 세부 정보가 축소판을 가리킬 때 나타나는지 축소판 아래에 표시되는지 여부에 관계없이 페이지의 어딘가에 추가하십시오.

눈길을 사로잡는 사진으로 시선을 사로잡다

모든 그리드 레이아웃은 관심을 끌기 위해 축소판을 사용합니다. 이러한 썸네일은 일반적으로 사람들이 클릭하고 더 많이 읽도록 독려하여 작업의 일부를 판매합니다.

귀하의 작업은 디지털 아트, 웹 디자인, 아이콘 디자인, UX 아키텍처 또는 시각적 매력이 있는 모든 것이 될 수 있습니다. 하지만 요점은 판매를 위해서는 시각적인 매력이 절대적으로 필요 하다는 것입니다. 그리고 그것은 매력적인 사진에서 비롯됩니다.

미니멀한 Mellow WordPress 테마는 각기 다른 스타일의 다양한 사진을 사용합니다. 이들은 대부분 자리 표시자이기 때문에 "진정한" 프로젝트 사진이 아닙니다. 그러나 그들은 첫 번째 페이지로드에서 방문자를 바로 판매하는 명확한 예를 제공합니다.

다른 포트폴리오 사이트를 탐색하여 다른 디자이너가 갤러리 사진에 무엇을 사용하고 있는지 확인하는 것이 좋습니다.

자신의 사이트에 사용할 수 있는 것과 관심을 끌 수 있는 작업의 종류를 확인하십시오. 귀하의 기술을 가장 잘 보여주는 것은 무엇입니까? 각 프로젝트의 어떤 부분이 시각적으로 가장 매력적이거나 다른 사람에게 작업을 판매하는 데 도움이 됩니까?

다시 말하지만 이것은 매우 개방적인 질문이지만 많은 다른 전략을 시도하고 싶을 것입니다. 나는 일반적으로 클로즈업 사진이 특히 썸네일 형태로 많은 관심을 받는다는 것을 알게 되었습니다. 포트폴리오 페이지에서 이러한 예제와 Beckett 테마가 혼합된 것을 볼 수 있습니다.

그리드 레이아웃에서는 각 프로젝트에 대해 너무 많은 공간만 있습니다. 그 공간을 중요하게 생각하십시오!

미리보기 이미지의 크기를 정확히 알고 있다면 이미 큰 이점을 누리고 있는 것입니다. 이를 통해 Photoshop에서 다양한 축소판을 잘라 포트폴리오 항목에 가장 적합한 구성을 확인할 수 있습니다.

앞으로 나아가 다

그리드 디자인은 매우 간단하며 많은 WordPress 포트폴리오 테마가 기본적으로 함께 제공됩니다. 그러나 그리드 레이아웃은 보여줄 멋진 디자인 작업 없이는 많은 것을 제공하지 못합니다.

이 게시물이 자신의 포트폴리오를 시작하는 디자이너와 크리에이티브에 유용한 팁이 되었으면 합니다. 그리드 디자인은 포트폴리오에서 가장 일반적이므로 방문자가 예상할 수 있습니다. 이러한 경향을 적용하거나 이러한 테마를 사용하여 더 많은 관심을 끌 수 있고 이상적으로는 시간이 지남에 따라 더 많은 클라이언트 작업을 가져올 수 있습니다.