2021 년 더 스마트하게 작업하는 데 도움이되는 52 가지 웹 디자인 도구

최고의 웹 디자인 도구 : Unsplash의 John Kappa 사진
(이미지 출처 : Unsplash의 John Kappa 사진)
1/2 페이지 : 페이지 1 다음으로 이동 :

요즘에는 훌륭한 웹 디자인 도구가 너무 많습니다. 웹 디자인 워크 플로에서 해결하려는 문제가 무엇이든, 독립 실행 형 유틸리티이든 더 큰 앱 내의 기능이든 누군가가이를위한 도구를 만들었을 가능성이 있습니다. 웹 디자인 커뮤니티는 초기부터 많이 바뀌었지만 여전히 작업을 공유하는 정신이 있으므로 이러한 훌륭한 도구 중 상당수는 무료입니다.

도구의 확산은 큰 혜택이지만 동일한 작업을 수행하는 방법이 너무 많기 때문에 선택의 여지가 없습니다. 이 기사에서는 현재 최고의 도구라고 생각하는 것을 정리했습니다. 물론 전체 목록은 아니지만 범위를 좁히고 최고의 목록을 강조 표시하면 워크 플로에 적합한 도구 키트를 쉽게 구성 할 수 있습니다.

이것은 상당히 긴 목록이므로 기사를 더 쉽게 탐색 할 수 있도록 도구를 섹션으로 정렬했습니다. 이 페이지에서 완전한 웹 디자인 소프트웨어, 더 기본적인 전용 와이어 프레임 도구, 웹 디자인 프레임 워크 및 라이브러리를 찾을 수 있습니다. 두 번째 페이지에는 이미지 작업에서 AR 및 VR의 손짓에 이르기까지 모든 것을위한 작고 전문화 된 다양한 도구가 있습니다.



당신이 여기있는 동안, 당신은 최고의 웹 호스팅 서비스 그리고 최고의 웹 사이트 빌더 2020 년

손을 왜 그리 힘들게

GenerateJS 배너

이미지를 클릭하면 자세한 내용을 확인하고 티켓을 구매할 수 있습니다.(이미지 출처 : Future / Toa Heftiba, Unsplash)

완벽한 디자인 도구

01. InVision Studio

InVision은

InVision은 여러분에게 필요한 유일한 UI 도구가되는 것을 목표로합니다.(이미지 출처 : InVision)

InVision Studio 모든 기반을 포괄하고 필요한 유일한 UI 도구가되는 것을 목표로합니다. 신속한 프로토 타이핑, 반응 형 및 협업 설계, 설계 시스템 작업을위한 도구를 포함하여 아름다운 대화 형 인터페이스를 만드는 데 도움이되는 다양한 기능이 함께 제공됩니다.

이미 Sketch와 같은 도구와 함께 InVision을 사용하고 있다면 기능이 상당히 교차되어 있습니다. 그러나 Studio의 힘은 프로토 타이핑 부서에 있습니다. 특히 디자인에 애니메이션이 포함 된 경우 더욱 그렇습니다. 신속한 프로토 타이핑을 통해 복잡하고 상상력이 풍부한 전환을 만들어 원하는 애니메이션 수준을 실제로 달성 할 수 있습니다. UI가 전환의 시작 부분을 어떻게 볼 것인지 파악한 다음 최종 결과를 디자인하기 만하면됩니다. InVision Studio는 나머지 작업을 자동으로 수행합니다.

또한 스 와이프, 클릭, 호버링과 같은 다양한 제스처 및 상호 작용을 통해 이러한 사용자 지정 애니메이션 및 전환을 만들 수 있습니다.

모든 작업이 끝나면 InVision을 통해 프로토 타입을 내보내고 사람들을 초대하여 공동 작업을 수행하십시오. 의도 한 플랫폼에서 프로젝트를 볼 수 있습니다. 이는 디자인을 탐색하고 테스트하는 좋은 방법입니다. 그러면 클라이언트가 디자인에 바로 댓글을 달 수 있습니다.

또한 여러 장치를위한 수많은 아트 보드를 만드는 것에 대해 생각하지 않아도됩니다. Studio의 레이아웃 엔진은 디자인을 모든 화면에 자동으로 조정합니다. 이 시간 절약은 디자인에 대해 훨씬 더 많이 생각할 수있는 공간을 제공합니다.

02. 스케치

Sketch는 많은 웹 디자이너가 선택한 UI 디자인 도구로 Photoshop을 대체했습니다. [Image : Bohemian Coding]

Sketch는 많은 웹 디자이너가 선택한 UI 디자인 도구로 Photoshop을 대체했습니다. [Image : Bohemian Coding](이미지 출처 : Bohemian Coding)

보헤미안 코딩 스케치 가장 널리 사용되는 웹 디자인 플랫폼 중 하나입니다. 협업 방식으로 인터페이스와 프로토 타입을 구축하기위한 매우 강력한 벡터 기반 도구입니다. Sketch는 웹 사이트와 앱을 만들기 위해 특별히 제작되었으므로 인터페이스를 복잡하게 만드는 불필요한 기능이 없으며 범위가 더 넓은 소프트웨어보다 빠르고 효율적입니다.

Rory Berry, 크리에이티브 디렉터 Superrb , 2017 년에 Sketch로 전환했으며 적극 권장합니다. 'Photoshop에 비해 모든 문서를 정렬하고 Sketch에서 수정하는 것이 훨씬 쉽습니다.'라고 그는 시작합니다. “Sketch에는 작은 문서가있는 반면 Photoshop에는 큰 문서가 있습니다. 벡터 기반 앱이기 때문에 파일 크기가 Photoshop에 비해 훨씬 작습니다. '

그게 다가 아닙니다. “Sketch에 내장 된 그리드 시스템은 훌륭하고 인터페이스 디자인을 훨씬 쉽게 만듭니다. 전반적인 UI와 최소한의 느낌으로 디자인이 훨씬 깔끔하고 사용자 친화적이라고 생각합니다. Photoshop은 비교하면 매우 복잡해 보입니다.”

커뮤니티는 수백 개의 스케치 플러그인 디자인 워크 플로를 더 쉽고 부드럽게 만들 수 있습니다.

Sketch의 단점은 Mac에서만 사용할 수 있으며 다른 운영 체제를 지원할 계획이 없다는 것입니다. 디자이너는 종종 Windows를 사용하는 개발자와 .sketch 파일을 공유하기를 원하기 때문에 이것은 문제였습니다. 다행히도 이제 'Sketch for Windows'애플리케이션이 있습니다. 전광 .sketch 파일을 열고 편집하고 이러한 고통의 대부분을 제거합니다. 내보내기 및 변환 이 기사의 섹션.

우리를 놓치지 마세요 Sketch 사용을위한 최고의 팁 .

03. 어도비 XD

Adobe XD에는 쉽게 프로토 타입을 만들 수있는 가벼운 인터페이스가 있습니다.

Adobe XD에는 쉽게 프로토 타입을 만들 수있는 가벼운 인터페이스가 있습니다.(이미지 출처 : Adobe)

Adobe XD는 Adobe Creative Cloud 제품군에서 디지털 프로젝트를위한 최상의 환경을 제공합니다. Adobe 사용자이고 XD를 처음 사용하는 경우 처음에는 'Adobe'와 같은 인터페이스를 찾지 못할 수 있습니다. 그러나 그것은 다른 주요 도구와 함께 쌓입니다. 한동안 Photoshop에서 디자인을 해왔다면 도약이지만 UI 디자인에는 그만한 가치가 있습니다.

이 벡터 디자인 및 와이어 프레임 도구는 다음 지원과 같은 추가 기능을 통해 계속 향상되고 있습니다. 음성 프로토 타이핑 도구가 UX의 최신 트렌드를 따라갈 수 있도록합니다. XD에는 그리기 도구, 비 정적 상호 작용을 정의 할 수있는 도구, 모바일 및 데스크톱 미리보기, 디자인에 대한 피드백 제공을위한 공유 도구가 포함되어 있습니다. 프로젝트 시작을 위해 기기 별 아트 보드 크기를 선택할 수 있으며 Google의 머티리얼 디자인과 같은 인기있는 UI 키트를 가져올 수도 있습니다.

결정적으로 Adobe XD는 나머지 Creative Cloud와 통합되므로 Photoshop 또는 Illustrator에서 에셋을 쉽게 가져 와서 작업 할 수 있습니다. 이미 다른 Adobe 앱을 사용하고 있다면 UI가 멋지고 친숙하게 느껴질 것이며 너무 많은 학습 곡선을 제시해서는 안됩니다.

안드레이 로부 바르셀로나에있는 Robu Studio의 디자인 디렉터 인은 팬 중 하나입니다. '빠른 모형의 경우 훌륭합니다.'라고 그는 말합니다. '매우 가벼운 인터페이스로 많은 사진이로드되어 무드 보드에 적합합니다. 프로토 타이핑은 특히 콘텐츠를 즉시 온라인으로 푸시 할 수 있기 때문에 고객에게 물건이 어떻게 작동하는지 보여주는 데 매우 유용합니다. '

Ellis Rogers, 그래픽 디자이너 접수 회사 또한 그것을 권장합니다. '디자인 / 프로토 타입 또는 와이어 프레임이 완료되면 Adobe XD를 사용하면 매우 빠르게 요소를 선택하고 작업 프로토 타입을위한 페이지 전환을 만들 수 있으며, 이는 링크를 통해 공유 할 수 있습니다. 링크를 사용하면 페이지별로 피드백을 수집하여 모든 것을 정리할 수 있습니다. 링크는 Adobe XD 내에서 업데이트 될 수 있으므로 클라이언트는 잘못된 버전에 대해 걱정할 필요없이 항상 최신 버전을 볼 수 있습니다. 함께 일하는 것은 절대적인 기쁨입니다. '

04. 마블

마블

Marvel은 통합 사용자 테스트 도구와 함께 제공됩니다.(이미지 출처 : Marvel)

Marvel은 빠른 아이디어를 생성하고 원하는 모양으로 인터페이스를 수정하고 프로토 타입을 제작하는 데 유용한 또 다른 웹 디자인 도구입니다. 마블 페이지를 작성하는 정말 깔끔한 방법을 제공하므로 프로토 타입을 통해 디자인을 시뮬레이션 할 수 있습니다. 프로젝트 워크 플로우에 디자인을 삽입하기위한 몇 가지 멋진 통합이 있습니다. 흥미롭게도 웹 디자인 툴 스케이프에서 여전히 상당히 드문 통합 사용자 테스트 기능이 있습니다. 모두 온라인 상태이므로 다운로드 할 필요가 없습니다.

05. 피그 마

웹 디자인 도구 : Figma screengrab

Figma를 사용하면 다른 디자이너와 실시간으로 디자인, 프로토 타입 및 피드백을 수집 할 수 있습니다. [Image : Figma]

Figma 여러 디자이너가 실시간으로 협업 할 수있는 인터페이스 디자인 도구입니다. 이는 결과를 형성하는 데 관여하는 프로젝트에 여러 이해 관계자가있을 때 매우 효과적입니다. 브라우저 또는 Windows, Mac 또는 Linux에서 사용할 수 있으며 용도에 따라 무료 및 유료 버전이 있습니다.

다음은 뛰어난 기능 중 일부입니다.

'Figma는 크로스 플랫폼이라는 점을 제외하면 Sketch와 유사한 USP를 가지고 있습니다.'라고 프론트 엔드 디자이너는 설명합니다. 벤자민 읽기 . “몇 개의 아이콘을 만드는 데 사용했을 때 워크 플로가 매우 매끄럽다는 것을 알았습니다. 배우는 데 시간이 걸리지 않았고 협업이라는 추가 이점이있었습니다. 앱 내에서 다른 사람들과 그래픽을 공유 할 수 있습니다. '

'저는 작업을 위해 Linux로 전환하려고 노력해 왔고 때때로 우리는 Windows를 사용하므로 실제적인 관점에서 보면 Figma가 이해가됩니다.'라고 덧붙였습니다.

프리랜서 콘텐츠 작가 및 예술 작가 데이비드 이스트우드 또한 Figma에 대해 할 말이 있습니다. 'MVT를 빠르게 조롱해야 할 때도 정말 유용한 도구였습니다. 때때로 기존 레이아웃에 약간의 추가. 데스크톱, 태블릿 및 모바일 용 디자인을 빠르게 만들 수 있다는 점이 마음에 듭니다. '

06. 어피 니티 디자이너

Affinity Designer는 데스크탑에서와 마찬가지로 iPad에서도 강력합니다. [Affinity Designer]

Affinity Designer는 데스크탑에서와 마찬가지로 iPad에서도 강력합니다. [Affinity Designer](이미지 출처 : Serif)

'세리프' 선호도 디자이너 일부 사람들은 '포토샵 킬러'로 불렸고 그 이유를 쉽게 알 수 있습니다. 그리고 Edwards . '조정 가능한 비파괴 레이어를 포함하여 제가 정말 좋아하는 몇 가지 기능이있었습니다. 이것은 본질적으로 이미지 또는 벡터를 손상시키지 않고 조정할 수 있음을 의미합니다.

'100,000 % 줌은 행복했습니다. 실제로 가까이 다가 갈 수 있기 때문에 벡터 아트로 작업 할 때 특히 유용합니다. 실행 취소 및 히스토리 기능도 정말 편리합니다. Affinity를 사용하면 8,000 개 이상의 단계로 되돌아 갈 수 있습니다! '

'디자인에 관해서는 UI가 친숙하다고 느낍니다. Photoshop에서 이동할 때 모든 사람이 처음부터 다시 시작하고 싶어하는 것처럼 보이므로 실제 문제가 발생할 수 있습니다. Affinity가 한 것은 레이아웃을 친숙하게 유지하면서 모든 것을 강화하고 산만 함을 숨기는 것입니다. 쉽게 바로 뛰어 들어 디자인을 할 수있었습니다. '

Affinity Designer도 사용할 수 있습니다. iPad 용 . 그리고 이것은 예상 할 수있는 축소 된 모바일 앱 버전이 아니라는 점에 유의하십시오. 데스크톱에서 얻는 것과 동일한 정식 버전입니다.

사용 가이드를 놓치지 마세요. 픽셀 사람 , 수출 인 그리고 펜 도구 Affinity Designer에서. 또한 Serif는 Photoshop 대안을 만들지 만 어피 니티 사진 InDesign 대안, Affinity Publisher ; 모두 잘 어울립니다.

목업 및 프로토 타입

07. UXPin

UXPin : 웹 디자인 도구

UXPin을 사용하면 대화 형 상태 및 논리로 프로토 타입을 만들 수 있습니다.(이미지 출처 : UXPin)

우리 목록의 다음 웹 디자인 도구는 UXPin입니다. 이 전용 프로토 타이핑 앱은 Mac, Windows 또는 브라우저에서 사용할 수 있습니다. 대부분의 다른 디자인 도구를 사용하면 아트 보드의 서로 다른 요소를 연결하여 상호 작용을 모방 할 수 있습니다. UXPin은 코드에 더 가까워지고 대화 형 상태, 논리 및 코드 구성 요소로 작업 할 수 있습니다.

iOS, 머티리얼 디자인 및 부트 스트랩을위한 통합 요소 라이브러리와 수백 개의 무료 아이콘 세트 , 길을 돕습니다. UXPin은 또한 최근에 디자인이 WCAG 표준을 준수 할 수 있도록 접근성 기능을 도입했습니다.

애프터 이펙트에서 애니메이션을 재생하는 방법

API 요청은 UXPin의 상호 작용 기능에 대한 최신 추가 기능입니다. 이 기능을 사용하면 코드 없이도 디자인 도구 내에서 직접 제품과 '대화'하는 앱의 프로토 타입을 만들 수 있습니다. HTTP 요청을 외부 API로 보낼 수 있도록하여 작동합니다.

다음에서 첫 번째 프로토 타입을 만들 수 있습니다. UXPin 무료로 제공되며 적합한 경우 유료 월간 구독으로 전환합니다 (팀 멤버십 사용 가능). UXPin은 최근 Sketch와의 통합을 개선했기 때문에 프로토 타이핑 기능이 제한적이라는 것을 알고있는 Sketch 팬이라면 워크 플로에 도입 할 수 있습니다.

08. Proto.io

이 도구는 실제와 같은 프로토 타입을 만드는 데 도움이됩니다.

이 도구는 실제와 같은 프로토 타입을 만드는 데 도움이됩니다.(이미지 출처 : Proto.io)

Proto.io 거친 아이디어로 시작하여 본격적인 디자인으로 끝나는 실물과 같은 프로토 타입을 시작할 수있는 최고의 애플리케이션입니다. 이 도구는 세부 및 사용자 정의 벡터 애니메이션을 포함하여 프로젝트에 대한 다양한 가능성을 제공합니다.

손으로 그린 ​​스타일로 초기 아이디어를 개발하는 것부터 시작하여 와이어 프레임으로 작업 한 다음 고 충실도 프로토 타입으로 마무리 할 수 ​​있습니다. 다른 도구를 사용하여 디자인하려는 경우 Sketch 및 Photoshop 플러그인이 도움이되지만 Proto.io는 종단 간 디자인 프로세스를 잘 처리합니다. 예를 들어 사용자 테스트와 같은 다른 기능은 설계를 검증하는 데 도움이됩니다. 이 솔루션은 이미 사용하고있는 신뢰할 수있는 수많은 브랜드의 올인원 솔루션입니다.

플레이를 시작할 수있는 훌륭한 데모가 많이 있으며,이 엔드 투 엔드 솔루션이 현재 사용중인 여러 도구를 얼마나 쉽게 대체 할 수 있는지 실제로 확인할 수 있습니다. 비교적 최근에 추가 된 Proto.io는 최근 자산 관리자, 개발자 가이드 및 프로토 타입 기록 기능을 포함한 광범위한 새로운 기능을 포함하여이 도구를 더 나은 프로토 타이핑 도구와 일치시킵니다.

09. 발사 미크

Balsamiq 인터페이스

Balsamiq는 신속한 와이어 프레임 작업에 적합합니다.(이미지 출처 : Balsamiq)

빠르고 효율적인 와이어 프레이밍이 필요하다면 Balsamiq 강력한 제안입니다. 프로젝트의 구조와 레이아웃을 쉽게 개발할 수 있습니다. 드래그 앤 드롭 요소를 사용하면 작업이 더 쉬워지고 버튼을 다른 페이지에 연결할 수 있습니다. 와이어 프레임을 사용하면 신속하게 인터페이스 계획을 시작하고이를 팀 또는 클라이언트와 공유 할 수 있습니다. Balsamiq는 2008 년부터 계속되고 있으며 저 충실도, 빠르고 집중된 말도 안되는 접근 방식에 자부심을 가지고 있습니다.

10. 프로토 파이

이 도구를 사용하여 네이티브 센서로 놀아보세요.

이 도구를 사용하여 네이티브 센서로 놀아보세요.(이미지 출처 : ProtoPie)

웹 디자인 도구 프로토픽 복잡한 상호 작용을 생성하고 설계의 이상적인 최종 기능에 가까워 질 수 있습니다. 아마도 눈에 띄는 기능은 틸트, 사운드, 나침반 및 3D 터치 센서와 같은 프로토 타입의 스마트 장치 센서를 제어하는 ​​기능입니다. 프로젝트에 따라 기본 앱 기능을 포함하려는 사용자에게 훌륭한 도구입니다. 파이처럼 쉽고 코드가 필요하지 않습니다.

최근 출시 된 버전 4.2에는 요청이 많은 두 가지 새로운 기능이 포함되어 있습니다. 이제 편집 가능한 SVG를 장면에 추가하고 선택 즉시 두 레이어 사이의 거리를 찾을 수 있습니다.

11. MockFlow

MockFlow

이 도구는 대략적인 아이디어를 조롱하는 데 유용합니다.(이미지 출처 : MockFlow)

MockFlow 와이어 프레임 및 웹 사이트 계획을위한 응용 프로그램 모음입니다. WireframePro를 사용하면 초기 아이디어를 설정 한 다음 적절할 때까지 반복 할 수 있습니다.이를 지원하는 UI 개정 추적기가 있습니다. 요구 사항에 맞게 조정할 수있는 사전 제작 된 수천 개의 구성 요소 및 레이아웃과 함께 제공되며 동료 및 고객에게 작업을 표시 할 수있는 미리보기 모드가 있습니다.

와이어 프레임 작업을 마치면 나머지 제품군은 정보 아키텍처, 스타일 가이드 작성 (자동으로 생성 될 수 있음), 사인 오프 프로세스 작업 등 웹 사이트 계획의 다른 측면에 도움이 될 수 있습니다.

다른 옵션을보고 싶으시면 상단 요약을 확인하세요. 와이어 프레임 도구 .

12. Adobe Comp

Adobe Comp 웹 페이지에 대한 와이어 프레임, 프로토 타입 및 레이아웃 개념을 만드는 데 도움이되는 iPad 용 환상적인 웹 디자인 도구입니다. 원하는 경우 Creative Cloud 기반 지능형 스케치 패드. 모바일 및 웹을위한 다양한 레이아웃에 대한 기본 템플릿이 있으며 원하는 경우 인쇄 할 수도 있으며 이미지, 텍스트 등을 나타내는 직관적 인 모양을 그려 빠른 자리 표시자를 만들 수 있습니다. Comp는 대략적인 윤곽을 직선, 원 및 직사각형으로 변환합니다.

놀랍게도 Adobe는 XD로 직접 내보내기를 포함하는 데 적합하지 않습니다. –에도 불구하고 오랜 요청 영원히 보이는 것에 대해 검토 중입니다. 그러나 Photoshop으로 내보내기는 내장되어 있으며 (Illustrator 및 InDesign과 함께) 모형에 대한 조정이 유비쿼터스 이미지 편집기에서 이루어지면 거기에서 XD로 내보낼 수 있습니다. Adobe 열성적인 wireframer의 사용자 여정에서 이처럼 반갑지 않은 추가 단계에도 불구하고 Comp는 어디에서나 사용할 수있는 기능, 사용 편의성 및 인상적인 UI로이 목록에 포함시킬 가치가 있습니다.

13. 플린 토

Flinto 인터페이스

이전 상태와 이후 상태를 디자인하면 Flinto가 차이를 파악하고 애니메이션 효과를 줄 것입니다.(이미지 출처 : Flinto)

Flinto는 디자인 내에서 고유 한 상호 작용을 만들 수있는 디자인 도구입니다. 여러 제스처를 활용하고 이전 및 이후 상태를 디자인하여 쉽게 전환 할 수 있습니다. 플린 토 단순히 차이점을 찾아 내고 애니메이션 효과를줍니다. 매우 유용합니다.

이것은 iOS 전용이지만 사용을 시작하면 익숙 할 것입니다. 진행하는 데 도움이되는 온라인 설명서가 있으며 Sketch 및 Figma에서 가져 오는 것도 간단합니다.

14. 액셔

Axure 인터페이스

동적 데이터로 복잡한 인터페이스 와이어 프레임(이미지 출처 : Axure)

액셔 항상 시장에서 최고의 와이어 프레임 도구 중 하나였으며 동적 데이터가 필요한 복잡한 프로젝트에 적합합니다. Axure를 사용하면 기술적이고 구조와 데이터에 대한 중요한주의가 필요한 프로젝트를 모의하는 데 실제로 집중할 수 있습니다.

Axure의 전달 프로세스에는 개발자가 설계와 일치하는 최종 제품을 만드는 데 도움이되는 철저한 사양 생성이 포함됩니다.

15. 저스틴 마인드

Justinmind

Justinmind는 Sketch 및 Photoshop과 같은 도구와 통합됩니다.(이미지 출처 : JustInMind)

Justinmind 프로토 타이핑에 도움이되며 Sketch 및 Photoshop과 같은 다른 도구와 통합됩니다. 프로토 타입을 조립하는 데 도움이되는 상호 작용 및 제스처를 선택할 수 있습니다. 또한 UI 키트가 포함되어있어 화면을 빠르게 조합 할 수 있으며 반응도 가능합니다.

16. 유체

유체 인터페이스

Fluid는 빠른 UI 디자인에 적합합니다.(이미지 출처 : Fluid)

체액 빠른 프로토 타입을 만들고 디자인을 작업하기위한 간단하고 직관적 인 도구입니다. 빠른 프로토 타입을 만들 수 있도록 기본 제공되는 멋진 에셋이 포함되어 있습니다. 업그레이드 한 후에는 자신이 선호하는 UI 애셋으로 자신 만의 심볼을 조합하는 것이 정말 쉽습니다. 이 도구는 고 충실도 및 저 충실도 프로토 타입 모두에 사용할 수있는 자산과 함께 매우 빠른 UI 디자인을 제공합니다.

17. 상호 작용

Interplay는 모든 사람이 동일한 페이지를 유지하도록 도와줍니다. [Image : Interplay]

Interplay는 모든 사람이 동일한 페이지를 유지하도록 도와줍니다. [Image : Interplay](이미지 출처 : Interplay)

상호 작용 팀, 특히 디자이너와 개발자 간의 커뮤니케이션과 협업을 개선하는 프로토 타이핑 시스템입니다. 설계 시스템을 염두에두고 구축되었으며 코드와 통합되어 따라하기 쉽고 자동으로 업데이트되는 문서를 생성합니다. 모든 사람이 동일한 페이지를 최신 상태로 유지하는 것이 핵심 기능입니다. 따라서 코드가 업데이트되면 디자인도 업데이트됩니다. Interplay는 아직 베타 버전이지만 이미 많은 대형 설계 및 개발 도구와 함께 작동합니다.

프레임 워크 및 라이브러리 디자인

18. 부트 스트랩

웹 디자인 도구 : Bootstrap screengrab

오래된 인기 부트 스트랩에는 강력한 새 업데이트가 있습니다.

부트 스트랩 확실히 새로운 도구는 아니지만 개발에 혁명을 일으켰고 웹에서 물건을 만드는 방법을 계속해서 형성하고 있습니다.

작성 시점에 최신 버전 (4.4.1, 2019 년 11 월 출시)은 특정 중단 점까지 유동적 인 새로운 반응 형 컨테이너와 중단 점에서 열 수를 효율적으로 지정하기위한 새로운 반응 형 .row-cols 클래스를 도입했습니다.

Bootstrap은 최근 자체 오픈 소스 아이콘 라이브러리를 출시했습니다. 부트 스트랩 아이콘 , 이는 Bootstrap 구성 요소와 함께 작동하도록 설계되었습니다.

찾기 가이드에서 최고의 무료 부트 스트랩 테마 .

19. 시작 3

코드를 작성하지 않고 부트 스트랩 사이트 만들기 [이미지 : Designmodo]

코드를 작성하지 않고 부트 스트랩 사이트 만들기 [이미지 : Designmodo](이미지 출처 : Designmodo)

부트 스트랩을 좋아하지만 원시적 인 것에 뛰어 들고 싶지 않다면 Startup 3이 가장 쉬운 방법입니다. 12 열 격자가있는 Bootstrap 4를 기반으로 웹 사이트를 구축하기위한 템플릿과 테마가 내장 된 온라인 앱입니다. 드래그 앤 드롭 인터페이스를 사용하여 코드를 작성하지 않고도 사이트를 구축 할 수 있지만 작업을 완료하려면 HTML 및 CSS에 대한 약간의 지식이 필요합니다.

20. Vue.js

웹 디자인 도구 : vue.js screengrab

복잡한 JavaScript 라이브러리에 익숙하지 않습니까? Vue.js는 당신에게 완벽합니다 [Image : Vue.js]

Vue.js 사용자 인터페이스를 구축하기위한 프레임 워크이며 가상 DOM을 사용합니다. 이름에서 알 수 있듯이 Vue의 핵심 라이브러리는 뷰 레이어에 중점을 둡니다.

사용자 입력을 활용하고 라이브러리의 우아함을 보여주는 Vue의 문서에서 가져온 코드 예제를 살펴보십시오. HTML부터 시작하겠습니다.

{{ message }}

Reverse Message

사용자 지정 v-on 처리기가 reverseMessage 방법. 다음은 자바 스크립트입니다.

var myApp = new Vue({ el: '#example', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split(''). reverse().join('') } } });

이 예는 단락을 데이터로 채우고 reverseMessage 방법. Vue는 복잡한 라이브러리에 익숙하지 않은 사용자에게 적합하지만 복잡한 단일 페이지 웹 앱 개발을 지원하는 여러 플러그인도 있습니다.

21. 패턴 연구실

웹 디자인 도구 : Pattern Lab screengrab

패턴 연구소는 원자 디자인을 기반으로합니다 [이미지 : 패턴 연구소]

Pattern Lab은 Dave OIsen과 Brad Frost가 만든 아름다운 패턴 중심 디자인 도구입니다. 그것은 개념을 기반으로 원자 디자인 , 즉 디자인을 가장 작은 부분 (원자)으로 나누고 결합하여 더 크고 재사용 가능한 구성 요소 (분자 및 유기체)를 형성 한 다음 사용 가능한 템플릿으로 변환해야합니다.

핵심은 UI 구성 요소를 연결하는 정적 사이트 생성기이지만 훨씬 더 패턴 연구소 그것보다. 언어와 도구에 구애받지 않습니다. 이를 통해 UI 패턴을 서로 중첩하고 동적 데이터로 디자인 할 수 있습니다. 장치에 구애받지 않는 뷰포트 크기 조정 도구를 사용하여 설계 시스템이 완전히 반응하는지 확인할 수 있습니다. 완전히 확장 가능하므로 필요에 맞게 확장 할 수 있습니다.

22. 머티리얼 디자인

머티리얼 디자인은 Google의 원칙 집합입니다. [이미지 : Google]

머티리얼 디자인은 Google의 원칙 집합입니다. [이미지 : Google](이미지 출처 : Google)

머티리얼 디자인 좋은 디자인의 고전적인 원칙과 기술 및 과학의 혁신을 결합하여 웹 사이트의 일관성 있고 유연한 기반을 만드는 것을 목표로하는 Google의 시각적 언어입니다.

머티리얼 디자인 프레임 워크를 사용하여 만든 웹 사이트와 앱은 현대적으로 보이고 사용자에게 친숙 할 것이므로 사람들은 제품을 즉시 쉽게 사용할 수 있음을 알게 될 것입니다. 이 설계 시스템을 지원하는 데 사용할 수있는 많은 도구가 있습니다. 탐색 모음에서 리소스를 클릭하여 찾습니다.

GenerateJS 배너

(이미지 출처 : Future / Toa Heftiba, Unsplash)

2020 년 4 월에 GenerateJS에서 JavaScript 슈퍼 스타 라인업에 참여하세요.이 컨퍼런스는 더 나은 JavaScript를 구축하는 데 도움이됩니다. 지금 예약하세요 generateconf.com

다음 페이지 : 문제 해결을위한 전문 웹 디자인 도구

포토샵에서 가로로 뒤집는 방법
  • 1

현재 페이지: 페이지 1

다음 페이지 2 쪽