Полезное
655 статей › RSS

50 бесплатных веб-инструментов для фрилансера. Часть 3 - Инструменты дизайна, SVG и другие


Хорошего всегда мало! Вот и бесплатных высококачественных инструментов для веб-разработки и дизайна всегда не хватает. Технологии стремительно идут вперед, а вмести с ними растут потребности Интернет-пользователей. Именно поэтому мы решили вам представить подборку из 50 бесплатных веб-инструментов, которые обязательно вам пригодятся. Мы уже познакомили вас с инструментами HTML, CSS и Sass, а также JavaScript. Теперь настало время инструментов веб-дизайна и других.
 

Инструменты дизайна

1. CSSketch

CSSketch является общедоступным плагином CSS для Sketch — популярным Mac-ориентированным приложением для дизайна и прототипирования. С его помощью вы можете написать CSS внутри Sketch, применяя стили к элементам на странице в текущем Sketch файле.

2. Fluid для Sketch

Еще один плагин Sketch: он помогает разрабатывать отзывчивые макеты в Sketch. У этого инструмента множество особенностей, среди которых смещение, централизация и определение размеров объекта, а также использование математических выражений.

3. AllTheFreeStock

Это огромный единый ресурс, где можно найти бесплатные фотографии со множества различных сайтов. Он включает в себя такие популярные бесплатные источники, как Unsplash, наряду с другими, менее известными сайтами, чтобы дать вам много вариантов заполнения вашего дизайна.

4. Octicons

Существует бесчисленное множество вариантов для иконок, и GitHub выпустила свой собственный красиво оформленный набор. Octicons доступен как иконочный шрифт (или шрифт для веб-страниц), который обычно вставляется на страницу с помощью CSS псевдо-элементов.

5. Transformicons

Transformicons — это другой набор иконок. Это SVG и CSS значки, содержащие CSS-переходы для анимированного эффекта, которыми можно управлять с помощью JavaScript.

6. Icono

Один последний вариант иконок: на этот раз на чистом CSS, созданный с помощью CSS псевдо-элементов.

7. 0to255

Цветовой онлайн-инструмент, который помогает дизайнерам найти варианты выбранного цвета (например, для выбора цвета при наведении курсора, контрастов, градиента цвета, краев и т. д.). Он избавляет от необходимости гадания с hex-кодами и отлично подходит для тех, кто проектирует в браузере.
 

RWD и мобильные инструменты

1. Picturefill

Популярный отзывчивый полифилл изображений позволяет использовать вам новые HTML <Picture> элементы, а также связанные атрибуты  srcset и размеров в ваших проектах, с помощью сильной поддержки браузера.

2. ish

Есть множество инструментов для тестирования отзывчивых макетов, но хотелось бы выделить один, потому что это все, что вам нужно. Ish делает то, что должен делать, без излишнего внимания на размеры устройства.

3. Ionic

Одно из самых больших мобильных приложений на основе HTML5 для разработки фреймворк, построенное с мобильно-оптимизированными CSS и javascript компонентами. Ionic может похвастаться очень серьезным сообществом, которое идеально подходит для тех, кто ищет хороший долгосрочный вариант.

4. Embed Responsively

Простой онлайн-инструмент, который позволяет захватывать отзывчивые встраиваемые коды для всех видов популярных медиа-источников. Он поддерживает YouTube, Vimeo, Карты Google, Instagram, Vine и многое другое.

5. Tablesaw

Отзывчивые таблицы являются одним из самых сложных аспектов разметки. Tablesaw — это набор плагинов jQuery, чтобы помочь в этой области, с помощью таких функций, как стек, переключение, мини-карта и многое другое.

6. QAid

Букмарклет, предоставляющий панель инструментов, с которой вы можете выполнить наложение изображения дизайна (с альфа-настройкой), чтобы сравнить его с вашей работой в браузере. Вы также можете проверить контрольные точки.

7. Grunt-respimg

Плагин Grunt для автоматизации задач, связанных с адаптивными изображениями: изменение размеров изображений, растрирование из SVG и PDF-файлов и оптимизации без потерь.



8. Email Framework

Фреймворк HTML электронной почты, чтобы помочь построить отзывчивые макеты электронной почты и шаблоны. Он предлагает хорошо проверенные модули, сетки, типографику, кнопки и многое другое.
 

SVG-инструменты

1. Snap.svg

Обширная библиотека JavaScript от команды Adobe Web Platform. Инструмент обеспечивает простой API для создания, анимации и любой другой манипуляция с файлами SVG в интернете.

2. Vivus

Относительно бесплатная библиотека JavaScript, которая оживляет ваш SVG, создавая видимость чертежа. Страница демо-версии стоит того, чтобы ее проверили.

3. Circulus.svg

Онлайн-инструмент, который позволяет создавать SVG-код для меню пирога. Как сообщается на сайте, меню пирог (на удивление) оказался более удобным во многих случаях, чем стандартная навигация.

4. Paths

Интерактивный интерфейс, помогающий объяснить траекторию синтаксиса элемента для построения SVG. Редактор позволяет скачать заполненную форму в формате SVG.

5. SVG Editor

С помощью этого инструмента вы можете загрузить файл в формате SVG или вставить в код SVG, и он будет оптимизировать его путем удаления пробелов, ненужных атрибутов, пространств имен и так далее, чтобы уменьшить размер файла.
 

Лучшие среди других инструментов

1. Atom

Текстовый редактор взломать дев-команды GitHub для современного программирования. Atom поставляется полнофункциональным, с пакетами, темами, умным автокомплитом, несколькими панелями и многим другим. Лучший из всех, он может быть полностью настроен с помощью HTML, CSS и JS.

2. Browsersync

Browsersync похож на LiveReload, но на стероидах. Это мощный инструмент для синхронизированного тестирования кросс-устройство, который будет перезагружать ваш проект для каждого редактирования, и сохранять его для всех примеров браузера. Он также синхронизирует навигацию и скроллинга в сессиях браузера. Вы можете добавить CSS контуры для отладки, а режим задержки позволяет имитировать медленное Интернет-соединение.

3. Brackets

Вклад компании Adobe в гонку текстовых редакторов. Brackets – это бесплатный редактор с фокусированными визуальными инструментами, поддержкой препроцессора, а также возможностью облегчить в браузере создание дизайна через предварительный просмотр. Он также хорошо интегрируется с Photoshop с помощью расширения Extract для Brackets.

4. Accessible HTML5 Video Player

Это видео-плеер от команды PayPal. Он имеет пользовательские элементы управления, доступную клавиатуру и поддерживающий чтение с экрана интерфейс. Он использует элементы управления HTML5 для показателей объема и прогресса. 

5. Let's Encrypt

Если вы хотите переключить проект на HTTPS, то вам стоит исследовать этот вариант. Это бесплатный, общедоступный и автоматизированный центр сертификации, который предоставляет вам беспроблемный способ безопасности.

Источник 

    Понравилась статья? Поделись с друзьями!

    Поделиться

или

следи за новостями в соцсетях

Подпишись на рассылку.

Без рекламы и только самое интересное!

Комментарии

Всего: 0 комментариев

Оставлять комментарии могут только пользователи.

Подписка на Freelance.Today





или

следи за новостями в соцсетях


Фриланс новости, биржи фриланса, freelance