본문 바로가기
카테고리 없음

[디자인_디자인 사이트] UX/UI디자인 참고사이트

by unplugedboy 2023. 8. 13.
반응형

[디자인_디자인 사이트] UX/UI디자인 참고사이트

그래픽디자인, 광고디자인, 패키지디자인 등과 마찬가지로 UX/UI디자인에서도 디자인의 아이디어와 레이아웃을 참고할 사이트가 필요합니다. 최신 유행의 디자인 트렌드를 찾아가야 하는것이 이유입니다.

사용자에게 직관적인 편의성과 친화감을 제공하기 위한 UX/UI디자인이 강조되면서 그 중요

성이 날로 강조되고 있습니다. UX 디자인'이라고 하면 User Experience의 약자로 사용자 경험을 의미합니다. 사용자가 어떤 제품이나 서비스 등을 직접적 혹은 간접적으로 이용하면서 느끼게 되는 반응, 행동들과 같은 총체적인 경험을 디자인 설계하는 것이 바로 UX 디자인입니다.

사이트, 제품, 모바일 앱 등을 디자인할 때 사용자가 경험하게될 경우의 관점에서 각각의 요소들을 구성하고 설계하는 것이라고 볼 수 있습니다.
그러면 UI 디자인이라고 하면 User Interface의 약자로 시각화되는 작업을 의미합니다. 겉으로 시각화하기 때문에 사용자에게 첫인상을 심어주는 역할을 하기도 하는 UI 디자인은 레이아웃, 폰트, 컬러 등 디자인의 구성요소는 물론 반응성, 애니메이션 효과 등 기술적인 부분들을 모두 포함해 사용자가 실제로 마주하게 되는 디자인 구조 자체를 의미합니다.

사용자의 호감을 얻고, 편리성과 신뢰성을 제공하기 위해 UX/UI 두 가지 요소 모두 매우 중요한 요소이며 서로 뗄 수 없는 관계이기도 합니다. 이러한 UX/UI디자인을 위한 참고 사이트를 살펴보겠습니다.

 

먼저 Collect UI 사이트입니다.

Collect UI는 디자이너들이 작업한 다양한 UI를 간편하게 확인할 수 있는 웹사이트입니다.
전체적으로 디자인의 퀄리티가 좋고, 기능별, 유저 테스크 별로 모션이 들어간 인터랙션 디자인들이 많이 있다는 점이 특징이라고 할 수 있습니다. 

Collect UI https://collectui.com
Collect UI https://collectui.com

페이지 좌측을 보면 다른 사이트들 처럼 특정한 기능 단위로 나눠진 여러 카테고리가 구성되어 있습니다. 

App icon, Settings, On/Off Switch, Pop-Up / Overlay, Map, Branding 등 총 160여가지 항목의 자료가 구성되어 있습니다..

이중 원하는 카테고리를 선택하여 UI를 확인하고 디자인 작업에 적용할 수 있습니다.

 

두번쨰로는 Mobbin 입니다.

Mobbin은 다양한 앱의 패턴을 볼 수 있는 모바일 디자인 패턴 라이브러리 사이트입니다.

170개 이상의 앱을 아이폰 스크린샷으로 제공하고 있어서 모바일 UX 디자이너에게 특히 도움이 되는 사이트입니다.

Mobbin  https://mobbin.design
Mobbin  https://mobbin.design

카테고리, 패턴, 엘리먼트 별로 검색해서 원하는 디자인을 찾아볼 수 있습니다. filter by categories 버튼을 클릭하면 좌측 드로어가 나와서 카테고리에서 원하는 카테고리를 선택합니다. 그러면 원하는 목업을 볼 수 있게 해줍니다. 

패턴으로 검색해서 maps 패턴으로 검색해서 다양한 앱의 UI를 확인할 수 있습니다. 

UI를 참고하기 좋은 최신 앱들의 화면 스크린샷이 주기적으로 업데이트 되고, 로그인을 하거나 카드 등록을 해야만 볼 수 있는 디자인까지 모두 이미지로 볼 수 있도록 되어있어서 UI 디자인을 할 때 매우 유용한 곳입니다.

 

세번째는 WWIT(What Was IT) 사이트입니다.

What Was IT

Mobbin의 한국판 사이트라고 볼 수 있는 WWIT는 국내 앱들의 UX/UI 스크린샷을 모아두는 사이트입니다.

이곳은 실제로 Mobbin에서 영감을 받아 한국의 모바일 디자인 패턴을 수집하기 위해만들어진 사이트라고 합니다. 카테고리와 패턴으로 분류되어 있어 한눈에 보기 좋습니다. 

카테고리는 라이프스타일/금융/커머스/부동산/배달/엔터테인먼트/모빌리티

패턴별은 스플래쉬/로그인/회원가입/온보딩/검색/알림/선택/장바구니/주문결재/리뷰/비밀번호/마이페이지/설정

콘텐츠가 많지 않지만 실무에서 자료조사할때 참고하면 좋습니다.

 

네번째는 Awwwards 입니다.

Awwwards

웹사이트 디자인 콘셉 아이디어를 얻을 수 있는 사이트입니다. 매년 선정되는 Site of the year 트렌드를 살펴볼 수도 있고,
사이트를 클릭하면 디자인, 창의성, 콘텐츠 등 분야별 평가 점수도 확인할 수 있습니다.

이곳에 리스팅된 사이트들은 실제로 운영 중인 사이트이기 때문에 직접 해당 사이트로 이동해 실제로 어떻게 구현되고 있는지 확인해볼 수 있다는 것이 가장 큰 장점입니다.

이 사이트 사용자가 디자인 영감을 찾을 수 있도록 고품질 웹 디자인, 웹 사이트, 그래픽 디자인 등 디지털 프로젝트에 대해서 광범위하게 보여줍니다. 

디자이너들이 다른 산업 전문가들과 디지털 디자인 분야 애호가들로부터 피드백을 받을 수 있도록 사이트내에서 제공해줍니다. 자신의 작업을 공유하고 다른 구성원들과 연결하고, 이벤트와 워크숍에 참석할 수 있는 디자이너와 디자인 애호가들의 커뮤니티를 가지고 있습니다. 

반응형