웹디자이너에게 유용한 UI/UX, CSS, 컬러, 폰트 사이트 모음집을 소개합니다.

요즘 많이 언급되고 있는 디자인 오픈소스 및 포트폴리오 웹사이트 외에, 씸플의 디자이너 분들의 추천 사이트를 선별하여 공유하겠습니다. 각 타이틀을 클릭하면 해당 링크로 이동합니다.


1

UI/UX

UX Magazine

사용자 경험과 관련된 최신 뉴스와 기사를 받아볼 수 있는 사이트

UX관련 컨퍼런스 정보와 전세계의 UX디자이너 구인구직 현황도 살펴볼 수 있어 해외 취업 트렌드도 파악할 수 있습니다. 모든 글이 영어기 때문에 어려운 부분도 있지만, 최신 트렌드를 읽는 웹디자이너라면 일상이 되어야 할 것 같습니다 :)


Troy Labs

다양한 디바이스 템플릿에서 반응형 웹을 확인 할 수 있는 사이트

삼성, 애플, LG, 구글, 팬택, HTC, 소니 등 초기 모델부터 최신 기종까지 구성되어 매우 편리합니다. 기종을 선택하고 웹사이트 링크만 붙여 넣으면 각 디바이스에서 어떻게 구현되는지 확인할 수 있습니다.


Capptivate

UI애니메이션 패턴 라이브러리 사이트

이제 UI 애니메이션은 앱이나 웹을 구현할 때 배제할 수 없는 중요한 부분이 되었고, 이를 구현할 때에도 공간감이나 가독성을 최대한 고려하는 등에 대한 고민이 필요한 시점이 도래했습니다. Capptivate는 인포그래픽, 인터랙션, 네비게이션, 로딩 페이지 등 카테고리를 나누어 애니메이션 패턴을 확인할 수 있어서 편리합니다.



2

CSS/jQuery


Codrops

다양한 웹디자인 튜토리얼, 레이아웃 모음, jQuery 플러그인을 제공하는 웹사이트

데모뷰로 기능을 확인할 수 있으며, 소스 다운로드를 포함해 수많은 자료를 담고 있어 웹 디자인 및 개발과 프로그래밍에 유용합니다. 라이센스 또한 상업용 등에 제한을 두지 않고 있지만, 재배포시 제한이 있을 수 있습니다.



Awwwards

우수 웹사이트 소개 및 수상작 모음 웹사이트

CSS 기술에 특화된 웹사이트들이 많고, 링크를 타고 이동해 실제 페이지를 살펴볼 수도 있으며 각 부문별 점수를 직접 매길 수도 있습니다. 독특한 시도와 실험적인 인터랙션 웹사이트도 적지 않으니 구경하는 재미가 쏠쏠합니다.



Media Queries

미디어 쿼리를 이용한 사이트 갤러리

모바일, 태블릿, 데스크탑 사이즈의 템플릿을 한눈에 볼 수 있도록 구성되어 있고, 무료로도 받을 수 있습니다. 전부 무료인 것은 아니니, 참고하시길 바랍니다.



SpinKit

스플래시 모음 사이트

8가지의 로딩 애니메이션 효과와 직접 적용할 수 있는 CSS소스도 편리하게 제공하고 있습니다. 종류가 많지 않은 점이 아쉽지만 버튼 및 효과를 최소화한 미니멀리즘을 추구해 굉장히 깔끔한 인상을 주고 있습니다.


스플래시(Splash)와 사용자 경험의 접목


스플래시는 프로그램 시작 시 타이틀 화면이나 로딩 창을 보여줌으로써 사용자에게 어떤 프로그램이 구동 중이고 어떤 상태인지 알려 주는 중요한 역할을 하고 있습니다. 
종종 제품이나 디자인을 접할 때면, 아주 사소한 것들이 제품과 디자인의 완성도를 결정하는 일들에 놀라곤 합니다. 스플래시 화면의 기다림을 놀랍고 재미있는 경험으로 바꾸는 것만으로도 사용자에게 훨씬 좋은 경험을 줄 수 있을 것입니다.

출처 — http://uxd-trend.tistory.com/17

3

디자인 템플릿


DBF

디자인 포트폴리오 자료 모음집

Dribbble과 Behance의 디자인 자료 소스를 한곳에 모아 두어 양쪽 사이트를 가지 않아도 편리하게 디자인 템플릿들을 검색할 수 있는 사이트입니다. 각 이미지별로 여백 없이 시원시원하게 구성되어 있어 한눈에 알아보기 편리합니다.



365PSD

무료 디자인 템플릿 다운로드 사이트

다양한 웹·모바일 GUI, 아이콘 등의 PSD파일을 무료로 다운받을 수 있는 웹사이트로 유명하며, ios 8을 포함한 최신 디자인 트렌드를 반영한 자료도 마음껏 찾아보고 다운받아 이용할 수 있습니다.



One Page Love

원 페이지 웹디자인 템플릿 사이트

2015 웹디자인 트렌드에서 언급했던 것처럼, 내년에도 대세가 될 원 페이지 디자인만을 모아 둔 사이트입니다. 카드형 디자인을 통해 보기 쉽도록 구성해 두었고, 각 디자인 템플릿의 퀄리티가 좋은 편이라 디자인적 영감을 찾는 데 좋은 사이트입니다.


4

그 외, 유용한 사이트


Degraeve

이미지에서 즉시 컬러를 추출해 팔레트를 생성

이미지나 사진에 있는 컬러를 사용하고 싶으나 잡색이나 노이즈 때문에 추출이 어려웠다면, 이제는 이미지만 첨부하면 자동으로 색상이 추출됩니다! 10가지 색을 파일 첨부와 URL 링크 두 가지 방법으로 이용할 수 있습니다.



Granneman

OS별 기본 서체 리스트업 사이트

윈도우, 맥 OS, 리눅스, 안드로이드, ios 등의 기본 서체들이 리스트업되어 있어 편하게 확인해 볼 수 있고, 오퍼레이팅 시스템과 각 OS별 폰트 사이즈 등 상세한 내용 또한 읽을 수 있습니다.



jpegmini

화질변화 없이 jpg파일의 용량을 줄여 주는 사이트입니다.

이미지 최적화(image optimization)가 웹사이트의 로딩시간을 좌우하지만, 고화질 이미지를 사용하자니 로딩 시간이 너무 길고, 용량이 작은 이미지를 쓰자니 화질이 많이 떨어지는 단점이 존재했습니다. 이를 보완해 주는 jpegmini는 화질변화가 거의 없이 용량을 최소 절반 이하로 줄여 주어 매우 편리합니다.

웹용은 무료이지만, 설치용은 구입 후 사용이 가능하니 참고하시길 바랍니다.



씸플 홈페이지 / 페이스북 / 트위터

웹디자이너를 위한 참고 사이트 정리
1. UI/UX


  • UX Magazine — 사용자 경험과 관련된 최신 뉴스와 기사를 받아볼 수 있는 곳
  • Troy Labs — 다양한 디바이스 템플릿에서 반응형 웹을 확인 할 수 있는 곳
  • Capptivate — UI애니메이션 패턴 라이브러리

2. CSS/jQuery


  • Codrops — 다양한 웹디자인 튜토리얼, 레이아웃 모음, jQuery 플러그인을 제공하는 웹
  • Awwwards — 우수 웹사이트 소개 및 수상작 모음집
  • Media Queries — 미디어 쿼리를 이용한 사이트 갤러리
  • SpinKit — 스플래시/로딩 애니메이션 모음집

3. 디자인 템플릿
  • DBF — 디자인 포트폴리오 자료 모음집
  • 365PSD — 무료 디자인 템플릿 다운로드 사이트
  • One Page Love — 원 페이지 웹디자인 템플릿 사이트

4. 그 외, 유용한 사이트


  • Degraeve — 이미지에서 즉시 컬러를 추출해 팔레트 생성
  • Granneman — OS별 기본 서체 리스트업 사이트
  • jpegmini — 화질변화 없이 jpg파일의 용량을 줄여 주는 사이트





출처 : https://cimple.postype.com/post/812/

저작자 표시
신고
Posted by 앗뜨거워 ( @bok3937 ) 앗뜨거


티스토리 툴바