10 extensii Google Chrome pentru designeri

Publicat: 2015-06-11

Dacă sunteți un designer web care urmează procesul standard de proiectare, sarcinile dvs. includ lucruri precum:

  • Cercetând
  • Wireframing
  • Alegerea unei scheme de culori
  • Alegerea fontului potrivit
  • Testarea mai multor variante
  • Colaborarea cu clienții și colegii de echipă

Si inca ceva…

Știi că poți face toate acestea și multe altele chiar în browser-ul tău? Da, dacă sunteți un profesionist Google Chrome, atunci puteți face toate aceste sarcini prin extensiile Chrome. Cele mai multe dintre ele cu doar câteva clicuri.

Așadar, economisiți mult timp și încercați aceste 10 extensii Google Chrome pentru designeri.

1. Tester de design web receptiv

Postați actualizarea Google pentru dispozitive mobile, capacitatea de răspuns este cuvântul la modă! Așadar, iată o extensie care vă permite să vă testați site-ul pe toate dispozitivele mobile Android și Apple majore.

Funcționează și offline, deci este o opțiune grozavă chiar și atunci când lucrați la designul dvs. local. Are presetări pentru toate dispozitivele populare, dar puteți adăuga și dimensiunile personalizate.

Odată ce selectați un dispozitiv pentru previzualizare, fila curentă se deschide într-o fereastră pop-up care arată cum ar arăta pagina dvs. pe acel dispozitiv.

chromeEx1

2. TypeWonder

Fonturile creează într-adevăr starea unui site, dar este o sarcină destul de mare să-l alegeți pe cel potrivit. Cunoașteți exercițiul – reveniți la codul dvs., efectuați modificări și previzualizați. Și toate acestea din nou și din nou.

Dar aici intervine această extensie de font la îndemână. TypeWonder vă permite să schimbați fontul oricărui site web din browser.

Doar vizitați site-ul dvs. și faceți clic pe pictograma extensiei. Vi se oferă mai multe opțiuni de font. Făcând clic pe oricare, aproape instantaneu se creează o previzualizare a site-ului dvs. web în acel font. Dacă sunteți mulțumit de previzualizare, puteți obține codul relevant pentru a-l adăuga pe site și fișierul CSS al acestuia.

chromeEx2

3. Tab Packager

Cercetarea este o mare problemă. Și dacă ești un designer care ia în serios cercetarea, pot spune cu siguranță că, în orice moment, ai cel puțin șapte până la zece file deschise.

Ce se întâmplă dacă ar trebui să obții părerea prietenului tău designer sau a coechipierului despre site-urile la care te referi? Veți marca toate paginile dintr-un folder, le veți exporta pe toate și apoi alegeți setul de trimis, desigur, după deschiderea programului de e-mail. Destul de muncă!

Din fericire, nu trebuie să muncești atât de mult. Tab Packager vă permite să împachetați toate filele deschise. Și apoi puteți trimite prin link-ul pachetului cu un singur clic. Puteți partaja prin e-mail, Twitter și multe alte servicii.

chromeEx3

4. TrackDuck

Comunicarea eficientă se află în spatele fiecărui proiect de succes. Dar poate deveni consumator să mergi înainte și înapoi cu e-mailuri care încearcă să rezolve ajustări minore sau pentru a face schimbări majore.

Acum, acest lucru ar putea suna ca o exagerare, dar TrackDuck este ca o mini-Asana, exclusiv pentru designeri.

TrackDuck este un instrument de colaborare vizuală care vă permite să adăugați site-uri web ca proiecte. După ce adăugați un proiect, vă puteți invita colegii la el. Ori de câte ori lăsați un comentariu la acest proiect (sau site-ul web – pe care îl puteți face doar făcând clic pe pictograma extensiei), este generată o sarcină despre comentariu. Puteți atribui această sarcină colegilor dvs. de echipă, puteți adăuga atașamente și capturi de ecran și o puteți integra cu o mulțime de instrumente de colaborare precum Trello și Basecamp.

chromeEx4

5. ColorZilla

Nu știi niciodată când vei vedea o culoare minunată care va inspira paleta următorului tău proiect web.

Deci, cum captezi orice culoare pe web?

Ei bine, iată ColorZilla – este ușor bunul Chrome preferat al fiecărui designer. Caracteristica sa cea mai de bază și populară este obținerea codului pentru orice culoare pe o pagină web.

O altă caracteristică este că vă permite să obțineți schema de culori a oricărui site web. Va trebui să faceți clic pe opțiunea Analizor de culoare a paginii web și va apărea o paletă care arată toate culorile de pe pagina web respectivă.

chromeEx5

6. WhatFont

Sunt atât de multe ori când dai peste un site web care folosește fontul, culoarea și dimensiunea perfecte. De fapt, ar putea fi atât de bine încât să vrei să folosești combinația exactă pe site-ul tău.

Dar nu mai trebuie să urmați traseul Inspect Element – ​​WhatFont disecă orice font de pe o pagină web cu un singur clic.

Doar faceți clic pe pictograma extensiei și treceți cu mouse-ul peste secțiunea de text care vă interesează. WhatFont produce tipul fontului, dimensiunea, înălțimea, culoarea și familia.

chromEx6

7. Wireframe instantanee

Dacă definiți ierarhia de informații a site-ului dvs. web înainte de a-l proiecta, veți crea un site ușor de utilizat. Și wireframing este cel mai bun mod de a face acest lucru.

Extensia Instant Wireframe vă permite să vizualizați un wireframe rezonabil de bun al oricărei pagini web. Este încă în versiune beta, dar face o treabă corectă.

Dacă întâlniți un site pe care doriți să îl vizualizați, trebuie doar să faceți clic pe pictograma extensiei din bara de adrese. Merită să încerci!

chromeEx7

8. Riglă de pagină

Există câteva moduri prin care puteți măsura dimensiunile elementelor unei pagini web. Dar cele mai multe dintre ele implică mai mulți pași și necesită timp.

Rigla de pagină este cea mai utilă modalitate de a face acest lucru. Rigla de pagină vă permite să vedeți înălțimea, lățimea și poziția relativă a unui element. De asemenea, puteți analiza elementele div-wise.

Și este excelent pentru a crea bannere pixeli perfecte, imagini prezentate și alte materiale de marketing.

chromeEx8

9. Paleta pentru Chrome

Site-urile web sunt pline de imagini și nu poți spune când vei vedea o imagine suficient de bună pentru a inspira o paletă de culori.

Dar nu trebuie să vă faceți griji, deoarece Palette pentru Chrome vă acoperă întotdeauna. Doar faceți clic dreapta pe imaginea care vi se pare interesantă și alegeți opțiunea acestei extensii. Va crea instantaneu o paletă de culori inspirată din imaginea aleasă. Puteți specifica numărul de culori pe care doriți să le generați pentru schema de culori.

Mi-ar fi plăcut mai mult dacă ar exista o modalitate de a exporta schema de culori. Dar extensia este încă o necesitate.

chromeEx9

10. ExtensionMuzli – Design Breakfast

Știi, când abia începi, te abonezi la toate blogurile de top din nișa ta. Fluxurile dvs. RSS sunt toate activate. Dar, pe măsură ce munca ta se adună, devii oarecum deconectat. Și nu că nu ai nevoie de inspirație, ci doar că devine greu să te prinde din urmă.

ExtensionMuzli este construit pentru a compensa acest lucru. Curează povești din aproximativ 12-15 dintre resursele de design de top. Există, de asemenea, o secțiune de locuri de muncă pentru proiectare web, dacă doriți să treceți.

Odată ce instalați această extensie, noua filă va prezenta unele dintre cele mai recente povești de design inspiraționale sau educaționale de pe net. Oferă o modalitate ordonată de a ține o filă cu cele mai recente din nișa ta.

chromeEx10

Deci, iată. Porniți-vă Chrome cu aceste extensii uimitoare pentru designeri web și urmăriți-vă productivitatea crește vertiginos. Cum vă despărțiți procesul de proiectare și ce extensii folosiți pentru ce sarcini? Mi-ar plăcea să aflu mai multe.