웹디자인포폴 (3) 썸네일형 리스트형 [웹디자인 포트폴리오] Bershka 웹페이지 리뉴얼하기 - 1920px/1600그리드로 pc화면 설계하기 spa 브랜드 bershka는 컨텐츠 단순한 2-1-2-1 나열로만 이루여져 있습니다개인적으로 큰 이미지들로 메인페이지를 구성하는 건 내 스타일이기도하고 하이브랜드인 샤넬, 구찌도 이러한 레이아웃을 추구하고 있어서 딱히 마음에 안드는건 아니지만 화면 로딩시간도 길고 페이지넘김에 무거운 느낌이 있습니다. 작성 요건에 맞추어서 디자인한 결과입니다.2) 문서 필수 작성 사항① 매체별 특성 PC에 맞는 화면 그리드를 작성하여 작업을 진행한다.- PC화면 : 문서 크기(1920), 그리드(1600grid, 그리드 폴더명(1600그리드))② 설계단계에서 진행한 폰트와 컬러를 사용하여 작성한다.③ 메인메뉴로 배치하지 않을 별도의 아이콘 및 메뉴를 탑메뉴로 설정하여 작성하시오.(자주 사용하는 요소는 아니지만 필요한 요.. [웹디자인 포트폴리오] PANDORA Website renewal project > 3. 판도라 웹사이트 반응형으로 시안 만들기 - 그리드 사이 PC 기준으로 웹페이지 전체 사이즈와 그리드 - 1920px에 1200px pc화면을 기준으로 디자인할 경우에는 화면의 전체 사이즈를 1920px로 잡고 가운데를 기준으로 1200px로 설정해서 칼럼과 거터를 정하는게 가장 일반적이다. 계산하기 귀찮을 때에는 칼럼 70px에 거터 30px로 정한 후 양 끝 거터를 15px로 맞추는 형식으로 진행하지만 원하는 UI 디자인의 정확한 사이즈가 있다면 https://1200px.com/ 에서 직접 입력하면 쉽게 칼럼과 거터의 px사이즈를 알 수 있다. 1200px Grid System Why 1200? All modern monitors (mostly wide-screen) support at least 1280 x 1024 pixel resolution. In.. [웹디자인 포트폴리오] PANDORA Website renewal project > 1. 판도라 상세 제품/브랜드 스토리 페이지 내맘대로 디자인 해외취업을 위한 영문 웹페이지 시안 디자인하기 일본 SE나 웹디자이너 직무에 지원하고 싶어 서브페이지부터는 영문으로 시안을 만들었다. 마침 디즈니랑 콜라보를 하고 있어서 특색 있는 컬렉션 페이지를 디자인했다. 제품 자체도 크기를 너무 작게 올렸는데 비해 일본이나 영국 판도라 사이트를 보니 이미지컷을 확대해서 업로드하여 디테일을 더욱 상세히 볼 수 있는 장점이 있었다. 베너와 콜라보 이미지를 만들기 위해 공을 많이 들였는데 기대 이상으로 잘 뽑힌 것 같다. 2-3년 전부터 디즈니나 워너브라더스 등과 콜라보레이션을 진행하는 브랜드가 부쩍 증가하였지만 그에 비해 주얼리 디자인은 어떤 브랜드와 콜라보했는지 잘 나타나지 않는 마케팅의 미흡한 점을 보충하기 위해 오리지널 이미지를 사용하였으며, 엄청난 포부를 가지고.. 이전 1 다음
