web design/web design (7) 썸네일형 리스트형 [웹디자인 포트폴리오] Nikon Imaging Korea 니콘 이미징 코리아 웹페이지 리뉴얼하기 - Login/Registerpage (로그인화면, 회원가입화면ui) 2020/11/29 - [web design/web design] - [웹디자인 포트폴리오] Nikon Imaging Korea 니콘 이미징 코리아 웹페이지 리뉴얼하기 - mainpage [웹디자인 포트폴리오] Nikon Imaging Korea 니콘 이미징 코리아 웹페이지 리뉴얼하기 - mainpage Unlock the future with the power of light 니콘 사이트 www.nikon-image.co.kr/ (주)니콘이미징코리아 (주)니콘이미징코리아 www.nikon-image.co.kr 신뢰와 창조를 비전으로 하는 니콘 이미징 코리아 웹페이지 리뉴얼해보기 결과물 니콘 하면 가장 먼저 떠오르는 이미지 "클래식" 그리고 내가 가장 좋아하는 "니콘 FM2" 이 두가지의 이미지를 고려해서 니콘의 고급스러움과 클래식함을 살려 웹페이지를 리뉴얼해보았습니다. 컨텐츠 1 부분에는 슬라이드 베너 형식으로 오른쪽으로 넘어가게 디자인하였으며, 기존의 정해진 가로 X 세로 사이즈에 구애받지 않고 베너마다 사이즈를 유동적으로 조절하였습니다. 컨텐츠 2 The best products 부분은 기본적으로 .. [html/css]웹페이지에서 파비콘 가져오기 / 파비콘 연결하기 / 파비콘 만들기 및 아이콘 파일로 변경하기 파비콘 Favicon : 즐겨찾기할 때 추가되는 아이콘 모양 일반적으로 디자이너가 포토샵으로 직접 만들때는 16px X 16px 으로 작성하여 파일명.png 로 저장하여 아이콘(.ico) 파일로 변경합니다. png 파일을 ico 파일로 변환하기 아이콘 파일로 변경해 주는 사이트 ▼http://favicon-generator.orgFavicon & App Icon GeneratorUpload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons.www.favicon-generator.orghttp://www.degraeve.com.. [웹디자인 포트폴리오] 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년 전부터 디즈니나 워너브라더스 등과 콜라보레이션을 진행하는 브랜드가 부쩍 증가하였지만 그에 비해 주얼리 디자인은 어떤 브랜드와 콜라보했는지 잘 나타나지 않는 마케팅의 미흡한 점을 보충하기 위해 오리지널 이미지를 사용하였으며, 엄청난 포부를 가지고.. [웹디자인 포트폴리오] PANDORA Website renewal project > 1. 판도라 메인페이지 내맘대로 디자인하기 2020년 여름 SUMMER COLLECTION이 나온 시점을 기준으로 한 판도라 공식 홈페이지 레이아웃 및 디자인 이번 여름 웹디자인-웹퍼블리싱 국비지원 교육 중에서 브랜드 웹사이트를 리뉴얼 하는 프로젝트가 있었다 평소에 워낙 주얼리를 좋아해서 주얼리 웹페이지들을 찾다가 의외로 별로였던 판도라 공홈을 리뉴얼 하기로! 기존의 판도라 시그니처 컬러라고해도 과언이 아닌 핑크색 컬러가 많이 빠져있어 밋밋한 느낌이 들고 한국적인 웹디자인과는 조금 거리가 있어보인다 그래서 웹페이지 리뉴얼 프로젝트로 선택하게 된 판도라! 디자인 가이드로는 무난한 모노톤과 시그니처 컬러인 핑크색을 위주로 메인컬러와 메인보드 이미지를 선택했다 평범한 웹디자인 포트폴리오라면 메인페이지 - 서브페이지 - 브랜드 스토리 페이지 제작 후 목.. 이전 1 다음
