디자인 트렌드 : 생생한 사진
라이브 사진. 시네마 그래프. 사진 이동. 여전히 움직임. 웹 디자인에서 이러한 트렌드에 대한 많은 이름이 있으며, 미묘한 방식으로 생생한 영웅 이미지로 식별됩니다.
사진은 아니지만 비디오는 아닙니다. 움직임은 종종 사용자의주의를 끌고 이미지로 끌어들이는 데 도움이되도록 이미지에서 하나의 동작으로 제한됩니다. 당신이 부르는 것에 관계없이, 이 추세는 공유 가능한 gif 및 소셜 미디어로 웹 디자인의 모든 곳에서 영향을 미치고 나타납니다.
트렌드의 진화
“실시간”사진에 대한 아이디어가 어디서 시작되었는지 말하기는 어렵지만, Apple이 사진을 더 대중적으로 만드는 데 도움이되었다고 주장 할 수도 있습니다. 이 회사는 iPhone 6S의 움직임을 포함한 사진을 소개했습니다. 그 작은 기쁨의 순간은 웹 사이트에서 사진을 살아있는 것과 동일한 개념입니다. 별이 빛나는 이미지에는 약간 더 길게 볼 수있는 추가 기능이 있습니다.
동일한 이미지의 움직이는 이미지가 더 많은 곳에서 나타나기 시작했습니다. 디지털 광고판의 스틸 프레임 광고에는 깜박 거리거나 윙크하는 사람이 포함됩니다. Sunday Night Football의 라인업에도 1 초 후에 깜박 거리는 플레이어 헤드 샷이 포함되어있어 실제로 라이브 액션임을 보여줍니다.
왜이 기술을 사용합니까? 사용자의 관심을 더 오래 유지하고보다 흥미로운 시각적 참조 지점을 제공합니다. 고객을 위해 시네마 그래프 이미지를 만드는 회사 인 Flixel은 평균 정지 이미지의 경우 1 초에 비해 평균 동영상이 사용자의주의를 9 초 동안 유지한다고 말합니다.
사진 또는 일러스트
살아있는 이미지 나 영화는 사진이나 삽화로 작업 할 수 있습니다. 어떤 유형의 이미지 나 다른 유형의 이미지를 사용해야한다는 규칙은 없습니다. 위의 두 이미지를 보면 두 스타일 중 어느 것이나 효과적 일 수 있습니다.
또 다른 고려 사항은 모션이 루프에서 계속 발생할 필요가 없다는 것입니다. 위의 Hillmann Living은 홈페이지의 제품이로드 될 때 빛을 발합니다. 그것이 유일한 움직임이고 사진은 정지 사진입니다. 여기서 효과에 대한 좋은 점은 회사에서 즉시 판매하는 의자를 직접 볼 수 있다는 것입니다. 이 기술은 사용자에게 페이지의 중요한 사항과 미묘하고 흥미로운 방식으로 집중해야하는 내용을 보여줍니다.
Bar Z Wines는 또 다른 접근 방식을 취합니다. 예시 된 홈페이지는 처음에는 다소 평범 해 보이지만 작은 평면이 화면의 상단 중앙을 통해 루프로 날아갑니다. 이 모션을 통해 사용자는 화면에서 중요한 단어를 볼 수 있습니다.“우리 와인은 필터링되지 않았습니다.” 사용자는이 웹 사이트의 메시지에 대해 화면상의 움직임으로 인해 가장 중요한 언어로 그려지기 때문에 즉시 무언가를 알게됩니다.
성공을위한 팁
이 기술은 다양한 방식으로 다양한 디자인 응용 프로그램에서 작동 할 수 있습니다. 가장 좋은 예 중 일부는 아름다운 사진이 출발점이되는 간단한 장면이나 풍경에서 비롯된 것입니다.
잔디는 바람이나 풍경에서 움직일 수 있습니다. 쇼케이스 및 대형 헤드 샷시 사람이 깜박일 수 있습니다. 제품이 의도 한 동작을 기울이거나 돌리거나 완료 할 수 있습니다.
이 추세에 대해 생각할 때 가장 중요한 것은 단순성입니다. 움직임이 너무 많으면 비디오를 선택해야합니다. 놀람의 요소는 그것이 작동하게 만드는 것입니다. 사용자는 스틸 이미지를 기대하지만 실제로 생깁니다.
- 웹 사이트 당 하나만 사용하십시오.
- 현실적으로 보일 필요가 있습니다.
- 운동은 물리 법칙을 따라야합니다.
- 움직임은 미묘하지만 눈에 띄어 야합니다.
- 소리 나 많은 클릭 동작을 추가하여 과도하게 사용하지 마십시오.
- 마우스 움직임으로 발생하는 모션과 같은 미묘한 사용자 컨트롤을 고려하십시오.
- 웹 사이트뿐만 아니라 여러 캠페인에서 사용할 수있는 동영상을 개발하십시오.
어떻게합니까?
디자인에이 효과를 만드는 방법은 많이 있습니다. 이 방법은 실제 기술 수준, 실제 이미지 및 예산 사용 방법을 결정합니다.
미묘한 동작을 만드는 옵션 중 일부는 다음과 같습니다.
- gif를 만듭니다.
- 온라인 도구를 사용하십시오 (다양한 비용으로 사용 가능한 도구가 많이 있습니다).
- 움직임이 제한된 비디오 이미지를 만듭니다.
- 앱이나 iPhone을 사용하십시오.
- 스틸 이미지를 비디오 형식으로 묶습니다.
이 YouTube 자습서를 통해 살아있는 이미지를 계획하고 만들 수 있습니다.
완벽한 예
Monochrome Paris의 웹 사이트는 이러한 추세를 보여주는 완벽한 예입니다. 홈페이지는 겉보기에는 단순한 레코드 이미지이지만 강성 요소는 거의 녹아서 바람에 움직이는 직물의 움직임을 취합니다. 효과는 매력적이고 시선을 사로 잡으며 사용자를 디자인에 끌어들입니다.
이 효과는 미묘한 방식으로 관심을 불러 일으 킵니다. 움직임 때문에 상상 한 시각이 좀 더 실제처럼 보입니다. 페이지를 아래로 스크롤하면 일반적인 레코드 회전보기를 포함하여 다른 움직이는 요소가 사용자에게 인사합니다.
이 웹 사이트는 이러한 추세를 효과적으로 사용할 수있는 훌륭한 사례 연구입니다. 머리 위로 향하고 주위를 클릭하여 영감을 조깅하십시오.
결론
당신이 부르는 것에 관계없이, 살아있는 이미지는 아마도 그 주위에 붙어있는 트렌드 중 하나입니다. 실제 비디오를 제작할 필요없이 디자인에 애니메이션을 추가하는 또 다른 방법입니다. 효과적이며 비디오 제작보다 훨씬 저렴할 수 있습니다.
이 트렌드의 비결은 의도적이고 실제적으로 보이도록하는 것입니다. 바보 같은 움직임을 통합한다고해서 반드시 원하는 효과를 얻을 수있는 것은 아닙니다. 돌아가서 실제로 예제를 살펴보고 웹 사이트로 이동 한 후 클릭하십시오. 그 애니메이션이 디자인에서 무엇을 이끌어 내는지보십시오. 각 예에서, 이동은 사용자가 특정 요소에 도달하거나 특정 작업을 수행하는 데 도움이됩니다. 의도적 인 움직임의 움직임은 효과적인 시네마 그래프 디자인의 핵심입니다.
