여러분은 디자인 레퍼런스를 찾고 싶은데 내가 생각하고 있는 레퍼런스의 명칭을 몰라 원하는 레퍼런스를 정확하게 찾지 못했던 경험이 있으신가요? 학교에서 디자인을 공부할 때나 실무에 나와 일을 할 때에도 저는 이부분이 어려웠던 것 같습니다. 그래서 강의를 들은 적도 있고 관련된 UI명칭에 대한 포스팅을 하기도 했었죠! 하지만 UI의 종류는 너무 많고 그 명칭들을 모두 외우기란 쉽지 않은 일입니다. 그래서 이번에 제가 알려드릴 것은 UI명칭에 따라 디자인 레퍼런스를 분류해놓은 사이트들입니다. 나열되어 있는 명칭을 읽어보시고 원하는 느낌의 레퍼런스가 맞는지 보시면서 명칭에 대한 공부도 되고 정확히 원하는 레퍼런스도 찾을 수 있고 1석2조일 것 같습니당ㅎㅎㅎㅎㅎ많은 도움되시길 바래요!
UI명칭에 대한 공부를 원하신다면 제 블로그 " 공부 " 카테고리에 있는 UI명칭 관련 포스팅을 참고해주세요! 아래에 링크 첨부해두도록 하겠습니다ㅎㅎ
chaeyeon-chaeyeon.tistory.com/14
[디자인스타일명칭] 컨텐츠UI디자인 스타일(기법) 명칭 정리하기_1편
여러분은 실무에서 작업을 하면서 가장 어려운 점이 무엇이신가요? 제가 가장 어려웠던 점은 UI디자인의 스타일이나 형태는 알고 있는데 정확한 명칭을 알지 못해 비슷한 종류의 레퍼런스를 많
chaeyeon-chaeyeon.tistory.com
01. Collect UI
UI의 명칭을 한쪽에 길게 나열해주어서 보기에 편하고 원하는 UI를 빠르게 찾을 수 있어 좋습니다. 또한, 레퍼런스의 원본사이트도 알려주어 더 좋은 화질로 레퍼런스를 저장할 수 있으며 작가의 다른 작품들도 구경할 수 있습니다. 하지만 모바일과 PC웹의 레퍼런스를 구분해주지 않고 실제 사용되는 디자인이 아니라는 점이 조금 불편합니다.
Collect UI
Daily inspiration collected from daily ui archive and beyond. Based on Dribbble shots, hand picked, updating daily.
collectui.com
02. pttrns
모바일과 패드, 심지어는 워치까지 레퍼런스를 제공하고 있는 사이트입니다. 실제 사용되고 있는 디자인으로 이루어져 있습니다. 장점은 년도별로 디자인을 골라서 볼 수 있고 디자인스타일에 따라서도 레퍼런스를 찾아볼 수 있습니다. 레퍼런스의 종류가 많고 분류해두고 있는 카테고리도 많으며 보기에도 쉬운 UI를 가지고 있어서 많이 이용하게 되는 것 같습니다. 또한, 레퍼런스 위에 마우스오버를 하면 레퍼런스가 가지고 있는 태그나 카테고리 분류를 볼 수 있어 좋은 것 같습니다. 그리고 레퍼런스를 누르면 그 레퍼런스가 속해있는 앱의 다른 레퍼런스들도 볼 수 있어 편리합니다 .단점이라면 해외 레퍼런스들이 대부분이라는 것입니다.
pttrns
pttrns, 뉴욕. 좋아하는 사람 5,333명 · 이야기하고 있는 사람들 2명. Finest collection of design patterns, resources and inspiration.
www.facebook.com
03. UI Garage
원하는 레퍼런스를 구체적인 카테고리분류를 통해 찾을 수 있도록 정리해둔 사이트입니다. 이 사이트 역시 실제 사용되고 있는 디자인을 공유하고 있습니다. 자세한 카테고리 분류로 확실한 레퍼런스를 찾기에는 좋지만 UI명칭을 잘 모르는 사람들은 보기가 조금 불편하다는 단점이 있습니다. 하지만 모바일과 PC의 구분, 심지어는 안드로이드와 ios 디자인의 구분까지 있어 사용자가 원하는 정확한 레퍼런스를 찾기에 좋습니다. 하지만 PC웹 레퍼런스는 많지 않고 거의 모바일이 대부분이라 PC웹 레퍼런스를 찾기에는 좋지 않을 것 같네요.
UI Garage – Specific UI Design inspiration & Pattern for your design.
Daily UI inspiration & patterns for designers, developers to find inspiration, tools and the best resources for your project.
uigarage.net
04. Mobile Patterns
실제 사용되고 있는 디자인들로 이루어져 있으며 캡쳐된 이미지보다는 동작하고 있는 모습을 보여주는 영상을 주로 공유하고 있는 사이트입니다. 사이트의 이름처럼 PC웹이 전혀 없이 모바일 레퍼런스들만 소개하고 있는 사이트입니다. 단점은 최신 레퍼런스들이 적고 한국앱들보다는 외국앱들이 많다는 점입니다. 그래도 UI종류에 따른 동작하는 플로우나 모션, 인터렉션 등을 알 수 있어 좋은 것 같습니다.
Mobile Patterns - UI UX Inspirational Gallery for iOS and Android
www.mobile-patterns.com
05. Good web design
해외에서 실제 사용되고 있는 사이트들의 스크린샷을 모아둔 사이트입니다. 현재는 리뉴얼된 사이트의 기존 버전이나 만료된 사이트의 디자인도 볼 수 있어 좋습니다. 실제 사용되었던 웹디자인들을 페이지별이 아닌 UI별로 나누어 보여주고 있습니다. 물론, UI스크린샷을 클릭하면 해당 사이트의 전체 스크린샷도 볼 수 있습니다.
06. UXarchive
모바일앱 레퍼런스들로만 구성되어 있는 사이트입니다. 이 사이트 또한, 실제 사용되고 있는 모바일 앱 이미지를 모아두고 있습니다. 모바일 앱을 비슷한 유형별로 나누어 태그로써 구분하고 있어 보기 편하고 심지어는 동작에 대한 플로우별로 카테고리를 나누기도 하여 다른 사이트보다도 디테일한 화면을 확인할 수 있습니다. 또한, 앱의 동작 플로우를 그대로 가져와 이미지로 보여주기 때문에 전체적인 동작 진행방식을 알 수 있으며 어떤 터치방식(한번터치, 두번터치, 키보드사용 등)을 사용해 앱을 동작했는지까지 알려주고 있어 편합니다. 하지만 카테고리의 종류가 다른 사이트에 비해 적고 외국레퍼런스들이 많으며 회원가입을 해야한다는 단점이 있습니다.
UXArchive - Made by Waldo
UXArchive the world's largest library of mobile user flows. Be inspired to design the best user experiences.
uxarchive.com
끝까지 봐주셔서 감사합니다! :-)
참고사이트
designbase.co.kr/%EC%95%B1-gui-%EC%B0%B8%EA%B3%A0-%EC%82%AC%EC%9D%B4%ED%8A%B8-%EB%AA%A8%EC%9D%8C/
'디자인 + α > 실무' 카테고리의 다른 글
| [디자인가이드] 애플과 구글의 디자인 가이드 알아보기 (0) | 2021.03.22 |
|---|---|
| [실무디자인팁] 실무에서 디자인 작업을 할때 헷갈리던 부분들을 쏙쏙 집어드립니다! (0) | 2021.02.23 |
| [이미지소스] [총정리] 실무에서 사용하는 상업용 무료 이미지소스 사이트 모음 (0) | 2020.12.30 |
| [디자인레퍼런스] 실무에서 유용한 실제 상용화되고 있는 디자인 사이트 모음 (2) | 2020.07.10 |
| [목업소스] 실무에서 사용하는 상업적 사용이 가능한 목업소스 사이트 모음 (10) | 2020.06.27 |
댓글