220+ 훌륭한 UX를 위한 머티리얼에서 영감을 받은 아이콘

아이콘은 앱이나 웹 사이트의 정보를 쉽게 탐색할 수 있을 뿐만 아니라 콘텐츠를 요약하여 콘텐츠의 가독성을 높이고 흥미롭게 만들고 웹 프로젝트의 가장 중요한 부분에 사용자의 관심을 끌기 위해 사용자 경험을 향상시키는 데 항상 중요했습니다.

도구 모음과 팔레트의 공간을 절약하고 해외 사용자를 위해 아이콘을 번역할 필요가 없습니다.

​Infragistics에서 다양한 샘플과 앱을 작업하면서 디자인 팀은 항상 Google의 머티리얼 아이콘이 사용자 인터페이스 디자인에는 적합하지만 특히 금융 및 건강과 같은 영역에서는 제한적이라는 것을 알게 되었습니다. 그래서 몇 가지 논의 끝에 우리는 Google에서 제공하는 공식 머티리얼 디자인 아이콘 세트를 우리뿐만 아니라 우리 제품을 사용하는 훌륭한 사람들에게 가치있는 5 가지 범주의 아이콘으로 비공식적 인 하위 집합으로 확장하기로 결정했습니다.

제품 디자이너가 되어 전 세계적인 팬데믹으로 인해 몇 달 동안 재택근무를 하면서 동시에 가족을 돌보는 것은 쉬운 일이 아닙니다. 특히 호기심 많은 6살짜리 남자 아이가 당신의 일에 대해 더 알고 싶어하고 그것이 모노폴리나 축구를 하는 것보다 왜 더 중요한지 알고 싶어할 때 특히 그렇습니다.

저는 이것을 함께 시간을 보낼 수 있는 기회로 보았고, 제 아들이 그림 그리는 것을 정말 좋아하기 때문에 우리 디자인 팀이 시작하기로 결정한 5가지 범주에 대한 아이디어를 스케치하는 데 다음 며칠 동안 협업 시간을 즐겨서 이를 달성하기로 결정했습니다.

우리는 손에 연필을 들고 함께 앉아서 몇 가지 디자인 컨셉을 설명하려고 노력했습니다. 우리는 적절한 은유와 실제 물체에 대해 생각하고, 우리가 염두에 두고 있던 가능한 상징에 대한 몇 가지 연관성을 기록한 다음, 나중에 제가 디자인한 새로운 물질적 영감을 받은 아이콘 세트가 될 수 있는 몇 가지 프로토타입을 그렸습니다.

제 아들은 종종 질문을 받았고 스케치에서 들은 것을 구현하려고 노력했습니다. 수정과 피임과 같은 일부 아이콘의 의미를 어떻게 설명했는지 묻지 마십시오. 아이콘에 대한 이해는 대부분 이전 경험을 기반으로 하기 때문입니다. 하지 않았다. 그 상징들은 내 눈에만 남겨두었다. 호흡기 마스크와 바이러스는 우리 모두가 직면한 어려운 시기 때문에 훨씬 더 쉽게 이해할 수 있었고 어려운 질문 없이 논의할 수 있었습니다. 아들과의 상호 작용은 실제로 제 아이디어를 더욱 발전시키고 검증 할 수 있도록 격려해 주었습니다. 이제 6살짜리 아이가 기억에 남는 아이콘을 만들 수 있다면 정말 잘한 것이라고 생각합니다.

소중하고 생산적인 시간이었습니다!

​재료에서 영감을 받은 아이콘 세트 Angular 위한 IgniteUI 에는 디자인에서 발생할 수 있는 다양한 상황에 대한 220개 이상의 아이콘이 포함되어 있습니다. 우리는 5 가지 카테고리로 배포되는 모든 아이콘을 출시합니다.

재원

금융 아이콘이 있는 확장 세트는 은행 업무, 현금, 저축, 쇼핑 및 전자 상거래와 관련된 일반적인 요구 사항을 다룹니다.

건강

건강 아이콘이 있는 세트는 치과 치료, 의학 기호, 의료 시설 및 기관, 건강 관련 문제와 같은 다양한 주제를 다룹니다.

로고

이 아이콘 세트는 Apple Pay, Dropbox, Google Drive, PayPal, 다양한 브라우저 로고, Word, Excel, Outlook 등의 최신 Microsoft 제품 로고와 같이 디자인에 사용할 수 있는 가장 인기 있는 로고로 구성되며 모두 Material Design 언어에 잘 어울립니다.

프로그램 작성

git commit, git compare, git merge, repository, inspect code, console 등과 같은 프로그래밍 관련 머티리얼 아이콘을 찾고 있다면 여기에서 찾을 수 있습니다.

소셜 미디어

Facebook, TikTok, Instagram, YouTube, LinkedIn 등의 모든 소셜 미디어 자료에서 영감을 받은 아이콘을 갖지 않고는 벗어날 수 없었습니다.

각 아이콘은 최신 브라우저에서 광범위하게 지원되기 때문에 SVG 파일로 사용할 수 있으며, 또한 아이콘을 JavaScript 개체로 내보내어 Angular / React /Vue 앱에서 가져올 수 있습니다.