2015 년 새로운 웹 레이아웃 아이디어

2015 년 웹 레이아웃에서 4 가지 신흥 트렌드 : 분할 화면, 컨테이너 프리 레이아웃, 블록 그리드 및 단일 스크린 웹 사이트 키 포인트 :

이 기사는 2015 년에 등장한 4 가지 주요 웹 레이아웃 트렌드, 즉 분할 화면, 컨테이너 프리 레이아웃, 블록 그리드 및 단일 스크린 웹 사이트를 지적합니다.

스플릿 화면 레이아웃은 두 가지 중요한 기능 또는 이중성의 개념을 강조하는 데 사용되는 반면, 컨테이너가없는 레이아웃은 컨텐츠에 중점을두고 색상과 타이포그래피를 사용하여 구조 자체가 아닌 계층 구조를 만듭니다. 블록 그리드는 화면 크기에 따라 조정할 수있는 모듈을 갖춘 대응 웹 사이트를 만들기위한 다양한 도구입니다. 그러나이 레이아웃을 사용하여 컨텐츠를 구별하는 것은 어려울 수 있습니다. 단일 스크린 웹 사이트는 주로 화면의 배경 이미지에 반응 적으로 조정되며, 일반적으로 미니멀리스트 디자인과 스크롤 막대가 없습니다. 공간이 제한되어 있기 때문에이 레이아웃에는 명확한 콘텐츠 계층이 필요합니다.

새로운 웹 디자인 개념은 매년 나타나고 일부 오래된 트렌드는 점차 사라집니다. 향후 몇 개월 동안, 우리는 의심 할 여지없이 비디오 배경, 타일 및 애니메이션 스토리 북의 인기가 일시적으로 증가하는 것을 볼 것입니다.
• 반면에, 2010 년 초에 등장한 반응 형 웹 디자인은 앞으로도 꽤 오랫동안 디자인의 중심에 남아있을 것이라는 것은 거의 확실합니다.
물론 이것은 모든 웹 페이지가 공통 표준화 된 구조로 바뀌어야한다는 것을 의미하지는 않습니다. 반대로, 이전보다 차별화, 유연성 및 실험을위한 더 많은 공간이있을 수 있습니다.
• 우리는 내년에 레이아웃 디자인을 지배 할 것이라고 생각하는 4 가지 트렌드 또는 전반적인 계획을 식별했습니다. 이 모델에서 영감을 얻을 수 있지만, 가장 좋은 디자인은 일반적으로 창의성의 출발점으로 영감을 사용할 때 제작됩니다.
다음은 이러한 트렌드입니다.
스플릿 화면 레이아웃
• "분할 화면"을 호출 할 때 화면이 일반적으로 두 부분으로 나뉘어있는 웹 사이트 (일반적으로 동일한 크기)입니다.
페이지를 다음과 같이 나누는 데 두 가지 주요 이유가 있습니다.

두 가지 중요한 기능을 보여줍니다.

이원성의 개념을 표현하십시오.

첫 번째 상황은 일반적으로 회사가 두 가지 중요한 특성이나 변형으로 제품이나 서비스를 홍보해야 할 때 발생합니다. 웹 사이트는 종종 중요한 순서대로 요소를 쌓기 때문에이 경우보다 전통적인 레이아웃이 적합하지 않을 수 있습니다.

반면에 화면을 두 열로 나누는 것이 동일한 시스템의 두 가지 측면 (예 : 게시자와 독자 모두에게 유익한 출판 시스템)을 보여주는 가장 좋은 방법 일 수 있습니다.

이런 식으로, 주요 기능과 사소한 특징을 구별 할 필요가 없으며 독자는 즉시 중요한 콘텐츠에주의를 기울일 것입니다.

두 번째 이유는 때때로 디자이너가 이원성의 개념을 전달해야한다는 사실에서 비롯됩니다. 이 경우 화면을 두 부분으로 나누면 서로 다른 주제 또는 두 개의 다른 제품에 집중할 수있는 두 개의 공간이 생성됩니다. 또한이 스타일을 사용하면 특정 현실의 반대 특성을 강조 할 수 있습니다.

Desktime

https://www.php.cn/link/d45b6d92e35ff59d3f5a1861e431d581 첫 번째 예는 사무실 공유 분야에서 운영하는 회사 인 Desktime의 홈페이지입니다. 그들은 이미 사무실을 소유 한 사람들과 그것을 찾고있는 사람들의 요구를 충족시키기 위해 페이지를 두 부분으로 나눕니다. 따라서 는 "수직 분할"을 사용하여 서비스에서 두 가지 중요한 기능과 동일합니다. 그들이 채택한 스타일은 효과적이고 실용적이며 매우 간결하고 명확합니다. 잘하셨어요!

참고 :이 스크린 샷을 찍어 8과 4가 재 설계되었습니다. 8 & four 두 번째 예는 디지털 마케팅 회사 인 8 & Four에서 나옵니다. 그들의 홈페이지는 흰색과 평평한 색상의 대비를 기반으로 한 디자인으로 두 부분으로 나뉩니다. 이 부서는 회사가 가지고있는 모든 다른 기능을 표현하는 데 사용됩니다.

"수직 분할"스타일은 또한 "&"의 존재에 따라 달라지며, 이는 세분화 효과를 약화시킨다.

컨테이너리스 레이아웃 거의 디자인이 시작된 이래로 디자이너는 상자, 모양 및 라인과 같은 요소를 사용하여 디자인에 컨텐츠를 나누고 포함 시켰습니다. 예를 들어, 제목이나 바닥 글이 항상 나머지 콘텐츠와 시각적으로 분리되도록 설계된 방법을 고려하십시오.

> 그래픽 구조를 제거하고보다 자유롭고 개방적인 스타일로 전환하는 핵심 아이디어와 함께 새로운 트렌드가 떠오르고 있습니다. 이 추세는 미니멀리즘에 약간의 공통점이 있지만 한 걸음 더 나아갑니다. 실제로, 미니멀리즘은 일반적으로 여전히 단순하고 선형 구조를 사용 하며이 새로운 "컨테이너가없는"스타일은 시각적 포장을 완전히 제거합니다. 내용 자체는 관심의 중심이되며 정보의 계층 구조는 프레임과 구조가 아닌 색상 선택, 위치 및 사려 깊은 타이포그래피에 의해 결정됩니다.

foreword https://www.php.cn/link/93bb49EDE783ED9C09B650C9234BE21A 홈페이지에서 볼 수 있듯이, 서문은 뉴욕과 파리에 본사를 둔 대화식 대행사입니다. 그들의 웹 사이트는 포함 된 요소를 취소하고 사용자의 관심은 여기에 색상과 글꼴로 집중됩니다.

특히, 그들은 가장 중요한 회사 정보를 제공하기 위해 타이포그래피를 능숙하게 사용합니다. 색상은 주로 다른 클릭 가능한 사운드를 강조하는 데 사용됩니다. 이 웹 사이트는 모든면에서 반응을 보일뿐만 아니라 엄청나게 간결한 것이 분명합니다.

블록 그리드

우리는 여기서 그리드 구조가 반응 형 웹 사이트를 만드는 매우 효과적인 방법이 될 수 있음을 지적 할 필요가 없습니다. 이 경우 각 모듈에는 제목, 이미지 또는 텍스트와 같은 특정 컨텐츠가 포함됩니다.

모듈은 일반적으로 웹 사이트의 홈페이지에서 사용되지만 다른 페이지에서는 요구 사항을 충족시키기 위해 개발할 수 있습니다.

각 모듈은 유연하게 설계되었으며 화면 크기에 적응합니다. 이로 인해 강력한 "그리드 레이아웃"은 웹 사이트 및 모바일 애플리케이션에서 똑같이 효율적으로 사용할 수있는 매우 다양한 도구입니다.

그러나이 접근법의 과제 중 하나는 같은 크기의 많은 모듈을 만들면 더 오래되고 덜 중요한 프로젝트와 가장 흥미로운 콘텐츠를 구별하기가 어려울 수 있다는 것입니다.

실제로, 많은 블록이 같은 크기 인 경우, 사용자의 관심은 특정 항목에 끌리지 않을 수 있습니다. 이 문제를 피하기 위해 새로운 접근 방식은 모듈에 포함 된 내용에 따라 다양한 크기의 모듈을 만드는 것입니다.

참고 :이 스크린 샷을 찍어 Greats도 재 설계되었습니다.

greats

Greats는 주로 웹 사이트를 통해 남성용 신발을 판매하는 뉴욕에 기반을 둔 회사입니다. 그들의 웹 사이트는 그들의 디스플레이 창이므로 모든 세부 사항이 신중하게 연구되고 고려되었습니다.

"위대한"은 그리드 레이아웃의 실용성을 선택합니다. 그들은 홈페이지를 모듈 행에 쌓아 놓으며 각각 신발 한 켤레가 들어 있습니다. 모든 모듈의 크기는 비슷하며 모양은 암시적이고 엄격하게 표시되지 않습니다. 실제로 사용자는 신발 디스플레이 이외의 다른 것을 무시하는 것이 좋습니다.

단일 스크린 웹 사이트

지난 6 개월 동안 우리가 본 마지막 트렌드는 반응에 중점을 둔 사이트이며 항상 화면의 배경 이미지에 적응하는 사이트입니다. 종종이 사이트는 매우 간결하며 미니멀리스트 디자인 느낌을주는 경향이 있습니다. 그러나이 설계 트렌드의 상징적 인 기능은 스크롤 바의 부족입니다. 다시 말해,이 사이트는 거의 항상 UI에 대한 "단일 페이지 응용 프로그램"접근 방식을 취합니다. 제한된 컨텐츠 공간으로 인해 설계자는 매우 명확한 콘텐츠 계층을 명심해야하며 관련 정보를 덜 포함 할 때 특히 분별력이 있어야합니다.

대부분의 경우 이미지 (또는 비디오)가 디자인을 지배하여 다른 디자인 아이디어를위한 매우 제한된 공간을 남깁니다. 제품을 보여 주거나 단순히 감정적이고 영화적인 분위기를 불러 일으키는 데 사용될 수 있습니다.

Shamballa Jewels

"Shamballa Jewels"는 다양한 보석을 판매하는 회사입니다. 웹 사이트에는 일부 작업을 표시하는 고유 한 페이지로 구성된 홈페이지가 있습니다. 스크롤 막대가 없으며 웹 사이트의 탐색은 화면 상단의 메뉴에서 제공됩니다.

이 사이트에서 내가 정말로 좋아하는 것은 배경이 항상 바뀌고 있다는 것입니다. 실제로, 전체 공간에 적합한 이미지는 수직 분할 스크린과 교대로 나타납니다.

위의 예는 위대하고 효과적인 디자인이 우리가 보는 가장 일반적인 레이아웃 패턴에 묶일 필요가 없음을 보여줍니다. 각각은 인기있는 그리드/프레임의 친숙 함과 보안으로 시작하려는 충동에 저항하며 결과적으로 훌륭한 결과를 얻습니다.

이것은 더 일반적인 웹 레이아웃이 작동하지 않다는 것을 의미합니까?

물론 <.>은 아닙니다. 그러나 Mark Twain이 말했듯이,“망치를 들고있는 사람에게는 모든 것이 못처럼 보입니다.”

. 손톱이 보이는지 확인하십시오.

(다음은 원래 FAQ 부분의 의사 원리 작업으로, 원래 의미를 유지하고 명세서 조정 및 단어 대체를 수행했습니다)

웹 레이아웃 디자인

에 대한 자주 묻는 질문 Q : 현대 웹 레이아웃 디자인의 트렌드는 무엇입니까?

A : 현대 웹 레이아웃 디자인의 추세는 끊임없이 발전하고 변화하고 있습니다. 인기있는 트렌드에는 미니멀리스트 디자인, 비대칭 레이아웃, 분할 스크린 레이아웃 및 모바일 우선 디자인이 포함됩니다. 이러한 트렌드는 간단한 탐색 및 참여 콘텐츠를 제공하는 사용자 친화적 인 경험을 만드는 데 중점을 둡니다. 또한 대담한 색상, 독특한 타이포그래피 및 고품질 이미지 및 비디오를 사용하여 시각적 매력을 강조합니다. Q : 내 웹 사이트 레이아웃을 더 매력적으로 만드는 방법은 무엇입니까?

A : 웹 사이트 레이아웃을 더 매력적으로 만들려면 사용자 경험에주의를 기울이십시오. 웹 사이트를 탐색하기 쉽고 명확한 메뉴 및 링크가 있는지 확인하여 수행 할 수 있습니다. 고품질의 이미지와 비디오를 사용하여 사용자의 관심을 끌 수 있습니다. 또한 컨텐츠가 대상 고객과 관련이 있고 재미 있는지 확인하십시오. 퀴즈 또는 투표와 같은 대화식 요소를 통합하면 참여가 증가 할 수 있습니다. Q : 웹 레이아웃에서 모바일 우선 디자인의 중요성은 무엇입니까?

A : 모바일 우선 디자인은 모바일 장치와 데스크탑 또는 기타 장치의 디자인을 우선시하는 설계 전략입니다. 점점 더 많은 사람들이 모바일 장치를 사용하여 인터넷에 액세스하기 때문에 중요합니다. Mobile-First Design을 사용하면 웹 사이트가 좋아 보이고 모든 장치에서 잘 작동하여 더 나은 사용자 경험을 제공합니다.

Q : 웹 레이아웃 디자인에서 효과적으로 색상을 사용하는 방법은 무엇입니까? A : 컬러는 웹 레이아웃 디자인에서 중요한 역할을합니다. 그것은 감정을 설정하고 감정을 전달하며 심지어 사용자 행동에도 영향을 줄 수 있습니다. 색상을 효과적으로 사용하려면 브랜드 아이덴티티와 대상 고객을 고려하십시오. 브랜드를 반영하고 청중을 참여시키는 팔레트를 선택하십시오. 대조적 인 색상을 텍스트와 배경으로 사용하여 가독성을 보장하십시오. 또한 색상을 사용하여 웹 사이트의 중요한 요소 또는 정보를 강조하십시오.

Q : 웹 레이아웃 디자인에서 조판의 역할은 무엇입니까?

A : 조판은 웹 레이아웃 디자인의 필수 요소입니다. 정보를 전달할뿐만 아니라 웹 사이트의 분위기와 성격도 설정합니다. 읽기 쉬운 글꼴을 선택하고 브랜드 스타일을 반영하십시오. 다른 글꼴 크기와 두께를 사용하여 계층 구조를 만들고 사용자의 관심을 안내하십시오. 또한 가독성을 보장하기 위해 텍스트와 배경 사이에 충분한 대비가 있는지 확인하십시오.

Q : 웹 레이아웃 디자인에 멀티미디어 요소를 추가하는 방법은 무엇입니까?

A : 이미지, 비디오 및 오디오와 같은 멀티미디어 요소는 사용자 경험을 향상시키고 웹 사이트를 더욱 매력적으로 만들 수 있습니다. 콘텐츠와 관련된 품질의 이미지 및 비디오를 사용하십시오. 시각적 관심을 높이기 위해 배경 비디오 또는 애니메이션을 사용하는 것을 고려하십시오. 또한 오디오를 사용하여주의를 기울이고 재생, 일시 정지 또는 조정과 같은 제어 기능을 사용자에게 제공하십시오.

Q : 웹 레이아웃 디자인에서 피해야 할 일반적인 실수는 무엇입니까? A : 웹 레이아웃 디자인에서 피해야하는 일부 일반적인 실수에는 지저분한 레이아웃, 열악한 탐색, 과도한 글꼴 또는 색상이 포함되며 모바일 장치에는 최적화되지 않습니다. 또한 품질이 낮은 이미지 나 비디오를 피하고 내부를 쉽게 읽고 이해할 수 있는지 확인하십시오.

Q : 내 웹 사이트 레이아웃의 유용성을 향상시키는 방법은 무엇입니까?

A : 웹 사이트 레이아웃의 유용성을 향상 시키려면 웹 사이트를 쉽게 탐색 할 수 있고 명확한 메뉴 및 링크가 있는지 확인하십시오. 웹 사이트 전체에 일관된 레이아웃 및 디자인 요소를 사용하십시오. 또한 웹 사이트가 빠르게로드되고 모바일 장치에 최적화되어 있는지 확인하십시오. 이미지의 대체 텍스트 및 비디오 용 자막과 같은 장애가있는 사용자에게 접근성 기능을 제공합니다.

Q : 웹 레이아웃 디자인에서 공백의 역할은 무엇입니까? A : 공백 또는 부정적인 공간은 디자인의 요소 사이의 공간입니다. 균형을 만들고 사용자의 관심을 안내하며 가독성을 향상시키는 데 사용될 수 있습니다. 빈 공간을 떠나면 디자인이 단순하고 현대적으로 보일 수 있습니다. 그러나 전략적으로 공백을 사용하고 디자인을 불완전하게 보이지 않도록 공간을 너무 많이 남기지 마십시오. Q : 웹 레이아웃 디자인 소설과 최신 상태를 유지하는 방법은 무엇입니까?

A : 웹 페이지 레이아웃 디자인을 소설하고 최신 상태로 유지하려면 최신 디자인 트렌드 및 기술에 대한 정보를 유지하십시오. 컨텐츠를 정기적으로 업데이트하여 청중과 관련이 있고 재미있게 만듭니다. 또한 몇 년마다 웹 사이트를 재 설계하여 현대적이고 매력적으로 유지하십시오.

위 내용은 2015 년 새로운 웹 레이아웃 아이디어의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!