MAC 홈페이지 리뉴얼

※ MAC 코리아 홈페이지 리뉴얼

 

※ 리뉴얼 주소 : http://beehoyoung.dothome.co.kr/mac_2

 ※ 원래 사이트 : https://www.maccosmetics.co.kr/

사용 스킬

 

DESIGN : Photoshop

CODING : HTML, HTML5, CSS, CSS3, JavaScript, JQuery

---

※ 제작 동기

MAC이라는 화장품 브랜드는 전 세계적으로 유명한 화장품 브랜드입니다.

우리나라에서는 모든 백화점의 1층에 자리잡고있는 외국 화장브랜드이며 특히 색조화장이 유명한 곳입니다.

가격대가 있는 화장품 브랜드이지만

처음 홈페이지를 들어갔을 때 어수선한 분위기에 배너와 제품 모든 것이 눈에 보이지않고

전체적으로 정신없다는 느낌을 받았습니다.

그래서 깔끔하게 변경해보고싶어 리뉴얼 해보게 되었습니다.

※ 문제점

배너들이 어수선하게 나열되어있었고,

탭 메뉴로 이동되는 섹션에서는, 아이템의 배열이 부족하다는 느낌을 받았습니다.

그리고 네비게이션 메뉴의 순서가 효율적이지 않다는 생각이 들었습니다.

※ 문제점 보완

전체적으로 어두운 느낌을 주어 고급스러움을 나타내었고,

메뉴는 서브메뉴를 한번에 볼 수있는 형식으로 변경하였습니다.

※ 홈페이지 설명

포토샵을 이용해 와이어프레임과 시안작업을 한후,

HTML로 레이아웃을 구성하였습니다.

메뉴는 제이쿼리를 이용하여 mouseover시 slideDown 되게 만들었고,

메인 매너는 bxslider Plug in을 통해 좌우 슬라이드가 될 수있게 하였습니다.

 가운데 부분은 background를 fixed로 설정하여,

스크롤 되었을 때 고정시켜 전체적으로 어두운 분위기에 재미요소를 더해보았습니다.