10 rozszerzeń Google Chrome dla projektantów

Jeśli jesteś projektantem stron internetowych, który postępuje zgodnie ze standardowym procesem projektowania, Twoje zadania obejmują między innymi:

• Badania
• Szkielet
• Wybór schematu kolorów
• Wybór odpowiedniej czcionki
• Testowanie kilku odmian
• Współpraca z klientami i kolegami z zespołu

I jeszcze trochę…

Czy wiesz, że możesz to wszystko i więcej zrobić bezpośrednio w swojej przeglądarce? Tak, jeśli jesteś profesjonalistą Google Chrome, możesz wykonać wszystkie te zadania za pomocą rozszerzeń przeglądarki Chrome. Większość z nich za pomocą zaledwie kilku kliknięć.

Zaoszczędź więc mnóstwo czasu i wypróbuj te 10 rozszerzeń Google Chrome dla projektantów.

1. Responsywny tester projektowania stron internetowych

Opublikuj aktualizację Google przyjazną dla urządzeń mobilnych, a responsywność to modne hasło! Oto rozszerzenie, które umożliwia testowanie witryny na wszystkich głównych urządzeniach mobilnych z systemem Android i Apple.

Działa również w trybie offline, więc jest to świetna opcja nawet podczas pracy nad projektem lokalnie. Ma ustawienia wstępne dla wszystkich popularnych urządzeń, ale możesz też dodać niestandardowe wymiary.

Po wybraniu urządzenia do podglądu bieżąca karta otworzy się w wyskakującym okienku pokazującym, jak Twoja strona będzie wyglądać na tym urządzeniu.

2. Wpisz Wonder

Czcionki naprawdę decydują o nastroju witryny, ale wybór właściwej jest nie lada wyzwaniem. Znasz ćwiczenie – powrót do kodu, wprowadzanie zmian i podgląd. I to wszystko w kółko.

Ale tutaj wkracza to przydatne rozszerzenie czcionki. TypeWonder pozwala zmienić czcionkę dowolnej witryny w przeglądarce.

Po prostu odwiedź swoją witrynę i kliknij ikonę rozszerzenia. Masz kilka opcji czcionek. Kliknięcie dowolnego z nich niemal natychmiast tworzy podgląd Twojej witryny w tej czcionce. Jeśli jesteś zadowolony z podglądu, możesz pobrać odpowiedni kod do dodania do swojej witryny i jej pliku CSS.

3. Pakowacz kart

Badania to wielka sprawa. A jeśli jesteś projektantem, który poważnie traktuje badania, mogę śmiało powiedzieć, że w dowolnym momencie masz co najmniej siedem do dziesięciu otwartych kart.

Co by było, gdybyś musiał zasięgnąć opinii znajomego projektanta lub kolegi z zespołu na temat witryn, do których się odnosisz? Dodasz zakładki do wszystkich stron w folderze, wyeksportujesz je wszystkie, a następnie wybierzesz zestaw do wysłania, oczywiście po otwarciu programu pocztowego. Niezła praca!

Na szczęście nie musisz tak ciężko pracować. Tab Packager pozwala spakować wszystkie otwarte karty. A potem jednym kliknięciem możesz przesłać link do pakietu. Możesz udostępniać za pośrednictwem poczty e-mail, Twittera i wielu innych usług.

4. Gąsienica

Za każdym udanym projektem stoi skuteczna komunikacja. Ale chodzenie tam i z powrotem z e-mailami, próbując wypracować drobne poprawki lub wprowadzić duże zmiany, może być czasochłonne.

Może to brzmieć trochę przesadnie, ale TrackDuck jest jak mini-Asana, wyłącznie dla projektantów.

TrackDuck to wizualne narzędzie do współpracy, które pozwala dodawać strony internetowe jako projekty. Po dodaniu projektu możesz zaprosić do niego członków zespołu. Za każdym razem, gdy zostawisz komentarz do tego projektu (lub strony internetowej – co możesz zrobić po prostu klikając ikonę rozszerzenia), generowane jest zadanie dotyczące komentarza. Możesz przydzielić to zadanie kolegom z drużyny, dodać załączniki i zrzuty ekranu oraz zintegrować je z wieloma narzędziami do współpracy, takimi jak Trello i Basecamp.

5. KolorZilla

Nigdy nie wiesz, kiedy zobaczysz piękny kolor, który zainspiruje paletę Twojego następnego projektu internetowego.

Jak więc uchwycić dowolny kolor w sieci?

Cóż, oto ColorZilla — to z pewnością ulubiony dodatek Chrome każdego projektanta. Jego najbardziej podstawową i popularną funkcją jest uzyskanie kodu dla dowolnego koloru na stronie internetowej.

Inną funkcją jest to, że pozwala uzyskać schemat kolorów dowolnej witryny. Musisz kliknąć opcję Webpage Color Analyzer , a pojawi się paleta zawierająca wszystkie kolory na tej stronie.

6. Jaka czcionka?

Tyle razy natkniesz się na stronę internetową, która używa idealnej czcionki, koloru i rozmiaru. W rzeczywistości może być tak dobry, że chcesz użyć dokładnej kombinacji w swojej witrynie.

Ale nie musisz już wybierać trasy Inspect Element — WhatFont analizuje dowolną czcionkę na stronie za pomocą jednego kliknięcia.

Po prostu kliknij ikonę rozszerzenia i najedź kursorem na sekcję tekstu, która Cię interesuje. WhatFont tworzy typ czcionki, jej rozmiar, wysokość, kolor i rodzinę.

7. Natychmiastowy szkielet

Jeśli zdefiniujesz hierarchię informacji swojej witryny internetowej przed jej zaprojektowaniem, stworzysz witrynę przyjazną dla użytkownika. A wireframing to najlepszy sposób na to.

Rozszerzenie Instant Wireframe pozwala wyświetlić dość dobry szkielet dowolnej strony internetowej. Nadal jest w fazie beta, ale robi dobrą robotę.

Jeśli natrafisz na witrynę, której szkielet chcesz wyświetlić, po prostu kliknij ikonę rozszerzenia na pasku adresu. Warte spróbowania!

8. Linijka strony

Istnieje kilka sposobów mierzenia wymiarów elementów strony internetowej. Ale większość z nich obejmuje kilka kroków i wymaga czasu.

Page Ruler to najłatwiejszy sposób na zrobienie tego. Page Ruler pozwala zobaczyć wysokość, szerokość i względną pozycję elementu. Możesz także analizować elementy pod kątem div.

Idealnie nadaje się do tworzenia banerów, prezentowanych obrazów i innych materiałów marketingowych.

9. Paleta dla Chrome

Strony internetowe są pełne obrazów i nie można powiedzieć, kiedy zobaczysz obraz wystarczająco dobry, aby zainspirować paletę kolorów.

Ale nie musisz się martwić, ponieważ Palette for Chrome zawsze Cię obejmuje. Po prostu kliknij prawym przyciskiem myszy obraz, który uważasz za interesujący i wybierz opcję tego rozszerzenia. Natychmiast stworzy paletę kolorów inspirowaną wybranym obrazem. Możesz określić liczbę kolorów, które chcesz wygenerować dla schematu kolorów.

Wolałbym bardziej, gdyby istniał sposób na wyeksportowanie schematu kolorów. Ale rozszerzenie jest nadal koniecznością.

10. ExtensionMuzli – Designowe śniadanie

Wiesz, kiedy dopiero zaczynasz, subskrybujesz wszystkie najlepsze blogi w swojej niszy. Twoje kanały RSS są uruchomione. Ale gdy twoja praca się nawarstwia, tracisz połączenie. I nie chodzi o to, że nie potrzebujesz inspiracji, po prostu trudno jest nadrobić zaległości.

ExtensionMuzli ma to zrekompensować. Kuratoruje historie z około 12-15 najlepszych zasobów projektowych. Dostępna jest również sekcja pracy w zakresie projektowania stron internetowych, jeśli chcesz się zmienić.

Po zainstalowaniu tego rozszerzenia Twoja nowa karta będzie zawierać niektóre z najnowszych inspirujących lub edukacyjnych historii projektowych z całej sieci. Oferuje fajny sposób na śledzenie najnowszych informacji w Twojej niszy.

Więc proszę. Zasil swoją przeglądarkę Chrome dzięki tym niesamowitym rozszerzeniom do projektowania stron internetowych i obserwuj, jak Twoja produktywność rośnie. Jak rozbijasz proces projektowania i jakich rozszerzeń używasz do jakich zadań? Chciałbym dowiedzieć się więcej.