해외취업을 위한 영문 웹페이지 시안 디자인하기
일본 SE나 웹디자이너 직무에 지원하고 싶어 서브페이지부터는 영문으로 시안을 만들었다.
마침 디즈니랑 콜라보를 하고 있어서 특색 있는 컬렉션 페이지를 디자인했다. 제품 자체도 크기를 너무 작게 올렸는데 비해 일본이나 영국 판도라 사이트를 보니 이미지컷을 확대해서 업로드하여 디테일을 더욱 상세히 볼 수 있는 장점이 있었다. 베너와 콜라보 이미지를 만들기 위해 공을 많이 들였는데 기대 이상으로 잘 뽑힌 것 같다.
2-3년 전부터 디즈니나 워너브라더스 등과 콜라보레이션을 진행하는 브랜드가 부쩍 증가하였지만 그에 비해 주얼리 디자인은 어떤 브랜드와 콜라보했는지 잘 나타나지 않는 마케팅의 미흡한 점을 보충하기 위해 오리지널 이미지를 사용하였으며, 엄청난 포부를 가지고 메인 제품 이미지는 마우스로 360도 회전시켜서 볼 수 있는 기능을 추가하게끔 디자인을 했다.
코딩을 하면서 실현시킬 가능성은 0%이지만 최근에 주임님이 지구본을 360도 데굴데굴 굴리는 css를 만드셔서 내년 초에 도전해볼만도.. 할 듯...?하다
웹페이지 브랜드 스토리 UI 그리드
브랜드스토리도 기존의 판도라 사이트는 글만 빼곡한 느낌이 있어서 이미지를 추가하고 레이아웃을 나누었다. PC버전은 그리드를 1080px 기준으로 이미지를 제외한 대부분의 컨텐츠가 안전하게 들어올 수 있도록 했다. 고정형 웹페이지 시안을 디자인할 때에는 무엇보다 그리드 안으로 90% 이상의 컨텐츠가 들어와야해서 레이아웃이 좁다고 느껴질 수 있지만 반응형같은 경우에는 pc나 기기의 화면 사이즈에 맞추어서 사이즈가 조절되기 때문에 그리드를 넘어도 관계는 없기 때문에 헤더는 조금 넓게 활용했다.
[웹디자인 포트폴리오] PANDORA Website renewal project > 1. 판도라 메인페이지 내맘대로 디자인하기
2020년 여름 SUMMER COLLECTION이 나온 시점을 기준으로 한 판도라 공식 홈페이지 레이아웃 및 디자인 이번 여름 웹디자인-웹퍼블리싱 국비지원 교육 중에서 브랜드 웹사이트를 리뉴얼 하는 프로젝트
nh0404.tistory.com
[웹디자인 포트폴리오] PANDORA Website renewal project > 3. 판도라 웹사이트 반응형으로 시안 만들기 -
PC 기준으로 웹페이지 전체 사이즈와 그리드 - 1920px에 1200px pc화면을 기준으로 디자인할 경우에는 화면의 전체 사이즈를 1920px로 잡고 가운데를 기준으로 1200px로 설정해서 칼럼과 거터를 정하는
nh0404.tistory.com
