어떻게 하면, 신규방문자를 사로잡을 수 있을까?

‘2017년, 주목할만한 웹 디자인 트렌드 6’ 를 통해, 랜딩페이지에서 움짤과 애니메이션의 사용이 많아질 것이라는 내용을 전해드린 적 있는데요 🙂 모바일로의 전환이 많이 이뤄졌지만, 여전히 웹은 유효하며 ‘랜딩페이지’의 경우 오프라인 상점의 ‘파사드’와 같은 역할을 하기에 더욱 중요하다고 생각합니다. 이에 오늘은, 웹사이트 랜딩페이지의 배경을 구성하는 다섯가지 아이디어를 정리해보려고 합니다.

 

이미지와 기하학적 패턴의 결합

http://www.newcastlenow.org.au/
http://www.high45.com/

전체 이미지와 일러스트는 여전히 웹페이지의 배경을 책임지는 유용한 콘텐츠 중 하나인데요! 전체 이미지를 통해 서비스 및 제품에 대한 컨셉을 모두 보여주긴 힘들지만, 반대로 적합한 이미지를 찾아 적용한다면 방문자들에게 좋은 첫인상을 심어줄 수 있습니다. 최근에는 시각적 효과를 위해 이미지와 기하학적 요소를 결합해 활용하는 경우가 많아지고 있는데요! 소용돌이 모양에서 직사각형에 이르기까지, 사진에 담긴 메시지를 더욱 효과적으로 전달하기 위한 방법 중 하나로 유용하게 쓰일 수 있을 것 같습니다. 다만, 단지 시각적으로 아름다운 것만 고려할 것이 아니라 방문자가 특정 동작을 하도록 유도한다거나, 이미지 전체를 집중해서 볼 수 있도록 보통 잘 보지 않는쪽에 포인트를 주는 등 명확한 목적이 있어야 더 효율적인 배경으로 활용될 수 있을 것 같습니다.

 

회색톤의 활용

https://www.seedlipdrinks.com/
https://www.paul-valentine.com/

회색톤은 흰색에 비해 더 다양한 느낌을 줄 수 있다는 장점이 있는데요! 무엇보다 함께 쓰이는 컬러에 따라 풍부하고 따뜻하거나 반대로 차갑고 세련된 느낌을 줄 수 있다는 점에서 매력적인 배경컬러입니다. 또한, 위의 이미지를 통해 볼 수 있듯, 제품 또는 서비스를 돋보이게 해주는 장점도 있죠. 아직 국내에서는 회색톤을 배경으로 활용하는 사례를 자주 접하진 못했는데 – 해외에서는 자주 접할 수 있고, 점점 더 많이 보이는 것 같네요 🙂

 

밝은 색상의 레이어 활용

http://barkdesignchicago.com/
https://www.deskpass.com/?discount=true

밝은 색상을 주인공으로 만드는 것은, 전체이미지와 기하학적인 도형을 활용하는 것만큼 주목도를 높일 수 있는 방법입니다. 시각적 주목도가 떨어지는 곳에 방문자들이 집중할 수 있도록 도와줄 뿐만아니라 여러개의 콘텐츠를 랜딩페이지에 담아야 하는 경우 효과적으로 활용될 수 있죠! ‘Material Design’이 곳곳에 사용되기 시작하면서, 밝은 색상을 활용한 레이어가 더 자주 보이고 있죠!

 

비대칭의 활용

http://www.vasetheme.com/main/
http://napluxuryguesthouse.it/en/home

비대칭만큼, 대담하게 보일 수 있는 방법도 없을 것 같은데요 🙂 이미지와 텍스트가 포함된 콘텐츠를 비대칭으로 구성하거나, 제품 및 서비스의 모습을 한쪽으로 치우치게 만들어 전체적인 구조를 비대칭으로 구성하는 등 시각적으로 대담하게 노출시키는 경우가 많아지고 있습니다 🙂

 

추상적인 내용의 활용

http://www.deleteagency.com/
http://www.welovenoise.com/

추상적인, 무언가를 활용하는 것은 어떨까요? 색상과 몇몇 도형들을 활용하여 다른곳에서는 볼 수 없는 시각적인 즐거움을 줄 수 있기 때문입니다. 오늘 정리하 내용 중, 구성이 가장 어렵긴 하지만 강렬한 첫인상을 주는데 있어 이만한 내용도 없을 것 같네요 🙂

*위 내용은 ‘Designshack’의 5 Modern Website Background Ideas for 2017을 정리한 것입니다.