brunch

You can make anything
by writing

C.S.Lewis

by 숨고 Soomgo Nov 29. 2018

홈페이지 디자인[원두커피 쇼핑몰 디자인 외주]

[숨고 라이프 / 웹 디자인]




온라인 커머스가 발전을 하면서 제품 업계, 유통업계에서는 인터넷 쇼핑몰 홈페이지 운영이 필수적으로 필요하게 됐어요. 특히, 웹 사이트 개발은 디자인과 기능 즉, UI(User interface, 사용자 인터페이스)/UX(User Experience, 사용자 경험)가 상호 작용해야 고객들의 접근성을 높일 수 있답니다.

숨고의 웹 디자인 정래은 고수님은 숨고를 통해 진행한 커피 원두 전문 로스팅 회사의 공식 쇼핑몰 디자인 프로젝트를 소개해주셨어요. 정래은 고수님은 브랜딩 및 웹디자인, 시각디자인 에이전시 기업을 운영하시고 계십니다.

원두커피 로스팅 기업의 대표님께서는 대부분 선호하는 심플함을 요청을 많이 해주셨어요. 기존에 제작된 패키지 디자인과 로고로 활용하고 기업의 정체성이 융합된 공식 쇼핑몰 디자인을 요청하셨죠. 각 원두의 맛, 특징, 원산지 등 이미지를 잘 살려서 해달라고 했어요. 고수님께서도 고객이 봤을 때 고급스러우면서 재미있게 제작을 해야겠다는 생각을 가지고 작업을 시작하셨답니다.






원두커피 로스팅 기업의 쇼핑몰 디자인 프로젝트



1. 개발 금액 : 6,000,000원
2. 소요 시간 : 약 2달
3. 개발 대상 : 원두커피 로스팅 회사의 공식 쇼핑몰 디자인 구축
4. 개발 과정 : 전체 컨셉 기획 -> 스토리보드 기획 -> 메인 디자인 기획 -> 상세페이지 기획 -> 퍼블리싱 ->개발



쇼핑몰 디자인 프로젝트의 4가지 진행 단계


1단계 : 컨셉 및 스토리보드 기획


모든 디자인은 기획이 가장 중요해요. 기획을 구체적으로 하는 스토리보드를 작성하면 로고랑 메뉴 위치부터 메인 이미지 배치, 게시판 배치를 하게 됩니다. 스토리보드 기획 구성은 클라이언트와 몇 차례 수정이 반복돼요. 특히 요청하신 쇼핑몰이나 서비스를 제공해주는 사이트일수록 더 많은 피드백이 오고 가죠.




원두커피 로스팅 기업에서는 심플함과 고급스러움을 강조하셨어요. 그래서 버튼과 기능을 간소화하고 기존의 패키지 디자인을 활용하여 비주얼적인 측면을 부각시키기로 기획을 하였죠. 디자인과 퍼블리싱을 하고 난 후에 다른 프로그램 개발이나 기능을 추가한다고 하면 처음에 기획한 것들이 다 무너지기 일수입니다. 이 문제를 방지하기 위해서 스토리보드를 작성하면서 누락된 부분이 없는지 계속 체크를 하며 디자인을 시작하죠.




2 단계 : 메인 페이지 제작


홈페이지 제작 시 가장 많이 보는 화면이 메인 페이지예요. 메인 페이지에서는 비주얼로 승부를 봐야 합니다. 기업의 정체성이 잘 드러나고 있는지, 시선을 사로잡을 수 있는지 등 확실한 비주얼이 고객들에게 신뢰성과 호기심을 가져다줘야 합니다.


원두커피의 고급스러운 정체성을 담은 메인 페이지


해당 사례에서는 고객들이 홈페이지에 접속하게 되면 커피 원두 로스팅 기업임을 단번에 알 수 있는 커피 원두 이미지를 배치했어요. 세련되고 감각적인 이미지로 고급스러운 원두를 피력하고 시선을 끌 수 있었죠. 기존의 있는 이미지와 로고를 활용한 작품이어서 요청자분께서 만족을 하셨죠.




3 단계 : 상세페이지 기획


쇼핑몰의 경우 고객들은 대부분 자기가 구입하고자 하는 물건을 구입하기 위해 들어옵니다. 오프라인 매장처럼 제품을 잘 배치해야 해요. 주력상품과 세일 상품을 잘 분류하고 배치를 기획해서 한눈에 들어오게 배열을 해야 합니다. 하지만 가장 중요한 건 썸네일 이미지입니다. 썸네일 이미지는 고객들이 제품을 한눈에 보고 바로 구입까지 이루어지게 하는 역할을 하죠


시선을 끄는 썸네일 이미지와 제품에 대한 간략한 정보로 접근성 확보


썸네일 이미지의 커피에 포함된 이미지를 삽입하여 맛을 가시적으로 나타냈어요. 또한, 하단에 용량과 가격을 기재했답니다. 썸네일 이미지만 보고도 제품에 대한 간략한 정보를 얻어 갈 수 있게 제작을 했죠. 또한, 오프라인과 달리 온라인은 모니터로 보여주기 때문에 사용자 경험상의 편리성도 추가해야 합니다. 사용자가 쉽게 누를 수 있게 디자인과 경험을 디자인해야 해요. 




4 단계 : 기기별 최적화


데스크톱/모바일에 최적화되는 반응형 홈페이지 구축


스마트폰이 보급되면서 모바일로 쇼핑하고 구매까지 진행하는 사람들이 늘었어요. 또한, 스마트폰 기기
의 종류가 다양해졌죠. 웹 디자인은 스마트폰의 화면을 고려하고 최적화하여 시각이 편안하게 제작해야 합니다. 이를 고려한 웹 디자인을 반응형 홈페이지라고 합니다. 웹 화면이 기기별로 자동으로 최적화되어 보이는 디자인이죠.






정래은 고수님의 웹 디자인 TIP

최근에는 고객들의 눈높이가 높아져서 퀄리티에 중점을 둬야 합니다. 또한, 클라이언트에게 기획의도를 설명하고 의견을 조율해 나가는 게 중점이죠. 원두커피 로스팅 기업 고객님께서는 기획을 잘 정리해서 주셔서 수월하게 제작할 수 있었습니다.







세련된 웹 디자인을
찾으시고 계신가요?

숨고에서 고수님을 만나 직접 상담해보세요!








숨고에서 웹 디자인 알아보기 Click!


숨고에서 웹 디자인 평균 비용 확인하기 Click!








▼ 웹 디자인 정래은 고수님 만나기 





▼ 숨고 웹 디자인 관련 콘텐츠 









숨고 공식 인스타 구경하기 Click!


 다양한 컨텐츠 포스트로 보러가기 Click!





매거진의 이전글 세련된 아파텔, 도배와 장판만으로 탈바꿈한 집 분위기
작품 선택
키워드 선택 0 / 3 0
댓글여부
afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari