디자이너를 위한 10가지 Chrome 확장 프로그램

표준 디자인 프로세스를 따르는 웹 디자이너라면 다음과 같은 작업을 수행해야 합니다.

• 연구
• 와이어프레임
• 색 구성표 선택
• 올바른 글꼴 선택
• 여러 변형 테스트
• 고객 및 팀원과의 협업

그리고 더…

브라우저 내에서 이 모든 작업과 그 이상의 작업을 수행할 수 있다는 사실을 알고 계십니까? 예, Google Chrome 전문가라면 Chrome 확장 프로그램을 통해 이 모든 작업을 수행할 수 있습니다. 대부분은 몇 번의 클릭만으로 가능합니다.

따라서 많은 시간을 절약하고 디자이너를 위한 10가지 Chrome 확장 프로그램을 사용해 보세요.

1. 반응형 웹 디자인 테스터

Post Google의 모바일 친화적인 업데이트, 응답성은 화두입니다! 여기 모든 주요 Android 및 Apple 모바일 장치에서 웹사이트를 테스트할 수 있는 확장 프로그램이 있습니다.

오프라인에서도 작동하므로 로컬에서 디자인 작업을 하는 동안에도 훌륭한 옵션입니다. 모든 인기 있는 장치에 대한 사전 설정이 있지만 사용자 정의 치수도 추가할 수 있습니다.

미리 볼 장치를 선택하면 현재 탭이 팝업 창에서 열리고 해당 장치에서 페이지가 어떻게 보이는지 보여줍니다.

2. 타입원더

글꼴은 실제로 사이트의 분위기를 결정하지만 올바른 글꼴을 선택하는 것은 상당히 어려운 작업입니다. 코드로 돌아가서 변경하고 미리보기하는 드릴을 알고 있습니다. 그리고 이 모든 것이 계속해서 반복됩니다.

그러나 여기에서 이 편리한 글꼴 확장이 시작됩니다. TypeWonder를 사용하면 브라우저에서 모든 웹사이트의 글꼴을 변경할 수 있습니다.

웹사이트를 방문하여 확장 프로그램 아이콘을 클릭하기만 하면 됩니다. 여러 글꼴 옵션이 제공됩니다. 아무거나 클릭하면 거의 즉시 해당 글꼴로 웹사이트의 미리보기가 생성됩니다. 미리보기가 만족스러우면 관련 코드를 가져와 사이트 및 해당 CSS 파일에 추가할 수 있습니다.

3. 탭 패키저

연구하는 것은 큰 일입니다. 연구를 진지하게 받아들이는 디자이너라면 어느 시점에서든 적어도 7-10개의 탭이 열려 있다고 자신 있게 말할 수 있습니다.

당신이 참조하는 사이트에 대해 디자이너 친구나 팀원의 의견을 들어야 한다면 어떻게 하시겠습니까? 폴더의 모든 페이지를 북마크에 추가하고 모든 페이지를 내보낸 다음 메일 프로그램을 연 후 보낼 세트를 선택합니다. 꽤 많은 작업!

운 좋게도 이렇게 힘들게 일할 필요는 없습니다. Tab Packager를 사용하면 열려 있는 모든 탭을 패키징할 수 있습니다. 그런 다음 한 번의 클릭으로 패키지의 링크를 통해 보낼 수 있습니다. 이메일, 트위터 및 더 많은 서비스를 통해 공유할 수 있습니다.

4. 트랙덕

효과적인 커뮤니케이션은 모든 성공적인 프로젝트 뒤에 있습니다. 그러나 사소한 수정을 하거나 큰 변화를 주기 위해 이메일을 왔다갔다 하려면 시간이 많이 걸릴 수 있습니다.

이제 이것은 과장된 표현처럼 들릴 수 있지만 TrackDuck은 디자이너 전용의 미니 아사나와 같습니다.

TrackDuck은 웹사이트를 프로젝트로 추가할 수 있는 시각적 협업 도구입니다. 프로젝트를 추가하면 팀원을 초대할 수 있습니다. 이 프로젝트(또는 웹사이트 – 확장 아이콘을 클릭하기만 하면 할 수 있음)에 댓글을 남길 때마다 해당 댓글에 대한 작업이 생성됩니다. 이 작업을 동료 팀원에게 할당하고, 첨부 파일과 스크린샷을 추가하고, Trello 및 Basecamp와 같은 많은 공동 작업 도구와 통합할 수 있습니다.

5. 컬러질라

다음 웹 프로젝트의 팔레트에 영감을 줄 멋진 색상을 언제 보게 될지 모릅니다.

그렇다면 웹에서 색상을 캡처하는 방법은 무엇입니까?

여기 ColorZilla가 있습니다. 모든 디자이너가 가장 좋아하는 Chrome 제품입니다. 가장 기본적이고 인기 있는 기능은 웹 페이지의 모든 색상에 대한 코드를 가져오는 것입니다.

또 다른 기능은 모든 웹사이트의 색 구성표를 얻을 수 있다는 것입니다. 웹페이지 색상 분석기 옵션 을 클릭해야 해당 웹페이지의 모든 색상을 보여주는 팔레트가 나타납니다.

6. 왓폰트

완벽한 글꼴, 색상 및 크기를 사용하는 웹사이트를 접하는 경우가 많습니다. 실제로 사이트에서 정확한 조합을 사용하고 싶을 정도로 좋을 수도 있습니다.

그러나 더 이상 Inspect Element 경로를 사용할 필요가 없습니다. WhatFont는 한 번의 클릭으로 웹 페이지의 모든 글꼴을 분석합니다.

확장 프로그램의 아이콘을 클릭하고 관심 있는 텍스트 섹션 위로 마우스를 가져갑니다. WhatFont는 글꼴 유형, 크기, 높이, 색상 및 패밀리를 생성합니다.

7. 인스턴트 와이어프레임

웹사이트를 디자인하기 전에 정보 계층 구조를 정의하면 사용자 친화적인 사이트를 만들 수 있습니다. 그리고 와이어프레이밍은 이 문제를 해결하는 가장 좋은 방법입니다.

Instant Wireframe 확장을 사용하면 모든 웹 페이지의 상당히 좋은 와이어프레임을 볼 수 있습니다. 아직 베타 버전이지만 공정한 작업을 수행합니다.

와이어프레임을 보고 싶은 사이트를 발견했다면 주소 표시줄에 있는 확장 프로그램 아이콘을 클릭하기만 하면 됩니다. 시도해 볼 가치가 있습니다!

8. 페이지 눈금자

웹 페이지 요소의 크기를 측정할 수 있는 몇 가지 방법이 있습니다. 그러나 대부분은 여러 단계를 거쳐야 하고 시간이 걸립니다.

Page Ruler는 이를 수행하는 가장 편리한 방법입니다. 페이지 눈금자를 사용하면 요소의 높이, 너비 및 상대 위치를 볼 수 있습니다. 요소를 div 방식으로 분석할 수도 있습니다.

픽셀 완벽한 배너, 추천 이미지 및 기타 마케팅 자료를 만드는 데 탁월합니다.

9. 크롬용 팔레트

웹사이트는 이미지로 가득 차 있으며 색상 팔레트에 영감을 줄 만큼 좋은 이미지가 언제 나타날지 장담할 수 없습니다.

그러나 Chrome용 팔레트가 항상 다루므로 걱정할 필요가 없습니다. 관심 있는 이미지를 마우스 오른쪽 버튼으로 클릭하고 이 확장 프로그램의 옵션을 선택하십시오. 선택한 이미지에서 영감을 얻은 색상 팔레트를 즉시 생성합니다. 색 구성표에 대해 생성할 색 수를 지정할 수 있습니다.

색 구성표를 내보낼 수 있는 방법이 있었다면 더 좋았을 것입니다. 그러나 확장은 여전히 ​​​​필수품입니다.

10. ExtensionMuzli – 디자인 조식

이제 막 시작했을 때 틈새 시장의 모든 최고 블로그를 구독하게 됩니다. RSS 피드가 모두 실행되었습니다. 하지만 일이 쌓이면 어느 정도 단절됩니다. 영감이 필요하지 않다는 것이 아니라 따라잡기가 어려워질 뿐입니다.

ExtensionMuzli는 이를 보완하기 위해 만들어졌습니다. 상위 디자인 리소스 중 약 12-15개의 스토리를 선별합니다. 전환하려는 경우 웹 디자인 작업 섹션도 있습니다.

이 확장 프로그램을 설치하면 새 탭에 인터넷 전체에서 영감을 주는 최신 또는 교육적인 디자인 스토리가 표시됩니다. 틈새 시장에서 최신 정보를 확인할 수 있는 깔끔한 방법을 제공합니다.

자, 여기 있습니다. 이 놀라운 웹 디자이너 확장 프로그램으로 Chrome을 강화하고 생산성이 급증하는 것을 지켜보세요. 디자인 프로세스를 어떻게 분할하고 어떤 작업에 어떤 확장 기능을 사용합니까? 더 배우고 싶습니다.