2024년 배경 디자인 종합 가이드

이 페이지의 링크에서 서비스에 가입하면 Reeves and Sons Limited가 수수료를 받을 수 있습니다. 우리의 윤리 성명서.

웹 사이트 디자인에서 가장 중요한 부분 인 사이트의 배경은 다양한 방법으로 사용되어 더 나은 사용자 경험을 제공 할 수 있습니다.

오늘날, 배경을 적절하게 만드는 것은 예전보다 더 어렵고 새로운 도전을 제시하는 반면, 다른 배경에 있는 잠재력의 일부를 제한합니다.wise 했을 것입니다.

예를 들어, 이전 시대의 배경은 실제로 디자인의 실용적인 부분으로 사용될 수 있습니다. 예를 들어 시청자의 주의를 중요한 부분으로 안내하기 위해 화살표를 표시할 수 있습니다.

상황이 변경된 이유는 다음이 필요하기 때문입니다. responsive 디자인, 그리고 사람들이 사용할 수 있는 다양한 화면 크기와 화면 유형의 다양성.

결과적으로 오늘날 배경은 사이트 디자인에서 덜 중요한 요소가되었으며 많은 사이트에는 공식적인 배경이 전혀 없습니다.

배경이 정말로 중요합니까? 이를 확인하기 위해 Google은 상위 30 개 웹 사이트 (반복 제외)를 검사했으며 그 결과는 매우 흥미 롭습니다.

위의 이미지에서 볼 수 있듯이 최상위 웹사이트는 배경을 전혀 신경 쓰지 않으며 사용자 수용과 관련하여 약간의 해를 끼치지 않는 것 같습니다.

이것은 웹사이트 디자인에 관한 기존의 생각에 위배되지만 냉정한 사실로 논쟁하기는 어렵습니다. 놀랍게도 배경이 있는 목록의 첫 번째 웹사이트는 10위에 도달할 때까지 시작되지 않습니다. Twitter, 해당 배경은 로그인하지 않은 경우에만 표시됩니다.

30 년 상위 2017 개 웹 사이트에서 올바른 배경을 가진 유일한 사이트는 다음과 같습니다.

  • Twitter사진 배경 (10 위)
  • 단색 배경의 라이브 (Outlook) (순위 12)
  • 콜라주 배경이있는 NetFlix (순위 21)
  • 단색 배경의 워드 프레스 (26 위)th)
  • 사진 배경의 빙 (29 위)th)
  • 사진 배경이있는 Tumblr (30 위)th)

따라서 상위 20 개 웹 사이트 중 30 %만이 배경을 가지고 있었으며 그 목록은 잘 정리했습니다.

사이트 배경의 유일한 장점은 여러 페이지에서 사이트 정체성을 유지하는 데 도움이 된다는 것입니다.

단점은 많습니다. 배경은 사이트와 관련하여 추가 문제를 야기합니다. responsive부실화되는 것을 방지하기 위해 자주 업데이트해야 할 수 있습니다.

현대 디자이너의 또 다른 과제는 정적 배경 외에도 비디오 배경을 만들 수 있다는 것입니다. 후자를 선택한다면, 많은 사용자들이 비디오 배경을 잘못 고안하여 성가신 것을 알기 때문에 자신이하는 일을 아는 것이 중요합니다.

배경을 사용하지 않는 이유가 너무 많기 때문에 최상위 웹사이트의 발자취를 따라 전체 배경 아이디어를 단번에 버리기로 결정할 수 있습니다. 그러나 브리핑에서 사이트에 배경이 있어야 한다고 주장한다면 어떻게 해야 할까요? 이것이 이 기사의 나머지 부분에서 해결하려고 하는 것입니다.

배경이 포함되어야합니다

콘텐츠는 항상 페이지 배경 위의 레이어에 있어야 합니다. 페이지 요소를 다른 레이어로 분리하지 않으면 무언가를 변경해야 할 때 문제가 발생할 수 있습니다.

이 층 분리를 가능한 많이 사용하는 것이 가장 좋습니다. 예를 들어 사이트 로고를 배경에 직접 통합해야합니까? 대부분의 경우 로고를 별도의 레이어에 배치하는 것이 더 합리적입니다. 이렇게하면 로고를 업데이트해야하는 경우 전체 배경과 독립적으로 업데이트 할 수 있습니다.

이런 방식으로 레이어를 사용하면 사물을 만드는 데 더 많은 작업이 필요하지만 유지 관리에 대한 작업은 줄어 듭니다. 또한 언제든 필요에 따라 사물을 숨기거나 이동 시키거나 다르게 행동 할 수 있으므로 최대한의 제어 기능을 제공합니다.

이 이미지는 배경 디자인 템플릿의 이상적인 구조를 보여줍니다.

각 레이어 (기본 레이어 제외)에는 필요한 경우 훨씬 더 높은 분리를 위해 추가 레이어를 생성 할 수있는 범위가 있습니다.

더 많은 분리 수준을 만들수록 더 많은 제어권을 얻을 수 있습니다. 지금 당장은 그것이 중요하지 않다고 느낄 수 있지만 나중에 그것이 요인이 되는 경우가 종종 있습니다.

이해해야 할 가장 중요한 점은 "배경"이 내용이 아닌 모든 것입니다. 따라서 페이지에 있어야하지만 콘텐츠가 아닌 텍스트 나 이미지는 배경의 일부로 간주되지만 모든 사람이 그런 방식으로 분류하지는 않습니다.

프레임

웹 디자인 초기에 프레이밍은 배경과 관련하여 콘텐츠의 위치를 ​​결정하는 간단한 문제였습니다. 이 날에 responsive 그러나 일반적으로 그보다 더 복잡합니다.

와 responsive 디자인에서 프레이밍 문제를 처리하는 데는 두 가지 선택밖에 없습니다. 첫 번째 옵션은 사용 가능한 화면 크기를 기준으로 콘텐츠와 배경 이미지의 크기를 조정하는 것입니다. 이것은 매우 드문 상황이지만 설계 무결성이 가장 중요한 요소일 때 최적입니다.

두 번째 옵션은 디자인의 무결성보다 컨텐츠의 가독성이 더 중요한 일반적인 상황에서 배경의 섹션 또는 전체 배경을 단계적으로 제거하는 것입니다.

그런데이“디자인 무결성”문제는 어떤 화면에서 보든 디자인이 항상 동일하게 보인다는 것을 의미합니다. 그 반대는 콘텐츠가 어떤 종류의 화면에서 보더라도 콘텐츠가 항상 동일하게 보이는 것입니다.

스케일링 사용 responsive네스 호

크기 조정을 사용하여 다양한 장치 유형 및 방향에 걸쳐 균일한 프레임을 유지하면 디자인의 무결성이 유지되지만 특히 사진 배경을 사용하는 경우 결과가 항상 기대하거나 원하는 것이 아닐 수 있습니다.

이 기술이 실제로 사용되는 예를 살펴보겠습니다. 세로 모드의 Samsung Galaxy S5부터 시작합니다.

이것은 가로 모드에서 보이는 모습입니다(전화를 거는 것을 제외하고는 거의 항상 가로 방향으로 휴대 전화를 들고 있는 것이 더 좋지만 사람들은 여전히 ​​휴대 전화를 세로 방향으로 들고 있는 것을 고집합니다.

보시다시피, 640 x 360 픽셀 만 가지고도 크기를 조절할 때 레이아웃이 완벽합니다. 다음은 세로 방향의 iPad입니다.

그리고 풍경.

크기 조정을 사용할 때 알 수 있는 것은 세로 보기에서 낭비되는 수직 공간이 많이 있을 수 있다는 점을 제외하고는 다른 장치와 해상도 사이에 약간의 차이가 있다는 것입니다.

실제로 배경 및 콘텐츠 부분에 다른 방법을 사용하는 것이 더 낫습니다. 메뉴 항목이 항상 2x2 레이아웃으로 유지되는 대신 1x4 격자로 래핑되도록 할 수 있지만 그렇게하지 않는 이유는 사용 가능한 수직 공간의 양을 예측하는 것은 불가능합니다.

따라서 스케일링의 이점은 상황에 관계없이 일부 구성 요소가 항상 표시되도록하려는 경우입니다.

단계적 숨기기 및 표시 사용 responsive네스 호

보다 실용적인 시나리오이자 대부분의 디자이너가 대부분의 시간 동안 사용하기를 원하는 시나리오는 배경(또는 배경의 일부)을 보여줄 공간이 충분하지 않은 경우 간단히 단계적으로 제거하여 사이트 콘텐츠가 항상 최대한의 관심을 받습니다.

다음은 이 방법을 사용할 때 차이점의 예입니다. 동일한 장치와 방향을 사용하여 설명하겠습니다. 첫 번째는 삼성 Galaxy S5 세로입니다.

삼성 갤럭시 S5 풍경.

iPad 초상화.

iPad 풍경.

여기에서 장치 간의 상당한 차이를 볼 수 있습니다. Samsung Galaxy S5의 작은 화면은 장치를 세로 또는 가로 방향에 관계없이 배경 표시를 허용하지 않으며 표시되는 내용은 사용 가능한 공간에 맞게 조정됩니다.

iPad에서 동일한 사이트를 볼 때 방향에 관계없이 항상 배경이 표시되지만 보이는 것과는 약간의 차이가 있습니다.

배경 디자인에 대한 최상의 개념 (순서대로)

1. 단색 (또는 색 없음)

2. 사진 (스트레치)

3. 작은 타일 (완벽한 원활한)

4. 큰 타일 (완벽한 원활한)

피해야 할 것은 눈에 띄지 않는 방식으로 수행할 수 있는 경우가 아니면 사진 배경을 타일링하는 것입니다. 스트레칭은 일반적으로 사진 배경에 가장 적합하거나 사전 정의된 공간 내에서 배경을 제한하는 데 적합합니다.

큰 튀는 배경의 시대는 단지 보기만을 위한 전문 사이트를 제외하고는 거의 죽었습니다. desktop. 대부분의 배경은 다음을 위해 디자인되었습니다. desktops는 전화로 볼 때 잘 보이지 않습니다.

해결 방법은 CSS 파일에 많은 중단 점을 설정하고 다음에서 디자인하는 것입니다.divi각 중단 점에 대해 이중 배경이 있지만 평소와 같이 장치 유형을 알고 있더라도 사용 가능한 수직 공간을 계산할 수 없다는 문제가 있습니다.

헤더 이미지 제공

보그 단 란 세아

Bogdan은 Inspired Mag의 창립 멤버로서이 기간 동안 거의 6 년의 경험을 축적했습니다. 여가 시간에는 클래식 음악을 공부하고 시각 예술을 탐구하는 것을 좋아합니다. 그는 또한 수정 프로그램에 상당히 집착하고 있습니다. 그는 이미 5를 소유하고 있습니다.

코멘트 0 응답

댓글을 남겨주세요.

귀하의 이메일 주소는 공개되지 않습니다. *표시항목은 꼭 기재해 주세요. *

평점 *

이 사이트는 Akismet을 사용하여 스팸을 줄입니다. 댓글 데이터 처리 방법 알아보기.