10가지 견고한 웹사이트 레이아웃 예

 10가지 견고한 웹사이트 레이아웃 예

John Morrison

10가지 견고한 웹사이트 레이아웃 예

레이아웃은 웹 디자인에서 가장 쉬운 측면 중 하나일 수도 있고 가장 까다로운 측면 중 하나일 수도 있습니다. 때로는 디자이너가 몇 분 만에 멋진 레이아웃을 완성할 수 있고 때로는 같은 디자이너가 같은 작업으로 하루 종일 고군분투할 수도 있습니다.

각 프로젝트는 독특하고 고유한 솔루션을 요구하지만 저는 막혔을 때 터뜨릴 수 있다는 것을 염두에 두고 견고하고 믿을 수 없을 정도로 다재다능한 몇 가지 정렬을 유지하는 것이 도움이 된다는 것을 알았습니다.

아래의 10가지 레이아웃은 페이지에 콘텐츠를 배치하는 가장 좋은 방법을 찾을 수 없을 때 디자이너의 난관이라는 최악의 경우도 충분히 헤쳐 나갈 수 있습니다.

Explore Digital 자산

간단하게 유지하기

페이지 레이아웃은 예술이자 과학입니다. 시각적으로 매력적이고 독특한 무언가를 창조하는 것은 예술가의 시선을 사로잡습니다. 그러나 많은 경우에 작동하는 견고한 레이아웃을 만드는 데 사용할 수 있는 지침을 따르기 매우 쉬운 몇 가지가 있습니다. 이러한 원칙에는 정렬 선택 및 준수, 여백을 적절하게 구조화하고 크기, 위치 등을 통해 중요한 요소를 강조하는 것이 포함됩니다.

디자이너는 종종 레이아웃 프로세스에 대해 너무 많은 스트레스를 받습니다. 우리는 프로젝트가 우리의 시간과 고객의 돈을 투자할 가치가 있으려면 모든 면에서 완전히 독특해야 한다고 생각하면서 프로젝트에 접근하는 경향이 있습니다.

하지만예를 들어 Vcard 웹사이트 템플릿입니다. 전체 웹사이트의 배경으로 사람의 사진을 사용하는 방법을 살펴보십시오.

또는 동일한 개념을 사용하여 Flatsome WordPress 테마와 같은 더 나은 전자상거래 웹사이트를 만들 수 있습니다.

9. Power Grid

Power Grid는 이 기사에서 가장 복잡한 레이아웃이지만 모든 종류의 다양한 관련 콘텐츠를 포함해야 하는 페이지에 대해 내가 본 가장 효과적인 레이아웃 중 하나입니다. 이미지와 음악 플레이어에서 텍스트와 비디오에 이르기까지 이 레이아웃에 거의 모든 것을 넣을 수 있으며 강력하게 유지됩니다.

핵심은 위 미리보기의 아래쪽 절반에 있습니다. 실제로 일련의 직사각형을 포함하는 큰 컨테이너가 있음에 유의하십시오. 이 컨테이너는 공간의 경계를 제공하며 내부에 배치하는 모든 콘텐츠는 이 문서의 시작 부분에 있는 고급 그리드 레이아웃과 달리 강력하지만 다양한 그리드로 형식을 지정해야 합니다.

웹사이트 템플릿 예 및 테마

뉴스 웹사이트, 잡지 및 블로그는 이 접근 방식을 사용하여 혼란을 일으키지 않고 최대한 많은 정보를 채울 수 있는 레이아웃을 디자인합니다. 또한 꽤 잘 작동합니다.

신문 WordPress 테마는 전력 그리드 레이아웃을 사용하는 많은 블로그 테마 중 하나입니다. BBC에서 CNN, Huffington Post 등에 이르기까지 평판이 좋은 많은 뉴스 웹사이트에서도 동일한 레이아웃을 볼 수 있습니다.

10. 전체화면 사진

결승전목록의 레이아웃은 사진가에게 이상적으로 적합한 또 다른 레이아웃이지만 표시할 크고 매력적인 배경 그래픽과 제한된 양의 콘텐츠가 있는 모든 사이트에서 작동합니다.

다음과 같은 경우 콘텐츠를 읽기가 정말 어려울 수 있습니다. 배경 이미지 위에 배치되므로 여기서 기본 아이디어는 이미지 위에 위치하며 링크, 카피, 로고 및 기타 콘텐츠의 컨테이너 역할을 하는 불투명(또는 거의 불투명한) 가로 막대를 만드는 것입니다.

막대를 하나의 넓은 콘텐츠 영역으로 사용하는 대신 여러 섹션으로 분할해 보세요. 이것은 배경 색상을 변경하거나 구분선으로 미묘한 수직선을 추가하거나 위에서 수행한 것처럼 실제로 큰 상자를 더 작은 분리된 상자로 분할하여 수행할 수 있습니다.

웹사이트 템플릿 및 테마의 예

이 웹사이트 레이아웃은 포트폴리오에서 개인 웹사이트에 이르기까지 모든 종류의 웹사이트에서 볼 수 있는 일반적인 디자인 트렌드이기도 합니다. 하지만 기업 및 비즈니스 웹사이트에서 가장 많이 사용됩니다.

Charles는 비즈니스 컨설팅 웹사이트용 HTML 템플릿입니다. 또한 전체 화면 사진 개념을 사용하여 웹사이트의 관심을 더 끄는 헤더 섹션을 만듭니다.

다른 유형의 웹사이트를 만드는 데에도 동일한 디자인 레이아웃을 사용할 수 있습니다. 예를 들어 AppStorm은 이 디자인 컨셉으로 얼마나 창의적일 수 있는지 보여주는 앱 랜딩 페이지 웹사이트입니다.

또한보십시오: 데스크탑 햄버거 메뉴 아이콘을 피해야 하는 5가지 이유

결론

여기결론에서 반복하고 싶은 몇 가지 핵심 사항이었습니다. 첫째, 페이지 레이아웃이 반드시 "모든 경우에 맞는" 방법은 아니지만 엄청나게 많은 상황에서 빠르고 쉽게 적용할 수 있는 과학이 있습니다.

다음으로, 위에 제시된 레이아웃 아이디어는 모두 똑같이 보이는 쿠키 커터 웹사이트로 귀결될 필요는 없으며 대신 눈에 띄게 독특하게 완성된 디자인을 구축할 수 있는 기본 캔버스를 제공할 뿐입니다.

마지막으로 이러한 아이디어를 성공적으로 구현하는 핵심은 아이디어는 확정된 것이 아니라는 점을 기억하는 것입니다. 각각은 특정 프로젝트에 맞게 변경되어야 하며 혼합 및 일치하여 새로운 아이디어를 생성할 수도 있습니다!

아래에 의견을 남기고 위 레이아웃에 대한 의견을 알려주세요. 위에 언급되지 않은 문제가 있을 때 기본값으로 사용하는 것이 있습니까? 예시 링크를 남겨주세요.

웹을 잘 살펴보면 반드시 그런 것은 아니라는 것을 알 수 있습니다. 멋지게 보이는 웹사이트는 종종 상당히 단순하고 조금도 독특하지 않은 레이아웃을 사용합니다. 우리 디자이너들이 가장 감탄하는 페이지는 종종 틀을 깨는 독특한 사이트에서 온 것이지만 일반 클라이언트는 사용 가능하고 깨끗하며 전문적인 것을 원합니다.멋지게 보이는 웹 사이트는 종종 상당히 단순하고 그렇지 않은 레이아웃을 사용합니다 최소한의 고유함.

이 기사에서는 웹의 수많은 사이트에서 찾을 수 있는 10가지 매우 일반적인 레이아웃을 살펴보겠습니다. 색상, 그래픽 및 글꼴을 의미하는 이러한 사이트의 스타일이 지정되는 방식은 고유하지만 사이트 자체의 기본 구조는 웹 페이지 레이아웃을 위한 검증된 방법을 기반으로 합니다. 먼저 레이아웃의 간단한 실루엣을 보여줌으로써 이를 강조하여 자신의 생각과 디자인을 투영할 수 있도록 한 다음 레이아웃을 사용하는 실제 사이트의 한두 가지 예를 보여드리겠습니다.

웹 디자이너라면 이 페이지를 북마크하고 다음에 페이지 레이아웃이 막히면 다시 방문하세요. 다음 각 레이아웃은 성형 및 수정을 위한 기본 제안을 나타냅니다. 그대로 사용하지 말고 프로젝트의 필요에 따라 자신만의 스핀을 적용하는 것이 좋습니다.

1. Three Boxes

아마도 가장 단순한 레이아웃일 것입니다.목록. 사실, 자신의 필요에 맞추기에는 너무 단순하다고 생각하고 싶을 것입니다. 이 경우 배열이 실제로 얼마나 다재다능한지 생각해 보면 놀랄 것입니다.

3개의 상자 레이아웃에는 하나의 기본 그래픽 영역과 그 아래에 두 개의 작은 상자가 있습니다. 이들 각각은 그래픽, 텍스트 블록 또는 둘의 혼합으로 채워질 수 있습니다. 이 레이아웃의 기본 상자는 종종 jQuery 슬라이더로 원하는 만큼의 콘텐츠를 표시할 수 있습니다!

상단의 실루엣 모양은 로고, 회사 이름, 탐색, 검색 막대에 사용할 수 있는 영역입니다. 일반적으로 웹사이트에 있는 기타 정보 및 기능 콘텐츠.

이 디자인은 포트폴리오 페이지 또는 몇 가지 샘플 그래픽을 보여줘야 하는 모든 것에 이상적입니다. 각 이미지는 더 크고 복잡한 갤러리 페이지로 연결되는 링크가 될 수 있습니다. 기사 뒷부분에서 이 아이디어를 더욱 혼합하는 방법을 살펴보겠습니다.

웹사이트 템플릿 및 테마의 예

시작하기 쉬운 개념입니다. 그러나 미리 만들어진 템플릿을 사용하면 이러한 유형의 디자인에서 유리하게 시작할 수 있습니다. 인기 있는 마켓플레이스에서 이러한 레이아웃을 사용하는 많은 HTML 템플릿과 WordPress 테마를 쉽게 찾을 수 있습니다. 다음은 몇 가지 훌륭한 예입니다.

Hurst는 3개의 상자 레이아웃을 매우 효과적으로 사용하는 HTML 웹사이트 템플릿입니다. 이것에서 볼 수 있듯이예를 들어, 레이아웃은 디자인에 혼란을 주지 않고 비즈니스와 제품을 모두 강조하는 데 적합합니다.

Bloom은 매력적인 포트폴리오 디자인을 만들기 위해 디자인 컨셉을 사용하는 HTML 템플릿의 또 다른 좋은 예입니다. . 이 디자인은 화면을 최대한 활용하여 작품을 선보일 수 있도록 잘 구성된 웹 사이트를 만듭니다.

2. 3D 스크린샷

개발자가 끝없는 웹앱 컬렉션을 계속 생성함에 따라 아래에 표시된 3D 스크린샷 레이아웃 또는 일부 변형이 점점 더 인기를 얻고 있습니다. 기본 아이디어는 헤드라인으로 페이지를 맨 위에 놓은 다음 애플리케이션의 양식화된 미리보기를 던지는 것입니다. 이들은 종종 반사, 짙은 그림자, 큰 배경 그래픽 또는 스크린샷 전체를 기어다니는 덩굴과 같은 복잡한 장식과 함께 제공되지만 핵심 아이디어는 항상 매우 간단합니다.

이 트릭을 다른 곳에서 볼 수 있습니다. 많이 사용되는 것은 미리 만들어진 테마입니다. 이 경우 디자이너는 스톡 레이아웃을 판매하고 있고 자리 표시자 그래픽이 빛나야 하며 멋진 3D 효과만큼 멋지고 현대적인 것은 없습니다!

웹사이트 템플릿 및 테마의 예

CSS만으로 3D 효과를 만드는 방법이 있지만 웹 사이트에서 멋진 3D 같은 헤더를 만드는 가장 쉽고 가장 좋은 방법은 Slider Revolution과 같은 WordPress 플러그인을 사용하는 것입니다. 상상력을 발휘하여 매혹적인 작품을 만들 수 있습니다.웹사이트의 3D 슬라이드쇼 및 대화형 개체.

예를 들어 We Build는 Slider Revolution 플러그인을 활용하여 웹사이트 템플릿에 3D와 유사한 디자인으로 놀라운 대화형 섹션을 만드는 WordPress 테마입니다.

또는 이와 같은 순수 CSS 3D 이미지 슬라이더를 만들 수 있습니다.

3. 고급 그리드

이 기사에서 볼 수 있는 많은 레이아웃은 매우 엄격한 그리드 정렬을 준수합니다. 그러나 대부분의 경우 단순히 획일적인 썸네일로 가득 찬 페이지를 제안하지는 않습니다. 예를 들어, 아래 레이아웃은 중복을 피하기 위해 이미지 크기를 혼합합니다.

3개의 상자 예에서와 같이 페이지 위쪽에는 하나의 기본 그래픽 제목이 있습니다. 그런 다음 썸네일의 균일한 그리드라는 아이디어에 대한 간단한 트위스트가 이어집니다. 이 공간은 수평으로 4개의 정사각형 범위를 허용하지만 페이지의 왼쪽 절반이 오른쪽과 다르도록 처음 두 영역을 결합했습니다.

첫 번째에서 언급했듯이 레이아웃에서 블록은 이미지일 필요가 없습니다. 예를 들어 왼쪽에 텍스트 블록이 있고 오른쪽에 정사각형 이미지가 있다고 상상할 수 있습니다.

또한보십시오: 25개 이상의 최고의 필기체 글꼴(멋지고 예쁜 스타일 포함)

웹사이트 템플릿 및 테마 예

그리드 기반 웹사이트를 디자인하기 위해 다양한 접근 방식을 사용할 수 있습니다. . Bootstrap 및 Foundation과 같은 프레임워크는 이러한 유형의 웹 사이트를 위해 만들어졌습니다. 그러나 고급 그리드 레이아웃은 주로 포트폴리오 웹사이트 디자인에서 많이 사용됩니다.

Leedo는고급 그리드 레이아웃을 사용하여 깔끔한 포트폴리오 웹사이트를 만드는 방법을 보여주는 좋은 예입니다.

미니멀리즘 HTML 포트폴리오 템플릿은 그리드 디자인을 다른 방식으로 사용하여 포트폴리오 갤러리를 선보입니다.

이 컨셉을 자신의 것으로 만드는 것은 여러분의 몫입니다.

4. 추천 그래픽

이미지로 가득 찬 페이지에 대한 콘텐츠가 충분하지 않은 경우가 있습니다. 그렇다면 하나의 아이콘, 사진 또는 앰퍼샌드와 같은 기호를 보여주고 싶다면 어떻게 해야 할까요? 아래 레이아웃은 산만한 요소가 없기 때문에 매우 인기가 있고 가독성이 뛰어난 매우 쉬운 솔루션입니다.

그 결과 대담하면서도 미니멀하고 깔끔한 페이지가 탄생했습니다. 그것이 만드는 진술은 강력하고 놓칠 수 없습니다. 그래픽이 눈에 띄게 표시될 만큼 충분히 좋은지 확인하세요!

예제 웹사이트 템플릿 및 테마

추천 그래픽 개념은 다음 중 하나입니다. 웹사이트 디자인, 특히 비즈니스 및 제품 랜딩 페이지 웹사이트에서 가장 일반적으로 사용되는 트렌드입니다.

Lamira는 웹사이트 홈페이지에서 제품을 홍보하기 위해 이러한 트렌드를 효과적으로 사용하는 방법을 보여주는 WordPress 테마입니다. 최고의 제품을 소개하고 선보이기에 완벽합니다.

이 개념은 비즈니스 웹사이트에도 완벽하게 적용됩니다. FinWin HTML 웹 사이트 템플릿은 전략을 사용하여 기업 비즈니스를 인간화합니다.

5. 5개의 상자

5개의 상자 레이아웃은 단순히 3개의 상자가 진화한 것입니다.상자 레이아웃. 동일한 논리가 모두 적용되며 더 많은 콘텐츠를 담도록 수정되었습니다. 쉽게 네 개의 상자가 될 수도 있습니다. 보여주고 싶은 것이 무엇인지에 따라 다릅니다. 또한 디자인에 조금 더 공을 들인 것처럼 보입니다!

분명히 레이아웃에 추가함에 따라 보조 항목이 점점 작아지므로 대부분의 경우 5개의 상자가 접근할 것입니다. 제한이 없습니다.

세 개의 상자 레이아웃과 마찬가지로 이 레이아웃도 거의 모든 유형의 사이트에서 사용할 수 있을 정도로 다재다능합니다. 이를 전환하기 위한 아이디어에는 큰 배경 그래픽 추가, 모서리 둥글기, 그림자 및/또는 반사 추가 또는 더 작은 축소판에 대화형 요소 추가가 포함됩니다. 가로로 스크롤하는 버튼을 쉽게 추가할 수 있습니다.

웹사이트 템플릿 및 테마의 예

Five Boxes는 예전만큼 자주 볼 수 없는 매우 거친 개념입니다. . 하지만 여기저기서 이 전략을 매우 훌륭하게 사용하는 웹사이트를 보게 될 것입니다.

ECOSHOP은 전자상거래 상점을 위한 HTML 템플릿으로 5개의 상자 개념을 사용하여 멋진 격자 모양의 홈페이지 디자인을 만듭니다. .

블로그 및 포트폴리오 웹사이트에도 사용할 수 있으며 좋은 예가 Voku HTML 템플릿입니다.

6. 고정 사이드바

지금까지 우리가 본 모든 사이트에는 상단 수평 탐색이 있었습니다. 그만큼다른 인기 있는 옵션은 물론 세로 탐색으로, 페이지 왼쪽에 강력한 세로 열을 만드는 데 적합합니다. 종종 이것은 페이지의 나머지 부분이 스크롤되는 동안 현재 위치에 유지되는 고정 요소입니다. 그 이유는 사이트의 어느 지점에서나 내비게이션에 쉽게 액세스할 수 있기 때문입니다.

나머지 콘텐츠는 이 목록에 있는 다른 레이아웃 중 하나에서 빌릴 수 있습니다. 이번에는 4개의 상자 배열에서 3개의 상자 레이아웃을 다시 수정했습니다. 이 기사를 다 읽었으면 모든 레이아웃을 다시 살펴보고 아이디어를 혼합하고 일치시켜 새 레이아웃을 만드는 방법에 대해 생각해 보십시오.

예제 웹사이트 템플릿 및 테마

고정 사이드바는 포트폴리오 웹사이트 디자인에 사용되는 일반적인 디자인입니다. CV 스타일의 개인 웹사이트에서 프로필과 같은 섹션을 추가하는 데 특히 유용합니다.

Sonex는 고정 사이드바가 있는 아름다운 포트폴리오 HTML 템플릿입니다. 소셜 채널에 메뉴와 링크를 창의적인 방식으로 추가할 수 있습니다.

Moler HTML 템플릿은 고정 사이드바 개념을 사용하는 또 다른 방법을 보여줍니다.

7. 헤드라인 & 갤러리

누구나 좋은 갤러리 페이지를 좋아합니다. 레이아웃 관점에서 무엇이 더 간단할 수 있습니까? 견고하고 균일한 이미지 그리드와 선택적인 부제목이 있는 제목을 위한 공간만 있으면 됩니다. 여기서 핵심은 헤드라인을 크고 굵게 만드는 것입니다. 부담없이이것을 창의력의 포인트로 사용하고 스크립트나 이상한 서체를 포함하세요.

이 예는 아래의 실제 사이트를 반영하기 위해 찌그러진 사각형을 사용하지만 원하는 대로 수정할 수 있고 수정해야 합니다. 과시. 여기서 요점은 기본적으로 정사각형이 아닌 상자 밖에서 생각하게 하는 것입니다. 세로 직사각형이나 심지어 자신의 갤러리에서 원을 사용할 수도 있습니다!

예제 웹사이트 템플릿 및 테마

이 개념은 디자인 에이전시와 사진작가를 위한 웹사이트를 만드는 데 적합합니다. 올바르게 사용하면 이 개념은 현대적이고 미니멀한 웹사이트 디자인을 만드는 데 매우 효과적입니다.

Satie는 작업 방법을 보여주는 훌륭한 HTML 템플릿입니다.

Park는 또 다른 템플릿입니다. 포트폴리오 웹사이트를 만들기 위해 영감을 얻을 수 있는 예.

8. 주요 사진

아래 레이아웃은 특히 사진 커뮤니티에서 매우 일반적입니다. 여기서 기본 아이디어는 왼쪽 세로 탐색과 함께 디자인이나 사진(실제 모든 것)을 표시하는 큰 이미지를 갖는 것입니다.

탐색은 왼쪽 정렬에서 가장 강력할 수 있습니다. 그러나 사진의 직선 가장자리를 보완하기 위해 중앙 또는 오른쪽 정렬을 자유롭게 실험해 보십시오.

예제 웹사이트 템플릿 및 테마

물론, 이것은 매우 일반적인 개념입니다. 하지만 문제는 이 개념으로 얼마나 창의적일 수 있느냐입니다.

Centrix를 예로 들어

John Morrison

John Morrison은 노련한 디자이너이자 디자인 업계에서 다년간의 경험을 쌓은 다작 작가입니다. 지식을 공유하고 다른 사람으로부터 배우는 것에 대한 열정으로 John은 업계 최고의 디자인 블로거 중 한 명으로 명성을 쌓았습니다. 그는 동료 디자이너에게 영감을 주고 교육하는 것을 목표로 최신 디자인 트렌드, 기술 및 도구에 대해 연구하고 실험하고 글을 쓰는 데 시간을 보냅니다. 디자인 세계에서 길을 잃지 않을 때 John은 하이킹, 독서, 가족과의 시간 보내기를 즐깁니다.