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

По крайней мере половина из дизайнеров знал HTML и CSS, но хотели более визуальный способ, чтобы добраться до него.Ну, новое поколение визуальных инструментов, чувствительных дизайн прибыли.Эти чувствительные инструменты проектирования предназначены для тех, кто понимает HTML и CSS (или готов учиться) и хочет, чтобы визуально проектировать отзывчивый сайт — и есть код, чтобы показать его .

Некоторые из новейших и самых заметных визуальных, чувствительных строителей сайте WebFlow, Adobe Пограничный оплавления CC и Ара.Да, миллион других, которые там, в том числе Squarespace, FROONT и мольберт, но мы остановимся на нескольких в этой статье.Моя цель заключается не в весе эти инструменты, а для ознакомления с ними и обсуждать их сильные и слабые стороны .

Для записи, я Front-End разработчиков, которые рука-коды, реагирующие сайты, использующие несколько рамок и мой собственный код в качестве отправной точки (вместе с WordPress).Я всегда был хитрый генерируемого кода, по уважительной причине (помните GoLive?), Но я также понимаю, что такие инструменты, как у них есть время, место, и, да, аудитория. Вы можете использовать один из этих инструментов в процессе проектирования для создания гибкой comps, независимо от намерены ли вы использовать сгенерированный код.Я даже приняты к использованию мало для быстрого прототипирования.Богохульство

Итак, давайте посмотрим, начиная с WebFlow .

Webflow

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

В все подписок размещения на сети доставки контента, используя поддомен (yoursite.webflow.com), если вы не хотите платить несколько долларов больше за пользовательские области хостинга.Но вы также можете просто экспортировать сгенерированный код и получить его там, где вы хотите. Как это код, который WebFlow генерирует, спросите вы ? Он основан на Bootstrap 3.0, и, да, некоторые из нас могли бы написать чистый, светлый, семантической код, но все сказали, код WebFlow является относительно чистым .

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

²
Начало работы с WebFlow ( Большая preview ³ )

Строительство Blocks

После того как вы начали свой сайт, вы попадаете в дизайнера WebFlow, где происходит волшебство.В конструкторе, в настоящее время поддерживается только в Chrome и Google Canary ⁴ (что в принципе Chrome для разработчиков, с новыми возможностями добавляются практически ежедневно), вы будете глядя на вашу первую страницу вбраузер, с панели инструментов на левой и нескольких панелей справа .

Общие операции (такие как добавление страниц, публикации и просмотра,) находятся слева, а содержание и форматирование варианты мельчайшие находятся справа.С “” панели справа, вы можете перетаскивать элементы макета (дивы или элементов HTML5, установленные на макс ширины или шириной 100%) и настраиваемый сетки в раскладке рабочего стола по умолчанию .

С вашей основной структуры в месте, вы можете начать вставлять содержимое страницы . WebFlow поставляется с набором стандартных веб-компонентов (включая списки, ссылки и текстовых блоков) и ряд настраиваемых виджетов (например, иконки социальных медиа иреагирующие ползунки), которые можно перетаскивать в структуру страницы.Для изображений, вы можете использовать GIF, JPG, PNG или SVG, а также изображения, оптимизированный для Retina и Привет-DPI дисплеев.Вы также можете перетащить “вставлять” виджет в дизайн, чтобы добавить свой собственный код .

⁵
дизайнер WebFlow (в Большая preview ⁶ )

Design

В то время как WebFlow является перетаскивание, опыт не совсем так проектирования в Photoshop или Illustrator.Содержание вы строите совмещается больше как головоломки и позиционируется с помощью типичные свойства CSS, такие как padding, margin и position .

Как кодер, я ценю, насколько эффективно WebFlowнаглядно отображает структуру и CSS свойства HTML.В результате, навыки работы с HTML и CSS необходимо, и в первый раз строители веб-сайт может быть немного озадачены несколько вариантов, но это то, что видео помощь для, наряду с встроенная справка иконок (“?”) везде .

Чтобы быть честным, панель в стиле справа, где Вы регулируете большинство свойств CSS, относительно интуитивно, и как он работает свойствами CSS, такие как padding и margin довольно умный.CSS кодеров могли бы чувствовать себя это не хватает и вы хотите, чтобы увидеть код. Обмен контентом между страницами является довольно simple, а некоторые SEO содержание, связанное с, например, названия и описания, могут быть установлены на странице .

⁷
Редактировать стиль ( Большая preview ⁸ )

Определение вашей Отзывчивый Design

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

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

⁹
Переключение между останова ( Большая preview ¹⁰ )

Шрифты, Медиа Формы и Linking

• FontsВ эти дни, размещенные шрифты обязательным для любого уважающего себя дизайнера.Интеграция шрифтов Google или комплект из аккаунта Typekit может быть сделано в приборной панели, и эти шрифты тогда будет доступен в меню “Шрифт” в области дизайна .
• MediaДобавление информации (в том числе видео с Vimeo и YouTube) довольно легко, тоже.WebFlow использует Embedly вставлять содержимое из длинного спискапоставщики .
• FormsПростые контактные формы, также доступны и могут быть настроены и разработаны довольно легко.Вы можете иметь данные, передаваемые по электронной почте: Просто возьмите захваченных данных формы из настроек в приборной панели, или подключить формы другого скрипта (или просто вставить ваш собственный код форма) .
• LinkingПомимо типичных вариантов увязки (например, между страницами сайта, электронной почты и телефон), WebFlow позволяет для подключения к разделам ваших страниц, с гладкой прокрутки между вставляется автоматически якорей.Вы также можете вставить блок связи, который область контента с одного звена к нему применимы.Вы также можете легко настроить внешний вид вашей ссылки на укладку их .

Работа с Code

Как с большинством других инструментов, некоторые из более продвинутых HTML и CSS Особенности скрыты по умолчанию в рабочей области, но может быть включена.Если вы ищете приключений, вы также можете назначить свои собственные классы для содержимому и снова переименовывать и удалять их в менеджере стилей.Если вы дружите с кодом, вы можете вставить ваш собственный в head и body теги в приборной панели.Это открывает дверь для добавления пользовательских компонентов, как JQuery плагинов и многое другое .

¹¹
Код доступа ( Большая preview ¹² )

Интеграция С CMS

WebFlow в настоящее время статического конструктора сайтов и не связан с системой управления контентом (CMS) или систему ведения блогов.Вы можете экспортировать код от вашей конструкции WebFlow использовать в качестве отправной точки для WordPress (или другой) проекта или даже в качестве плоских файлов CMS.Но как только код на экспорт, она теряет свою связь с оригинальным дизайном в WebFlow .

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

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

¹³
Восстановление версии ( Большая preview ¹⁴ )

Издательство и Exporting

Публикация в сети контекстной рекламы доставки WebFlow в (входит в стоимость) довольно прост, как экспорт, если вы предпочитаете взять код в другом месте.Я могу представить себе несколько применений для этого: люди, использующие его, чтобы создать свой собственный статический отзывчивый сайт;дизайнеров, использующих его для демонстрации отзывчивый дизайн или передавать экспортированный код разработчика;и разработчикам, использующим части генерируемого кода в своих проектах. WebFlow также позволяет пользователям работать collaboratively (который стоит больше), в том числе путем обмена шаблоны, передавая сайты для клиентов и более .

¹⁵
Экспорт код ( Большая preview ¹⁶ )

Adobe Край оплавления CC

Край Reflow ¹⁷ является частью семейства современные средства и услуги, Adobe ввела в последние годы.Семейство включает Край оплавления, пограничный Анимация и края Проверьте, и это часть Creative Cloud, который является на основе подписки.В отличие от WebFlow, которая на основе браузера, пограничный оплавления в настоящее время приложение, которое вы загружаете и устанавливаете на вашем жестком диске.Потому что оплавления еще технически Public Preview mode (например, бета, которая доступна в мире), он не полностью запеченные же, и все будет, скорее всего, изменения в будущих версиях на основе отзывов пользователей .

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

Строительство Blocks

Когда начала проекта в оплавления, вы можете следить за одним из нескольких способов.Вы можете создать проект оплавлением, который содержит страницы вашего сайта иначать с чистого холста, так сказать.Вы можете импортировать веб-изображения и содержание Photoshop, а затем построить ваш проект;Делая это, вы могли бы даже импортировать содержимое в вашей оплавления проекта непосредственно из ЦК файла Photoshop (версия 14.1 только — CS6 и раньше работать не будет), если файл Photoshop (PSD) была установлена ​​правильно .

Третий метод заключается в экспорте проекта оплавлением с Photoshop CC (14,1) в качестве отправной точки для гибкой конструкции в оплавления.Это позволяет импортировать фигуры, текст и активы, которые вы определили в документе Photoshop.Используя технологию генератора, встроенного в Photoshop CC (14,1), веб-оптимизированных изображения автоматически генерируется на основе имен слоев в Photoshop.Эта связь является одним из крупных точек продаж RefLOW для тех из нас, кто полагается на Photoshop для веб-дизайна .

¹⁸
Соединение Photoshop в крае оплавления ( Большая preview ¹⁹ )

Design

Когда дело доходит до проектирования, оплавления очень похож на Photoshop и InDesign.Вы изменить элементы визуально, а не редактировать CSS и HTML, чтобы переместить их.Оплавления также требует от вас сделать содержащих элементы в дизайн помещения, а не тащить их в (как в WebFlow).float: left декларация применяется ко всем элементам оплавления по умолчанию, так что перетаскивая содержимое, которое находится на странице может быть болезненным в начале.Еще раз, хотя, приложение требует, чтобы вы поняли концепции HTML и CSS, потому что большую часть функциональности макета, связанных основан на них .

, Чтобы помочь вашей проектирование, оплавления поставляется с редактируемый сетки, что позволяет изменить столбцы, водостоки и opacity.Каждый реагирует останова могут иметь разные настройки сетки.Вы можете создать несколько страниц, и ближе всего к добавлению CSS это скопировать и вставить визуальные стили от одного элемента к другому.Оплавления также позволяет получить доступ к параметрам базы CSS для body стиле (так называемый “страницы”) и содержащей DIV (который все страницы оплавления есть) .

Определение вашей Отзывчивый Design

Потому что реагировать дизайн цель RefLOW в жизни, одна вещь, которая действительно выделяется, как вы определяете точки останова визуально.В оплавления, вся реагировать спектр представлен (а не только три размера устройства, а в WebFlow).Если части вашего дизайна перерыве между мобильным и таблетки, например, вы можете легко добавить точку останова, нажав на кнопку, и сделать необходимые изменения.Оплавления даже позволяет установить максимальное и минимальное точки останова, а значит, вы можете разрабатывать мобильные во-первых, если вам нравится .

²⁰
Определение точки останова в оплавления ( Большая preview ²¹ )

Шрифты, Медиа Формы и Linking

• FontsШрифты из Tyepkit счета могут быть легко использованы в интерфейсе при подключении комплекта.Оплавления также поставляется с доступом к краю Web Fonts (сборник размещенные веб-шрифтов от Adobe, Google и другие) .
• MediaПотому что вы не можете вводить свой собственный код, если вы не измените сгенерированный код, добавив, СМИ в крае оплавления невозможно.Вы можете установить заполнитель для СМИ (например, изображения), используя его как наглядное сайт производство .
• FormsВ оплавления, вы можете добавить ряд типичных элементов форм, таких как кнопки, текстовые поля и радио-кнопок (среди прочих).Подставляя эти элементы формы на странице не будет добавить form тег в сгенерированном коде;Таким образом, элементы формы не предназначены, чтобы быть функциональным из коробки.Это напоминает нам еще раз, что оплавления в настоящее время макет инструмент, подходящий больше для создания доказательство правильности концепции дизайна, чем для создания готовую код .
• LinkingВ последней версии Край оплавления ЦК, можно связать на страницы проекта и внешних URL-адресов, а также контроль государства, как hover и active на любом объекте в разработке .

Интеграция С CMS

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

Работа с Code

Редактирование код не цель оплавления, потому что это означало, которые будут использоваться в качестве визуального инструмента разработки.Тем не менее, с помощью панели элементов, вы можете назвать элементы и организовать код (т.е. для DOM) в иерархии, что имеет смысл для вас (и, возможно, к вашему разработчика).Если вы хотите добавить такие вещи, как слайд-шоу JQuery, плавный скроллинг или видео или использовать свою HTML-код, то вам нужно отредактировать сгенерированный код в другом приложении .

²²
Панель элементов ( Большая preview ²³ )

Издательство и Exporting

Имейте в виду, что края оплавления в настоящее время не имеет функций Экспорт и публикации.При просмотре веб-сайт в поддерживаемом браузере, оплавления генерирует HTML и CSS, но встроенные комментарии предостеречь вас от использования кода в производственной среде.Судя по реакции в форумах пограничного RefLOW, это Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров