눈길을 사로잡는 레이아웃
웹사이트에 처음 접속했을 때, 그러니까 신규 방문자들을 사로잡을 수 있는 방법에는 여러가지가 있는데요! 이와 관련된 내용들을 지금까지 몇몇 주제에 맞춰 ‘지금 써보러 갑니다’를 통해 발행하기도 했습니다.
그 중, 웹사이트의 전반적인 ‘디자인’과 ‘컨셉’을 반영하여 전달할 수 있는 ‘레이아웃’은 가장 중요한 요소 중 하나가 아닐까 싶습니다. 그래서 오늘은 정보를 탐색하기 위해 웹서핑을 하며 만나게된 매력적인 레이아웃을 지닌 웹사이트 7개를 소개드릴까 합니다.
Heco Partners
시카고에 위치한 디자인 에이전시 ‘Heco Partners’. Awwwards의 ‘Site of the Day’로도 선정된 웹사이트에 방문하면 가장 먼저 거대한 ‘물결’을 만날 수 있는데요! 랜딩페이지의 물결은 하단으로 이어지는 다양한 콘텐츠에서도 매력적으로 쓰이고 있었습니다. 자신들이 진행한 프로젝트를 보여줌에 있어서도, 웹사이틀 통해 볼 수 있는 내용들을 보여줌에 있어서도 과하지 않게 활용되고 있는 물결은 방문자로 하여금 어떤 내용에 집중해야 하는지를 명확하게 보여주는 것 같네요! 어제 발행했던 ‘매력적인 포트폴리오 페이지‘를 작성할 때 만났더라면, 꼭 추가했을 것 같은 곳!
Nelu Cebotari Portfolio
컬러의 배색이 가장 먼저 눈에 들어오는, Branding과 UX/UI 디자인을 하는 ‘Nelu Cebotari’의 개인 포트폴리오 사이트입니다. 개인 작업물을 보여주는데 있어, 전체를 먼저 보여주지 않고, 특정 작업물을 선택했을 때 구체적인 내용을 보여주는 방법이 매력적인 곳입니다. 또한 기존에 쉽게 볼 수 없었던 네비게이션을 활용하고 있기에 더욱 색다른 느낌을 받은 곳이기도 하고요!
San Francisco Museum of Modern Art
전시를 진행하는 공간이라는 점을 가장 잘 보여주고 있는 곳이 아닐까 싶은 ‘San Francisco Museum of Modern Art’의 웹사이트입니다. 가장 재미있었던 점은, 랜딩페이지에서 방문객들이 전시작품들을 보는 시점을 보여주는 방법이었는데요! 그들의 시선을 따라 자연스레 내부 공간을 확인할 수 있었습니다. 어렵지 않게, 직관적으로 구성된 메뉴들도 공간에 대한 정보를 얻는데 도움이 많이 되었고요!
Techhire
‘TechHire’는 기술 산업 분야의 사람들이 조금더 쉽게 자신에게 맞는 일을 찾을 수 있도록 도와주는 서비스인데요! 이미지로만 저장해 제대로 보여드리지 못하지만, 위첫 번째 이미지 중 2020숫자 뒤의 _가 랜딩페이지에서 계속 깜빡이는 것을 볼 수 있었습니다. 자신들이 전하고자 하는 메시지에 방문자들이 집중할 수 있는 아주 작은 장치를 마련해둔 것이죠. 또한 스크롤을 통해 페이지를 전환할 때마다 오른쪽 하단에 상세 내용을 볼 수 있도록 유도하는 팝업도 상당히 재미있게 느껴졌습니다.
Creainternational
마우스 클릭 없이, 스크롤만으로도 이들이 어떤 일을 하고, 어떤 작업들을 했는지 확인할 수 있는 곳! 롱스크롤의 경우 많은 곳에서 쓰이고 있지만, 애니메이션이 중복되거나, 내용을 요약해서 보여주는데 있어 불편한점이 종종 있었는데요! ‘CREA’의 경우 섹션이 전환될 때마다 작업물을 전체 이미지로 보여준 후, 왼쪽으로는 프로젝트에 대한 내용을 간략하게 보여주는 방법으로 이를 해결하고 있었습니다.
Presentation
호주의 퍼스에 자리잡은 디자인 에이전시 ‘Presentation’. 화려하지는 않지만, 다양한 도형과 패턴을 활용하여 자신들의 작업물들을 보여주고 있었습니다. 비대칭으로 레이아웃을 잡아 놓았지만, 작업물이라는 콘텐츠에 집중하는데 있어 중요한 역할을 해주고 있었고요! 확실히, 비대칭을 잘 활용하면 주목도를 높이는데 많은 도움을 주는 것 같습니다.
