Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. UI Design
Webdesign

10 инструментов, которые стоит попробовать в вашем следующем веб проекте

by
Difficulty:BeginnerLength:MediumLanguages:

Russian (Pусский) translation by Oleg Kiselevich (you can also view the original English article)

Ниже приводится сгруппированный список некоторых инструментов, которые вы, как разработчик или дизайнер, можете попробовать на вашем следующем проекте. Этот список отнюдь не является исчерпывающим, или лучшим «десятком» по каким-либо показателям, но он предложен для тех, кто ищет что-то новое. Я надеюсь, что вам понравятся упомянутые средства. Давайте начнем!

1. Inspect

Inspect - это приложение, которое прекрасно синхронизирует ваши дизайн файлы между различными инструментами. Оно помогает вам легко поддерживать актуальное состояние дизайн файлов между Sketch, Inspect и InVision и синхронизировать их в один клик.

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

Для начала вам понадобится Sketch. Как только вы установили Sketch, вам также нужно установить Craft. Craft - это набор плагинов, который позволяет работать с реальными данными на стадии дизайна и дает возможность синхронизации между InVision и Sketch. Создайте новый проект в InVision и затем переключитесь обратно на Sketch. Я также хотел бы предложить взглянуть на InVision Studio.

2. Archetype

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

Все стили, которые генерируются при помощи archetype имеют понятный для разработчика код, что упрощает процесс передачи проекта на следующую стадию.

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

3. Probot

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

Можно исследовать все приложения с открытым исходным кодом или создать свои собственные. Некоторые приложения, предоставляемых в настоящее время, это Stale, предназначенное для автоматического закрытия устаревших задач и pull-запросов, которые накапливаются во время проекта, а также напоминалки для создания напоминаний о задачах вашего проекта для членов вашей команды.

Сосредоточьте внимание на том, что вы хотите создать. Простой API (построен на новейшем функционале ES6 JavaScript) скрывает детали, которые вам не важно знать при использовании GitHub и Node.js.

4. PSD в Sketch

Вы когда-нибудь получали PSD файл и желали, чтобы можно было преобразовать его в файл Sketch? Вам повезло. Avocode (еще один интересный инструмент, который следует попробовать) великодушно предоставили сообществу бесплатный инструмент для выполнения такой работы. Перейдите по URL-адресу и загрузите ваш PSD. Вот схема и список функций, которые поддерживает процесс преобразования.

Также имейте в виду, что Photoshop и Sketch - существенно разные инструменты. Данный инструмент может преобразовать только те элементы дизайна, которые могут быть созданы в обоих из этих приложений: Sketch и Photoshop. Он не может преобразовать или имитировать функции Photoshop, которые не включены в приложение Sketch.

5. Тестирование скорости веб-сайтов Cloudinary

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

Результатами анализа можно поделиться с другими, а для  каждого изображения, можно скачать оптимизированный вариант или другие альтернативы формата webp или jpeg-xr.

Чтобы узнать больше об этом сервисе, перейдите на эту страницу. Существует также служба Cloudinary CDN, которая вам тоже может пригодиться.

6. Animista

Animista это место, где вы можете поиграть с коллекцией готовых css анимаций, настроить их и получить только те, которые вы будете использовать. Скопируйте сгенерированный код или скачайте один файл CSS для использования.

Если вам что-то понравилось во время вашей работы, щелкните значок сердца. Чтобы просмотреть избранное в любое время, щелкните значок воронки. Animista дает вам все виды готовых и настраиваемых параметров для тонкой настройки вашей последовательности движений, включая 3D параметры вместе с вашими типичными 2D преобразованиями. Код может быть уменьшен и пропущен через Autoprefixer для того, чтобы убедиться, что вы получите код с наибольшей поддержкой браузеров.

7. Hero Patterns

Hero Patterns — это совокупность повторяющихся шаблонов фона SVG для использования в ваших веб-проектах. Каждый выбранный шаблон фона преобразуется в повторяемый фон и шифруется алгоритмом base64 для использования в CSS файле, который вы выберете. Настройте отдельные свойства, такие как цвет переднего плана, фон и прозрачность переднего плана на этапе принятия дизайнерских решений.

В настоящее время приложение позволяет вам выбирать между 87 различными шаблонами и имеет довольно большое количество комбинаций, учитывая небольшое количество предоставляемых шаблонов.

Вы также можете скачать обычный svg, как вы можете видеть выше во фрагменте кода. Это идеальный вариант для тех, кто не хочет использовать шифрование base64 или хочет еще больше изменить шаблон.

8. Cushion

Cushion приносит душевное спокойствие для само-занятых лиц, которые имеют свой собственный бизнес. Он помогает обеспечить лучшее понимание и «принести спокойствие в повседневной борьбе под названием фриланс».

Он предлагает 14 дней пробного периода (кредитная карточка не требуется), и если вы втянулись во время пробного периода, платные планы начинаются от $5 в месяц - такой план известен как «халтурщик». Это приложение позволяет закрыть основные вопросы:

  • Планирование проекта
  • Отслеживание расходов
  • Экспорт таблиц
  • Выставление счетов
  • Отслеживание счетов
  • Ежемесячные отчеты о доходах
  • и многое другое...

Cushion собираются в будущем выпустить мобильное приложение, но в данное время его нет, так как основное внимание уделяется созданию полнофункционального веб-приложения. Если для вас важна интеграция банковского счета (и вы не можете без этого обойтись), то могу вас расстроить, что это приложение не интегрировано с банками, но можно импортировать банковские выписки в виде .csv файла. Попробуйте это приложение сами, вам нечего терять.

9. Launchy

Launchy - это доступное диалоговое окно. Также этот инструмент не использует jQuery и весит всего 27,7 KB.

Несколько заметных особенностей относительно этого инструмента:

  1. При запуске фокус клавиатуры смещается к содержимому диалогового окна
  2. Диалоговое окно может иметь заголовок
  3. Удерживает фокус клавиатуры в пределах диалогового окна, когда оно активно/видимо
  4. Закрывает окно по клавише esc
  5. Закрывает окно при клике за пределами модального окна
  6. Перемещает фокус клавиатуры обратно на элемент запуска после закрытия окна
  7. Можно добавить собственные пользовательские элементы управления закрытием!
  8. Можно добавить собственные пользовательские элементы управления, которые передают фокус в любое другое место на странице!
  9. Прозрачные границы для высоко контрастных тем Windows

Launchy также имеет много CSS классов, доступных для стилизации создаваемых им элементов. Посмотрите имена классов в файле style.scss и пример того, как вы можете стилизовать ваши диалоговые окна. Этот проект также доступен в npm: npm -i launchy-modal-window. Это в самом деле отлично сделанное диалоговое окно.

10. Formcore

Formcore является проектом с открытым исходным кодом (описание проекта «легковесные формы с валидацией»), созданным группой Filament. Он представляет собой набор шаблонов форм, таких как показать/скрыть пароль, счетчик символов, ввод и проверка данных кредитной карты, многострочные текстовые поля, которые расширяются по мере заполнения пользователем, а также многое другое.

Существует ряд других функций, которые включены сюда, таких как нормализация поведения элементов <input type="number">, функционал для обязательного наличия атрибута maxlength, а также функционал для обхода ошибок с <input type="number"> в Safari 6 и Firefox, и это только несколько.

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

Заключение

Теперь, когда мы дошли до конца нашего списка, каковы ваши мысли? Стало ли вам интересно попробовать что-нибудь? Или перечисленные инструменты вас не впечатлили и вы готовы предложить другие? Дайте нам знать в комментариях ниже. Всем успешной веб-разработки!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.