웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
www.kimdirector.co.kr Photo by unsplash.com
kimdirector
Creative Web & Mobile UI/UX Planner and Designer
Humans dreaming of new creation through the UI/UX



WEBDESK
Design Inspiration
HOME WEBDESK Design Inspiration
40 Effective Responsive Navigation Menus
Posted by kimdirector | 2014.12.13 | Hit : 1584
Responsive Navigation Menus 반응형 네비게이션 모바일
목록보기이전보기
아래 소개하고 있는 사이트들은 기본으로 반응형 웹 형태로 되어 있습니다. PC 버전인 경우에는 상관없이 서핑이 가능하겠지만, 모바일 버전에서의 홈페이지 서핑의 상황은 완전히 다른 형태로 구성될 수 밖에 없습니다.
 
이유는 간단합니다. 모두 아시겠지만, 모바일의 특성상 PC버전처럼 구현할 수 없는 형태입니다. 모바일의 가로 폭이 짧고, 세로로 긴 형태이므로 모바일 환경을 고려하여 디자인하거나 개발을 해야 합니다.
 
모바일에서 웹페이지를 구현할 떄 가장 고민되는 부분이 네비게이션 시스템 부분인 것 같습니다.
 
제한된 공간에 네비게이션 시스템을 PC버전 처럼 구현했다가는 첫번째 진입화면이  네비게이션 시스템으로 꽉 차게될 것이고 내용을 확인하기 위해서는 당연히 버티컬 스크롤을 하거나, 메뉴를 Tab 해야 하는 상황이 연출되고, 사용자로 하여금 뭘 해야 하는지 당황하게 만들 수 있습니다.
 
그러한 사용자 경험을 또대로 네비게이션 시스템을 모바일 환경에 최적화하여 서비스를 기획하고 디자인하고 개발을 해야 하는 것 입니다. 소개하고 있는 40가지의  모바일 네비게이션 시스템의 좋은참고 자료가 될 것으로 생각합니다.
 
40가지 중에서도 비슷한 것들이 많지만 조금씩의 나름대로 차이점을 가지고 있고, 실제 홈페이지를 보시면 다른 요소들도 볼 수 있어서 추천할 만한 것들입니다. 최근 웹디자인 트렌드도 확인할 수 있습니다.
 
브라우저에서 보시려면, 브라우저 가로폭을 줄여서 보면 되는거 아시죠.
 
시간있을 때 한번씩 확인하고 지나가시기 바랍니다.


Grain & Mortar


Your Majesty Co


Andculture


WP Engine


Pace Law


Antro


Fixed Digital Agency


Draftfcb


Zinio


Marmoset Music


Static Interactive


The Japan Times


A List Apart


An Event Apart


Stanford Arts


World Wildlife Fund


Tilde Inc.


Paid to Exist


Web Design Ledger


Fiafo


StudioPress


ThemeTrust


DevCasts


Awesem


Matter of Form


The1stMovement


WebEffectual


Mostly Serious


Daniella Draper


Wedge & Lever


MarketPlace


Webknit


Tradestone Confections


Coulee Creative


Rokivo


 
Curt’s Special Recipes


Fall in Tennessee


Wallmob


More Air

 

Posted by kimdirector | 2014.12.13 | Hit : 1584
LINK http://www.vandelaydesign.com/inspirationalnavigation-menus/
TAG Responsive Navigation Menus 반응형 네비게이션 모바일
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=DesignInspiration&no=68

COMMENT
목록보기 이전보기

WEBDESK
Design Review
Webdesign Report
Web Plan Report
Design Inspiration
Mobile Life
Web Standard
Recommend Site
Insight Story
Best View Contents
Category Cloud
About us Review Portfolio Design Review Leaders Story Mobile UXD IT Information Web Identity Everyday Story Mobile Life Webdesign
Web Standard Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site
Tags
어플리케이션 CIP 리뉴얼 창의 스크린세이버 Material Design 접근성 비즈니스 웹페이지 사이보그 오픈소스 온라인광고 웹디자인 솔루션 모바일 사진인화 인터페이스 디자이너 yankodesign HTML5 컴퓨터 완성도 트렌드 분석 프리젠테이션 날씨 프로젝트 관리자 모바일 인사이트 O2O 무료 기획서 CEO 단어 Example UI 십계명 사용자메뉴얼 문서 Draft