2021 년 최고의 웹 사이트 디자인

1/3 페이지 : 액티브 컬러의 네버 랜드

모든 웹 경험이 획기적이고 시각적으로 놀랍고 예상치 못한 놀라움으로 가득 차있을 필요는 없습니다. 대부분의 경우 웹 사이트 방문자는 원하는 정보를 빠르고 쉽게 찾고 싶어합니다.

그러나 패션 캣워크의 더 이상한 의상이 번화가에서 볼 수있는 더 웨어러블 한 옷에 미묘한 영향을 미칠 수있는 것처럼 웹 디자이너는 웹 사이트 제작의 최고 수준에 대해 적어도 절반을 주시하는 것이 좋습니다. 지나치게 화려 해 보이는 것조차도 다른 방식으로 자신의 디자인에 통합 할 수있는 영감과 아이디어를 줄 수 있습니다.

이를 염두에두고 우리는 진정으로 한계를 뛰어 넘은 디자인을 되돌아 봅니다. 이러한 사이트는 방문자가 원하는 것을 방문자에게 제공하는 기본 작업을 소란스럽지 않게 수행 할뿐만 아니라 웹 사이트가 신선하고 창의적이며 독창적 인 방식으로 어떻게 보이고 기능 할 수 있는지 다시 생각합니다.



01. 네버 랜드 바이 액티브 컬러

네버 랜드 홈페이지

내비게이션은 마법의 보트를 기반으로합니다.(이미지 출처 : Active Color)

유흥 장소를 홍보하는 웹 사이트를 방문하면 화려하고 시끄럽고 다채롭고 약간 화려한 것을 기대합니다. 그러나 네버 랜드 로스 앤젤레스에서 가장 고급스러운 나이트 라이프 두 곳인 The Edison과 Clifton ’s Republic이있는 곳은 좀 더 세련된 것을 계획하고 싶었습니다. 그래서 그들은 활성 색상 , 그들은 평범하지 않은 웹 사이트를 만들었습니다.

사용자 정의 손으로 그린 ​​일러스트레이션의 애니메이션을 기반으로 섀넌 스타 메이 , 그것은 진정 아름다움입니다. 우리는 창립자이자 크리에이티브 디렉터 인 Damjan Krajacic과 이야기를 나누면서 어떻게 만들어 졌는지 알아 보았습니다.

이 특이한 공연을 어떻게 얻었습니까?

우리는 The Neverlands의 고객이자 소유주 인 Andrew Meieran이 LA 다운타운에 처음으로 첫 번째 장소를 열었을 때부터 함께 일하고 있습니다. Edison은 역사적인 LA Higgins 건물의 지하에 지어진 진정으로 멋진 야간 장소로, DTLA의 새로운 미래를 알리는 발전소의 발전기와 산업 요소를 보존하고 있습니다.

나중에 우리는 Clifton의 Republic 웹 사이트를 포함하여 동일한 고객과 여러 프로젝트를 더 진행했습니다. 이 프로젝트가 시작되었을 때 우리는 이미 브랜드와 장소에 매우 깊이 몰두했으며 클라이언트와 그의 탁월하고 비전 있고 특이한 스타일과 매우 가깝습니다.

밤하늘을 달리는 남자를 보여주는 네버 랜드 사이트의 스크린 샷

Active Color의 개념은 맞춤형 손으로 그린 ​​일러스트레이션 디자인 접근 방식과 시차 중심의 대화 형 랜딩 페이지로 전환되었습니다.(이미지 출처 : Active Color)

요약은 무엇입니까?

클라이언트는 이러한 비전 공간을 디지털 세계로 변환하는 방법에 대한 환상적인 비전을 항상 가지고있었습니다. 그들은 모험심, 호기심, 평범함에서 벗어나 어린애 같은 판타지 세계로의 탈출을 원했습니다. 이 프로젝트는 2 년 넘게 오랜 기간 동안 고객과의 공동 창작 노력이었습니다. 전체적인 개념은 시간이 지남에 따라 상당히 동일하게 유지되었지만이를 실행하는 방법에 대한 아이디어는 지속적으로 진화하고 있었고 종종 우리는 일러스트레이션이나 특정 종류의 움직임 또는 아트 워크에 대해 세밀한 부분을 다루 곤했습니다.

우리는 일반적으로 훨씬 더 명확하고 전략적이고 정의 된 프로세스를 가지고 있지만이 경우 프로젝트의 예술적 특성이 여러 가지 방법으로 우리를 안내하도록 결정했습니다. 클라이언트가 매우 창의적이고 예술적이기 때문에 프로젝트를 성공적으로 완료 할 수있는 다른 방법은 없었습니다. 때로는 신선하고 예상치 못한 것을 만들기 위해 규칙을 구부려 야합니다.

올빼미에게 빛을 들고있는 나무에있는 여자를 보여주는 네버 랜드 사이트의 스크린 샷

전체적인 음색이 재미 있고 환상적입니다.(이미지 출처 : Active Color)

당신의 시각적 영감은 무엇입니까?

웹 사이트의 컨셉과 색상은 주로 Clifton 's Republic과 The Edison의 멋진 인테리어에서 영감을 받았습니다. 말 그대로 몰입 할 수있는 환상적인 세계입니다. Clifton 's는 동일한 5 층 건물 내에 7 개의 별개의 장소로 구성되어 있지만 , 각 공간에는 근본적인 따뜻함이 있으며 따뜻한 청동, 구리 및 금색 톤이 감각을 관통합니다. 이 색 구성표를 각 장소 또는 랜딩 페이지에 좀 더 적합하도록 확장하고 싶었으므로 파스텔 블루, 청록색 및 기타 다양한 색상을 포함하도록 색상 팔레트를 넓혔습니다.

일부 색상 팔레트는 손으로 그린 ​​일러스트레이션에서 뚜렷하게 영감을 받았으며 이에 맞게 페이지를 구부 렸습니다. 다른 경우에는 일러스트레이션의 색조와 색상을 조정하여 모두 조화를 이루고보다 일관된 스타일에 맞도록했습니다.

일러스트 레이터에서 원근 격자를 제거하는 방법

누가 삽화를 만들었습니까?

삽화는 클라이언트가 의뢰 한 Shannon Stamey의 작품입니다. 클라이언트 및 Stamey와 함께 Stamey가 완벽하게 실행 한 랜딩 스크린과 일러스트레이션을 개념화했습니다. 손으로 칠할 수없는 것은 스톡 이미지 나 공개 도메인 아카이브에서 찾을 수있었습니다. 클라이언트 Andrew Meieran은 그 시대의 예술에 대한 놀라운 지식과 열정을 가진 역사가이기 때문에 많은 요소를 찾고 결정하는 데 중요한 역할을했습니다.

선으로 그린 ​​스케치를 보여주는 Neverlands 사이트의 스크린 샷

Active Color는 거꾸로 작업하여 타이포그래피가 예술과 일치하도록했습니다.(이미지 출처 : Active Color)

타이포그래피에 어떻게 접근 했습니까?

이것은 실용성과 기회의 균형이었습니다. 여기서 작업 할 시각적 아이덴티티 시스템, 미리 정의 된 스타일 또는 로고가 없었기 때문에 아트웍과 일치하는 글꼴을 찾기 위해 거꾸로 작업했습니다. 우리는 사물이 인간적이고 자연 스러우며 유용하게 느껴지지만 동시에 우리의 선택에있어 약간 마법처럼 느껴지 길 원했습니다.

사이트 구축에 사용한 기술은 무엇입니까?

백엔드에 전원을 공급하기 위해 사용자 지정 WordPress 설치를 사용했습니다. 웹 사이트는 많은 사용자 정의 JavaScript 및 CSS를 사용하여 프런트 엔드에 완전히 사용자 정의 코딩되어 있습니다. 랜딩 페이지 이동의 주요 엔진으로 Matthew Wagerfield의 멋진 오픈 소스 패럴 랙스 스크립트를 수정했습니다. 또한 사용자가 스크롤 할 때 The Edison, Clifton ’s Republic 및 Pacific Seas와 같은 장소 페이지에서 발생하는 많은 다른 맞춤 기능을 구축하여 마치 도시로 내려가거나 나무 아래로 내려가거나 바다로 내려가는듯한 느낌을줍니다.

지금까지 가장 큰 도전은 시차 동작으로 움직이는 수많은 투명한 PNG로 부드러운 브라우저 환경을 만드는 방법이었습니다. 여러 브라우저에서 이미지와 스크립트를 최적화하기 위해 많은 시간이 소요되었습니다.

환상적인 카드 선택을 보여주는 Neverlands 사이트의 스크린 샷

누락 된 시각적 자산 또는 일러스트레이션은 스톡 이미지를 통해 제공되었으며 웹 사이트의 스타일과 개념에 맞게 예술적으로 더 조작되었습니다.(이미지 출처 : Active Color)

전환은 매우 효과적입니다. 어떻게 만들었습니까?

많은 조정과 실험으로! 필요에 따라 추가 일러스트레이션을 요청할 수있는 데 다소 제한이 있었기 때문에 때때로 조각을 함께 패치하고 아트 워크를 확장하고 조작해야했습니다. 자산이 준비되면 흐름을 원활하게 만들기 위해 전환을 조정하는 데 많은 시간이 걸렸습니다. 우리가 시각적으로 원하는 것과 제한된 렌더링 성능으로 각 브라우저에서 기술적으로 수행 할 수있는 것 사이의 미세한 균형이었습니다.

사이트를 모바일에서 어떻게 만들었나요?

모바일로의 번역은 실제로 상당히 순조로 웠습니다. 이 프로젝트는 데스크톱이 많았지 만 랜딩 페이지가 처음부터 생각했던 방식이기 때문에 모바일에서 잘 작동한다는 것을 알고있었습니다. 이미지 크기가 훨씬 줄어들 기 때문에 전환이 부드럽다는 것을 알고있었습니다. 마지막으로 작은 화면에 너무 많은 항목을 표시 할 수 없으므로 항목을 줄이고 UI를 단순화 할 수있었습니다. 이 모든 것이보다 부드럽고 직관적 인 모바일 경험으로 이어졌습니다.

판타지 일러스트레이션 선택

다양한 랜딩 페이지 및 자산에 대한 자세한 개념 및 스토리 보드(이미지 출처 : Active Color)

배운 가장 큰 교훈은 무엇입니까?

그 인내가 미덕입니다. 우리는 확실히이 프로젝트에서 많은 것을 가지고 있어야했습니다. 요점은 무언가를 잘하기 위해서는 기꺼이 시간을 할애하고 노력해야하며 인내가 필요하다는 것입니다.

기술적이고 예술적인 측면에서,이 프로젝트는 우리가 좋아했던 플래시 내장 사이트로 거슬러 올라가는 즉시 사용 가능한 사이트를 얼마나 좋아하는지 상기시켜주었습니다. 그 당시 인터넷은 훨씬 다양하고 틀에 얽매이지 않았습니다. 그러나 최근의 브라우저 개발을 통해 우리는 다시 한 번 상자에 들어 가지 않는 뛰어난 경험을 달성 할 수 있으며 이러한 인식을 통해 향후 프로젝트에서 우리를 안내하게되어 기쁩니다. 이 경우 우리는 미학과 독창성을 높이 평가하는 매우 독특한 고객과 함께 일하게되어 운이 좋았습니다.

다음 페이지 : 지금까지 2020 년의 2 위 웹 사이트 디자인 알아보기 ...

Maya에서 텍스처를 적용하는 방법

Creative Bloq는 Adobe Stock과의 유료 파트너십의 일부로이 콘텐츠를 제작했습니다. 이 기사의 내용은 완전히 독립적이며 Creative Bloq의 편집 의견을 반영합니다.

  • 1

현재 페이지: 액티브 컬러의 네버 랜드

다음 페이지 The Mill by Studio Output