반응형 웹 제작사례 2016 버전 업데이트
헬로웹에서 제작한 2015~2016년까지의 반응형 웹 제작사례 포스트를 개시했습니다.
반응형웹 2016 제작사례 보러가기 >>
반응형 웹 제작사례
반응형 웹은 2~3년 전부터 웹 관련 업계의 뜨거운 이슈로 떠올랐는데요,
스마트폰부터 스마트TV 까지, 웹을 이용하는 사용자에게 최상의 웹 서비스는 반응형 웹 입니다.
이번엔 해외 및 국내 반응형 웹 제작사례를 소개합니다.
우선 반응형 웹 해외 제작 사례를 먼저 소개하겠습니다.
일반 서비스부터 학교, 공공기관, 브랜드 사이트 등 다양한 분야의 반응형 웹 사이트를 선정했습니다.
아래 사이트들을 보실때 브라우저 사이즈를 줄여보시면 스마트폰에서 어떻게 보이는지 확인하실 수 있습니다.
1. MailChimp
이메일 서비스로 유명한 메일침프(MailChimp) 입니다.
Chimp 의 이름에서 만들어진 침팬치 아이콘이 눈에 먼저 들어옵니다.
웹사이트 제작 기획을 하고 있는 상황이라면 한번쯤 봐볼만한 웹 사이트 입니다.
2. MARMOSET
풀사이즈 동영상이 젤 먼저 눈에 띄는 웹 사이트 입니다.
스크롤을 내려보면 풀 사이즈 이미지와 함께 각각의 아티스트 음악을 들어볼 수도 있습니다.
3.PETER-PAN
일본에 위치한 이탈리안 레스토랑 입니다.
실제 Lunch, Dinner 페이지 디자인이 실제 메뉴판 처럼 디자인 되어 있고 예약 기능도 있습니다.
4.tile
tile 제품에 대한 소개와 회사소개를 같이 하고 있는 웹 사이트 입니다.
풀 사이즈 이미지를 잘 활용한 것 같습니다.
우측 상단 메뉴 영역에 마우스 오버시 펼쳐지는 내비게이션이 인상적입니다.
5.Visit LONDON
런던을 홍보하는 웹 사이트 입니다.
비지니스, 학업, 여행지 등 다양한 정보를 제공합니다.
공식적인 런던 홍보 회사라고 하네요. 아쉽게도 visitseoul.com 은 없네요.
6.Karma
Karma 제품에 대한 브랜드 홍보 사이트 입니다.
감성적인 영상으로 시작되는 이 웹 사이트는 붉은 색과 푸른 색의 적절히 조화되어 있고
심플하면서 고급스럽게 디자인 되어 있습니다.
브랜드 사이트 런칭을 고민중인 마케터, 기획자 혹은 디자이너 분들은 보시면 도움이 될 수 있을것 같습니다.
7. HARVARD UNIVERSITY
하버드 대학교 웹 사이트 입니다.
굉장히 많은 정보를 포함하고 있는 웹 사이트 임에도 불구하고 반응형 웹 으로 제작을 했습니다.
8.Inky
Inky 라는 이메일 관련 소프트웨어 웹 사이트 입니다.
파란색, 검정, 흰색 3가지 색으로 디자인 되어 있습니다.
제품에 대한 매력적인 요소들을 적절히 배치시켜 보여줌으로써 매력도를 높여주고 있습니다.
9.DIESEL GYM
영국에 있는 종합격투기 체육관 입니다.
반응형 웹 디자인을 적용했으며, 워드프레스로 제작이 되었네요.
국내 반응형 웹 제작사례
해외 반응형 웹 제작사례에 이어서 국내 제작사례를 소개하겠습니다.
국내에서도 반응형 웹에 대한 관심이 증가하고 있고 많은 제작사례가 보이고 있습니다.
먼저 타사에서 제작한 반응형 웹 제작사례 몇가지를 소개하겠습니다.
해외 제작사례와 마찬가지로 브라우저 가로 사이즈를 줄여보시면서 보시면 스마트폰에서 보이는 화면을 보실 수 있습니다.
1. 삼성엔지니어링
삼성엔지니어링 웹 사이트 입니다.
좌측 상단 로고 아래에 Korean 클릭시 한국어로 보실 수 있습니다.
반응형으로 사이즈를 줄이면 좌측에 있던 메뉴바가 없어지고 상단에 메뉴바가 생깁니다.
삼성엔지니어링 홈페이지 또한 하버드 홈페이지처럼 많은 양의 컨텐츠를 반응형 웹으로 구현한 예시가 될 수 있을것 같네요.
2. 현대차 기업문화 홍보 사이트
현대차 기업문화 홍보 사이트 입니다.
2012년에 제작 완료하면서 국내 웹 디자인에 많은 영향을 미친것 같습니다.
4개의 영역으로 구분된 컨텐츠 영역이 사이즈를 줄이면서 3개,2개,1개로 바뀌는 것을 보실 수 있습니다.
2012년 웹 어워드 시상식에서 종합 최고 대상을 차지한 웹 사이트 입니다.
3. 유니온스틸
유니온스틸 웹 사이트 입니다.
헬로웹 반응형 웹 제작사례
다음으로 저희 헬로웹에서 제작한 사례 입니다.
워드프레스 및 헬로웹 CMS 를 이용하여 제작하였습니다.
1. 카페로베로즈
워드프레스로 제작한 카페로베로즈 브랜드 사이트 입니다.
2. 차상훈 성형외과
워드프레스로 제작한 차상훈 성형외과 웹 사이트 입니다.
3. 라이나금융서비스
라이나금융서비스 웹 사이트 입니다.
헬로웹 CMS 로 제작되었습니다.
4. 디자인공간사랑
디자인공간사랑 웹 사이트 입니다.
헬로웹 CMS 로 제작되었습니다.
5. 마리아바이오텍
마리아바이오텍 웹 사이트 입니다.
헬로웹 CMS 로 제작되었습니다.
6. 더트루노스
더트루노스 웹 사이트 입니다.
헬로웹 CMS 로 제작되었습니다.
7. 사계디자인
사계디자인 웹 사이트 입니다.
워드프레스로 제작되었습니다.
Pinterest UI 를 적용하여 포트폴리오 위주의 웹사이트에 유용하도록 제작되었습니다.
8. 포도인커뮤니케이션
포도인커뮤니케이션 입니다.
헬로웹 CMS 를 통해 제작되었습니다.
이외에도 반응형 웹 제작 사례는 무수히 많습니다.
간단히 구글 검색을 해봐도 찾으실 수 있을텐데요, 이러한 제작 사례를 모아놓은 링크를 소개합니다.
http://www.ugurus.com/responsive-design-examples
