8 инструментов веб-дизайна для использования в 2018 году

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

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

Команда Outline2Design выбрала список самых интересных и полезных ресурсов, которые мы зацепили.

Rapid UI

RapidUI - это платформа веб-дизайна, которая позволяет дизайнерам превращать свои файлы PSD и Sketch в полнофункциональные веб-сайты без написания единой строки кода.

Преимущества: автоматизированная разработка интерфейса.

Каждый элемент дизайна может выполнять действие. Например, вы можете легко конвертировать карты в интерактивные карты, квадраты в кнопки и фоновые изображения в параллакс.

Недостатки: устаревший дизайн интерфейса. Однако это не самое главное.

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

WebFlow

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

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

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

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

Недостатки: вам нужно минимальное знание HTML / CSS для работы с этим инструментом. С другой стороны, все не так плохо.

Атомная и Прото

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

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

Атомное бесплатно. У него неограниченное количество прототипов, и все они бесплатны.

Большим преимуществом Proto.io является его интеграция с тремя платформами тестирования пользователей: Lookback, UserTesting и Validally, что делает его гораздо более удобным для целей тестирования пользователей.

Недостатки: Proto.io имеет свои плагины для Sketch и Photoshop, но, к сожалению, все слои экспортируются в статическую графику, поэтому они не редактируются в Proto.io. Еще одним недостатком является то, что для Proto.io вы должны платить 24 доллара в месяц за одного человека и до пяти проектов.

Figma

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

Кроме того, здесь, как и в Google Docs, можно оставлять комментарии прямо на рабочем поле, что очень удобно для совместной работы.

Вячеслав, старший дизайнер UX / UI, считает, что:

«Одним из наиболее важных преимуществ Figma является режим сотрудничества, когда несколько дизайнеров могут одновременно работать над одним макетом. Я считаю, что этот инструмент будет полезен для начинающих начинающих дизайнеров. Я также хочу отметить, что Figma - это онлайн-инструмент, и я могу использовать его на многих платформах. Все, что мне для этого нужно, - это Интернет ».

Преимущества:

  • Обновления для этого инструмента выходят довольно часто. Последний был выпущен 25 января 2018 года. Команда разработчиков внесла много изменений, одним из которых является возможность перетаскивания файлов Sketch в открытый документ.
  • Не требует знаний в области кодирования, в отличие от Webflow.
  • Дизайн автоматически конвертируется в код CSS.

Прототипирование на бумаге

«Большинство UX-дизайнеров начинают процесс проектирования с эскизов на бумаге, только теперь вы можете проверить некоторые гипотезы в основном при создании интерактивного прототипа. POP позволяет дизайнерам на этапе создания эскизов создавать рабочие прототипы и делиться ими с командой для тестирования и выявления ошибочных решений на начальных этапах. Я считаю, что это приложение облегчает и ускоряет процесс проектирования мобильных интерфейсов и выводит стандартный процесс на новый современный уровень ».
Роман, старший дизайнер UX / UI в Outline2Design

Если вы предпочитаете методы старой школы, когда прототипы были нарисованы вручную из-за отсутствия разнообразных современных инструментов, POP станет для вас настоящим другом.

Все до некоторой степени упрощено: вы набрасываете идеи приложения в своем альбоме, делаете фотографии и добавляете ссылки между кнопками и макетами. После этого синхронизируйте прототипы с Dropbox и получите готовый прототип.

Преимущества: минимальные затраты времени и ресурсов. Это очень удобно для тестирования путей для мобильных приложений.

Недостатки: мы не нашли глобальных недостатков. Одна вещь, которую мы хотели бы отметить, это неудобная функция рисования внутри приложения. Но это не относится к основной функции POP. Скорее всего, это дополнительная функция.

Веб-инструменты для VR

Рамка

Виртуальная реальность развивается со скоростью света. И мы не могли пройти мимо инструментов, которые помогают его создавать. Мы рассмотрели некоторые инструменты с открытым исходным кодом.

A-Frame - это веб-фреймворк от Mozilla, созданный для легкого и мощного создания VR-контента. Это независимый проект с открытым исходным кодом, который имеет большое сообщество VR. Существует даже интерактивный курс для веб-VR от A-Frame. В ядро ​​инструмента встроена мощная основ-компонентная структура на основе HTML.

Преимущества:

  • Действительно мощный инструмент, который поддерживает большинство VR-гарнитур, таких как Vive, Rift, Daydream и т. Д.
  • Кроссплатформенный VR: создание приложений VR для Vive, Rift, Daydream, GearVR и Cardboard с поддержкой всех соответствующих контроллеров.
  • Совместим с большинством библиотек, платформ и инструментов, включая React, Preact, Vue.js, d3.js, Ember.js и jQuery.

Недостатки: вам нужно знание HTML для работы с этим инструментом.

голограмма

Создатели представляют это приложение как универсальный инструмент для создания веб-виртуальной реальности. На самом деле это настольное приложение для создания и создания прототипа виртуальной реальности для любого. Этот инструмент содержит несколько интерфейсов для нескольких целей:

Сцена

3D визуальный интерфейс инструмент предназначен для тех, кто ничего не знает о 3D и VR. Это простой в использовании и очень интуитивно понятный. Этот интерфейс помогает создать 3D-среду на первом этапе, прежде чем приступить к кодированию и превращению 3D-сцены в виртуальную реальность.

кодирование

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

активы

Этот интерфейс позволяет быстро просматривать ресурсы проекта, и он интегрирован с блоками Google, поэтому легко использовать 3D-объекты, созданные этим сообществом.

Преимущества: простой в использовании, приятный инструмент для создания виртуальной реальности. Это не требует много знаний, чтобы начать.

Недостатки: предварительный просмотр анимации занимает много времени.

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