Home 디자인 UX/UI 다양한 UI 디자인 사례는 물론, 코드까지 확인할 수 있는 ‘Building-blocks’

다양한 UI 디자인 사례는 물론, 코드까지 확인할 수 있는 ‘Building-blocks’

1373

 

UI디자인 사례 확인과 적용까지 한 번에!

오늘 소개드릴 서비스는 ‘Building-Blocks’입니다. 부트스트랩과 같은 반응형 프레임워크를 제공해주는 파운데이션에서 얼마전 오픈한 서비스죠. 파운데이션을 활용한 많은 종류의 UI 작업물들을 확인할 수 있도록 도와주는 서비스로, 총 7개의 카테고리에 따라 UI디자인 사례들을 확인할 수 있습니다.

 

블로그, 대시보드, 마케팅, 이커머스, 모바일앱, 포트폴리오 등 주요 내용을 한 번에 확인하고 다룰 수 있는 Kits,  앱은 물론 웹에서도 쓰일 수 있는 Navigation, 다양한 상태 정보를 확인할 수 있는 Status, 여러 콘텐츠 종류 및 레이아웃을 볼 수 있는 Media, 투두리스트, 제품 상세정보 등의 Containers, 메신저 입력창, 팝업 입력창 등의 Forms, 토글, 대시보드 메뉴, 스위치 등의 Control까지 다양한 종류의 UI 라이브러리를 코드와 함께 확인할 수 있죠. 물론, 검색을 통해 원하는 내용을 확인할 수도 있고요.

 

목록을 통해 마음에 드는 내용을 찾았다면 상세 페이지에서 더 많은 내용을 확인해볼 수 있습니다. 어떤식으로 구현이 되어 있는지는 물론이고, HTML, SCSS, JS 등의 코드를 바로 복사해서 활용할 수 있죠. 이 부분이 ‘Building-Blocks’에서 가장 매력적인 부분이라고 할 수 있는데요! 기존에도 UI 라이브러리는 많았지만, 사례 위주로 확인할 수 있는 경우가 많아 실제 적용에는 참고만 할 수 있었기 때문입니다. 하지만 ‘Building-Blocks’을 통해서는 코드를 확인하고 복사할 수 있을뿐만아니라 직접 다운로드를 하여 활용이 가능했습니다. 즐겨찾기를 해두고 언제든 재확인 할 수 있고요!

 

또한 상세페이지 하단으로 연관된 콘텐츠(여기선 블록으로 표현)를 보여주기 때문에, 여러 내용을 비교해서 살펴볼 수 있습니다. 

 

UI디자인의 다양한 사례를 확인하고, 코드를 복사해 직접 적용해보고 싶으시다면! 지금 바로 ‘Building-Blocks‘을 확인해보세요 🙂 벌써 많은 UI디자인들이 등록되어 있습니다!