창의적인 웹 사이트 디자인의 비밀

(Aline Kesting) (2020 년 9 월 2 일)

웹 사이트 디자인에는 많은 작업이 포함되지만 창의적인 사이트와 관련하여 더욱 중요하다고 생각되는 한 가지는 디자이너와 개발자 간의 긴밀한 협업입니다.

새로운 14islands.com을 출시 한 후 몇 주 전에 물결 모양 호버 애니메이션을 만드는 방법에 대한 질문을 받았습니다. 이러한 상호 작용의이면에있는 코드 마법은 향후 블로그 게시물 (계속 지켜봐주십시오!)에 올 것이지만 실제로 이러한 애니메이션을 디자인 한 방법에 초점을 맞추고 싶습니다. 놀랄 수도 있습니다.

프로세스를 거꾸로 뒤집습니다.

새 프로젝트를 시작할 때 어떤 유형의 워터 폴 프로세스에 빠지기 쉽습니다. 사용자 조사에서 디자인에 이르기까지 클릭 가능한 프로토 타입으로 끝납니다. 도중에 팀 체크 포인트가 있지만 일반적으로 프로토 타입이 이미 만들어 질 때까지 설계 및 개발 공동 작업이 시작되지 않습니다. 이 프로세스는 특정 유형의 프로젝트, 특히 더 많은 전략이있는 프로젝트에 적용되지만 가장 창의적인 프로젝트는 아닙니다.

새 웹 사이트 디자인 프로세스를 시작했을 때 동일한 방식으로 접근하기로 결정했습니다 ( 우리는 창의적인 금요일에 접근합니다), 실험은 종종 흥미 진진한 신기술에서 영감을 얻습니다. 즉, 창의적인 개발자가 아이디어를 가진 사람이 될 수 있고 디자이너는 이에 대한 개념을 구축하는 데 도움을 줄 수 있습니다. 이런 식으로 우리는 처음부터 항상 풀 타임으로 함께 디자인하고 코딩합니다. 🚀

코드로 모션 개념 디자인

이 공유 디자인 프로세스의 이점은 매우 간단합니다. 종종 우리 디자이너는 완벽한 픽셀 디자인을 상상하고 개발자가 코드로 해당 디자인을 가장 잘 모방하는 방법을 알아 내도록합니다. 그러나 특히 창의적인 웹 사이트의 경우, 우리가 상상하는 것이 항상 실현 가능하지 않거나 똑같지 않거나 성능이 많은 경험으로 바뀔 수도 있습니다. 따라서 최소한의 디자인을 다듬는 데 상당한 시간을 투자 한 후에는 시간이 없어지고 가장 적합한 솔루션을 선택하게됩니다.

WebGL, Three.js 및 CSS의 모든 기회를 이해할 수 있다면 애니메이션의 한계를 보지 않고 기술에 따라 경계를 넓히고 디자인 개념을 발전시킬 수 있습니다. 크리에이티브 개발자가 디자인 프로세스에 참여할 때 바로 그렇게됩니다. 그들은 우리의 사고 방식에 도전하고 우리가 스스로 생각할 수없는 독특한 솔루션을 테이블에 제공합니다. 그리고 그 지식을 강력한 개념과 일치시키는 것은 마법으로 이어집니다. ✨

웹 사이트와 관련하여 몇 주 동안 아이디어를 탐색하고 스크랩하고 처음부터 시작했습니다. 시간이 지남에 따라 우리는 가고 싶은 곳을 함께 정의하고 우리가 좋아하는 상호 작용으로 끝났습니다. 모션 개념이 생기자 다른 모든 것이 제자리에있었습니다.

다음은 초기 탐색 중 일부입니다.

코드에서 모션 탐색

우리가 만든 방법

놀랍지 않습니다. 마지막 모션 컨셉은 섬에서 영감을 받았습니다. 섬을 정의하는 것은 땅을 형성하는 끊임없이 변화하는 물의 풍경입니다. 생각할 때 웹 사이트는 물에 의해 형성되는 것이 아니라 스크롤, 클릭, 호버 및 기타 학대에 지속적으로 반응합니다.

우리는 모든 사용자 상호 작용에 대해 물 왜곡에 대한 아이디어를 탐색했지만 원했습니다. 실제 콘텐츠에서주의를 빼앗는 불필요한 효과없이 매우 미니멀하게 유지합니다.

모션 컨셉은 다음과 같습니다. 사이트를 보면 맑은 물이있는 열대 섬의 고요함을 얻을 수 있습니다. 하지만 스크롤과 상호 작용을 시작하세요. 여기에서 파도가 시작됩니다. 🌊.

14islands.com

디자이너로서 저는 그런 것을 얻을 수 있다는 것을 몰랐습니다. 썸네일 가장자리의 유동적 인 모양 변경, 어떻게 그 디자인 컨셉을 생각 해낼 수 있을까요? 우리는 함께 프로세스를 시작하고 함께 개념을 향해 작업했으며 출시 전까지 매일 협력했습니다. 그리고 전체 프로세스의 일부인 Google 개발팀은 최종 경험을 디자인하는 데 중요한 역할을했습니다.

물론 코드로 디자인한다고해서 프로세스 중에 모든 유형의 모션 디자인을 중단해야한다는 의미는 아닙니다. Figma 및 Flinto와 같은 환상적인 프로토 타이핑 도구가 있으며 흐름 및 마이크로 상호 작용을 테스트하는 데 좋습니다. 순수한 창의성의 경우 After Effects는 많은 자유를 제공하기 때문에 우리에게 가장 적합합니다.모션 전문가가 아니더라도 디자인 파일을 잠시 남겨두고 높은 수준의 아이디어를 탐색하는 것이 좋습니다. 무시하거나 앞으로 나아갈 수있는 더 확실한 결과를 얻을 수 있으며 개발 팀이 반복 작업을 시작할 수있는 기반을 제공 할 수 있습니다.

디자이너가 기술에서 배울 수있는 모든 것

여기에 있습니다. : 디자인 과정에서 창의적인 개발자를 풀 타임으로 참여시킵니다. 서로에게 도전하고, 모션을 병렬로 탐색하고, 모션 개념에 도달 할 때까지 상호 작용을 더 추진하십시오. 일단 그것이 제자리에 있으면 상세한 웹 사이트 디자인에 집중하십시오. 이 개념은 다가오는 많은 디자인 결정에 영감을 줄뿐만 아니라 동작을 반복하여보다 일관된 경험을 구축하는 데 도움이 될 것입니다.

14islands에서는 매우 긴밀한 디자이너 및 개발자 팀이 작업하게되어 운이 좋습니다. 매일 함께하며 협업 방식을 지속적으로 개선하고 있습니다. 지금까지 우리의 디자인 프로세스에 많은 창의성을 가져다주었습니다. 사물이 어떻게 구축되는지 궁금해하고 디자인과 코드 모두에서 서로 도전하면 기능적이고 최소한의 사용자 경험을 만들 수 있지만 개성을 더할 수 있습니다.

이 글이 도움이 되었기를 바랍니다. 질문이나 제안 사항이 있으면 알려주십시오. 다음에 ✌️

까지