2020년 여름 SUMMER COLLECTION이 나온 시점을 기준으로 한 판도라 공식 홈페이지 레이아웃 및 디자인
이번 여름 웹디자인-웹퍼블리싱 국비지원 교육 중에서 브랜드 웹사이트를 리뉴얼 하는 프로젝트가 있었다
평소에 워낙 주얼리를 좋아해서 주얼리 웹페이지들을 찾다가 의외로 별로였던 판도라 공홈을 리뉴얼 하기로!
기존의 판도라 시그니처 컬러라고해도 과언이 아닌 핑크색 컬러가 많이 빠져있어 밋밋한 느낌이 들고
한국적인 웹디자인과는 조금 거리가 있어보인다
그래서 웹페이지 리뉴얼 프로젝트로 선택하게 된 판도라!
디자인 가이드로는 무난한 모노톤과 시그니처 컬러인 핑크색을 위주로 메인컬러와 메인보드 이미지를 선택했다
평범한 웹디자인 포트폴리오라면 메인페이지 - 서브페이지 - 브랜드 스토리 페이지 제작 후 목업 Mockup 을 하는게 보통이지만 웹퍼블리셔까지 넘보는 포트폴리오를 만들기 위해서는 목업 이외에서 프론트앤드 코딩까지 해서 호스팅 url을 만들어야한다
국비지원 교육과정에서는 6개월간 무료인 닷홈을 사용했었는데 Github가 제일이라고..ㅎㅎㅎ
판도라 리뉴얼 메인보드 이미지
판도라 브랜드 자체는 해외 브랜드이기는 하나, 한국 판도라 공식 사이트를 리뉴얼하는 취지이기 때문에 기존의 외국인 모델보다는 한국인 모델이 더욱 접근성과 친근감을 줄 수 있을 것 같아 메인비주얼 모델도 변경했다 ㅎㅎㅎ
판도라 제품 중에 신상으로 나온 목걸이도 누끼딴 후 자연스럽지만 도드라져 보이도록 착용시켜주었다
나머지는 기존 페이지와 마찬가지로 뉴 컬렉션인 SUMMER S/S PANDORA OCEAN SERIES로 도배했다
자칫하면 핑크와 블루의 조합이 엄청 유치해질 수 있지만 블랙과 화이트를 많이 매칭해서 딱 내가 원하는 이미지대로 만들 수 있었다
판도라 홈페이지 리뉴얼 프로젝트는 반응형으로 코딩까지 짜볼 예정이라 앞으로
메인 - 태블릿 768px
메인 - 모바일 320px
서브 - pc 1920px
서브 - 태블릿 768px
서브 - 모바일 320px
브랜드 스토리 - pc 1920px
브랜드 스토리 - 태블릿 768px
브랜드 스토리 - 모바일 320px
까지 총 9장을 디자인해야한다
[웹디자인 포트폴리오] PANDORA Website renewal project > 1. 판도라 상세 제품/브랜드 스토리 페이지 내맘
해외취업을 위한 영문 웹페이지 시안 디자인하기 일본 SE나 웹디자이너 직무에 지원하고 싶어 서브페이지부터는 영문으로 시안을 만들었다. 마침 디즈니랑 콜라보를 하고 있어서 특색 있는 컬
nh0404.tistory.com
[웹디자인 포트폴리오] PANDORA Website renewal project > 3. 판도라 웹사이트 반응형으로 시안 만들기 -
PC 기준으로 웹페이지 전체 사이즈와 그리드 - 1920px에 1200px pc화면을 기준으로 디자인할 경우에는 화면의 전체 사이즈를 1920px로 잡고 가운데를 기준으로 1200px로 설정해서 칼럼과 거터를 정하는
nh0404.tistory.com
