Google, без сомнения, является наиболее используемым и любимым поисковиком, а его браузер Chrome, сочетающий в себе современные технологии и простой пользовательский интерфейс, уже давно стал любимчиком среди пользователей за быстрый, простой и безопасный доступ в Интернет.
Безусловно, на протяжении долгих лет, среди веб-разработчиков был популярен браузер Firefox, но с ростом количества расширений и встроенных инструментов для Chrome, браузер от Google выбился в лидеры и занял свою нишу в мире веб-дизайна.
В связи с этим, я решила познакомить вас с некоторыми полезными расширениями, которые способны значительно облегчить вашу работу, как веб-дизайнера.
WhatFont
Учитывая тысячи и даже миллионы сайтов, которые мы просматриваем ежедневно, всегда найдется что-то, что привлечет внимание дизайнера – виджет, динамичная функция или восхитительный шрифт, который вы хотели бы использовать в своем очередном проекте, но понятия не имеете, как он называется. Это та ситуация, когда расширение WhatFont придет на помощь. С ним вы сможете изучить все шрифты на странице и быстро определить их названия, чтобы приступить к их поиску. Кроме того, расширение предоставляет возможность определить относится ли шрифт к категории бесплатных или премиум-шрифтов, а также находится ли он в базе Google Fonts или Typekit.
Font Playground
Еще одно отличное расширение для работы со шрифтами и типографикой, которое станет незаменимым помощником веб-дизайнера. Благодаря Font Playground вы сможете изменять стиль, размер и эффекты шрифта на активных страницах, не внося при этом абсолютно никаких изменений в код. Расширение позволяет свободно экспериментировать со шрифтами, смотреть, как они взаимодействует друг с другом, и только после этого уже менять код страницы.
User-Agent Switcher
Технологии развиваются с каждым днем, а значит, веб-дизайнерам необходимо подстраиваться под них и соответствовать им же. С данным расширением вы сможете легко и быстро увидеть, как будет выглядеть ваша страница не только на различных устройствах, но и в разных браузерах. Это поможет вам экспериментировать с тем, как выглядит сайт при просмотре на разных девайсах, и, следовательно, позволит улучшить свой дизайн, создавая более качественные продукты.
Yslow
От того, насколько быстро загружается ваша страница зависит, сумеете ли вы удержать пользователей. Согласитесь, мало кому хочется сидеть и ждать, пока он сможет полностью увидеть контент, который ему нужен. Чтобы подобного не случилось с вашим сайтом, используйте расширение Yslow, позволяющее проверить, как быстро загружается ваша страница, а также определить, какие элементы замедляют загрузку, если таковые существуют.
Web Developer checklist
Работа веб-дизайнера заключается не только в создании красивого дизайна, но и в том, чтобы сделать сайт, который будет идеально функционировать и отвечать всем необходимым параметрам. С расширением Web Developer checklist вы сможете легко и быстро проверить ваши страницы на соответствие SEO, скорость загрузки, видимость и юзабилити. Если в процессе работы вы, к примеру, забыли проставить мета-заголовок, то расширение тут же уведомит вас о данной проблеме. Если же вы хотите более тщательно проверить веб-страницу, то для этого имеется раздел «Больше информации в помощь», который находится в нижней части страницы и предоставляющий более детальный список для проверки.
Responsive Web Design Tester
Все больше пользователей предпочитают выходить в Интернет через свои мобильные устройства, что означает, при создании очередного сайта веб-дизайнер должен уделить особое внимание тому, как он будет выглядеть на этих самых устройствах. А если учитывать, что с каждым годом появляется все больше разных моделей, дизайнерам становится труднее соответствовать им. Однако расширение Responsive Web Design Tester поможет вам справиться с этой задачей значительно быстрее. С его помощью вы сможете протестировать свой дизайн на различных устройствах и расширениях экрана, чтобы убедиться, что он одинаково хорошо выглядит на каждом из них и является действительно отзывчивым.
Instant Wireframe
Есть проекты, которые требуют гораздо больше времени для того, чтобы их усовершенствовать и завершить. Бывают моменты, когда вы просматриваете какие-то сайты и думаете о том, насколько великолепную работу проделали дизайнеры и разработчики, чтобы результат получился именно таким, а сам веб-сайт выглядел идеально и сбалансированно. С расширением Instant Wireframe вы сможете включить каркасный просмотр страницы, что позволит вам подробно изучить страницу (уже опубликованную или локальную), просмотреть ее структуру, а затем возможно реализовать подобное в своих будущих проектах.
PerfectPixel
Нет ничего хуже, чем создать потрясающий дизайн, а после его перевода в код обнаружить, что сайт не совсем совпадает с тем, что было создано изначально. В этом случае расширение PerfectPixel вам просто необходимо. Благодаря ему вы сможете создавать веб-сайты, которые будут в точности соответствовать тому, что вы создали – вашему дизайну. С помощью простых действий вы можете разместить поверх вашей страницы полупрозрачное изображение вашего дизайна, чтобы проверить, совпадают ли они вплоть до каждого пикселя.
Chrome Palette
Как часто у вас случаются ситуации, когда вы находите идеальное изображение для вашего дизайна, но не уверены в том, какую цветовую схему лучше использовать, чтобы оно гармонично вписалось в дизайн? Стоит отметить, что это частая проблема для многих дизайнеров. Однако с Chrome Palette вы решите данную незадачу в два счета. Расширение создаст для вас 64 цветовые палитры для выбранного изображения, которые вы сможете использовать в качестве вдохновения для вашего проекта.
Page Ruler
Весьма простое, но при этом очень полезное расширение, которое представляет собой обыкновенную линейку, при помощи которой вы сможете с легкостью определить высоту, ширину, а также положение любого элемента на вашей странице.
Успехов в работе и отличных дизайнов!