반응형 웹사이트를 제작한다면 꼭 봐야할 사이트 모음

스마트폰이 나오면서 반응형 디자인 설계는 이제 필수가 되었습니다. 반응형 웹사이트는 어떤 구조와 디자인을 가지는지, 패턴과 아이디어를 얻을 수 있는 사이트들을 정리해보았습니다.

 

 

반응형 디자인 패턴알기

 

• Google Developers(반응형 웹 디자인 패턴에 대해)

 

 

반응형 웹디자인은 몇가지 패턴이 있습니다. 구글 디벨로퍼에서는 유동형, 콜룸 드롭, 레이아웃 시프터 등 다양한 패턴에 대한 설명과 실제 구현가능한 코드까지  제공하고 있습니다.

국내 어워즈, 웹사이트 모음

 

좌 지디웹, 우 디비컷

 

• 지디웹(웹사이트 평가, 에이전시 검색 등)
• 디비컷(웹디자인 평가 및 우수 웹사이트 모음)

 

 

 

해외 어워즈, 웹사이트 모음

 

좌 RWDB, 우 미디어쿼리

 

• RWDB(반응형 웹사이트 정보)
• mediaqueri(반응형 웹사이트 모음)
• webdesign-inspiration(유형별 산업별 웹사이트목록)
• CSS Winner(웹디자인 어워즈)
• CW(웹사이트 영감)

웹디자인 아이디어

 

좌 CSS가든, 우 라파닌자

 

• CSS Zen Garden(아름다운 CSS 디자인)
• Lapa Ninja(랜딩페이지 아이디어)

 

 

 

반응형 템플릿

 

반응형 웹사이트 템플릿을 제공하는 사이트는 아래 사이트 말고도 다양하게 있습니다. 대부분 유료 템플릿을 판매하는 사이트인데, 무료로 제공하는 템플릿도 있으니 찾아보시면 도움이 되실 것 입니다.

 

• Webflow (각종 반응형 템플릿)
• graphicdesignresources(반응형 목업 템플릿)

국내 에이전시 홈페이지

 

국내 에이전시 사이트들을 찾아보면서, 웹사이트 디자인이나 구현에 참고하면 좋겠다고 생각한 부분을 괄호안에 적어서 정리해보았습니다.

 

에이전시 홈페이지와 포트폴리오는 현업에서 활약하시는 분들의 작품이니, 해외의 실험적인 디자인이 현실성없다고 느끼시는 분들은 주목해주세요.

 

• 지디웹(웹에이전시 포트폴리오 통합검색)
• vinylc(메뉴가 한글인게 좋고 깔끔)
• reconers(포트폴리오 카테고리)
• pixdine-waymaker(포트폴리오 태깅)
• theglim(폰트)
• plus-ex(프로세스 뷰)
• bdot(디테일뷰 크기가 적당, 디테일뷰 배경회색좋음)
• designpixel(카드 자동 more)
• candcomm(로고랑 메뉴 호버했을때 웃는 모양이 좋다)
• soroweb(하나씩 페이드하며 올라오기)
• 브이더블유(페이지 이동)
• visualstory(동그랗게 나열)
• magnumvint(카드 밑으로 내용 열기)
• theuber(자세히 보기가 팝업으로)
• masstige(카드에 링크랑 자세히 보기 아이콘)
• ucomp(깔끔한 포인터, 카드 호버 회전)
• fuz(왼쪽 메뉴 둔채로 페이지 열기)
• presscat(노트북 패드 폰에 담아놓음)

 

 

 

모바일 UI, UX

마지막으로 반응형은 아니지만, 모바일 화면을 디자인할 때 참고하면 좋은 사이트도 안내하겠습니다.

 

• uxdatabase(UX, 각종 툴 모음)
• wwit.design(국내 모바일 UX 모음)
• mobbin.design(모바일 UX 정리사이트)

 

 

 

이상으로 반응형 웹사이트를 제작한다면 꼭 봐야할 사이트 소개글을 마무리하겠습니다. 제작하시는 사이트가 수많은 웹사이트들 중에서도 빛나는 사이트가 되면 좋겠습니다.

 

 

 

 

읽어주셔서 감사합니다.