NEW

web tools 2018

 

 

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

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

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


Sketch

Начнем с самого очевидного. Да, мы знаем, все слышали о эскиз – Чешский кодирования вектора UI дизайн инструмент – но кажется, что есть еще куча веб-дизайнеров, опираясь на Photoshop для веб-дизайна (и это несмотря на выпуске Adobe хD, компании Adobe новенький прототипирования и каркасное средство – одно из новейших дополнений к творческому облака – который идет на втором в этом списке). 

 

Рори Берри, креативный директор Superrb, справедливо считает, что использование Photoshop для веб-дизайна является ошибкой. Он сделал переход на Sketch в 2017 году и настоятельно рекомендует его. «Будучи пользователем Photoshop более 10 лет, было трудно изменить и узнать что-то новое”, — говорит он. «Но буквально после первого дня использования Sketch, не было никакого оглядывания назад. Я полный новообращенный.”

 

Он предлагает ряд причин. «По сравнению с Photoshop, сортировка всех ваших документов, которые у вас есть, и внесение изменений в эскиз намного проще”, — начинает он. «Sketch имеет небольшие документы, тогда как Photoshop имеет большие. Благодаря векторной приложение, Размер файла существенно меньше по сравнению с фотошопом.”

 

И это еще не все. “Встроенный в систему эскиз и дизайн интерфейса гораздо проще. Я думаю, что общий пользовательский интерфейс и минимальное чувство делает его гораздо чище для проектирования в и удобный. Фотошоп кажется очень сложным в сравнении.”

 

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


adobe XD

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

 

Андрей робу, директор по дизайну в робу студии в Барселоне, входит в число своих поклонников. «XD пока не заменяет эскиз, но для быстрых макетов это здорово», — говорит он. «Это очень легкий интерфейс, с большим количеством фотографий, загруженных в, и отлично подходит для moodboards. Прототипирование очень полезно, чтобы показать клиентам, как работает материал, особенно потому, что вы можете нажать содержание в интернете сразу я также люблю, что я могу скопировать и вставить материал из других приложений Adobe.”

 

Важно отметить, что Adobe xD интегрируется с остальной частью Creative Cloud. Эллис, Роджерс, графический дизайнер в ООО Receptional https://www.receptional.com также рекомендует его. «Sketch является блестящим для проектирования для веб-разработчика, потому что вы работаете в ценности в программном обеспечении, построенном именно для проектирования веб-сайтов и приложений,” говорит он. «Но самым большим ограничением для меня было то, что он был доступен только на Mac, что затрудняло обмен файлами эскиза для веб-разработчиков / дизайнеров, не использующих OS X.  Совместное использование файлов эскиза для разработки означало дополнительное программное обеспечение / преобразования или работу из плоских jpg-то, что вызвало слишком много границ.

 

Будучи пользователем Photoshop и Illustrator, пользовательский интерфейс для Adobe XD был знаком, он добавляет, поэтому для его использования не было реальной Кривой обучения. «Таким образом, теперь, после нескольких недель триализации, это единственный инструмент, который я теперь использую для всего веб-дизайна, дизайна приложений, прототипов или каркасов.” 

 

Роджерс также хвалит возможность xD использовать библиотеки Adobe для быстрого импорта любого актива из Photoshop или Illustrator, так как это делает проекты совместной работы работать быстрее. 

 

«Работа с дизайнерами и иллюстраторами UI/UX делает этот процесс простым», — говорит он. «Когда дизайн/прототип или каркас завершен, Adobe xD позволяет очень быстро выбирать элементы и создавать переходы страниц для рабочего прототипа, которые могут быть разделены по ссылке. Ссылка также позволяет собирать отзывы на странице, сохраняя все это организовано. Ссылка может быть обновлена в Adobe xD, поэтому клиент всегда может видеть последнюю версию, не беспокоясь о неправильных версиях; абсолютная радость для работы.”


Figma

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

 

Вот некоторые из его выдающихся особенностей:

 

«У Figma есть подобный USP как эскиз, за исключением того, что он является крест-платформой”, — объясняет фронтенд-дизайнер Бенджамин Рид. «Недавно я использовал его, чтобы создать пару значков для статьи, которую мы публикуем на нашем сайте, и нашел рабочий процесс невероятно гладким. Мне не потребовалось времени, чтобы узнать и было добавлено преимущество совместной работы: вы можете поделиться графикой с другими в приложении.“

 

“Я пытался переключиться на Linux для своей работы, и иногда мы используем Windows, поэтому Figma имеет смысл для меня с практической точки зрения”, — добавляет он. «Для сравнения, я нашел много инструментов для других платформ.”

 

Содержание писатель и artworker Дэвид Иствуд, который работает для Co-о электрических, также имеет хорошие вещи, чтобы сказать о Фигма. “Мы были рекомендованы Figma нашим агентством веб-разработки и использовать его для целевых страниц каркасов», — объясняет он. «Это включало предлагаемые изменения на главной странице и целевой странице продаж, особенно в черную пятницу. Это также был действительно полезный инструмент, когда нам нужно было быстро издеваться над MVTs; иногда небольшие дополнения к существующему макету. Мы любим, что вы можете быстро создавать проекты для настольных компьютеров, планшетов и мобильных устройств.”

Важно отметить, что Adobe xD интегрируется с остальной частью Creative Cloud. Эллис, Роджерс, графический дизайнер в ООО Receptional https://www.receptional.com также рекомендует его. «Sketch является блестящим для проектирования для веб-разработчика, потому что вы работаете в ценности в программном обеспечении, построенном именно для проектирования веб-сайтов и приложений,” говорит он. «Но самым большим ограничением для меня было то, что он был доступен только на Mac, что затрудняло обмен файлами эскиза для веб-разработчиков / дизайнеров, не использующих OS X.  Совместное использование файлов эскиза для разработки означало дополнительное программное обеспечение / преобразования или работу из плоских jpg-то, что вызвало слишком много границ.

 

Будучи пользователем Photoshop и Illustrator, пользовательский интерфейс для Adobe XD был знаком, он добавляет, поэтому для его использования не было реальной Кривой обучения. «Таким образом, теперь, после нескольких недель триализации, это единственный инструмент, который я теперь использую для всего веб-дизайна, дизайна приложений, прототипов или каркасов.” 

 

Роджерс также хвалит возможность xD использовать библиотеки Adobe для быстрого импорта любого актива из Photoshop или Illustrator, так как это делает проекты совместной работы работать быстрее. 

 

«Работа с дизайнерами и иллюстраторами UI/UX делает этот процесс простым», — говорит он. «Когда дизайн/прототип или каркас завершен, Adobe xD позволяет очень быстро выбирать элементы и создавать переходы страниц для рабочего прототипа, которые могут быть разделены по ссылке. Ссылка также позволяет собирать отзывы на странице, сохраняя все это организовано. Ссылка может быть обновлена в Adobe xD, поэтому клиент всегда может видеть последнюю версию, не беспокоясь о неправильных версиях; абсолютная радость для работы.”


Affinity Designer

«Дизайнер сродство с засечками это уже окрестили ‘убийца фотошопа по некоторым, и это легко понять, почему», — говорит Дэн Эдвардс, креативный директор без разрыва. «Мои первые впечатления, что приложение невероятно хорошо разработан и чувствует, как это было сделано, чтобы быть выделенным веб-и графический инструмент дизайна.»

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

«1,000,000% зум был просто блаженство (очень часто Photoshop в 32,000 чувствует, что это просто не достаточно). Это особенно полезно при работе с векторным искусством, так как вы действительно можете приблизиться. Функции отмены и истории также очень удобны – Affinity позволяет Вам вернуться на 8000 шагов!»

«Когда дело доходит до проектирования, пользовательский интерфейс чувствует себя знакомым. При переходе от Photoshop, все, кажется, хотят начать все сначала, что может представлять собой реальную проблему. В чем сходство заключается в том, что сохранить макет знакомы, хотя затягивать все и прячутся отвлекаться. Я был легко в состоянии прыгать прямо и получить проектирование.»

«В целом, сродство чувствует, как это может быть реальным конкурентом для Photoshop, Illustrator и Sketch. И всего за £48.99 это настоящая сделка!»


Avocode

Avocode делает его чрезвычайно легким для разработчиков frontend для кодирования веб-сайтов или приложений из Photoshop или эскизов. Он построен той же командой, которая принесла нам шляпу CSS и шляпу PNG, поэтому неудивительно, что они сделали процесс экспорта на один шаг дальше. Хотя предыдущие приложения позволили вам экспортировать активы, что делает Avocode действительно особенным является то, что вы можете использовать его плагин Photoshop для синхронизации PSD в Avocode с одним щелчком мыши.

Avocode быстро и автоматически анализирует ваш PSD или эскиз файл и приносит все в красиво оформленный пользовательский интерфейс. Затем у вас есть полный контроль над тем, как вы экспортируете активы, включая экспорт SVG как стандарт.

Можно также щелкнуть элементы в проекте и скопировать и вставить код в выбранный текстовый редактор. «Это дает пользователям все, что им необходимо для кодирования – просмотр дизайн, и доступ ко всем слоям и экспорт активов», — говорит Avocode соучредитель Ву Хоанг Ань. «Лучше всего то, что разработчикам вообще не понадобится Photoshop или Sketch. Текущий рабочий процесс действительно отстой, и именно поэтому мы создали Avocode.»

Мы не на 100% уверены, что любое приложение может когда-либо реплицировать разработчика. Но мы знаем о многих дизайнерах с жестким давлением, которые с радостью используют это, чтобы превратить PSDs и файлы эскиза в интерактивные проекты, которые затем могут сформировать основы для построения веб-сайта.


Zeplin

Avocode делает его чрезвычайно легким для разработчиков frontend для кодирования веб-сайтов или приложений из Photoshop или эскизов. Он построен той же командой, которая принесла нам шляпу CSS и шляпу PNG, поэтому неудивительно, что они сделали процесс экспорта на один шаг дальше. Хотя предыдущие приложения позволили вам экспортировать активы, что делает Avocode действительно особенным является то, что вы можете использовать его плагин Photoshop для синхронизации PSD в Avocode с одним щелчком мыши.

Avocode быстро и автоматически анализирует ваш PSD или эскиз файл и приносит все в красиво оформленный пользовательский интерфейс. Затем у вас есть полный контроль над тем, как вы экспортируете активы, включая экспорт SVG как стандарт.

Можно также щелкнуть элементы в проекте и скопировать и вставить код в выбранный текстовый редактор. «Это дает пользователям все, что им необходимо для кодирования – просмотр дизайн, и доступ ко всем слоям и экспорт активов», — говорит Avocode соучредитель Ву Хоанг Ань. «Лучше всего то, что разработчикам вообще не понадобится Photoshop или Sketch. Текущий рабочий процесс действительно отстой, и именно поэтому мы создали Avocode.»

Мы не на 100% уверены, что любое приложение может когда-либо реплицировать разработчика. Но мы знаем о многих дизайнерах с жестким давлением, которые с радостью используют это, чтобы превратить PSDs и файлы эскиза в интерактивные проекты, которые затем могут сформировать основы для построения веб-сайта.


Pattern Lab

Лаборатории шаблон красивый узор-управляемый инструмент дизайн, созданный Дэйв Олсен и Брэд Фрост. Он основан на концепции Атомарного дизайна, в котором говорится, что вы должны разбить свой дизайн на самые маленькие части – атомы – и объединить их, чтобы сформировать более крупные, многоразовые компоненты – молекулы и организмы – которые затем можно превратить в полезные шаблоны.

 

Хотя по своей сути это статический генератор сайтов, который сшивает компоненты пользовательского интерфейса, в Pattern Lab есть гораздо больше, чем это. Это язык и инструмент-агностик; это позволяет вложить пользовательского интерфейса моделей внутри друг друга и дизайн с динамическими данными; это характеристики устройства-агностик просмотра изменение размеров инструменты, чтобы помочь вам обеспечить ваш дизайн системы полностью реагировать, и это полностью расширяемой, так что вы можете быть уверены, он будет расширяться, чтобы удовлетворить ваши потребности.


Vivaldi

Лаборатории шаблон красивый узор-управляемый инструмент дизайн, созданный Дэйв Олсен и Брэд Фрост. Он основан на концепции Атомарного дизайна, в котором говорится, что вы должны разбить свой дизайн на самые маленькие части – атомы – и объединить их, чтобы сформировать более крупные, многоразовые компоненты – молекулы и организмы – которые затем можно превратить в полезные шаблоны.

 

Хотя по своей сути это статический генератор сайтов, который сшивает компоненты пользовательского интерфейса, в Pattern Lab есть гораздо больше, чем это. Это язык и инструмент-агностик; это позволяет вложить пользовательского интерфейса моделей внутри друг друга и дизайн с динамическими данными; это характеристики устройства-агностик просмотра изменение размеров инструменты, чтобы помочь вам обеспечить ваш дизайн системы полностью реагировать, и это полностью расширяемой, так что вы можете быть уверены, он будет расширяться, чтобы удовлетворить ваши потребности.


Canva

Хотите быстро и легко издеваться над чем-то вроде инфографики? Тогда Лоуренс Хармер, основатель Solve Web Media, рекомендует канву.  Это бесплатные, браузерные инструменты, которые используются как дизайнерами, так и не дизайнерами, чтобы сделать графику как для печати, так и для интернета. 

 

«Канва очень хороша для создания хороших изображений”, — говорит Хармер. «Изображения-это окно в душу вашего сайта и социальных сетей, поэтому такой инструмент может быть ключом к успеху.”


Web design proposal tool

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

 

«Это, по сути, простой инструмент «Proposify», который позволяет быстро и легко штамповать предложения», — объясняет Дэвид Аттард Beewits. «Это, по сути, прославленная форма, которая позволяет вводить и изменять предустановленный текст, а затем создает документ Word, готовый для отправки непосредственно клиенту.”

 

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


CodePen Projects

Основанная в 2012 году Алексом Васкесом, Тимом Сабатом и Крисом Койером, CodePen превратилась в крупнейшие и самые оживленные сообщества для тестирования и демонстрации HTML, CSS и javascript фрагментов кода. В течение последних пяти лет он функционирует как онлайн-редактор кода, так и в среде обучения с открытым исходным кодом, где разработчики могут создавать фрагменты кода («ручки»), тестировать их и получать обратную связь. 

 

Недавно CodePen сделал еще один большой шаг вперед, запустив свой собственный IDE (Интегрированная среда разработки), Codepen проекты, который позволяет создавать веб-сайты в вашем браузере. 

 

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

 

Обратите внимание, что, хотя он работает так же, как и редактор пера, Codepen проекты не заменяет lattter, но сидит рядом с ним.


ally.js

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

 

Теперь стабильный продукт, Элли.JS-это библиотека на JS, что дает вам точный контроль над фокусируемый и не фокусируемые элементы. Например, используя его API, можно запретить элементам вне модального окна получать фокус до закрытия модального окна. Вы также можете точно узнать, какие элементы являются фокусируемыми или табличными, и определить изменения фокуса в теневом DOM.

 

Две другие мощные функции возможность определить, каким образом изменился (клавиатура, мышь и т. д.) и когда элемент фокусируется и физически виден на экране (это может помочь избежать прокрутки страницы).


Type Nugget

Type Nugget устраняет необходимость на каждом проекте интерфейс: работа с CSS типографика. Все еще в бета-версии с большим количеством функций в работах, это онлайн набор инструментов, который дает вам точный контроль стилей типов. 

 

Инструмент отображает разнообразный набор образцов текста на странице, который может быть изменен в режиме реального времени на панели справа. Панель позволяет выбрать размер шрифта, вес, стиль, цвет, расстояние между буквами, оформление текста и многое другое для отдельных аспектов страницы (глобальные стили, заголовки, абзацы, ссылки и списки HTML).

 

Полезно, что этот инструмент позволяет Вам зарегистрироваться для учетной записи, войти в систему и сохранить ваш прогресс. После указания всех параметров, вы можете нажать кнопку «Создать код» и Type Nugget будет производить ссылку на таблицу стилей, размещенную на его CDN. Если вы находите CSS утомительным и однообразным, вы получите большую пользу от добавления этого инструмента в рабочий процесс.


ARKit

Дополненная реальность-смешивание цифровых объектов и информации с окружающей средой — это пространство, которое генерирует много волнения в сообществе разработчиков веб-приложений прямо сейчас. Не в последнюю очередь потому, что в июне на WWDC17 Apple выпустила ARKit, новую структуру, которая позволяет Вам легко создавать AR-опыт для iPhone и iPad под управлением iOS 11. Чтобы начать работу, просто скачайте iOS 11 и последнюю версию Xcode 9, которая включает в себя iOS 11 SDK.


Hologram

Голограмма является все-в-один инструмент для создания это дополнение не совместимо. Это бесплатное настольное приложение не требует предварительного знания кодирования, и его родной интеграции блоков Google позволяет играть с большим количеством бесплатных 3D-объектов сразу с места в картах. Под капотом, голограмма в полной мере сила и простота-рамки, рамки Мозила вот это дополнение не совместимо.

Это означает, что разработчики могут загружать проекты, созданные с помощью голограммы, и использовать их в своих рабочих процессах A-Frame. В настоящее время он доступен на Mac и Версия для Windows обещана в ближайшее время.


Foundation for Emails 2

Фонд электронных писем в рамках от ZURB, ранее известный как чернила. Он используется для создания отзывчивых HTML-писем, которые работают практически на каждой платформе и службе, объединяя лучшие практики кодирования электронной почты. Последняя итерация использует кодовую базу Sass, которая дает вам доступ к файлу настроек, в котором вы можете определить все виды по умолчанию в соответствии с вашими потребностями.

Так же, как и сама база, ZURB предоставил Стек электронной почты ZURB, все-в-одном рабочий процесс, который включает в себя:

Руководство по началу работы поможет вам, как получить стек и работает, если вы решите воспользоваться всеми функциями.

 

контент с сайта https://www.creativebloq.com/

скоро будут новые инструменты - не пропусти!

Яндекс.Метрика