2018 년 4 월을위한 10 가지 새로운 웹 디자인 도구

콘텐츠

• 01. 디자인 시스템 레포
• 02. PixelSnap
• 03. 스케치. 더 리퍼
• 04. 스택 스웰
• 05. 가변 글꼴
• 06. 스트라이프 빌링
• 07. 크리에이티브 길드
• 08. 모빈
• 09. HueSnap
• 10.에 그라디언트
• Generate New York 티켓 받기

이번 달 라운드 업의 주제는 속도와 효율성입니다. 웹 디자인 도구 디자인과 관련이없는 지루하고 답답한 작업을 제거하여 워크 플로우에 놀라운 일을 할 것입니다. Stackswell을 사용하면 Sketch에서 반응 형 디자인을 수행하는 모든 성가신 부분을 자동화합니다. 또 다른 도구는 .sketch 파일에서 모든 자산을 추출하고 구성하여 작업 속도를 높입니다.

뿐만 아니라 Stripe의 멋진 새 결제 제품, Tina Roth Eisenberg의 크리에이티브를위한 훌륭한 네트워킹 도구이자 화면의 항목을 픽셀 단위로 측정하는 환상적인 도구가 있습니다.

01. 디자인 시스템 레포

조직의 디자인 시스템을위한 몇 가지 구성 요소를 작업했거나 시스템 자체를 구축하거나 코드화하는 작업을 맡은 경우 해당 주제에 대한 최신 리소스를 확인하는 것이 좋습니다.

이를 위해 Design Systems Repo는 당신의 친구입니다. 최고의 조직과 선도적 인 사상가가 업무를 수행하는 방식을 이해하는 데 사용할 수있는 책, 기사, 강연, 웹 사이트, 도구, 디자인 시스템, 패턴 라이브러리 및 스타일 가이드 모음입니다.

02. PixelSnap

PixelSnap은 화면에서 사물을 훨씬 덜 귀찮게 측정 할 수있는 매우 멋진 앱입니다. 이미지와 제목과 같은 두 요소 사이에 커서를 놓으면 두 요소 사이의 픽셀 수를 자동으로 알려줍니다. 요소 주위에 직사각형을 그리면 요소 주위에 스냅되어 치수를 알려줍니다. 예. 빠르게 측정 할 수 있습니다.

아이디어를 얻으려면 홈페이지의 비디오를 확인하십시오. 이 앱의 가격은 15 달러이며 유일한 단점은 현재 Mac 앱으로 만 제공된다는 것입니다. 하지만 Mac 사용자라면 정말 좋은 일입니다.

03. 스케치. 더 리퍼

Sketch에서 자산을 내보내고 준비하여 다른 팀에 넘기는 것은 정말 힘든 일이 될 수 있으므로 한 번의 클릭으로이를 수행하는 도구에 대한 전망은 다소 흥미 롭습니다. Sketch.The.Ripper는 화면을 추출 및 구성하고, 모든 아트 보드의 이미지를 .sketch 파일로 복사 및 래스터하고 편리한 방식으로 표시합니다. 여기에서 찢어진 파일의 출력 예를 볼 수 있습니다.

이 도구는 웹 기반이므로 모든 OS에서 작동하므로 사람들이 다른 시스템을 사용하는 경우 워크 플로에서 약간의 마찰을 제거 할 수 있습니다. Icons8에서 제작했으며 여기에서 자세한 내용을 읽을 수 있습니다.

04. 스택 스웰

Stackswell은 미디어 쿼리를 Sketch로 가져오고 각 중단 점에 대한 유형 스타일 및 기호를 업데이트하는 프로세스를 자동화하여 반응 형 디자인 워크 플로의 속도를 높입니다. 이 작업을 수동으로 수행하는 대신 아트 보드의 너비를 조정하면 스타일이 자동으로 업데이트됩니다.

Stackswell은 또한 각 중단 점에 대해 수직 간격을 확인해야하는 작업을 절약하므로 번거 로움을 최소화하면서 일관된 간격을 얻을 수 있습니다. 이 기사에서 더 많은 것을 읽을 수 있습니다.

05. 가변 글꼴

가변 글꼴을 사용하면 각각에 대해 별도의 파일을 포함하지 않고도 다양한 글꼴 두께와 너비를 사용할 수 있습니다. 하나의 파일을 포함시킨 다음 CSS를 사용하여 글꼴을 수정합니다. 페이지 무게를 늘리지 않고도 디자인에서 최상의 효과를 내도록 타이포그래피를 사용할 수 있기 때문에 좋은 상황입니다.

모든 가변 글꼴이 동일하지는 않습니다. 일부는 다른 것보다 더 유연합니다. 이 도구를 사용하면 다양한 글꼴을 찾고 실험하여 필요에 맞는지 확인할 수 있습니다. 가변 글꼴에 대한 자세한 정보와 얻을 수있는 것에 대한 아이디어를 얻으려면이 데모를 사용해보십시오.

06. 스트라이프 빌링

온라인 비즈니스를위한 Stripe의 새로운 결제 제품은 결제 시스템 구축 또는 구매 여부에 대한 딜레마를 고려하는 기업에게 세 번째 방법을 제공합니다 (자세한 내용은 온라인 상점 솔루션에 대한 기사 참조). Stripe Billing API는 기존 사이트에 쉽게 통합되며 빌딩 블록을 사용하여 필요에 맞는 유연한 시스템을 만들 수 있습니다.

시스템이 설정되면 구독, 송장 및 재무 보고서를 확인할 수있는 대시 보드에서 모든 것이 관리됩니다. 또한 다양한 통화 및 신용 카드를 처리하는 Stripe의 글로벌 결제 시스템과 가격을 실험 할 수있는 유연한 결제 구성 요소와 같은 강력한 기능을 사용할 수 있습니다.

07. 크리에이티브 길드

CreativeGuild는 10 년 전 브루클린에서 Tina Roth Eisenberg가 설립 한 월간 무료 강의 시리즈 인 CreativeMornings의 스핀 오프입니다. 이 개념은 히트를 쳤고 이제는 전 세계 185 개 이상의 도시에 CreativeMornings 챕터가 있으며, 각 챕터는 회원을 육성하고 영감을주는 고유 한 커뮤니티를 보유하고 있습니다.

CreativeGuild는 더 많은 사람들이 액세스 할 수 있도록 커뮤니티 측면의 일부를 온라인으로 제공하기위한 것입니다. LinkedIn과 비슷하지만 창의적인 사람이라고 생각할 수 있습니다. 창의적인 회사, 개인 및 직업에 대한 디렉토리가 있으며 위치별로 검색하여 도시에서 기회를 찾을 수 있습니다.

08. 모빈

Mobbin은 자신의 프로젝트에 대한 아이디어를 얻는 데 사용할 수있는 모바일 앱 디자인 갤러리입니다. 많은 앱을 설치하는 대신 한 곳에서 검색하여 다른 사람들이 디자인 문제를 어떻게 해결하는지 확인할 수 있습니다. 각 앱에 대한 6 개의 화면이 표시되므로 각 앱에 대한 사용자 여정과 디자인 패턴에 대한 아이디어를 얻을 수 있습니다. 채용 정보 목록을 표시하는 사이드 바도 있습니다.

09. HueSnap

언제 영감이 떠오를 지 알 수 없습니다. 아마도 호텔의 장식이나 공원의 조명이 작업에 적합한 색 구성표처럼 느껴질 것입니다. 이 경우 사진을 찍고 HueSnap을 사용하여 이미지에서 색상을 추출하여 팔레트로 만들 수 있습니다.

이 앱은 모바일 사용을 목표로하므로 휴대폰에서 가장 잘 작동하며 팔레트를 저장하고 다른 사람과 공유 할 수 있습니다. 보색 및 복합 색상을 선택하는 옵션과 같이 팔레트를 수정하는 데 도움이되는 다양한 기능이 있습니다. 팔레트는 각각 최대 6 개의 색상을 가질 수 있습니다.

자세한 내용은 웹 디자이너를위한 최고의 색상 도구 모음을 살펴보세요.

10.에 그라디언트

이 아름다운 그라디언트 컬렉션을 모은 사람은 색상에 대한 눈과 흥미로운 유머 감각을 가지고 있습니다. 각 그라디언트는 달걀 모양의 용기에 표시되며 어떤 방식 으로든 색상과 관련이있을 수도 있고 아닐 수도있는 이름이 지정됩니다. 관계가 있다면 우리는 그것을 해독 할 수 없었습니다.

예를 들어 청록색 그라데이션의 경우 'Successful Immigrant', 옅은 파란색의 경우 'Wozniak 's Broken Heart', 노란색에서 녹색으로의 전환을 나타내는 'Merciful Enemy'가 있습니다.

Generate New York 티켓 받기

선도적 인 웹 디자인 이벤트 뉴욕 생성 돌아왔다. 4 월 25 일부터 27 일까지 진행되는 헤드 라인 강연에는 SuperFriendly의 Dan Mall, 웹 애니메이션 컨설턴트 Val Head, 풀 스택 자바 스크립트 개발자 Wes Bos 등이 포함됩니다. 워크숍과 최고의 네트워킹 기회도 있습니다. 놓치지 마세요. 지금 생성 티켓 받기.