SK wyverns 홈페이지 리뉴얼

※ SK wyvenrs 홈페이지 리뉴얼

 

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

 ※ 원래 사이트 :http://www.skwyverns.com/Wyverns/main.asp

사용 스킬

 

DESIGN : Photoshop

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

---

※ 제작 동기

SK와이번스의 팬으로 경기관련 이벤트나 공지사항은 어플을 통해서만 이용하다가

우연히 홈페이지를 접속해보게되었습니다.

현재 SK와이번스의 홈페이지는 한참전에 만들어 놓고 방치된 듯한 느낌을 받아서

리뉴얼 해보기로 하였습니다.

※ 문제점

현재 SK와이번스의 홈페이지를 보면

가로의 픽셀이 980px정도로 제작되어있어 요즘 많이사용하는 해상도 1920px의 모니터로 봤을 때

굉장히 답답하다는 느낌을 받게됩니다.

그리고 이미지가 깨진 곳도 보이고, 서브페이지로 넘어가보면

응원단 소개페이지에는 틀린 소개가 링크되어있기도합니다.

※ 문제점 보완

일단 전체적인 사이즈를 1200px로 잡고, 메인배너와 서브베너는 가로 100%로 활용하여 시원한 느낌이 들게 변경하였습니다.

그리고 메인배너 안에서 스코어를 확인할 수있게 해서

현재경기상황을 간단하게 볼 수있게 하였고,

컨텐츠들을 큼직하고 직관적으로 배치하여

50대 이상의 팬들도 이용하기 편하도록 하였습니다.

※ 홈페이지 설명

네이게이션 부분은 마우스를 오버했을 때 슬라이드로 내려오게하였고

제일 오른 쪽 야구공 모양을 클릭 했을 때에는 야구공모양이 세로로 바뀌면서 전체 메뉴가 슬라이드됩니다.

컨텐츠 중 경기일정과 오시는길은 제이쿼리를 이용해 popup 되게 만들었습니다.

SNS컨텐츠 부분은 화살표를 눌렀을 때 다음 한 줄이 확장되어 보여집니다.