웹 디자인에서 콘텐츠 슬라이더를 사용하는 방법

콘텐츠 슬라이더 (일명 캐 러셀)는 현대 웹 디자인에서 유비쿼터스이며 그럴만 한 이유가 있습니다. 설정이 간단하고 사이트의 모양과 느낌에 맞게 완전히 사용자 정의 할 수 있으며 비교적 작은 공간에서 창의적인 콘텐츠를 보여줄 수 있습니다.

디자이너는 매력적인 스토리를 쉽게 전달할 수있는 유연성 때문에이를 좋아하고 웹 사이트 소유자는 단순한 사이트 요소에서 비즈니스의 여러 요소를 홍보 할 수 있기 때문에이를 좋아합니다. 올바르게 완료하면 슬라이더가 멋지게 보이고 모든 사이트에 시각적 인 펀치를 가져옵니다.



슬라이더는 대부분의 웹 사이트에 쉽게 추가 할 수 있으며 특히 워드 프레스 사용자. 그러나 슬라이더가 항상 답은 아닙니다. 모든 멋진 슬라이더에는 수백 개의 눈에 띄거나 더 나쁜 슬라이더가 있습니다. 그렇다면 언제 사용할 수 있습니까? 콘텐츠 슬라이더를 사용하기 가장 좋은 7 가지 시간 목록을 작성했습니다.



01. 제품 둘러보기

슬라이더는 제품 둘러보기를 위해 만들어졌습니다. 한꺼번에 제공 될 때 많은 양의 정보가 방문자를 압도 할 수 있습니다. 좀 더 관리하기 쉬운 부분으로 나눌 경우주의가 산만해질 가능성이 적습니다. 이러한 제품 둘러보기와 같이 정보를 순차적으로 표시해야하는 경우 슬라이더를 사용하는 것이 좋습니다.

웹 디자인의 슬라이더 : 정사각형



신용 카드 앱 Square는 웹 사이트에서 슬라이더를 잘 활용합니다.

이 두 가지 예를 고려하십시오. 광장 (위)는 회사에서 스마트 폰 및 기타 장치를 통해 신용 카드를받는 데 사용하는 장치입니다. 사이트 전체에서 슬라이더를 사용하여 서비스를 사용하는 다양한 방법을 설명하고 개별 기능 및 이점을 강조합니다.

어도비 애프터 이펙트 맥 무료 다운로드

웹 디자인의 슬라이더 : 신발 고문

UserOnboard는 방문자에게 앱의 온 보딩 흐름을 단계별로 안내합니다.

또 다른 예는 UserOnboard입니다.이 사이트는 잘 설계된 사용자 온 보딩 흐름 웹 및 모바일 앱용. 이 사이트의 목적은이 주제의 순차적 커뮤니케이션 스타일에 자연스럽게 맞습니다.



02. 새로운 콘텐츠 강조

슬라이더는 정기적으로 업데이트되는 사이트에 이상적인 수단입니다. 매일 아침 온라인으로 뉴스에 액세스하면 매일 콘텐츠 슬라이더를 접하게 될 것입니다. 실제로 이것은 가장 일반적인 구현 중 하나입니다.

웹 디자인의 슬라이더 : 발견

Discovery.com은 슬라이더를 사용하여 방문자에게 최신 콘텐츠를 제공합니다.

다음과 같은 인기 뉴스 및 TV 네트워크의 홈페이지에서 단서를 가져옵니다. 디스커버리 채널 (위) 및 Hulu (이하). 미디어 사이트 이러한 것들은 종종 슬라이더를 사용하여 끊임없이 변화하는 새롭고 인기있는 기사와 비디오의 라인업을 보여줍니다. 자주 변경되는 많은 콘텐츠, 특히 비디오 콘텐츠를 제공하려는 경우에 적합합니다.

웹 디자인의 슬라이더 : MTV

Hulu.com은 새로운 비디오 콘텐츠를 자주 추가하므로 슬라이더를 사용하여 보여줄 수 있습니다.

03. 포토 갤러리

사진 갤러리는 슬라이더로 빛납니다. 때로는 훌륭한 이미지 (또는 여러 개)가 브랜드에 대해 말해야하는 모든 것을 전달하는 데 필요한 전부입니다. 한 줌의 전체 페이지 고해상도 이미지 든 작은 이미지 든 사진 갤러리를 표시해야 할 때 슬라이더를 사용하면 좋은 방법입니다.

웹 디자인의 슬라이더 : Regent College

Regent College의 사이트는 자동 수평 슬라이더를 사용합니다.

위치의 자연적인 아름다움과 학생들의 다양성을 강조하기 위해 리젠트 칼리지 (위)는 매력적인 홈페이지 요소로 독특한 디자인 요소가있는 자동 수평 슬라이더를 사용합니다.

04. 온라인 포트폴리오

시각적 콘텐츠를 보여주는 데 적합하기 때문에 슬라이더는 온라인 포트폴리오 사진 작가에서 그래픽 디자이너, 웹 개발자에 이르기까지 모든 종류의 아티스트를위한 것입니다. 매우 작은 공간에서 슬라이더를 사용하면 거의 모든 유형의 작업을 잠재 고객에게 창의적으로 표시 할 수 있습니다.

웹 디자인의 슬라이더 : Maisengasse 사무실

옷 라인을 모방 한 Büro Maisengasse의 슬라이더

마이센 가세 사무실 (위)는 가장 재미있는 슬라이더 중 하나를 사용합니다. 화살표를 사용하여 수평으로 탐색하고 프로젝트는 마치 옷 라인을 따라 당겨지는 것처럼 확대됩니다.

웹 디자인의 슬라이더 : 목가적 인 크리에이티브

Headway Themes의 슬라이더는 간단하고 효율적입니다.

Headway 테마는 간단한 수평 슬라이더 , 홈페이지 하단에 배치되어 테마로 구축 된 웹 사이트를 보여줍니다.

05. 전자 상거래

슬라이더는 제품을 소개하는 데 탁월한 선택입니다. 전자 상거래 . 전체 범위의 제품을 표시하든, 미적 감각을 전달하기 위해 몇 가지를 선택하든, 라인에 최신 추가 사항을 강조하든, 전자 상거래에 사용되는 슬라이더의 예는 다양합니다.

웹 디자인의 슬라이더 : CXXVI

Seattle Cider Company의 슬라이더는 브랜드의 미학과 완벽하게 일치합니다.

사이다 브루어 시애틀 사이다 컴퍼니 의 홈페이지 슬라이더는 미니멀리스트 탐색 엄선 된 엄선 된 제품을 선보이고 그 제품의 미학을 성공적으로 전달합니다.

웹 디자인의 슬라이더 : Park La Fun

포토샵에서 거친 빛을 수정하는 방법
Hush의 슬라이더는 새롭고 인기있는 제품을 보여줍니다

Hush의 사이트에는 새롭고 인기있는 제품을 보여주는 깔끔하고 미니멀 한 전체 페이지 가로 슬라이더가 있습니다.

06. 텍스트 스 니펫

슬라이더는 시각적 콘텐츠에만 국한되지 않습니다. 또한 일련의 관련 텍스트 스 니펫을 표시하거나 사이트에 대한 서면 정보를 전달해야 할 때 유용합니다.

웹 디자인의 슬라이더 : The Barrelhouse Flat

Desk.com의 슬라이더는 영향력있는 회사의 평가에 주목합니다.

Desk.com 홈 페이지에있는 그들의 평가에서 큰 거래를하여 각 레이브 리뷰에 슬라이드 쇼에서 자체 슬라이드를 제공합니다.

웹 디자인의 슬라이더 : Heath Waller

Heath Waller의 연락처 페이지 슬라이더는 온라인 명함 역할을합니다.

그만큼 홈페이지 위에 표시된 웹 디자이너 Heath Waller의 경우 명함과 매우 유사합니다. 아름답고 미니멀 한 수평 슬라이더는 중요한 정보와 이미지에 대한 링크를 제공합니다.

07. 스토리 텔링

슬라이더의 장점은 스토리 텔링입니다. Google은 Chrome 용 프로모션 책에 슬라이더를 사용합니다. 일부 전환에는이 매체에 적합한 기발한 페이지 넘김 효과가 있습니다.

웹 디자인의 슬라이더 : 스토리 텔링

슬라이더는 의사 전자 책에서 페이지를 넘기는 데 사용됩니다.

내가 브라우저와 웹에 대해 배운 20 가지 (위) 슬라이더를 사용하여 의사 전자 책의 페이지를 넘깁니다. 이 기능은 별도의 슬라이드에서 텍스트를 조금씩 관리하기 쉽게 느껴지므로 사용자가 쉽게 읽을 수 있습니다.

그래서 거기에 있습니다. 슬라이더가 사이트에 활기를 불어 넣고 방문자를 참여시키고 방문자를 고객과 옹호자로 바꾸는 기억에 남는 경험을 만드는 방법에 대한 7 가지 방법과 13 가지 예입니다.

시작하는 가장 좋은 방법은 예제를 찾아 본 다음 사이트를 표시하고 슬라이더를 통해 사이트를 다음 단계로 끌어 올리는 데 필요한 새로운 페인트 칠을 콘텐츠에 제공 할 수있는 다양한 방법에 대해 생각하는 것입니다.

관련 기사: