2019년에 꼭 있어야 할 20가지 웹 디자인 도구

웹 디자인은 안주할 수 없는 산업 중 하나입니다. 생산성을 유지하고 고객이 영감을 받을 수 있는 결과를 제공하려면 예리함을 유지해야 합니다. Photoshop이나 좋아하는 코드 편집기에서 엄청난 시간을 소비하던 시대는 지났습니다. 요즘에는 거의 모든 것을 위한 도구나 앱이 있습니다.

또한 새로운 웹 디자이너의 대규모 유입으로 UI 키트 및 디자인 패턴이 부족하지 않음을 확인했습니다. 공예에 능숙하다면 새로운 디자인을 시작하는 데 1-2시간 미만이 소요될 수 있습니다. 물론 웹 디자인 워크플로를 개인화하는 다른 방법이 있습니다. 도구에서 통찰력 있는 책, 프레임워크 및 흥미로운 그래픽 요소에 이르기까지.

이 정리를 위해 우리는 2019년에 주목해야 할 최고의 웹 디자인 도구를 모았습니다. 이들은 모두 작년의 후계자이며 종종 웹 디자인 프로세스에서 분리할 수 없는 부분이 됩니다. 워크플로에 Sketch와 Zeplin이 이미 있을 수 있지만 이 게시물은 아직 친숙하지 않은 다른 도구에 대해 밝힐 수 있습니다.

1. 스케치

Sketch는 벡터 우선 디자인 워크플로를 제공하는 Mac 전용 유틸리티 소프트웨어인 전문 웹 디자이너의 꿈입니다. 벡터 우선 접근 방식은 인터페이스를 만드는 것이 절대적인 기쁨이 된다는 것을 의미합니다. 즉, Sketch는 엄격한 픽셀 그리드 환경을 따르므로 웹사이트와 앱으로 전송할 수 있는 뛰어난 디자인 품질을 보장합니다.

이 소프트웨어는 그만한 가치가 있기 때문에 Mac으로 전환하기 위해 얼마나 많은 Windows 사용자가 돼지 저금통을 비워야 했는지 누가 압니까! Sketch가 플러그형 도구라는 것도 잘 알려져 있습니다. 결과적으로 플러그인을 직접 만들거나 기존 사용자가 이미 제출한 수천 개에서 찾아볼 수 있습니다. 진정으로 혁명적인 앱이며 2019년 및 그 이후의 최신 웹 디자인 트렌드를 파악하고 싶다면 고려해 볼 가치가 있는 앱입니다.

2. 어도비 일러스트레이터

Adobe는 완전히 새로운 가격 책정 시스템에 있지만 여전히 주변에 있습니다. 이 가정용 브랜드는 앞서 벡터 디자인을 추진해 왔습니다. 그러나 이제 더 많은 경쟁이 생겨나면서 Adobe는 제품을 부분적으로 만드는 데 어려움을 겪고 있습니다. Figma 및 Sketch와 같은 준우승에도 불구하고 Adobe의 Illustrator는 핵심 고객 기반과의 연결을 잃지 않았습니다.

놀라운 벡터 편집 및 생성 도구 외에도 Adobe의 장점은 Photoshop, XD 등과 같은 자매 제품과의 기본 통합입니다. 그리고 이러한 도구를 단일 워크플로에 통합할 수 있으면 강력한 디자인 결과를 얻을 수 있습니다!

3. 피그마

디자인 아이디어가 있습니까? 글쎄, 당신은 그 때 일을 시작하는 것이 좋습니다. 그러나 그 전에 아이디어를 사용 가능한 제품 경험으로 바꾸는 최신 앱인 Figma를 고려하십시오. Figma를 사용하면 와이어프레임을 생성하고 프로토타입으로 변환하고 최종적으로 동료로부터 피드백을 수집할 수 있습니다.

또한 팀은 앱 자체 내에서 인터페이스를 사용하고, 아이디어를 함께 작업하고, UX 디자인을 간소화할 수 있습니다. Figma의 핵심 판매 포인트는 실시간 제품 경험입니다. 팀의 모든 사람이 동시에 마음을 모아 훌륭한 결과를 얻을 수 있습니다.

4. 제플린

디자인 및 UI 키트에 대한 스타일 사양을 자동화하시겠습니까? Zeplin은 바로 이를 수행합니다. Sketch, Figma 또는 기타 도구에서 디자인 문서를 가져와 즉시 사용 가능한 디자인 사양으로 변환합니다. 또한 Zeplin은 협업 도구 역할을 합니다. 디자인을 가져와 변경하면 누구나 특정 요소가 얼마나 적게 또는 얼마나 움직였는지 알 수 있습니다. 또한 요소를 클릭하고 '변환'을 선택하여 선택한 요소를 실행 가능한 코드로 마술처럼 변환합니다.

5. 기발한 와이어프레임

와이어프레임은 웹 디자이너의 가장 친한 친구입니다! 이동 중에 사용할 수 있을 뿐만 아니라 여유 시간이 있을 때마다 디자인 아이디어를 수정하는 데에도 좋습니다. Whimsical의 Wireframe 플랫폼은 모바일 및 데스크톱 요구 사항에 대한 디자인 아이디어를 실행하는 데 이상적입니다. 제품, 앱 또는 전체 프레임 웹 사이트를 와이어프레임하는 데 도움이 되는 충분한 양의 UI 요소가 있습니다.

6. 마블앱

설계 작업이 무엇이든 프로세스 기반 구조의 범위를 벗어나지 않습니다. Marvel은 올인원 디자인 소프트웨어를 개발하여 프로세스를 쉽게 만들고자 합니다. Marvel의 작지만 강력한 소프트웨어 기반을 사용하면 몇 분 만에 디자인, 와이어프레임, 협업 및 프로토타입을 만들 수 있습니다. 기존 사용자는 코드를 작성하지 않고 디자인을 프로토타이핑할 수 있는 능력을 칭찬합니다. 또한 설계 부품을 실행 가능한 프런트 엔드 스니펫으로 전달하는 기능도 있습니다.

7. 아보코드

개발자와 디자이너가 혼합된 그룹에서 일하십니까? Avocode는 양 당사자의 서로 다른 타임라인 문제를 해결하기 위해 만들어졌습니다. 대신 Avocode를 사용하면 모든 사람이 제품 예상 일정에 대해 같은 페이지를 볼 수 있습니다. Avocode는 Figma, Sketch에서 파일 가져오기를 지원하고 각 디자인에 대한 스타일 사양을 자동으로 생성합니다.

8. UX 법칙

사용자 경험은 훌륭한 웹 디자인의 기본 기둥입니다. 새로운 디자인을 작업할 때마다 항상 사용자가 사이트 또는 앱과 상호 작용할 수 있는 방식에 우선 순위를 둡니다. 그리고 이것은 인터페이스 요소와 같은 것들에도 적용됩니다. Jon Yablonski는 19개의 'UX 법칙' 목록을 묘사한 디지털 책(무료)을 만들었습니다. 본질적으로, 각 '법칙'은 심리학과 마케팅 모두에서 일반적으로 발생하는 주제에 대한 구체적인 참조입니다.

법률은 사례 및 외부 자료와 같은 리소스로 보완됩니다. 자주 방문해야 하는 사이트는 아니지만 가끔 더 중요한 UX 원칙에 대해 스스로에게 상기시켜도 아무런 해가 되지 않습니다.

9. 오버플로

사용자 흐름 관리가 어려우신가요? 오버플로가 도움이 됩니다! 이 새롭고 흥미진진한 소프트웨어는 새해를 맞이하게 될 것입니다. 그러나 그것은 무엇이며 무엇을합니까? 오버플로는 이미 만들어진 디자인을 사용하여 사용자 흐름을 만드는 데 도움이 됩니다. Sketch 및 기타 설계 소프트웨어 솔루션에서 직접 설계 파일을 가져올 수도 있습니다.

흐름은 팀과 공유할 수 있는 개별 파일로 저장할 수 있습니다. 개발 단계에 이르면 문서를 가져와 수행해야 할 작업을 확인합니다.

10. 아이오타CSS

프레임워크는 자체 게시물을 올릴 자격이 있지만 iotaCSS를 강조할 기회를 놓칠 수 없었습니다. 이 경량 라이브러리는 불가지론적인 사용자 인터페이스를 부트스트랩하려는 경우 신의 선물입니다. SASS 패턴 간에는 유사점이 있지만 전반적으로 iotaCSS는 독립 실행형 프레임워크보다는 생성기처럼 작동하는 경향이 있습니다.

11. 모빈

훌륭한 디자인에는 인내가 필요하며 프로세스가 항상 성공을 보장하는 것은 아닙니다. 하지만, 널리 받아들여지는 '좋은 디자인' 사이에는 공통점이 있습니다. 그리고 디자인 패턴을 검토하여 인기 있는 앱을 그렇게 성공적으로 만드는 요인을 배울 수 있습니다.

이 경우 Mobbin은 iOS 애플리케이션용으로 구축된 모바일 기반 디자인 패턴 라이브러리를 제공합니다. 라이브러리에는 쉽게 액세스할 수 있는 수천 가지 패턴과 함께 가장 인기 있는 수백 가지 앱이 포함되어 있습니다. 앱에서 다음으로 큰 디자인 변경 사항을 발견할 수 있습니까?

12. 아이콘8

아이콘과 벡터는 현대적인 디자인 프로세스의 많은 부분을 차지합니다. 물론 컨테이너와 타이포그래피만을 기반으로 순전히 최소한의 사이트를 디자인하지 않는 한. 가능성이 매우 낮습니다! 그럼에도 불구하고 무료 아이콘과 벡터가 필요한 경우 Icons8을 확인하십시오. 이 사람들은 지난 2년 동안 꾸준히 성장하여 약 90,000개의 아이콘을 제공할 수 있었습니다.

그러나 Icons8이 그렇게 유명한 것은 아닙니다. 이 녀석들이 눈에 띄는 이유는 바로 비주얼 에디팅 엔진 때문입니다. 다운로드 버튼을 누르기 훨씬 전에 사용자 정의 색상 및 기타 옵션으로 각 아이콘 및/또는 벡터를 문자 그대로 사용자 정의할 수 있습니다.

13. 코드펜

CodePen은 없이는 살 수 없는 플랫폼 중 하나입니다. 웹 디자이너라면 그렇지 않습니다. 쉬운 코드 공유 기능으로 가장 잘 알려진 CodePen은 놀라운 영감의 원천입니다. 사용자는 CSS, HTML 및 JS를 사용하여 수행할 수 있는 스니펫, 트릭 및 기타 가능성을 공유합니다.

가장 좋은 점은 모든 것이 오픈 소스이며 자신의 프로젝트에서 결과를 빠르게 복제할 수 있다는 것입니다.

14. 드리블

최신 웹 디자인 트렌드를 알고 계십니까? 백만 명의 고객에게 서비스를 제공할 때 길을 잃기 쉽습니다. 걱정하지 마세요. Dribbble은 여전히 ​​​​여기에 있으며 여전히 가장 신뢰할 수있는 디자인 트렌드 소스 중 하나입니다. 수백만 명의 디자이너가 이 플랫폼에 창의적인 작업을 제출합니다. 당신이 똑똑하다면 UI 키트 및 다양한 유형의 일러스트레이션과 같은 무료 항목을 찾을 수도 있습니다.

마지막으로 Dribbble 커뮤니티의 일원이 되면 업무 노출을 크게 높일 수 있습니다. Dribbble에 작업을 게시하여 놀라운 직업 기회를 찾은 사람들의 이야기가 많이 있습니다! 놀라운 일을 하고 계시나요? 부끄러워하지 말고 세상과 공유하십시오. 그것이 당신을 어디로 데려갈지 누가 압니까?

15. 그리기 취소

시각적 콘텐츠에 대한 수요가 증가하는 세상에서 unDraw와 같은 사이트는 사용하기 정말 좋습니다! 이 오픈 소스 플랫폼은 어떤 상황에서도 사용할 수 있는 무료 일러스트레이션을 제공합니다. 특히 unDraw는 삽화가 디자인을 생생하게 만드는 데 도움이 될 수 있는 랜딩 페이지 디자인에서 인기가 있습니다.

키워드로 또는 단순히 탐색하여 일러스트를 검색할 수 있습니다. unDraw에는 적용되는 사용자 정의 색상 선택 도구가 포함되어 있습니다. 감사합니다. SVG! — 한 번에 모든 일러스트레이션에 색상을 지정합니다. 이것은 디자인의 색 구성표와 일치하도록 일러스트레이션을 가져와야 할 때 이상적입니다.

16. 홀라브리프

방향 없는 디자인은 절대적으로 아무데도 이끌지 않습니다. 사실, 마음속의 아이디어만으로 디자인 작업을 하는 것은 종종 자원 낭비로 이어집니다. 많은 것들이 우리 머리로는 훌륭하게 들리지만, 우리가 일을 시작할 때 – 때로는 몇 시간이 지나고 우리가 염두에 둔 것의 극히 일부만을 수행했습니다.

그리고 문제는 어떻게 하면 아이디어에 너무 오래 집착하지 않을 수 있느냐는 것입니다. 우선, 프로세스를 용이하게 하는 도구(예: 지금까지 나열한 도구)를 갖는 것이 좋은 출발점입니다. 그러나 아이디어를 진정으로 실현하려면 간결한 요약으로 '프로토타입'을 작성해야 합니다. 그리고 HolaBrief는 디자인 브리프 작성을 위한 간단한 디지털 솔루션을 제공합니다. 전략적 사고의 개념을 기반으로 합니다. 이것이 의미하는 바는 전체 디자인 프로세스를 쉽게 간소화할 수 있다는 것입니다.

HolaBrief는 아이디어 매핑, 브레인스토밍 인터페이스, 협업 도구 및 간단한 체크리스트를 제공합니다. 목표는 가능한 한 빨리 실제 디자인에서 아이디어를 얻는 것입니다.

17. 색맹

접근성은 항상 토론의 주제였지만 수년에 걸쳐 웹 디자이너가 수용해야 하는 결정적인 추세가 되었습니다. 더 많은 사람들이 웹에 연결됨에 따라 앱과 웹사이트를 모든 유형의 사용자에게 자연스럽게 느끼게 하려는 요구가 계속해서 증가하고 있습니다.

우리는 Colorblind입니다. 이 회사는 브랜드가 색맹 사용자를 위해 웹 사용성을 최적화하는 데 도움이 되는 서비스 를 제공합니다. 그러나 우리는 이 회사가 제공하는 리소스에 더 중점을 둡니다. 색맹이 웹 경험에 어떤 영향을 미치는지 보여주는 많은 읽을거리, 예제 및 사례 연구가 있습니다. 물론 모든 프로젝트에 대해 해당 경험을 개선할 수 있는 방법에 대한 세부 정보입니다.

아마도 지금으로부터 10년 후에는 Sketch와 같은 소프트웨어가 이 힘든 작업을 모두 자동으로 수행할 수 있지만 그때까지는 엄격한 지침을 따르는 것이 가장 좋습니다.

웹 디자인에서 색맹을 해결하는 방법에 대한 귀하의 의견을 듣고 싶습니다! 색상 접근성을 최적화한 경험이 있습니까? 아래에서 우리와 공유하십시오.

18. 라파

끊임없이 새로운 디자인을 디자인하고 프로토타이핑할 때 일과에 얽매이기 쉽습니다. 같은 글꼴, 같은 애니메이션, 같은 색 구성표를 사용합니다. 때로는 다른 사람이 알려줄 때까지 자신이 하고 있다는 사실조차 깨닫지 못할 수도 있습니다. 그렇기 때문에 다른 웹 디자이너가 하는 일에 영감을 받고 최신 정보를 얻는 것이 매우 중요합니다.

이러한 플랫폼이 많이 존재하지만 Lapa.Ninja는 새로운 디자인 영감을 제공하는 매우 신뢰할 수 있는 소스입니다. 50개 이상의 비즈니스 유형 카테고리가 혼합되어 있어 각 프로젝트에 대해 가장 많은 영감을 얻을 수 있습니다. 색상별로 탐색하여 유사한 색상 구성표를 사용하여 유사한 디자인을 찾을 수도 있습니다.

항상 신선한 아이디어로 동기를 부여하고 영감을 얻으려면 어떻게 해야 합니까? 다른 디자이너가 구축한 랜딩 페이지가 신뢰할 수 있는 리소스라고 생각하십니까? 의견에 알려주십시오!

19. 브라우저스택

소규모 프로젝트는 브라우저와 화면 크기의 전체 스펙트럼에 대해 최적화하지 않으면 벗어날 수 있습니다. 그러나 일단 회사가 성장하기 시작하고 고객 다양성이 증가하면 특정 사용자 세그먼트에 대한 참여의 낙진을 알아차리는 것은 시간 문제일 뿐입니다. 여기에서 BrowserStack이 등장하여 2,000개 이상의 다양한 브라우저에서 디자인을 테스트할 수 있습니다.

복잡하게 들리나요? 정말 아니에요. 가장 기본적인 수준에서 단순히 웹 사이트 URL을 삽입하고 수동으로 호환성을 확인하면 벗어날 수 있습니다. 다른 곳에서 BrowserStack은 전체 테스트 프로세스를 자동화할 수 있는 도구를 제공합니다. 수천 개의 다양한 장치 유형에서 사이트를 볼 때 존재하는 핵심 차이점을 식별합니다.

20. 위자드

우리는 이 검열의 시작을 무엇이라고 말했습니까? 웹 디자인의 세계는 빠르게 변화하고 있습니다. ML 및 AI 덕분에 디자이너는 이제 목업을 라이브 웹사이트 디자인으로 전환할 수 있습니다. Uizard는 바로 이러한 서비스를 제공하는 새로운 플랫폼입니다. 물론 아직 베타 버전이며 현재로서는 얼리 스타터로만 가입할 수 있습니다.

Uizard는 이 개념을 공개적으로 연구하고 있으며 관심이 있는 모든 사람에게 무료로 연구를 제공하고 있습니다. 이러한 유형의 도구가 웹사이트 부트스트래핑을 위해 무엇을 할 것인지 상상해 보십시오. 기능적 레이아웃을 시작하는 데 몇 분 밖에 걸리지 않을 수 있으므로 기능 구축 등에 더 많은 시간을 할애할 수 있습니다.

새해를 위한 새로운 도구

웹 및 브라우저 용량은 오늘날 빠르게 발전하고 있습니다. 기존 프로젝트에서 작업하면서 새로운 경향이 나타나 선택을 재고하고 그에 따라 조정합니다. 그리고 더 많은 사람들이 웹 디자이너가 될 수 있는 가능성을 모색하기 시작하면서 새로운 정보와 디자인 정보를 제공하는 거대한 수문이 열리는 것을 목격하고 있습니다.

이 게시물은 현재 최고의 웹 디자인 도구뿐만 아니라 2019년의 강력한 경쟁자에 대해서도 다룹니다. 기대할 만한 흥미로운 것들이 많이 있으며 주요 디자인과 기술적인 도약을 보게 될 것입니다. 내년에 발생합니다.

당신은 흥분? 일상적인 웹 디자인 워크플로에서 사용하는 도구에 대한 의견을 공유해 주세요. 우리는 커뮤니티에서 가장 좋아하는 것과 아무도 들어본 적이 없는 잠재적으로 새로운 도구 모두를 듣고 싶습니다!