바로 말씀 드리겠습니다. 프로그램이 두 개뿐입니다. 개발, 레이아웃, 신문, 잡지, 소책자 제작등.:

쿼크 익스프레스

제가 이 회사의 역사를 특별히 잘 아는 것은 아니지만, 프로그램은 나쁘지 않습니다. 오늘날까지 신문과 잡지에서는 단순성 때문에 버전 4(버전 8이 이미 있음)를 사용합니다. 러시아어 지원은 기본 제공되지 않으며 각 버전마다 별도로 설치해야 합니다. 추가 설정이 없으면 단어 하이픈이 작동하지 않으며,

그리고 언제 잡지와 신문의 레이아웃단어 하이픈이 없으면 아무것도 작동하지 않으므로 집에서 신문이나 잡지를 레이아웃하려면 Quark를 사용하지 않는 것이 좋습니다. 많은 것을 설치해야 하며 추가 지식과 시간이 필요합니다.

어도비 인디자인

Adobe Indesign은 Photoshop을 만든 소프트웨어 시장 공룡의 프로그램입니다. 이전 프로그램은 PageMaker라고 불렸습니다. 물론 설치 중에 문제가 발생하고 새로운 문제가 발생할 때마다 발생하지만 이는 최고의 프로그램 나름대로. 러시아어가 내장되어 있으며 단어에 하이픈을 넣는 기능에 대해 이야기하고 있습니다. 저는 이미 Quark를 잘 알고 있는 Indesign에서 작업을 시작했습니다. (마우스 없이도 키보드로 작업할 수 있었습니다.) 제작자는 이 점까지 고려했습니다. Indesing에서는 Quark Exrpress 4.0의 키보드 단축키를 설치할 수 있습니다. 거의 유사하지만 빨리 익숙해집니다) ).

이러한 모든 프로그램이 제대로 설치되고 작동하려면 글꼴을 순서대로 배치해야 합니다. 이렇게하려면 일종의 설치를 수행하십시오 (가장 유명한 것은 Adobe Font Manager입니다). " 깨진 글꼴"아주 자주 발견됩니다. 깨진 글꼴이 Arial(Windows의 주요 글꼴 중 하나)인 경우가 많습니다. 즉, 이것은 자연스럽게 눈에 보이지 않습니다. 예를 들어 글꼴 자체와 글꼴은 Word에서 훌륭하게 작동하지만 일부 문자는 잘못 "그려지고" Indesign은 단순히 설치되지 않거나 설치 후 시작되지 않습니다.

글쎄, 가장 중요한 것! 신문 및 잡지 레이아웃 프로그램 ( 그런데 Quark Express와 Indesign에서는 전단지, 포스터, 브로셔, 소책자 등 인쇄용 레이아웃을 조합할 수 있습니다.) 이것 텍스트 작업을 위한 프로그램하지만 사진을 사용하거나 텍스트와 사진을 배열하는 경우에는 사용할 수 없습니다. 이 프로그램에는 사진 편집 도구가 없으므로 적어도 하나 이상의 필수 프로그램- 이것 어도비 포토샵, 발행물에 대한 모든 래스터 그래픽을 준비합니다.

Scribus는 책, 잡지, 소책자, 브로셔, 명함 등의 인쇄 자료 레이아웃을 위한 프로그램입니다. Scrybus는 값비싼 유료 편집기에 대한 무료 대안으로 만들어졌으므로 이 응용 프로그램에는 많은 전문적인 기능이 있습니다. 따라서 이 프로그램은 CMYK 색상 분리 시스템과 ICC 색상 관리를 지원합니다. 이 웹사이트에서 Scribus를 무료로 다운로드할 수 있습니다.

응용 프로그램의 표준 인터페이스는 간단합니다. 유사한 소프트웨어에 익숙한 사용자는 문제 없이 작업할 수 있습니다. 이 프로그램은 다양한 최신 이미지 형식과 함께 작동하며 유니코드의 텍스트 및 글꼴을 지원하고 단축키도 지원합니다. 필요한 경우 고유한 단축키 설정, 레이어 작업, 글꼴 삽입 및 수동 커닝이 가능합니다.

덕분에 경험이 없는 사용자도 애플리케이션을 쉽게 익힐 수 있습니다. 도움말 시스템러시아어 및 기타 언어로 사용자는 프로그램을 마스터하는 동안 발생하는 질문에 대한 답변을 찾을 수 있습니다. Scribus를 사용하면 처음부터 레이아웃을 생성할 수 있을 뿐만 아니라 데이터베이스에서 사용 가능한 템플릿을 사용할 수도 있습니다. 또한, 개발자가 준비한 템플릿을 임의로 변경할 수도 있습니다.

새 프로젝트를 생성하기 전에 시트 형식, 글꼴 및 기타 여러 매개변수와 같은 작동 매개변수를 설정해야 합니다. 매개변수를 설정하고 확인한 후 작업 영역, 도구 세트가 포함된 패널 및 상황에 맞는 메뉴. 도구 아이콘은 잘 만들어졌고 직관적이며 위치도 편리합니다. 각자의 말에 따르면 기능성 Scribus는 고가의 제품과 크게 다르지 않습니다. 유료 프로그램따라서 마스터하려면 이 응용 프로그램시간이 좀 걸릴 거예요.

Scribus의 주요 이점

  • 광범위한 기능.
  • CMYK 형식을 지원합니다.
  • 편리한 도움말 시스템.
  • 내장 템플릿의 가용성.
  • 단축키 지원.

응용 프로그램의 기능을 사용하면 다음에서 문서를 만들 수 있습니다. PDF 형식. SVG, PDF, EPS 형식의 문서를 가져오고 내보낼 수도 있습니다. 생성된 레이아웃은 전문 장비에서 인쇄할 준비가 되었습니다.

2표

내 블로그 사이트에 오신 것을 환영합니다. 오늘은 HTML 레이아웃에 어떤 프로그램이 필요한지 이야기하겠습니다. 일부, 특히 초보자 웹마스터는 이의를 제기할 수 있습니다. 시스템에서 사용 가능한 모든 기능을 사용할 수 있다면 왜 추가 소프트웨어를 사용합니까? 텍스트 편집기, 예를 들어 메모장을 사용합니까? 네 그렇죠. 하지만 일하기 불편할 거예요.

다음과 같은 기능이 있는 특수 프로그램을 사용하면 레이아웃이 훨씬 빠르게 발생합니다. 추가 기능, 웹 사이트 생성 과정을 크게 단순화합니다. 이 문제를 더 자세히 고려해 보겠습니다.

그것은 무엇입니까?

레이아웃은 페이지의 블록, 제목, 표, 이미지 및 기타 요소의 배열입니다. 표 형식일 수도 있습니다.

머리글(header)과 하단 부분(footer)이 있는 2열 레이아웃의 예를 살펴보겠습니다.

헤더에는 회사 로고가 포함되어 있습니다. 그런 다음 두 개의 열로 나누어진 주요 콘텐츠가 있는 영역이 있습니다. 왼쪽은 메뉴, 사이드바 등을 배치하는 데 사용됩니다. 오른쪽은 주요 내용입니다.

추가하려면 일반적으로 바닥글 또는 바닥글이 필요합니다. 연락처 정보사이트 소유자에 대해.

보시다시피 결과는 내용이 없는 레이아웃이지만 일반적인 구조를 가지고 있습니다. 이것이 레이아웃입니다. html과 css로 생성되었으며, 특별 프로그램. Evgeniy Popov가 마스터하는 방법에 대한 좋은 무료 코스를 가지고 있다는 점에 주목하고 싶습니다. HTML 그리고 CSS .


괄호

아마도 다음 중 하나일 것입니다. 최고의 편집자열린 채로 소스 코드. 여러 개 있음 흥미로운 기능:

  • 보다 개별 요소그래픽 디자인 psd 파일, 그리고 이를 CSS 코드로 변환합니다.
  • 추가 기능을 사용하여 더 많은 것을 얻으세요 편안한 일소스 코드로;
  • "빠른 편집" 기능.

Brackets는 초보자와 전문가 모두에게 적합한 훌륭한 편집기입니다. 다운로드하려면 다음으로 이동하세요. 대괄호.io .

인터넷 프로젝트를 만들 때 하나의 레이아웃 프로그램만으로는 충분하지 않다는 점에 유의하고 싶습니다. 확인해 보시길 권합니다.

숭고한 텍스트

주요 기능을 살펴보겠습니다 숭고한 텍스트 :

  • 코드를 쉽게 탐색할 수 있는 미니맵
  • 귀하의 개인 설정은 특수 폴더에 저장됩니다.
  • 플러그인 가용성
  • Windows 및 Mac OS에서 작동합니다.

매크로미디어 드림위버

DW는 가장 오래된 편집기 중 하나이며 다음과 같은 이유로 매우 인기가 있습니다.

  • 디자인과 코드를 동시에 볼 수 있습니다.
  • 힌트를 사용할 수 있습니다.
  • 기호 검색 및 교체가 편리하게 구성됩니다.
  • 공식 웹사이트에서는 DW용 다양한 추가 기능과 플러그인을 찾을 수 있습니다.
  • 강한 비주얼 편집기코드를 작성하지 않고도 페이지를 만들 수 있습니다.
  • 온라인으로 미리보기.

그와 함께 일하는 것은 꽤 어렵습니다. 모든 가능성을 탐색하는 데는 시간이 걸립니다. 특히 생성된 페이지의 HTML 코드를 빠르게 가져와야 하는 경우 전문가에게 적합합니다.

비주얼 스튜디오 코드

비주얼 스튜디오암호 웹 프로그래밍에 익숙한 사람들을 위해 설계되었습니다.

위의 편집기와 동일한 기능을 가지고 있습니다. 특히 JavaScript, Node.js, TypeScript 등으로 웹 애플리케이션을 구축하는 데 사용되는 Visual Studio Code 도구에 대해 언급하고 싶습니다. 이 프로그램은 무료입니다.

메모장++

무료 편집기 오픈 소스. 모듈을 사용하여 기능이 확장되었습니다. 추가 플러그인이 많이 설치되어 있어도 빠르게 작동합니다. 소스 코드 강조 기능이 내장되어 있습니다.

웹 사이트 구축에 관심이 있다면 추가 문헌 없이는 할 수 없다는 점에 주목하고 싶습니다. 이 주제에 대한 내 글을 읽어 보시기 바랍니다.

압타나 스튜디오 3

강력하고 무료 도구 압타나 스튜디오 3 html, css, php, JavaScript, Ruby 작업을 지원합니다. 모든 수준의 복잡한 인터넷 프로젝트를 만드는 데 적합합니다. 불필요한 것이 없으며 매우 빠르게 작동합니다. 구문 강조 기능이 있습니다. 이것이 DW의 무료 대안이라고 말할 수 있습니다.

부트스트랩 스튜디오

" 유형의 생성자 드래그 앤 드롭프레임워크에 대한 "드롭" 부트스트랩 . 에디터에 추가된 개발자 엄청난 양추가 모듈, . 페이지가 어떻게 보이는지 테스트할 수 있습니다. 다른 장치. 편집기는 무료는 아니지만 진지한 개발자에게는 좋은 투자입니다.

원자

편집기는 유명한 GitHub 팀에 의해 만들어졌습니다. 위에서 설명한 프로그램과 동일한 기능을 가지고 있습니다. 원자 - 오픈 소스 소프트웨어. 따라서 사용자가 직접 기존 모듈을 생성, 편집하거나 직접 작성할 수 있습니다. 배포판에 포함된 패키지는 다음과 같습니다.

  • HTML 및 CSS 자동 완성;
  • 스니펫 생성
  • 쌍을 이루는 괄호 강조 표시;
  • 편리한 검색 및 교체.

공부하는 데 시간을 낭비하고 싶지 않지만 빨리 결과가 필요하다면 어떻게 해야 할까요? 이런 경우에는 합리적인 가격으로 문제를 해결할 수 있는 전문가에게 문의하세요. 이를 위해 저는 여러분에게 흥미로운 서비스를 제공하고 싶습니다. 케이워크 .


결론

위에 설명된 각 편집기는 코드를 빠르게 작성할 수 있는 옵션을 제공합니다. 차이점은 이러한 기능이 구현되는 방식입니다. 초보자에게는 먼저 대괄호나 Sublime Text를 사용하는 것이 좋습니다. 경험이 많은 웹마스터라면 Macromedia Dreamweaver( 사용법에 대한 무료 강좌) 또는 Visual Studio 코드. 편집자의 선택은 개인 취향과 개발자로서의 작업의 복잡성에 따라 크게 달라집니다.

내 구독하기 VKontakte 그룹 , 흥미로운 정보가 많이 있을 것입니다.

3표

내 블로그에 오신 것을 환영합니다. 오늘 저는 디자이너들에게 유용한 선택을 준비하기로 결정했습니다. 저는 가장 인기 있는 웹마스터 사이트를 방문하여 디자인을 만드는 데 도움이 되는 50가지 최고의 도구를 찾았습니다.

전문가들이 인정하는 최고의 온라인 서비스 및 도구인 웹 디자인에 대한 관심 프로그램을 소개합니다. 모든 점에 동의하지는 않지만 다음과 같은 사이트에서 일하는 전문가와 논쟁을 벌이는 내가 누구입니까? 네트워크학 , vc.ru, 안녕이라고 인사해그리고 다른 사람들.

나는 이 목록을 스스로 약간 확장하여 카테고리로 나누었습니다. 이제 나는 그것을 당신의 관심에 제시합니다.

기본 프로그램

물론 단 한 명의 웹 개발자도 없이는 할 수 없습니다. 표준 세트모든 작업이 Adobe를 통해 수행됩니다. 이제 2016년 말이며 많은 전문가들은 프로그램이 점점 인기를 얻고 있다고 주장합니다. 스케치 몇 년 동안 일반적인 Photoshop을 대체해 온 가 곧 이 작업을 수행할 예정입니다. 2017년에는 우리 모두가 이 특정 프로그램을 적극적으로 연구할 것입니다.

이는 아직 러시아어가 아니며 Mac OS에만 적합하다는 사실에도 불구하고 그렇습니다. 대부분의 전문가들은 Photoshop보다 인터페이스 디자인에 훨씬 더 적합하다고 주장합니다.

다른 Adobe 제품에 대해 이야기하는 경우 해당 제품을 연구할지 여부는 귀하에게 달려 있습니다. 그러나 그들은 여전히 ​​​​목록에 있습니다.

  • 일러스트레이터 방법 최고의 도구벡터 그래픽 작업 및 일러스트레이션 제작에 사용됩니다.
  • InDesign은 인쇄를 위한 최적의 유틸리티입니다.
  • Adobe Muse는 창작을 위한 완벽한 플랫폼입니다.

전문가들은 Adobe 제품 외에도 다른 브랜드와 해당 제품에 주의를 기울일 것을 권장합니다. 잉꼬 가장 인기 있는 웹 디자인 프로그램 중 하나로 인식되고 있습니다. Sketch와 달리 Windows에 적합하며 코드를 몰라도 프로그래밍이 가능합니다. 자동으로 생성됩니다. 공식 홈페이지에서 직접 무료로 다운로드할 수 있습니다. 진실은 오직 영어.

Creative Bloq은 Adobe Muse의 대안으로 또 다른 최신 서비스를 제공합니다. 소나무 , 이미지를 코드로 자동 변환하여 웹 사이트를 그리는 데 적합합니다. Jetstrap을 사용해도 동일한 결과를 얻을 수 있습니다.

글쎄, 응용 프로그램 작업이 필요한 경우 이것이 도움이 될 것입니다 앱을 위한 기초 .

그래픽 뱅크

모든 디자이너에게는 그래픽이 필요합니다. 모든 것을 직접 그리면 시간이 많이 걸립니다. 일부 요소는 다른 사람에게 주문할 수도 있고, 은행에서 기성품 사진을 구입하거나 픽업할 수도 있습니다. 찌름 좋은 디자이너결코 그럴 수는 없지만 좋은 사이트에서 다운로드하면 안 됩니다.

예를 들어, endlessicons.com 아이콘을 찾을 수 있습니다. Coverr.co 비디오 커버.

~에 freepik.com 그리고 아이콘스토어 많이 찾을 수 있어요 무료 이미지. 벡터 및 심지어 PSD 레이아웃. 나 자신을 대신하여 제안할 수 있습니다. 포토샵-주인 그리고 Pixabay .

Stripemania.com 그래픽을 빠르게 생성합니다. 나만의 색상을 추가하고 줄무늬 사진을 얻으세요. 자신만의 애니메이션 배경을 만들고 싶으신가요? 부드러운 색상 전환으로? 이 웹사이트가 이에 대해 도움을 드릴 것입니다. 그래디언트 애니메이터.com . 결과를 실시간으로 표시할 뿐만 아니라 사이트에 삽입하기만 하면 되는 코드도 생성합니다.

Findguidelin.es 이것은 WatsApp, Facebook, VKontakte 등 인기 브랜드에 대한 디자이너를 위한 아이콘과 모든 정보를 찾을 수 있는 컬렉션입니다.

로고 및 파비콘 메이커

나는 놀랐지만 디자이너를 위한 유명하고 유명한 많은 웹사이트에서 도움이 되는 서비스에 대한 링크를 찾을 수 있습니다. 예를 들어 Netology에서는 다음을 제공합니다. withoomph.com 또는 designrails.com . 나는 선호한다 로게스터 .

빠르게 생성하려면 포털을 사용할 수 있습니다. www.favicon.cc . 그건 그렇고, 나는 이미 그에 대해 썼습니다. 좋은 물건.

색상 작업

나쁜 디자이너는 최고의 색상 조합을 만드는 데 전문 서비스의 도움을 신뢰하지 않는 사람입니다. 이에 대한 많은 리소스를 인터넷에서 찾을 수 있습니다. 예를 들어 나는 좋아한다 색 구성표 .

서비스 머티리얼 팔레트 두 가지 색상을 선택하면 그녀는 글꼴, 구분선 등 나머지 구성표를 완성해 줄 것입니다.

~에 0~255러시아 대안인 Yandex도 있지만 다양한 색조를 볼 수 있습니다.

예쁜 사진이 보이시면 서비스 이용해보세요 pictacular.com그것에서 추출 색 구성표. 그런데 포털에서 이 이미지를 사용할지 저 이미지를 사용할지 정확하게 결정하는 것이 정말 도움이 됩니다. 기본 회로와 성공적으로 결합되지 않으면 대답은 분명합니다.

글꼴 작업

작업을 위한 최초이자 최고의 리소스 구글 글꼴글꼴. 이것은 러시아어를 포함한 거대한 글꼴 모음입니다. 선택하기 쉽고 사용하기 쉽습니다.

완벽한 글꼴 조합을 찾으려면 전문가는 다음 서비스 사용을 권장합니다. canva.com/font-combinations 또는 typewolf.com .

이 브라우저 확장 프로그램이 유용할 수도 있습니다. 폰트페이스.닌자 . 멋진 글꼴을 찾아 그 위에 마우스를 올려 정보를 얻으세요. 남은 것은 그를 찾는 것뿐이다.

그리고 웹사이트의 온라인 편집기에서 prototypo.io 조금 변경하여 독특하게 만들 수 있습니다.

최종 단계

프로젝트가 준비되면 컴퓨터와 화면의 표준 브라우저에서 모든 것이 어떻게 보이는지 확인해야 합니다. 휴대전화. Resizemybrowser.com 빨리 할 수 ​​있게 도와줄 거예요.

서비스 이용 dunnnk.com 수천 개의 휴대폰과 컴퓨터 이미지에 스크린샷을 삽입하고 여러 각도에서 다양한 장치에서 사이트가 어떻게 보이는지 확인할 수 있습니다.

매우 유용한 목록이 웹사이트에 있습니다. webdesignerschecklist.com . 모든 작업을 올바르게 완료하셨나요? 프로젝트를 제출할 수 있나요? 확인란을 선택하고 잊어버린 것이 없는지 확인하세요. 안타깝지만 이 서비스는 영어를 구사하는 사람들에게만 적합합니다.

디자인 외에도 레이아웃도 수행하는 경우 코드에 유틸리티를 구축할 수 있습니다. 총11년 . 오류를 강조 표시합니다.

글쎄요, 개발을 잊지 마세요. 나는 디자이너라면 누구나 누락된 지식에 대한 강좌를 선택하는 것이 유용할 것이라고 생각합니다. Photoshop-마스터 명령 .


PhotoshopMaster 팀의 디자이너를 위한 과정입니다.

또한 내 블로그 뉴스레터를 구독하고 VKontakte 그룹. 이를 통해 디자인 개발을 잠시 멈추지 않고 매일 개선할 수 있습니다.

글쎄, 그게 다야. 또 뵙겠습니다. 행운을 빕니다.

따라서 명확하게 해두어야 할 점은 작업 속도를 높이려면 도구가 필요하다는 것입니다. 즉, 모든 기능을 완벽하게 익힐 필요는 없고, 빠르게 작업하는 방법을 배워야 합니다. 어떤 도구를 선택하든 학습하세요. 주요 기능모든 단축키를 마스터하세요.

자동으로 사용하는 방법을 배운 다음 고급 기능으로 이동하세요. 간단한 웹사이트를 디자인하려면 글꼴 설치, 그리기만 가능하면 됩니다. 단순한 모양, 레이어 작업, 색상 변경 등

쌀. 7.0: 몇 가지 기본 도구, 하나의 글꼴, 세 가지 색상을 사용하여 웹사이트를 디자인했습니다.

도구에 익숙해지면 다양한 아이디어를 빠르게 테스트하고(더 나은 결과를 얻는 데 도움이 됨) 작업을 제 시간에 완료할 수 있습니다(클라이언트와 고용주가 행복해집니다!).

이제 막 디자인을 배우기 시작했거나 다른 도구로 전환하고 싶다면 여러 옵션을 실험해보고 가장 편리한 옵션을 선택하는 것이 좋습니다. 우리 모두는 자신의 삶의 경험과 습관을 가지고 있습니다. 어떤 이유로 프로그램이 마음에 든다면 아마도 훨씬 더 빨리 마스터하게 될 것입니다.

어떤 시점에서는 다른 도구로 전환해야 할 수도 있다는 점을 이해하는 것이 중요합니다. 시장에 대안이 없었기 때문에 우리 대부분은 수년간 Photoshop을 사용해 왔습니다. 지난 몇 년 동안 상황은 급격하게 변했습니다.

웹 디자인은 오랫동안 정적인 것이 아니며, 우리는 디자인과 코드 사이의 격차를 메우려고 노력하고 있습니다. 아마도 가까운 시일 내에 많은 새로운 기능과 도구도 등장할 것입니다.

인기 있는 디자인 프로그램

디자인 도구를 선택할 때 프로그램 자체의 속도와 품질뿐만 아니라 전문 환경에서의 인기도 중요한 역할을 합니다. 동일한 소프트웨어를 사용하면 다른 디자이너 및 개발자와 함께 작업하는 것이 더 쉬워집니다(예: 대규모 프로젝트의 일부로).

1. 스케치– $99/년 (Mac만 해당)


그림 7.1: 스케치

나는 현재 대부분의 프로젝트에 Sketch를 사용합니다. 이 도구는 매우 빠르고 직관적이며 사용하기 매우 쉽습니다(아무 문제 없이 Photoshop에서 이 도구로 전환했습니다). Sketch는 가장 인기 있는 디자인 응용 프로그램 중 하나이므로 대부분의 개발자와 디자이너에게 익숙합니다.

Sketch에는 가이드, 그리드, 심볼, 원근 변환(iOS에서 디자인 미리보기용), 벡터 편집, 프로토타이핑, 라이브러리, 자산 내보내기, 클라우드(디자인 및 라이브러리 공유용), 코드 내보내기 등 디자인에 필요한 모든 것이 포함되어 있습니다. 이를 위한 플러그인과 리소스도 많이 있습니다.

Sketch의 가장 큰 단점은 Mac에서만 작동한다는 것입니다. 그러나 다음과 같은 애플리케이션용 프로젝트를 내보낼 수 있습니다. 인비전 그리고 제플린 개발자를 위한 사양과 지침을 작성합니다.

2. 피그마– 무료 또는 $12/월(웹 앱)


그림 7.2: Figma

피그마는 상대적이다 새로운 프로그램디자인을 위해. 이는 아마도 Sketch의 가장 큰 경쟁자일 것이며 매우 빠르게 성장하고 있습니다. Figma는 Sketch와 동일한 기능을 모두 갖추고 있으며, 여러 디자이너가 동시에 동일한 프로젝트에서 작업할 수 있습니다.

가장 멋진 점은 최대 3개의 프로젝트가 있는 경우 Figma가 완전히 무료이며 한 달에 단 12달러로 모든 기능을 잠금 해제하고 끝없이 많은 프로젝트를 만들 수 있다는 것입니다. 애플리케이션은 브라우저에서 직접 실행됩니다. 따라서 거의 모든 운영 체제. 사용자 인터페이스는 Sketch 및 Adobe XD를 연상시킵니다. 이러한 도구가 익숙하다면 아무것도 배울 필요도 없습니다.

이것은 초보 디자이너이고 아직 값비싼 소프트웨어에 투자하지 않고 직접 시도해 보고 싶은 경우 훌륭한 옵션입니다. 나는 여러 프로젝트에서 Figma를 사용했는데 매우 쉽고 빠르다는 것을 알았습니다.

3. 어도비 XD– 무료 (Mac 및 Windows)


그림 7.3: 어도비 XD

Adobe XD는 전문 디자인 애플리케이션 분야의 또 다른 강력한 플레이어입니다. Sketch나 Figma에 비해 몇 가지 고급 기능이 부족하지만 UI 디자인, 와이어프레이밍, 프로토타이핑에 적합하다고 생각합니다.

장점은 이 도구가 Mac과 Windows 모두에서 무료라는 점입니다(단, 최종 완성되면 유료로 제공될 수도 있음). 또한 Adobe 제품 라인이므로 Photoshop이나 Illustrator와 같은 다른 도구와 자산을 공유할 수 있습니다.

인터페이스는 Sketch 및 Figma와 매우 유사하므로 세 가지 도구를 동시에 사용할 수 있으며 문제 없이 도구 간에 전환할 수 있습니다(일부 단축키가 다르다는 점만 제외).

4. 인비전 스튜디오– 무료(베타 버전, 조기 액세스 포함)


그림 7.4: InVision 스튜디오

InVision Studio는 아직 베타 버전이지만 유망해 보이는 새로운 풀 스택 도구입니다. 인터페이스는 이미 디자인 도구의 현대 표준이 된 Sketch 및 Figma의 복사본입니다.

저는 InVision Studio를 조금 가지고 놀았고, 일반적으로 다른 InVision 제품에 대해 좋은 경험을 했기 때문에 공식 버전이 나오면 그 사람들이 성공할 것이라고 확신합니다.

5. 웹플로우– 무료 또는 $16/월(웹 앱)


그림 7.5: 웹플로우

Webflow는 플랫폼에서 직접 호스팅(또는 다른 곳으로 내보내고 호스팅)할 수 있는 기능적이고 반응성이 뛰어난 웹 사이트를 만들기 위한 풀 스택 도구입니다.

나는 생성된 코드가 일반적으로 제대로 작동하지 않고 작업하기 어렵기 때문에 디자인-코드 도구를 좋아하지 않습니다. 그러나 Webflow는 매우 좋습니다. CSS 코드를 완전히 제어할 수 있으며, 모든 디자인 요소가 브라우저에서 예상대로 작동하기 때문에 도구는 HTML과 CSS가 작동하는 방식을 보여줍니다.

Webflow는 빠른 프로토타입, 간단한 사이트, 단일 페이지 등을 만드는 데 적합하다고 생각합니다. 제가 아는 많은 전문 디자이너들이 Webflow를 사용하고 있으니 좀 더 자세히 살펴볼 가치가 있습니다!

6. 어도비 포토샵– $20.99/월 또는 Creative Cloud의 일부($52.99/월)


그림 7.6: 어도비 포토샵

내가 Photoshop을 목록 맨 끝에 넣은 것은 우연이 아닙니다. Photoshop은 매우 인기 있는 웹사이트 디자인 프로그램이지만 Sketch, Figma 및 기타 도구와의 싸움에서 패하고 있습니다. 아직 Photoshop을 사용하고 있다면 괜찮지만 가까운 시일 내에 다른 도구로 이동할 준비를 하십시오.

현재의 웹 개발 표준은 우리가 보다 유연한 프로젝트를 만들고, 코드에 더 가까워지고, 디자인 시스템의 프레임워크 내에서 작업하도록 강요합니다. Photoshop은 위의 도구에 비해 너무 느리고 너무 큰 파일을 생성합니다.

하지만 저는 여전히 Photoshop을 사용하여 사진을 조작하고, 그래픽을 만들고, 일러스트레이션을 편집합니다.


그림 7.7: Sketch, Figma 및 Adobe XD 인터페이스의 빠른 비교. 얼마나 비슷한지 보세요!

직장에서 사용하는 다른 도구:

여기 전체 목록내가 작업에 사용하는 도구.