뉴스센터 목록으로 돌아가기

2016 온라인 쇼핑몰 디자인 트렌드 9가지

위시켓 | 2016.02.16.

[프리랜서 가이드/ 디자인 TIP]

20160216_wishket_FG_f

안녕하세요, 위시켓입니다!

웹 디자이너들은 고객들에게 매끄럽고 멋진 쇼핑 경험 제공함과 동시에 디자인 시장에서 한 발 앞서나가기 위해서 끊임없이 최신 트렌드를 접해야 합니다. 만약 여러분이 새롭게 웹 사이트를 단장할 계획이 있거나, 온라인 쇼핑몰 디자인 관련 프로젝트를 맡게 되었다면 현재 온라인 쇼핑몰 시장에서 어떤 디자인이 주도하고 있는지 알아야겠지요.

지난 프리랜서 가이드에서 2016년 새해를 시작하며 2016년 한 해를 책임질 웹디자인 트렌드 11가지를 살펴본 바 있습니다.

관련글2016 웹 디자인 트렌드 11선


오늘 프리랜서 가이드2016 온라인 쇼핑몰 디자인 트렌드 9가지을 준비했습니다. 이전에 소개한 11가지 중에서 온라인 쇼핑몰에 적합한 몇 가지를 다시 짚어보고 새로운 몇 가지를 더 추가하여 소개해 드리겠습니다. 해당 웹 디자인을 사용한 사이트의 링크를 참고해보시기 바랍니다.

2016 온라인 쇼핑몰 디자인 트렌드 9가지

1. 머티리얼 디자인

Material Design

콘텐츠에 집중한 머티리얼 디자인은 2014년부터 인기를 끌었고 앞으로도 계속 유행할 것으로 보입니다. 머티리얼 디자인의 강점은 다양한 기기와 플랫폼에서 모두 호환되는 통합적이고 재미있는 사용자 경험(User Experience)입니다. 이 때문에 많은 온라인 쇼핑몰 사이트들이 머티리얼 디자인을 선호하지요.

001-1

002-1

참고: http://www.pa-design.com/en/| http://www.bewakoof.com/

2. 숨겨진 메뉴

Hidden Menus

숨겨진 메뉴들은 이른바 햄버거 메뉴(=드롭다운 메뉴)에서 파생된 것들입니다. 커서를 갖다 대면 일렬로 숨겨진 항목들이 드러나는 메뉴가 바로 그것이지요. 이 디자인은 사이트상에 지저분한 잡동사니 항목들을 깔끔히 정리해주기 때문에 인기가 많습니다. 처음 이 디자인은 모바일 환경에서 쇼핑을 원활하게 할 수 있게 만들기 위해 사용되었지만, 지금은 PC버전의 사이트에서도 널리 활용 중입니다.

2015년에는 수많은 온라인 쇼핑몰들이 이 숨겨진 메뉴를 활용하여 휴대폰, 타블렛, PC 등의 다양한 기기의 스크린 공간을 효율적으로 사용했습니다. 그리고 앞으로도 이 디자인은 더 많은 인기를 얻을 것으로 예상됩니다.

003-1

004-1

참고 : http://www.houseoffraser.co.uk/ | http://www.etq-amsterdam.com/

3. 반응형 웹 디자인

Upwardly Responsive Design

반응형 웹 디자인은 2016년 웹사이트 트렌드를 이끌 가장 중요한 디자인 중 하나입니다. 유의해야 할 점은 모바일과 태블릿 뿐 아니라 큰 사이즈 스크린 기기에서도 디자인이 잘 작동하도록 신경을 써야 한다는 점이지요. 최근 모바일 뿐 아니라 TV와 같은 고해상도 큰 스크린 기기를 이용해서 쇼핑을 하는 고객들이 증가하고 있기 때문입니다.

32%가 넘는 웹 사용자들이 1920픽셀 이상의 고해상도 기기를 사용하고 있습니다. 따라서 디자인을 할 때 더 큰 사이즈의 스크린은 염두에 두는 것은 아주 중요한 것이지요. 2016년에는 더 많은 회사들이 고해상도의 스크린에서도 잘 작동하는 반응형 웹 디자인을 적용할 것입니다.

006

007

참고:http://www.smythson.com/ | https://www.burberry.com/


4. 풍부한 애니메이션

Rich Animation

애니메이션은 고객의 참여를 유도하는 훌륭한 디자인 방법 중 하나입니다. 많은 온라인 쇼핑몰 사이트들이 디자인 내에 애니메이션을 삽입하여 쇼핑 경험을 더 유쾌하고 재미있게 만들기 위해 노력하고 있지요. 적절한 공간에 제때 애니메이션이 재생되도록 하면 고객들은 해당 회사가 정말로 고객을 신경 쓰고 있다는 느낌을 받게 됩니다.

2016년에는 더 많은 온라인 쇼핑몰 사이트들이 창의적으로 애니메이션을 활용할 것으로 전망됩니다. 커서를 갖다 대면 변화하고 움직이는 아이콘 로테이션, 로딩 바 등 활용할 곳은 무궁무진하지요.

008-1024x706

009-1024x706

참고: http://www.nixon.com/ | https://www.fleetfeetsports.com/


5. 스토리텔링

Storytelling

오늘날 경쟁이 심한 온라인 쇼핑몰 시장에서 여러분의 회사가 돋보이도록 만들기 위해서는 ‘스토리텔링’이 매우 중요합니다. 여러분의 회사의 컨텐츠를 특별하고 호소력 있는 방식으로 제시해야 합니다. 좋은 스토리는 고객과 브랜드 간의 감정적 유대를 깊게 만들어주고 고객의 충성도를 높이고 판매량을 증가시키는데 도움을 주지요. 간단히 만해서 스토리텔링은 ‘브랜드 이미지’에 생명을 불어넣는 작업입니다.

성공적인 스토리텔링은 쉽게 얻어지는 것이 아니지만, 이미 많은 회사들이 이 전략을 효과적으로 활용 중입니다.

011-1024x706

012-1024x706

참고: https://bonobos.com/ | http://www.greats.com/


6. 카드형 디자인

Card Design

최근 카드형 레이아웃은 디자이너들 사이에서 큰 인기를 얻었습니다. 그리고 이 트렌드는 2016년에도 쭉 이어질 것입니다. 카드형 디자인은 매터리얼 디자인의 한 요소였다가 따로 떨어져 나온 것으로, 이미 그 효과는 입증된 것이나 다름이 없습니다. 게다가 호환이 잘되고 반응이 빠른 반응형 웹 디자인 등과 카드형 디자인의 궁합이 아주 잘 맞기 때문에 더 큰 인기를 얻고 있지요.

카드형 레이아웃의 강점 중 하나는 바로 사용자 친화적 특성(User-Friendly)입니다. 상품들을 정렬하여 카드형으로 보여주면 고객들은 한눈에 필요한 관련 정보를 파악할 수 있지요. 뿐만 아니라 만약 고객이 특정 상품이 마음에 들지 않는다고 생각하더라도 다른 상품에 대한 정보를 쉽게 접할 수 있어 판매량은 증가하게 됩니다.

013-1024x706

014-1024x706

참고 :http://www.rejuvenation.com/ |http://www.lordandtaylor.com/


7.유동적이고 큼지막한 타이포그라피

Large and Flexible Typography

컨텐츠는 왕과 같은 존재입니다. 하지만 그 컨텐츠를 제시하는 방식이야 말로 왕을 왕답게 만들어주는 요소이지요. 2015년과 마찬가지로 2016년에도 큼지막하고 반응성 좋은 타이포그라피가 유행할 전망입니다. 당연히 작은 모바일 스크린에서부터 큰 PC모니터까지 모든 기기에서 두루두루 잘 작동해야 합니다.

타이포그라피는 시각적으로 강력한 브랜드 이미지를 구축하고 잠재 고객에게 구매를 촉진시키는데 중요한 역할을 하기 때문에 많은 회사들이 이 접근법에 열광하고 있습니다.

016-1024x706

017-1024x706

참고: http://www.nastygal.com/ |https://brdr-kruger.com/


8. 큼지막한 배경화면

Large Backgrounds

큰 배경화면은 언제나 매력적인 웹사이트 디자인 트렌드들 중 하나였습니다. 때문에 많은 온라인 사이트들이 크고 흡입력 있는 상품사진을 활용해서 그들의 상품을 더 매력적으로 보이게 하는 방법을 택하고 있지요. 여러분의 웹사이트에도 깨끗하고 전문적이며 강렬한 이미지를 풀 사이즈로 배경화면에 띄워보세요. 혹은 강한 인상을 남기는 짧은 비디오 클립도 좋습니다. 새로운 고객들이 여러분의 웹사이트에 방문하자마자 구매욕구가 생기도록 스크린 전부를 덮는 큰 사이즈의 이미지들을 활용하는 것입니다.

018-1024x706

019-1024x706

참고: https://www.bugaboo.com/ | http://eyeheartworld.org/


9. 다이내믹 서칭

Dynamic Searching

마지막으로 가장 최근에 유행하기 시작한 강력한 디자인 트렌드인 다이내믹 서칭입니다. 2016년도에 많은 온라인 쇼핑몰들은 자바스크립트와 애저를 활용하여 제품들이 다이내믹하게 보여지는 방식을 채택하고 있습니다. 이 기술은 상품의 종류가 많을 때 특히 유용하지요.

이 방법을 적극적으로 활용한 대표적인 사이트는 바로 JadoPado입니다. 그들의 홈페이지를 방문하여 특정 검색어를 입력하면 한 페이지에 다양한 제품들이 다이내믹하게 바뀌면서 나타납니다. Stuart Weitzman 역시 매우 좋은 예시이니 참고하세요.

020-1024x706

021-1024x706

참고: https://jadopado.com/ | http://www.stuartweitzman.com/



급격히 변화하는 온라인 쇼핑몰 시장에서는 오늘 새로운 것이 내일이면 구식이 되고는 합니다. 수많은 동종업체들과 치열하게 경쟁해야 하는 온라인 쇼핑몰의 디자이너 여러분들께 오늘 저희가 준비한 9가지 웹 디자인 트렌드가 유용하게 쓰이길 바랍니다.

위시켓은 2016년 모든 프리랜서 분들의 풍성한 한 해를 기원하며 다음프리랜서 가이드를 통해 찾아 뵙겠습니다 :)

20150819_하단이미지_v3

위시켓 | 2016.02.16.

'뉴스센터'의 다른 글 보기

[태블릿용 앱 개발] “가게 컨셉에 맞는 애플리케이션 시스템이 없어 고민하던 차에 위시켓을 만났습니다”

코워킹 스페이스 장단점과 최상의 장소 고르는 팁

2016 온라인 쇼핑몰 디자인 트렌드 9가지

[업데이트] 프로젝트 문의 비공개 댓글 및 답글 기능 추가

프리랜서가 스타트업과 함께 일하는 것의 장단점

뉴스센터 더 보기 >