디자인에서 "과학" 부담을 줄일 수 있는 앱

웹 디자이너가 가장 싫어하는 것은 무엇입니까? 아마도 코딩. 그리고 가장 가까운 두 번째는 모든 장치에 대한 프로토타이핑일 것입니다. 그리고 이러한 종류의 작업을 더 쉽게 만들 수 있는 모든 것은 디자이너가 작업의 창의적인 측면에 더 많은 시간을 할애할 수 있도록 합니다.

이를 염두에 두고 모든 디자이너가 자신의 툴킷에 잠재적으로 추가할 수 있는 훌륭한 새 앱이 많이 있습니다!

프론티파이

나만의 스타일 가이드를 만들고 나중에 참조하고 공유할 수 있도록 클라우드에 저장할 수 있는 훌륭한 사이트입니다. 로고와 이미지, 색상 팔레트, 타이포그래피, 아이콘, 자신만의 텍스트와 미디어를 위한 스타일 가이드 템플릿이 있습니다. 여기에서 또 다른 큰 장점은 수동으로 자신의 PDF 스타일 가이드를 만들 필요가 없다는 것입니다. Frontify에 저장하고 다운로드, 인쇄 및 공유를 위해 PDF 파일로 변환할 수 있습니다. 버전 관리는 언제든지 풀업할 수 있도록 백그라운드에서 모든 이전 버전을 유지합니다. 템플릿으로 시작하거나 브랜드 책 예제를 조사하여 자신을 사용자 지정할 수 있습니다. 모든 기능은 API를 통해 액세스할 수 있습니다. 다음은 Frontify 자체를 사용하여 로고만으로 할 수 있는 작업의 예입니다.

기본 로고입니다. Frontify는 여기서 "방울"이 핵심이지만 로고의 일관성을 유지하면서 다른 많은 작업을 수행할 수 있다고 결정했습니다. 다음은 색상 변경 사항입니다.

다음은 기본 로고의 변형 예입니다.

이것은 고유한 스타일 가이드를 만드는 데 사용할 수 있는 디자인 및 색상 템플릿의 한 예일 뿐이며 모든 구성 요소는 상호 교환할 수 있습니다.

비주얼 작곡가

이 앱은 나온 지 얼마 되지 않았으며 이미 알고 있을 수도 있지만 디자인 옵션 패키지로 다른 앱을 찾기가 어려울 것입니다. 기본적으로 계획 및 코딩의 힘든 작업을 없앴습니다. 단 몇 분 만에 디자인 레이아웃을 만들고 클릭 한 번으로 요소를 추가할 수 있습니다. $25라는 가격표는 그만한 가치가 있습니다. 모든 것을 위한 버튼; 많은 애니메이션 옵션, 즉각적인 공유 옵션 등. 이 아기의 40개 이상의 콘텐츠 요소! 정말 만능 도구입니다! 모든 기능과 이 앱 사용 방법이 확실하지 않은 경우 여기에서 비디오 자습서를 확인하십시오.

페이지를 매우 빠르게 디자인하고 거의 모든 요소를 ​​수정할 수 있는 훌륭한 기능이 있습니다. 예를 들어, 수정할 수 있는 미리 정의된 몇 가지 그리드 요소나 고유한 그리드를 디자인하는 옵션이 있습니다.

Visual Composer의 단점이 있다면 비활성화할 때 새 테마를 시작하기 전에 제거해야 하는 작은 코드가 많이 남아 있다는 것입니다. 다음은 Visual Composer를 통해 생성된 디자인의 예입니다.

디자인 헌트

영감이 막 멈췄을 때 훌륭한 아이디어를 제공할 수 있는 새로운 웹사이트를 검색하여 영감을 찾을 수 있습니다. 그것은 시간이 많이 걸리는 작업일 수 있으므로 훨씬 더 편리한 방법을 사용하지 않겠습니까? Design Hunt는 일종의 "교환소"이지만 매일 전체 레퍼토리를 변경합니다. Pinterest, Dribble, Designer News, DesignInspiraton 등에서 찾을 수 있는 멋진 새 디자인을 그려 새로운 영감과 아이디어를 찾는 디자이너를 위해 게시합니다. 이제 매일 한 곳으로 이동하여 완전히 새로운 컬렉션을 찾을 수 있습니다.

투카픽

스톡 사진 비즈니스에서 비교적 신인인 Tookapic은 현재 11,000개 이상의 스톡 사진을 보유하고 있으며 대부분은 무료이며 나머지는 저렴한 가격에 제공됩니다. 지금 사용하고 있는 스톡 사진 소스보다 이 사진이 더 마음에 들 수도 있습니다. 경이로운 색상과 선명도, 정말 독특한 사진입니다. 그들의 사이트에 접속하여 그들이 가지고 있는 것을 확인하십시오. 당신은 놀랄 수 있습니다!

마블앱

이 무료 프로토타이핑 도구를 사용하면 모바일 또는 다른 장치에서 모형을 스케치 및 생성하고 즉시 프로토타입을 볼 수 있습니다. 거기에서 모든 장치와 즉각적인 호환성을 통해 재배열, 수정, 색상 추가, 텍스트 추가, 형식 변경 및 거의 모든 작업을 수행할 수 있습니다. 프로젝트 이름을 지정하면 즉시 기본 인터페이스로 이동하여 시작합니다. 완료되면 전체 디자인을 미리 보고 상호 작용하여 모든 것이 잘 작동하는지 확인할 수 있습니다.

이 놀라운 도구에 대해 자세히 알아보려면 웹사이트를 방문하여 데모를 시청하십시오. 사용 편의성에 감탄하게 될 것입니다. 최고의 기능 중 하나는 모든 이미지 유형(Dropbox 및 Sketch 포함)과 모든 이미지 유형에서 이미지를 드롭하는 기능입니다. 협업 프로젝트인 경우 팀을 추가할 수도 있습니다. Marvel의 가장 큰 단점은 무료 버전에 제한이 있으므로 반드시 업그레이드해야 한다는 것입니다. 그럼에도 불구하고 이것은 사용하기가 매우 쉽습니다. 모든 면에서 Justinmind만큼 좋습니다.

애니메이션 CSS

애니메이션을 많이 만드는 경우 이 도구가 필요할 것입니다. 코드를 작성할 필요 없이 정말 멋진 기능입니다. 바로 사용할 수 있는 애니메이션 효과 라이브러리(실제로 50개 이상)가 있으며 루프 수와 지속 시간을 쉽게 사용자 지정할 수 있습니다. 애니메이션은 과도하게 사용하지 않는 한 큰 참여와 엔터테인먼트를 추가합니다!

그러나 기능과 옵션의 완전한 배열을 찾고 있다면 CSS만으로는 비용을 채울 수 없습니다. 확실히 CSS와 JavaScript에 대한 논쟁이 계속되고 있지만 함께 사용할 수 있는 방법은 분명히 있습니다. 예를 들어 멋진 CSS 애니메이션을 디자인했지만 사용자가 아래로 스크롤할 때 특정 지점에 도달하면 왼쪽에서 슬라이드 안으로 들어가길 원합니다. 이를 수행하려면 JS를 추가해야 합니다. CSS에는 한계가 있고 JS로 향상될 수 있다는 것을 이해하는 것은 사용 가능한 도구를 현명하게 사용하는 것입니다.

그럼에도 불구하고 Animate CSS는 실행하기 정말 쉽습니다. 당신은 그것을 다운로드하고 jQuery뿐만 아니라 CSS와 원하는 다른 구성 요소를 첨부하고 애니메이션을 시작합니다. 시작하는 데 도움이 되는 훌륭한 자습서가 YouTube에 있습니다.

색상

색맹이거나 색 구성표에 문제가 있는 경우 이 도구가 전체 색 구성표를 개발하거나 시작하려는 위치를 알고 있는 경우 하나를 생성합니다. 원하는 색상을 찾으면 잠그고 계속 클릭하기만 하면 됩니다. 원하는 만큼 많은 색상이 포함된 완전한 구성표를 얻을 수 있습니다. 이것은 색상 그라디언트를 사용하려는 경우에 특히 유용합니다. 이 도구에 대해 논란의 여지가 없는 것은 아닙니다. 이 도구를 사용하는 디자이너는 이 도구를 좋아합니다. 아직 시도하지 않은 사람들. 유일한 단점은? 더 이상 무료가 아니며 다운로드하려면 iTunes 계정이 있어야 합니다.

색맹을 위한 자동 색 구성표 생성기

CIRCULUS.SVG

이것은 많은 옵션, 템플릿 등이 있는 포괄적인 도구는 아니지만, 여기에 메뉴를 디자인하거나 원하는 만큼 많은 페이지에 여러 개를 디자인하는 고유한 방법이 있습니다! 메뉴에 원하는 세부 사항을 입력하기만 하면 됩니다. 그런 다음 빌드 및 특정 페이지에 포함하는 방법에 대한 자세한 지침이 제공됩니다.

방문자를 더 잘 참여시키기 위한 작은 것

원형 SVG는 이러한 종류의 요소를 만드는 데 CSS보다 우수할 수 있습니다. 다운로드하면 3가지 옵션이 있습니다. Sketch와 같은 그래픽 편집기에서 섹터를 그린 다음 SVG로 내보내고 상호 작용을 추가하고 포함할 수 있습니다. 코드로 섹터를 그릴 수 있습니다. 또는 앱에서 바로 Circulus 생성기를 사용할 수 있습니다.

CSS를 사용하면 순환 탐색을 만들 수 있지만 몇 가지 브라우저 버그와 함께 많은 작업이 필요합니다. 직사각형으로 시작하여 분리한 다음 해당 섹션을 기울이고 회전해야 합니다. 그리고 섹터에서 아이콘 이상을 사용하면 더 까다로워집니다.

SVG를 사용하면 원하는 "파이 쐐기"에 대한 특정 선과 호 명령을 사용하여 원하는 모양을 그릴 수 있습니다. 예를 들면 다음과 같습니다.

각각의 웨지를 그리고 아이콘 및/또는 콘텐츠를 임베딩한 후에는 웨지를 결합하기만 하면 됩니다.

메타플롭

같은 오래된 글꼴과 문자 스타일이 지겹습니까? 코딩할 필요 없이 클릭하고 드래그하면 됩니다. 텍스트의 고유한 글꼴과 스타일로 변경하면 방문자가 실제로 콘텐츠를 읽을 수 있습니다! 이 앱은 너무 멋져 몇 시간 동안 가지고 놀지 않으면 힘든 시간을 보낼 것입니다. 그리고 다시는 타이포그래피가 웹 디자인에서 가장 섹시하지 않은 부분이라고 말하지 않을 것입니다.

매우 간단합니다. 높이, 조리개 및 대비와 같은 다양한 특성을 가진 일련의 슬라이드에서 글꼴을 사용자 정의할 수 있습니다. 원하는 것을 얻을 때까지 조정한 다음 웹 글꼴 패키지(무료)로 다운로드합니다. 선택할 수 있는 사전 제작된 글꼴 라이브러리도 있습니다. 계속 플레이하십시오. 활자 디자이너가 "죽어가는 품종"인 이유를 알게 될 것입니다.

독특한 글꼴과 스타일로 시선 사로잡기

글꼴

이것은 실제로 "블록에 새로운 아이"입니다. Fontflame은 디자이너가 실제로 작동하는 글꼴 조합을 찾는 또 다른 부담을 덜어주려고 합니다. 현재 사이트에 10개의 게시된 페어링이 있지만 매일 추가되고 있습니다. Google의 무료 글꼴 라이브러리를 사용한 페어링의 예로는 "Lobster-Asap" 및 "Roboto-Open Sans"가 있습니다. 추가 라이브러리가 곧 추가됩니다. 이 사이트를 계속 주시하십시오. 곧 페어링으로 많은 것을 제공할 것입니다.

프리랜서 팟캐스트

앱이나 도구가 아닌, 놓치지 말아야 할 디자이너와 개발자를 위한 주간 팟캐스트입니다. Paul Jarvis가 주최하는 새로운 트렌드, 앱 및 도구, 그리고 많은 실제적인 조언에 액세스할 수 있습니다.

인비전

다음은 다른 곳에서는 볼 수 없는 몇 가지 기능을 가진 훌륭한 프로토타이핑 도구입니다. 다른 모든 장치와 마찬가지로 원하는 장치를 선택하여 일부 또는 모든 장치에 대한 모형을 만듭니다. 프로토타입이 생성되면 모든 장치에서 미리 볼 수 있으며 검토를 위해 클라이언트나 팀 구성원에게 보낼 수 있습니다. 그들은 디자인 자체에 대해 바로 논평할 수 있으며 이는 큰 장점입니다. In-Vision의 다른 두 가지 멋진 기능은 이전 버전의 디자인을 모두 볼 수 있는 히스토리 모드와 모든 기능에 익숙해질 때까지 디자이너가 작업할 수 있는 3개의 데모 프로젝트입니다.

In-vision과 Marvel 앱을 비교할 때 중요한 차이점은 다음과 같습니다.

1. InVision은 Marvel보다 더 많은 기능을 가지고 있지만 그만큼 복잡하기도 합니다. 예를 들어 더 많은 실시간 협업 기능, 주석 스크린샷 도구 및 훌륭한 기록 요소가 있습니다.
2. Marvel에는 iOS 앱이 있으며 현재 Android 및 iPad용 앱을 개발 중입니다. InVision에는 이러한 앱이 없습니다.
3. InVision은 더 큰 팀에 더 적합하고 Marvel은 솔로 또는 소규모 팀에 더 좋습니다.

이 두 앱 사용자의 의견은 어떤 것이 어떤 목적에 가장 적합한지 더 많이 알려줄 것입니다.

동료 디자이너가 듣고 싶어하는 좋아하는 앱이 있을 것입니다. 그것들이 무엇인지, 그리고 예술가가 되기 위한 더 많은 시간을 제공하는 방법을 알려주세요.