웹 사이트 레이아웃

최고의 웹 사이트 레이아웃 예 및 아이디어


웹 사이트의 레이아웃은 성공을 정의 할 수 있습니다. 잘못된 디자인을 얻으면 사람들이 혼란스럽고 혼란스러워 져 사용자 경험이 파괴됩니다. 중요한 콘텐츠를 놓치거나 클릭 유도 문안을 보지 못할 가능성이 있음.

그러나 레이아웃의 중요성은 더욱 커집니다. 디자인은 사이트의 내용에 맞아야합니다. 올바른 레이아웃을 사용하면 컨텐츠가 빛날 수 있지만 잘못된 컨텐츠는 혼잡하고 읽기 어려우며 영감을 얻지 못할 수 있습니다.

웹 사이트의 레이아웃은 성공을 정의 할 수 있습니다. 잘못된 디자인을 얻으면 사람들이 혼란스럽고 혼란스러워 져 사용자 경험이 파괴됩니다. 중요한 콘텐츠를 놓치거나 클릭 유도 문안을 보지 못할 가능성이 있음.

그러나 레이아웃의 중요성은 더욱 커집니다. 디자인은 사이트의 내용에 맞아야합니다. 올바른 레이아웃을 사용하면 컨텐츠가 빛날 수 있지만 잘못된 컨텐츠는 혼잡하고 읽기 어려우며 영감을 얻지 못할 수 있습니다.

궁극적으로 모든 사이트에는 웹 사이트 디자인 아래에 그리드 시스템이 있습니다. 이 열과 행은 콘텐츠 순서를 제공하고 페이지를 둘러싼 사용자의 시선을 안내합니다. 이러한 그리드 내에서 다양한 접근 방식을 만들 수 있습니다. 모든 웹 사이트에는 디자이너가 레이아웃을 빌드 한 기본 그리드가 있습니다..

그러나 사이트에 적합한 레이아웃 디자인을 선택할 때 시작하는 데 사용할 수있는 몇 가지 일반적인 시작점이 있습니다..

하나의 접근 방식을 고수 할 필요는 없습니다. 사이트 전체 또는 방문 페이지와 같은 단일 페이지에서 여러 레이아웃을 쉽게 결합 할 수 있습니다..

사용 가능한 가장 일반적인 레이아웃 옵션을 살펴 보겠습니다..

가장 간단한 레이아웃 패턴 인 단일 컬럼으로 시작합니다..

1. 단일 열 레이아웃

가장 복잡하지 않은 레이아웃이지만 모바일 웹이 성장한 이후로 인기가 크게 높아졌습니다. 웹 사이트가 모바일 장치, 태블릿 및 데스크톱에서 동일한 디자인을 사용할 수 있기 때문에 개발 시간이 단축됩니다..

또한 단일 열 레이아웃은 어느 쪽이든 방해받지 않고 콘텐츠에 사용자를 집중시키기 때문에 훌륭한 독서 환경을 조성하는 데 효과적입니다. 그래서 블로깅 사이트 매질 모든 기사에 적용.

매체는 단일 열 레이아웃을 사용하여 읽기 경험을 향상시킵니다.

마지막으로 이미지와 결합하면 단일 열 레이아웃으로 이미지를 최대한 크게 표시 할 수 있으므로 강력한 영향을 줄 수 있습니다.. 오션 리조트 이것의 좋은 예입니다.

오션 리조트는 단일 열 디자인의 전체 너비를 사용하여 이미지의 영향을 극대화합니다.

이러한 요소를 염두에두고 사람들이 사이트를 읽는 데 많은 시간을 보내거나 공간을 비춰 야하는 이미지가있는 경우 단일 열 레이아웃을 사용하는 것이 좋습니다.

단순성으로 인해 단일 열 레이아웃에 대한 과제는 거의 없습니다. 그러나 정보의 흐름을 신중하게 고려해야합니다. 사용자는 어떤 순서로 귀하의 콘텐츠를보아야합니까?

예를 들어 사용자에게 페이지 상단에있는 내용을 요약하여 표시하고 끝 부분에 대한 명확한 클릭 유도 문안을 제공하면 도움이됩니다..

또한 사용자가 페이지를 계속 스크롤 할 수있는 방법에 대해 생각하십시오. 단일 열 레이아웃은 더 길어지는 경향이 있으며, 접는 부분 아래에 더 많은 내용이있는 것이 항상 사용자에게 분명하지는 않습니다. 화살표와 같은 시각적 표시기가 도움이 될 수 있습니다..

단일 열 레이아웃이 약간 제한적인 것처럼 보이지만 여전히 커뮤니케이션 할 내용이 많은 경우 내용에 중점을 둔 디자인 채택을 고려하십시오..

2. 컨텐츠 중심 레이아웃

웹 디자이너는 종종 뉴스 사이트 나 블로그에서 컨텐츠 중심 레이아웃을 사용하며 일반적으로 컨텐츠에 대한 기본 컬럼과 추가 정보에 대한 하나 이상의 사이드 컬럼이 있습니다..

이 레이아웃의 장점은 측면 열의 너비를 변경하여 중앙 내용의 줄 길이를 관리 할 수 ​​있다는 것입니다. 중요한 이유는 텍스트의 줄 길이가 너무 길거나 짧으면 읽기가 더 어려워집니다, 정보의 이해와 보존을 줄입니다..

그러나 컨텐츠 중심 레이아웃은 모든 복사 중심 웹 사이트에 이상적입니다. 비밀은이 레이아웃의 내용을 작고 소화하기 쉬운 덩어리로 나누는 것입니다..

Boagworld의 게시물은 제목, 목록, 이미지 및 풀 아웃 따옴표로 콘텐츠를 분류합니다.

예를 들어, 내 블로그에, 내 평균 게시물은 제목, 목록, 이미지 및 인용문으로 표시됩니다. 이것들은 사용자가 기사를 스캔하고 관심있는 부분을 찾는 데 도움이되는 모든 기술입니다..

측면 컬럼도 신중하게 고려해야합니다. 웹 디자이너는 이러한 열에 올바른 내용을 배치하고 시각적으로 올바른 가중치를 가져야합니다..

문제는 사용자가 사이드 컬럼에서 보조 컨텐츠를 찾을 것으로 예상하므로주의를 덜 기울입니다. 따라서 클릭 유도 문안과 같은 항목을 측면 열에 포함 시키려면주의를 끌 수있을만큼 강력해야합니다..

예를 들어 스매싱 매거진 오른쪽 열에있는 뉴스 레터 가입 양식에주의를 끌기 위해 고양이의 화려한 그림을 사용합니다..

Smashing Magazine은 측면 열을 사용하여 게시물에 대한 보조 정보를 제공합니다.

콘텐츠 중심의 레이아웃이 사이트의 모든 페이지에 적합하지는 않습니다. 웹 사이트는 종종이 레이아웃을 잡지 스타일 디자인과 짝짓습니다.

3. 잡지 레이아웃

이름에서 알 수 있듯이이 레이아웃 방식은 잡지 나 뉴스 사이트에서 광범위하게 사용되어 많은 다른 이야기를 보여줍니다..

인쇄 레이아웃에서 영감을 얻은 헤드 라인과 이미지의 조합으로 스토리를 소개 할 수 있습니다. 본질적으로 링크 목록을 전달하는 매력적인 방법이 될 수 있습니다..

정기적으로 변경되는 컨텐츠를 강조하기위한 훌륭한 레이아웃이기도합니다. 그래서 뉴스 웹 사이트가 워싱턴 포스트 너무 좋아.

뉴스 웹 사이트는 잡지 스타일의 레이아웃을 선호합니다.

그러나 레이아웃에는 단점이 없습니다. 매거진 레이아웃은 반응하기가 어려울 수 있으며, 종종 작은 화면 장치의 디자인을 완전히 변경해야합니다..

이 웹 사이트 레이아웃 스타일은 많은 이미지와 헤드 라인이주의를 끄는 소리와 함께 다소 압도적 일 수 있습니다..

이 문제를 해결하는 가장 효과적인 방법은 명확한 시각적 계층을 만드는 것입니다. 다시 말해, 일부 ‘스토리’를 다른 것보다 크게 만드십시오..

다양한 스토리 크기로 사용자의 시선을 안내합니다.

예를 들어 인기 웹 사이트는 왼쪽 이미지를 상당히 크게 만들어 관심을 집중시킵니다. 효과적으로 사용자에게 먼저 살펴볼 위치를 알려줍니다..

또한 깔끔한 타이포그래피와 간단한 탐색 막대를 통해 나머지 사용자 인터페이스가 간단 해집니다. 잡지 레이아웃을 사용하려는 경우 일을 단순하게 유지하기 위해 열심히 노력해야합니다..

잡지 레이아웃의 또 다른 잠재적 단점은 그 아래에있는 격자가 너무 눈에 띄기 때문에 ‘boxy’처럼 보일 수 있다는 것입니다. 그러나 다음 레이아웃 유형에서 영감을 얻어이를 완화 할 수 있습니다..

4. 그리드 브레이킹 레이아웃

기본 그리드를 깨는 것처럼 보이는 레이아웃은 기존 방식보다 시각적으로 훨씬 흥미로울 수 있습니다. 또한 일반적인 열에서 벗어나는 특정 화면 요소에주의를 집중시키는 데 탁월합니다..

예를 들어 VR Arles Festival 웹 사이트. 탐색 막대가 두 열과 겹치도록하여 탐색 막대에주의를 집중시키는 방법에 주목하십시오..

VR Arles Festival은 두 개의 열이 겹치도록하여 탐색 표시 줄에주의를 집중시킵니다.

그리드 브레이킹 레이아웃의 또 다른 실제 사용은 복사본에주의를 끌 수있는 방식으로 이미지에 텍스트를 오버레이하는 데 사용하는 것입니다. 웹 페이지가 이미지의 텍스트를 완전히 오버레이하면 종종 손실 될 수 있습니다. 그러나 가능한 한 아래의 예를 참조하십시오, 텍스트가 그림과 부분적으로 겹치면 훨씬 더 두드러집니다..

이 디자인은 이미지에 텍스트를 부분적으로 겹쳐서 텍스트에주의를 기울이고 행동을 유도합니다.

그리드를 깨는 레이아웃의 단점은 특히 웹 사이트가 반응 해야하는 경우 올바르게 배치하기가 어렵다는 것입니다. 사실, 대부분의 그리드 브레이킹 디자인은 아무 것도 아닙니다. 여전히 기본 그리드가 있으며 모든 화면 요소가 그리드에 맞습니다. 그리드가 훨씬 더 복잡하기 때문에 그렇게 명확하지 않습니다. 디자인이 어렵습니다.

그들의 고유 한 복잡성 때문에 디자인 대행사 나 패션 브랜드와 같은 디자인 회사에서 사용하는 경향이 있습니다. 특정 청중에게 호소하는 디자인의 정교함을 보여줍니다..

격자 선 레이아웃이 상황에 비해 너무 복잡하다고 생각되지만 더 혁신적이고 특이한 작업을 수행하려는 경우 전체 화면 디자인을 고려하십시오..

5. 전체 화면 레이아웃

이름에서 알 수 있듯이 전체 화면 레이아웃은 사용자가 스크롤 할 필요없이 단일 화면에 맞습니다. 스토리 텔링이나 프리젠 테이션에 이상적입니다..

예를 들어, 조각의 종. 이 풍부하고 인터랙티브 한 프레젠테이션 경험은 약혼 한 30 종의 이야기를 들려줍니다.

Species and Pieces는 스크롤 할 필요없이 모든 대화식 환경을 제공합니다.

보다시피, 전체 화면 레이아웃은 강력한 이미지와 함께 최고입니다. 따라서 사진, 일러스트레이션 또는 비디오가 풍부한 웹 사이트에 적합합니다..

단일 화면 접근 방식을 엄격하게 고수해야하는 것은 아닙니다. 언뜻보기에 의회 광장 웹 사이트에서 Roux Species in Pieces와 같은 의미로 전체 화면 웹 사이트 인 것 같습니다. 그들의 화려한 이미지는 전체 뷰포트를 채 웁니다.

이 웹 사이트는 전체 뷰포트를 사용하여 멋진 사진을 보여줍니다.

그러나 추가 컨텐츠를보기 위해 페이지를 더 아래로 탐색 할 수 있습니다. 불행히도, 이것은이 레이아웃 방식의 한 가지 잠재적 단점을 강조합니다. 사용자는 항상 스크롤 할 수 있다는 사실을 인식하지 못하므로 소중한 콘텐츠를 놓칠 수 있습니다.

또한 레이아웃이 다양한 크기로 어떻게 적용되는지 신중히 고려해야합니다. 예를 들어 전체 화면 방식이 휴대 기기에서 작동합니까? 또한 화면 크기가 변경되거나 축소 될 때 이미지가 잘리나요? 작은 크기로 볼 수있는 영역에서 잘리는 이미지의 초점을 빠르게 찾을 수 있습니다.

즉, 멋진 이미지가 있다면 더 나은 레이아웃 디자인을 찾는 데 어려움을 겪을 것입니다. 그러나 이미지와 함께 설명과 클릭 유도 문안을 추가하는 옵션을 원한다면 대체 레이아웃을 고려할 수 있습니다.

6. 교대 레이아웃

대체 레이아웃 패턴은 웹에서 가장 일반적으로 발견되는 패턴 중 하나입니다. 일련의 컨텐츠 블록으로 구성되며 각 컨텐츠 블록은 2 열 레이아웃입니다. 블록은 일반적으로 한쪽의 이미지와 다른 쪽의 텍스트로 구성됩니다..

그것의 이름을주는 것은 이미지가 측면을 번갈아 가며한다는 것입니다. 따라서 첫 번째 블록은 왼쪽에 내용이 있고 오른쪽에는 이미지가 있고 다음 블록은 해당 레이아웃을 뒤집습니다..

제품의 기능 또는 장점을 설명 할 때 특히 선호되는 레이아웃 방식입니다. 예를 들어 웨비도 이미지를 사용하여 기능을 표시 한 다음 사본이 작동 방식 또는 제공하는 이점을 설명합니다..

다른 컨텐츠의 Webydo 대체 텍스트 및 이미지는 홈페이지를 차단합니다.

이러한 컨텐츠 블록이 이미지와 텍스트로 제한되지는 않습니다. 때때로 사이트가 이미지를 비디오로 바꿉니다. 마찬가지로, 요소의 콘텐츠 측면에는 아이콘부터 회원 평가 또는 클릭 유도 문안까지 모든 것이 포함될 수 있습니다..

예를 들어, Convertkit 각 내용 블록에 자신의 텍스트와 함께 평가 및 클릭 유도 문안 포함.

Convertkit에는 이미지와 함께 회원 평가 및 클릭 유도 문안이 포함됩니다.

대체 블록이 일반적인 이유 중 하나는 단점이 거의없는 간단한 레이아웃 방식이기 때문입니다. 여러 판매 포인트를 전달해야하는 경우 거의 항상 신뢰할 수있는 레이아웃 옵션입니다.

물론 요구 사항이 다를 수 있으므로 고려해야 할 또 다른 옵션은 카드 기반 레이아웃입니다..

7. 카드 기반 레이아웃

카드 기반 페이지 레이아웃은 웹 전체에서 볼 수있는 또 다른 일반적인 레이아웃 방식입니다..

카드 기반 레이아웃은 사용자가 선택할 수있는 일련의 옵션을 제공하여 결정을 내릴 수있는 각 선택에 대한 충분한 정보를 제공하는 좋은 방법입니다..

따라서 전자 상거래 사이트의 제품 목록 페이지에서 인기있는 선택입니다. 웹 사이트에서 제품 이미지, 설명 및 가격을 표시 할 수 있습니다. “나중에 저장”과 같은 기능을 추가 할 수도 있습니다. 아 소스 웹 사이트.

Asos와 같은 전자 상거래 사이트는 제품 목록을 표시하기 위해 카드 기반 레이아웃을 선호합니다.

그러나 사용자가 목록에서 선택해야하는 상황에서 카드 기반 레이아웃을 사용하는 웹 사이트를 찾을 수 있습니다. 예를 들어, 블로그 나 뉴스 사이트에 기사 목록을 표시하는 다른 일반적인 용도가 있습니다..

카드 기반 레이아웃을 사용하면 이야기, 제목 및 설명의 이미지와 포함 할 게시물에 대한 추가 세부 정보를 표시 할 수 있습니다. 어워드 블로그는 이러한 종류의 사용에 대한 훌륭한 예입니다..

Awwwards는 카드 기반 레이아웃을 사용하여 블로그에 게시물을 나열합니다.

무엇보다도, 카드 기반 레이아웃은 반응 형으로 잘 작동하며 사용 가능한 너비가 줄어듦에 따라 연속으로 카드 수가 줄어 듭니다..

그러나이 접근법에는 몇 가지 사소한 단점이 있습니다. 먼저 카드는 이미지를 포함 할 때 가장 잘 작동합니다. 즉, 각 목록 항목에 적합한 사진을 찾는 데 어려움을 겪고 있다면 다른 디자인으로 더 나을 수 있습니다..

다른 약간의 문제는 다양한 양의 콘텐츠에 있습니다. 한 카드에 다른 카드보다 많은 내용이 들어 있으면 카드 내에 또는 각 행 사이에 공백이 남을 수 있습니다.

카드의 양이 다양하면 카드 사이에 공백이 생길 수 있습니다.

이 문제를 완화하는 한 가지 방법은 아래 예와 같이 카드를 같은 행에 유지하려고하지 않는 것입니다..

카드가 빈 공간을 채우도록 허용하면보다 심미적으로 즐거운 디자인이됩니다.

그럼에도 불구하고 이것은 사소한 문제이며이 레이아웃 방식의 광범위한 채택을 설명합니다..

또 다른 인기있는 디자인은 영웅 이미지 레이아웃입니다.

8. 영웅 레이아웃

영웅 레이아웃은 많은 웹 사이트에서 홈페이지를 지배하는 텍스트 오버레이가있는 큰 이미지 인 영웅 이미지의 이름을 따서 명명되었습니다. 애플은 고전적인 영웅 이미지를 잘 활용합니다.

Apple은 고전적인 영웅 이미지를 잘 활용합니다.
MacOS 용 Pixave는 홈페이지 디자인을 지배함으로써 영웅 레이아웃을 한층 더 향상시킵니다..
MacOS 용 Pixave는 홈페이지 디자인을 지배함으로써 영웅 레이아웃을 한층 더 향상시킵니다.

영웅 이미지가 널리 보급되는 이유는 가치 제안 웹 사이트의 진입 점에서 바로 영향력있는 방식으로.

보시다시피 픽사 브사과 위의 웹 사이트는 일반적으로 큰 배경 이미지, 제목 또는 줄 바꿈 및 설명으로 구성됩니다. 영웅 레이아웃에는 종종 눈에 띄는 클릭 유도 문안이 함께 제공됩니다..

관심을 끌 수있는 방식으로 홈페이지 나 방문 페이지에서 제공하는 내용을 명확하게 설명해야하는 경우 영웅 이미지를 사용하는 것이 좋습니다. 그러나 그것은 아마도 그들의 사용 정도입니다..

경우에 따라 후속 페이지에서 사용되는 영웅 레이아웃이 표시됩니다. 그러나 대부분의 경우 영웅 이미지는 단순히 더 가치있는 콘텐츠에서 관심을 끌지 못합니다. 주의해서 사용하십시오.

그 외에도 영웅 레이아웃을 사용하면 약간의 단점이 있습니다. 예, 공통적이지만 사용자는 친숙하고 효과적입니다..

상당히 일반적인 레이아웃 옵션은 분할 화면 레이아웃입니다..

9. 분할 화면 레이아웃

전체 화면 레이아웃과 마찬가지로 분할 화면은 사용자가 웹 사이트를 처음 방문 할 때주의를 끌 수있는 좋은 방법입니다. 웹 디자인 회사 홈페이지 이하.

이 사이트는 분할 화면 레이아웃을 사용하여 두 부분을 제품에 설명합니다.

위의 예제를 효과적으로 만드는 이유는 분할 화면 레이아웃에 대한 명확한 이유가 있기 때문입니다. 이 웹 사이트는 비즈니스와 관련하여 디자인과 개발이라는 두 가지 측면이 있음을 분명히하고 있습니다..

비슷한 예는 사용자에게 명확한 이진 선택을 제공하려는 경우입니다. 분할 화면은 두 옵션 사이에서 화면을 균등하게 분할하므로 해당 상황에서 의미가 있습니다..

예를 들어 모델링 에이전시 62 관리 분할 화면을 사용하여 사용자가 남성 또는 여성 모델을 찾고 있는지 식별하도록 권장.

62 관리는 분할 화면 디자인을 사용하여 사용자가 두 가지 옵션 중에서 선택하도록 권장합니다.

불행히도 이러한 제한된 수의 응용 프로그램을 넘어 서면 분할 화면 디자인을 채택 할 이유가 거의 없습니다. 상대적으로 제한적인 레이아웃 옵션이며 적절한 시나리오가 많지 않습니다. 그러나 그 경우에는 그것이 최선의 선택입니다.

약간 더 융통성을 제공하는 비슷한 옵션은 비대칭 레이아웃입니다.

10. 비대칭 레이아웃

분할 화면 레이아웃이 뷰포트의 중간에서 균등하게 분할되는 반면 비대칭 디자인을 사용하면 화면을 분할 할 수는 있지만.

분할 화면에 비해이 레이아웃의 장점은 페이지의 특정면에 강조를 추가 할 수 있다는 것입니다. 측면이 많을수록 더 많은 초점을 맞 춥니 다. 결과적으로 1 차 및 2 차 컨텐츠를 식별 할 수 있습니다..

기본 및 보조 열을 전제로하여이 방법을 여러 가지 방법으로 사용할 수 있습니다. 예를 들어, 펠릭스 레 소프 자신의 사이트에서 방법을 사용하여 콘텐츠와 탐색을 구분합니다..

Félix Lesouef는 비대칭 레이아웃을 사용하여 사이트 탐색을 강조 표시합니다.

대조적으로 영양가있는 음식 웹 사이트는 두 번째 열을 사용하여 웹 사이트의 다음 섹션을 볼 수 있습니다.

Nourish Eats는이 레이아웃 방식을 사용하여 2 차 컨텐츠를보다 두드러지게 노출합니다.

여러 가지면에서 비대칭 레이아웃은 탁월한 선택입니다. 유연하고 구현이 쉽고 사용이 적습니다. 다른 선택의 어려움없이 웹 사이트를 다르게 보이게하는 편리한 방법입니다.

레이아웃을 선택하는 방법

이 기사를 읽고 사이트에 적합한 레이아웃을 선택하는 첫 단계를 밟았습니다. 어떤 종류의 옵션을 사용할 수 있는지 배웠습니다.

다음으로, 귀하의 사이트에 어떤 옵션이 적합한 지 알아야합니다. 이를 수행하는 한 가지 방법은 경쟁 업체를 보는 것입니다. 그러나 나는 거기서 멈추지 않는 것이 좋습니다. 위험은 당신이 그것들을 복사 할 것이고, 그것은 당신에게 항상 한 걸음 뒤로 물러날 것입니다.

대신, 자신과 관련된 콘텐츠 유형이있는 다른 분야의 사이트를 살펴보십시오. 당신이 있다면 B2B 고객을 대상으로하는 브로슈어웨어 웹 사이트, 다른 유사한 사이트를 살펴보십시오. 마찬가지로 전자 상거래 사이트가있는 경우 다른 분야의 전자 상거래를보십시오.

그런 다음 디자이너와 협력하여 여러 가지 접근 방식을 실험 해보십시오. 다양한 레이아웃을 기반으로 아이디어를 와이어 프레임하고 콘텐츠에 가장 적합한 아이디어를 확인하십시오..

올바른 방향으로 결정을 내릴 수 없거나 자신감이 부족한 경우 일부 사용자 앞에 옵션을 배치하고 반응을 얻으십시오. 그들이 선호하는 것을 묻지 말고 중요한 콘텐츠를 발견했는지 또는 회사가 무엇을 이해했는지 물어보십시오.

실제로, 당신은 아마 당신 자신이 당신의 웹 사이트의 다른 부분에 대한 다른 레이아웃 접근 방식을 고르고 선택할 수 있다는 것을 알게 될 것입니다. 웹 사이트 레이아웃에 관해서는, 적절한 시간에 적절한 것을 사용하는 것이 중요하기 때문에.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map