웹 사이트를위한 배경 디자인

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

오늘날 배경을 올바르게 만드는 것은 예전보다 더 어려우며 새로운 도전 과제를 제시하면서 배경이 가진 잠재력을 제한합니다.

예를 들어, 이전 시대의 배경은 실제로 디자인의 실용적인 부분으로 사용될 수 있습니다. 예를 들어, 시청자의 관심을 중요한 것에 지시하기 위해 화살표를 붙일 수 있습니다.

변경이 필요한 이유는 반응 형 디자인이 필요하고 사람들이 사용중인 다양한 화면 크기와 화면 유형이 다양하기 때문입니다.

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

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

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

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

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

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

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

사이트 배경의 유일한 장점은 여러 페이지에 걸쳐 사이트 정체성을 유지하는 데 도움이된다는 것입니다. 그러나이 목표를 달성 할 수있는 다른 요소가 있기 때문에 더 큰 장점은 아닙니다.

단점은 많다. 배경은 사이트 응답 성과 관련하여 추가 문제를 발생 시키며 오래되지 않도록 자주 업데이트해야합니다.

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

배경을 사용하지 않는 데는 여러 가지 이유가 있기 때문에 최상위 웹 사이트의 발자취를 따르고 전체 배경 아이디어를 한 번에 버릴 수도 있습니다. 그러나 간략한 요약으로 사이트에 배경이 필요하다고 주장하면 어떻게 할 수 있습니까? 이것이이 기사의 나머지 부분에서 해결하려고하는 것입니다.

배경이 포함되어야합니다

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

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

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

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

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

더 많은 분리를 만들수록 더 많은 제어력을 얻을 수 있습니다. 지금은 그다지 중요하지 않은 느낌이 들지만 나중에 나중에 중요한 요소가되는 경우가 종종 있습니다.

이해해야 할 가장 중요한 것은“배경”은 내용이 아닌 것입니다. 따라서 페이지에 있지만 내용이 아닌 텍스트 또는 이미지는 배경의 일부로 간주되지만 모든 사람이 그렇게 분류하지는 않습니다.

프레임

웹 디자인 초기에 프레이밍은 콘텐츠가 배경과 관련이 있어야하는 위치를 알아내는 간단한 문제였습니다. 그러나 오늘날 반응 형 디자인에서는 일반적으로 그보다 더 복잡합니다.

반응 형 디자인을 사용하면 프레임 문제를 처리 할 수있는 방법은 두 가지뿐입니다. 첫 번째 옵션은 사용 가능한 화면 크기를 기준으로 콘텐츠 및 배경 이미지의 크기를 조정하는 것입니다. 이것은 설계 무결성이 가장 중요한 요소 일 때 최적이지만, 이는 드문 상황입니다.

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

그런데이 "디자인 무결성"문제는 단순히 어떤 종류의 화면을 보더라도 디자인이 항상 동일하게 보입니다. 그 반대는 컨텐츠가 어떤 종류의 화면에서 보더라도 항상 동일하게 보이는 위치입니다.

응답 성을 위해 스케일링 사용

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

이 기술의 실제 예를 확인해 봅시다. 세로 모드에서 Samsung Galaxy S5부터 시작합니다 (이 이미지는 기사에 맞게 조정되므로 실제로 볼 수있는 텍스트는 장치 자체에서 읽을 수 있습니다).

가로 모드에서 보이는 모습입니다 (전화 통화를 제외하고는 항상 가로 방향으로 전화를하는 것이 좋습니다. 그러나 사람들은 여전히 ​​전화를 세로 방향으로 잡고 있어야합니다.

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

그리고 풍경.

스케일링을 사용할 때주의 할 점은 세로보기에 많은 수직 공간이 낭비 될 수 있다는 점을 제외하고는 다른 장치와 해상도간에 약간의 차이가 있다는 것입니다.

실제로 배경과 내용 부분에 서로 다른 방법을 사용하는 것이 더 좋으므로 메뉴 항목은 항상 2x2 레이아웃으로 유지되는 대신 1x4 격자로 줄 바꿈되지만 그 방식이 아닌 이유는 사용 가능한 수직 공간의 양을 예측하는 것은 불가능합니다.

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

단계별 숨김 및 공개 응답 사용

보다 실용적인 시나리오와 대부분의 디자이너가 가장 많이 사용하고자하는 것은 배경을 보여줄 공간이 충분하지 않으면 배경 (또는 그 일부)을 간단히 단계적으로 제거 할 수있는 디자인입니다. 최대 관심을 얻는다.

이 방법을 사용할 때의 차이점에 대한 예는 다음과 같습니다. 동일한 장치와 방향을 사용하여 설명하겠습니다. 먼저 삼성 갤럭시 S5 초상화입니다.

삼성 갤럭시 S5 풍경.

iPad 초상화.

iPad 풍경.

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

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

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

1. 단색 (또는 색 없음)

2. 사진 (스트레치)

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

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

눈에 띄지 않는 방식으로 사진 배경을 바둑판 식으로 배열하지 않는 한 피해야합니다. 스트레칭은 일반적으로 사진 배경에 적합하거나 사전 정의 된 공간 내에 제한하는 데 가장 좋습니다.

크고 화려한 배경의 시대는 데스크탑에서만 볼 수있는 전문 사이트를 제외하고는 거의 죽었습니다. 휴대 전화에서 볼 때 데스크톱 용으로 설계된 대부분의 배경은 좋지 않습니다.

해결 방법은 CSS 파일에 많은 수의 중단 점을 설정하고 각 중단 점에 대한 개별 배경을 디자인하는 것이지만 일반적으로 장치 유형을 알고있는 경우에도 사용 가능한 수직 공간을 계산할 수 없다는 문제가 있습니다. .

헤더 이미지 제공

보그 단 란 세아

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