반응이 좋은 사진 갤러리를위한 7 가지 팁
우리 모두는 반응 형 플랫폼에서 웹 사이트를 디자인하는 것의 중요성을 알고 이해합니다. 그것은 이미지와 사진 갤러리에도 적용됩니다.
아름다운 웹 사이트를 탐색하고 제대로 고정되거나 크기가 맞지 않는 이미지를 보는 것보다 나쁘지 않습니다. 디자이너가 무언가를 잊어 버렸거나 단계를 놓쳤다 고 생각하게됩니다.
오늘 우리는 더 나은 반응 형 사진 갤러리를 만들기 위해 디자인 프로세스에서 할 수있는 7 가지를 살펴 보겠습니다. (우리는 여기서 코드를 이야기하지 않고 있습니다. 이것들은 당신과 개발자가 하나이든 아니든간에 도움을 줄 수있는 디자인 프로세스입니다.)
Envato Elements 살펴보기
1. 종횡비 고려
데스크톱보기 환경은 모바일 장치의 환경과 상당히 다를 수 있습니다. 그러나 대부분의 웹 사이트에서 이미지 배치는 동일합니다. 귀하의 임무는 두 환경에서 동일한 메시지가 전달되고 다른 화면 크기에서 이미지가 손실되지 않도록하는 것입니다.
이미지의 가로 및 세로 평면 간의 관계인 종횡비에 대한 생각이 시작됩니다.
데스크톱 웹 사이트로 돌아 가면 멋진 초박형 가로 사진이 웹 사이트 디자인의 상단에 놀라워 보일 수 있습니다. 그러나 더 정사각형 환경에서 작은 화면에서 해당 이미지는 어떻게됩니까? 사진이보기 어려운 크기로 축소됩니까? 아니면 사진의 절반이 사라 집니까?
여기에서 종횡비가 나타납니다. 비슷한 사진 크기에 대해 수평-수직 관계를 선택하면 장치를 전환 할 때 이미지 내용이 손실되지 않습니다. 또한 이미지 배치 작업을보다 쉽게 수행 할 수 있으며 다른 중단 점에 대해 여러 크기를 업로드하는 것에 대해 크게 걱정할 필요가 없습니다.
2. 일관되게 크기와 규모
사진 자르기, 크기 조정 및 업로드시주의를 기울이면 워크 플로에 상당한 영향을 줄 수 있습니다.
CMS에 사진을 업로드하고 최고를 바라는 사람은 몇 명입니까? 그렇습니다.
웹 사이트 디자인에 배치 할 수 있도록 각 사진을 자르고 크기를 조정해야합니다. 이렇게하면 사진이 의도 한대로 보이게되고 사진 상단에 누락 된 머리 나 한쪽 또는 양쪽에 요소가 남지 않게됩니다.
프로젝트의 백엔드에서 시간이 조금 더 걸리지 만 그만한 가치가 있습니다. (특히 슬라이더 나 갤러리를 사용하는 경우)
3. 슬라이더 또는 갤러리 사용
슬라이더 나 갤러리와 같은 이미지에 컨테이너를 사용하면 웹 사이트 디자인에서 반응 형 이미지를보다 잘 관리 할 수 있습니다. 특히 잘 알려진 기존의 타사 도구를 사용하는 경우 이러한 요소가 의도 한대로 작동하도록하기 위해 대부분의 무거운 작업이 수행됩니다.
이전의 두 가지 팁은 슬라이더 나 갤러리 요소를 사용할 때에도 여전히 중요합니다. 종횡비와 크기 및 크기 조정 개념이 여전히 적용됩니다.
사용할 옵션이 확실하지 않습니까? 더 큰 크기로 작동하는 소수의 훌륭한 이미지가있는 경우 슬라이더를 선택하십시오. 웹 페이지의 상단 또는 "영웅"섹션에 널리 사용되는 옵션입니다. 가독성 문제없이 작게 렌더링 할 수있는 이미지가 많이있는 경우 갤러리를 선택하십시오. 이것은 보여줄 이미지가 많은 포트폴리오 또는 웹 사이트에 적합합니다.
4. 가능한 경우 캡션을 피하십시오
캡션은 이미지의 정보에 가치를 더하는 훌륭한 도구가 될 수 있지만 웹 사이트의 작동 방식을 방해 할 수 있습니다. 기존 캡션 형태가 아닌 대체 솔루션을 사용할 수 있거나 제공 할 경우이를 피하십시오.
캡션과 같은 큰 텍스트 블록은 큰 화면에서는 아름답게 렌더링되지만 작은 환경에서는 큰 문제가 발생할 수 있습니다. 결과적으로 문제가 발생하여 사용자가 사이트를 버릴 수 있습니다. (대부분의 웹 사이트에서 모바일로 들어오는 트래픽이 너무 많아서 재앙이 될 수 있습니다.)
5. 비디오와 이미지를 혼합 할 때주의하십시오
분명히하자 : 귀하의 웹 사이트에 비디오 및 이미지 요소를 갖는 것은 완벽하게 허용됩니다. 아마 당신이해야 할 일입니다.
그러나 비디오 및 이미지 요소를 동일한 슬라이더에 배치하는 것과 같이 디자인의 동일한 요소에서 비디오 및 이미지를 혼합하지 마십시오. 때로는 운이 좋으면 매력처럼 작동합니다. 다른 경우에는 이상한 것처럼 보이는 특정 장치에 빈 상자가 남아 있습니다.
가장 좋은 옵션은 각기 다른 유형의 요소에 디자인에 고유 한 공간을 제공하는 것입니다. 이것은 거의 모든 디자인 요소, 특히 이미지와 비디오에 적용됩니다.
6. 불필요한 요소를 잘라
슬라이더와 갤러리의 가장 큰 문제 중 하나는 디자이너가 컨테이너 안에 너무 많은 정크를 넣는다는 것입니다. 탐색 화살표, 탐색 버튼, 텍스트, 클릭 유도 문안이 있으며 목록이 계속 진행됩니다.
일반적으로 사용자는 슬라이더와 상호 작용하는 방법을 이해합니다. 벽에서 완전히 벗어나지 않는 한 사용자에게 수행 할 작업을 보여주는 두 가지 탐색 계층이 필요하지 않습니다. 한 줄의 단추 나 화살표 만 있으면 충분합니다 (필요한 경우).
사용자가 상호 작용해야하는 요소 만 포함하십시오. 이미지 갤러리 또는 슬라이더의 목적으로 사용자가 클릭 유도 문안을 클릭 / 탭하도록하는 것이 사진의 유일한 옵션이어야합니다. 간단하게 유지하십시오. 너무 많은 옵션을 제공하지 마십시오. 실제로 전환율에 도움이 될 수 있습니다.
7. 고품질 이미지 만 사용
말할 것도없이 거의 진행되지만 여전히 너무 자주 발생합니다. 별이없는 이미지가 있다면 이미지를 전혀 사용하지 마십시오. 고품질의 고해상도 이미지가 그 어느 때보 다 중요합니다. 사용자는 픽셀이 있거나 이미지가 불량한 웹 사이트를 보는 데 시간을 낭비하지 않을 것입니다 (품질이 떨어지는 경우 아마 당신을 믿지 않을 것입니다).
많은 사용자가 고해상도 화면이있는 장치를 사용하여 웹 사이트 디자인을보고 있습니다. 그들은 최고 수준의 영상을 기대합니다. 당신은 배달해야합니다.
더 높은 압축 이미지를 제공하면서 이러한 고해상도 요구를 충족시키기 위해 일부 이미지 형식이 변경되고 있습니다. Google 개발자는 시작하기에 좋은 장소입니다. 가장 일반적으로 사용되는 화면 해상도를 알고 사용자에게 가장 잘 전달할 수있는 방식으로 파일을 저장하는 습관을 가지십시오.
결론
우리는 모두 사용자가 상호 작용해야하는 웹 사이트를 만들고 싶어합니다. 강한 이미지는 그 방정식의 핵심 부분입니다. 장치와 상관없이 렌더링이 잘되도록하는 것도 중요합니다.
웹 사이트 디자인 프로젝트의 와이어 프레임 단계에있을 때 다양한 장치 크기에서 작동 할 이미지 공간을 계획하십시오. 특히 이미지 모양과 관련하여주고받는 것이있을 수 있지만 장기적으로 결정을 일찍 내리고 일관성을 유지하면 장기적으로 사이트 디자인에 도움이됩니다.
