웹 디자인에서 '얼룩' 배경을 사용하여 관심 끌기

좋은 웹사이트는 작은 것들에 관한 것입니다. 모든 세부 사항이 중요합니다. 비록 그것이 수행해야 하는 유일한 역할은 그림자 속에 머무르는 것뿐인 것처럼 보일 수도 있습니다. 오늘 우리의 스포트라이트는 배경에 빛난다.

트렌드의 관점에서 배경에 대해 이야기한지 오래되었습니다. 크리에이티브는 첫인상을 만드는 데 도움이 되기 때문에 전경을 차지하는 것들에 집착합니다. 그러나 인터페이스의 핵심 요소는 항상 중요합니다. 그들은 우리가 새로운 것을 만들 때마다 우리 자신에 대해 상기시킵니다. 그리고 그들이 다시 주목의 대상이 되는 것은 시간 문제일 뿐입니다.

그래서 마침내 하나뿐인 배경으로 흥미로운 일을 할 때가 왔습니다. 가장 큰 걸림돌은 프로젝트 전체에 견고한 기반을 제공하기 때문에 과감한 조치를 취하기 어렵다는 점이다. 사치스러운 것을 만들고 동시에 모든 것을 망치지 않으려면 실용적인 부분과 재미있는 부분 사이의 균형을 맞춰야 합니다.

그리고 아래의 디자이너들은 완벽한 솔루션인 얼룩덜룩한 배경을 찾은 것 같습니다. 그들은 두 가지 요구 사항을 모두 충족하며 자신을 작은 트렌드로 선언하는 신선한 공기처럼 보입니다. 자세히 살펴보겠습니다.

환자

모바일 애플리케이션의 표준 프로모션 웹사이트입니다. 본질적으로 여기에는 특별한 것이 없습니다. 자연 환경에서 응용 프로그램을 보여주는 iPhone 모형과 같이 제품을 소개하기 위한 표준 트릭 팩을 찾을 수 있습니다. 또한 몇 가지 생생한 클릭 유도문안 버튼과 기본 구조가 있습니다.

하지만 단번에 시선을 사로잡는 것은 배경이다. 자연스럽게 시선을 앱 쪽으로 밀어주는 큰 스팟 같아요. 그리고 동시에 전체적인 미학에 사랑스러운 묘미를 줍니다. 부드러운 곡선과 부드러운 색상 덕분에 우아하고 세련된 느낌이 들며 표준 웹 사이트가 사소해 보이지 않도록 합니다.

이것은 아주 작은 세부 사항에 불과하지만 여기서 확실히 차이를 만듭니다. 정적이며 화면의 1/3만 차지하지만 군중에서 눈에 띄기에 충분합니다.

이콤리

이전 예와 마찬가지로 이 웹사이트는 간단한 웹사이트입니다. 그러나 이번에는 디지털 에이전시를 나타냅니다. 웹사이트의 구조는 관습적이며 디자인도 마찬가지입니다. 기발한 디테일이나 드라마틱한 삽화가 없습니다.

여기에서 유일하게 화려한 것은 배경입니다. 위에서 아래로 부드럽게 움직이는 중간 크기의 두 개의 흰색 방울이 있습니다. 그들은 측면에 위치하고 있으므로 주요 태그 라인과 CTA에서주의를 산만하게하지 않습니다. 그러나 그들은 여전히 ​​인터페이스에 약간의 향신료를 추가합니다.

또한 바닥글 바로 앞 섹션과 일부 내부 페이지에 동일한 접근 방식이 적용된 것을 볼 수 있습니다. 이러한 방식으로 모든 것이 연결되어 조화로운 디자인을 만듭니다.

역동적인 반점이 있는 배경은 웹사이트의 비즈니스 같은 분위기와 완벽하게 조화를 이룹니다. 프로젝트의 톤과 잘 어우러지며 로고타입과 반향하여 브랜드 아이덴티티를 뒷받침합니다.

디지털 팬더

앞서 언급한 두 가지 예는 여러 지점을 사용하지만 Digital Panda의 크리에이티브 팀은 하나만 사용하는 것을 선호합니다(하지만 꽤 큰 지점). 아름다운 보라색 얼룩은 전경 요소를 지원하는 동시에 깨끗한 흰색 인터페이스가 너무 단순화되어 보이지 않도록 보호합니다. 일러스트레이션, CTA, 타이포그래피와 완벽하게 어울립니다.

이 트릭이 전체 웹사이트에서 추적된다는 것을 알 수 있습니다. 다양한 섹션은 얼룩진 배경의 이점을 활용하여 일관된 사용자 경험을 제공합니다.

아트포웹

Art4Web 뒤에 있는 팀은 온라인 방문자에게 깊은 인상을 주기 위해 시차 접근 방식에 크게 의존합니다. 여기 영웅 영역의 핵심에 있으며 모형을 함께 붙입니다. 얼룩덜룩한 배경에는 액체 표면을 모방하기 위해 천천히 움직이는 여러 얼룩이 있습니다. 로고타입과도 조화를 이루어 전체적인 디자인에 브랜드 아이덴티티를 부여합니다.

솔루션은 장갑처럼 맞습니다. 전경의 컴포지션을 강조 표시하고 프로젝트에 역동성을 추가하여 남용된 시차 접근 방식을 멋지게 비틀었습니다.

바디모빈 솔루션

Bodymovin Solutions는 영웅 영역이 이름에 걸맞게 구현되도록 하는 일러스트레이션 접근 방식에 베팅합니다. 이전 예에서와 같이 얼룩덜룩한 배경이 부분적으로 애니메이션됩니다. 그리고 이 반점들은 덩어리 같은 모양을 가지고 있기 때문에 그들의 행동은 예상대로 액체의 부드러운 움직임을 연상시킵니다. 작은 사람 그림을 완벽하게 보완하는 견고한 기반 역할을 합니다.

여기에서 얼룩덜룩한 배경은 웹사이트를 매혹적인 방식으로 여는 스플래시 화면의 일부로 사용됩니다. 처음부터 일관된 경험을 제공합니다.

서클 성장

명판에서 짐작할 수 있듯이 여기 원은 프로젝트의 핵심이자 영혼입니다. 따라서 이 모양이 홈 페이지에 표시되는 것은 놀라운 일이 아닙니다. 배경도 예외는 아니다.

아름다운 채색을 가진 크고 무겁게 흐릿한 여러 개의 원이 뒷면에 캔버스를 형성합니다. 이전 예에서와 마찬가지로 그것들도 작동합니다. 시각적 아이덴티티에 기여하고 브랜드 아이덴티티를 강화하며 페이지를 돋보이게 만드는 것은 말할 것도 없습니다.

그리플란 디자인

우리는 일반적으로 얼룩이 쇼를 실행하는 얼룩덜룩한 배경을 고려했지만 실제로 Griflan Design 뒤에 있는 팀과 같은 다른 모양을 채택하는 것을 막는 사람은 없습니다.

원래 얼룩덜룩 한 배경은 공식 웹 사이트의 영웅 영역을 표시합니다. 두 개의 기하학적 모양(사각형과 반지의 절반)과 작은 윤곽선 아이콘이 콘텐츠의 기반을 만듭니다. 그에 걸맞게 모든 것이 움직이고 있다. 큰 모양은 천천히 움직이는 반면 작은 모양은 매우 빠르게 움직여 캔버스에 매우 흥미로운 느낌을 줍니다.

에 딱 맞다

얼룩덜룩한 배경의 경우 선호하는 모양은 얼룩으로 보입니다. 여기에는 몇 가지 이유가 있습니다.

첫째, 부드러운 곡선이 덜 산만하여 완벽한 배경을 만듭니다. 한편으로 이러한 배경은 디자인을 풍부하게 합니다. 다른 한편으로는 전경에 있는 콘텐츠와 경쟁하지 않습니다. 둘째, 얼룩은 요즘 꽤 인기 있는 액체 동작을 적용하는 데 적합합니다.

그런 다음 실험에도 좋습니다. 강제로 다양한 방향으로 움직이거나 반대로 함께 병합하여 시각적으로 흥미롭게 보일 수 있습니다.

마지막으로 정적 모드에서도 멋지게 보이며 깨끗한 흰색 표면에 특별한 풍미를 제공합니다.