3 инструмента, которые обязан освоить веб-дизайнер в 2016 году

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

Уверен, многие пытались изучать HTML (хотя основы должен знать каждый дизайнер), JavaScript или CSS, но ничего не вышло, правда?

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

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

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

1. Macaw

Screen Shot 2015-11-06 at 12.38.50

Macaw — стремительно развивается и набирает популярность последние несколько лет. Его девиз гласит: «Хватит писать код, начните его рисовать!». Функционал и интерфейс Macaw схож с аналогичными продуктами, которые предоставляют возможность визуального редактирования, но с 1 большим отличием — Macaw автоматически генерирует красивый HTML и CSS код, который не стыдно потом показать веб-разработчику.

Это сравни работе в команде с программистом, только без программиста: Macaw беспрекословно выполняет все ваши требования и учитывает все пожелания, а еще у него никогда не бывает кофе-брейка :)

Разработчики встроили в Macaw 2 независимых движка, которые выполняют всю работу параллельно:
— Stream — помогает в реальном времени отображать объекты на рабочей области, передвигать их, масштабировать и т.д. В общем выполняет роль обычного графического редактора.
— Alchemy — та самая часть Macaw, которая преобразует нарисованный дизайн в HTML код.

Различные функции, вроде респонсивного дизайна, сеток для различных устройств и удобная панель управления типографикой — вот те штуки, которые делают Macaw инструментом будущего, который нужно освоить прямо сейчас!

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

Macaw — это не просто инструмент веб-дизайнера, это настоящий веб-разработчик, который ничего не скажет про ваш дизайн, а лишь послушно выдаст HTML и CSS код, готовые к работе.

2. Sketch 3

Screen Shot 2015-11-06 at 12.39.15

Sketch — это инструмент, который вы обязетельно полюбите, навсегда забыв о продуктах Adobe — Photoshop и Illustrator. С самого начала, Sketch разрабатывался как инструмент исключительно для веб-дизайна, поэтому к 3-й версии этого графического редактора, разработчики Sketch значительно превзошли Adobe в интерфейсе продукта: пользоваться Sketch легко и просто, а привыкнуть к новому интерфейсу не составит труда.

Пока Sketch выпускается исключительно под платформу Mac OS.

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

Помимо всего перечисленного, Sketch позволяет экспортировать созданные в нем элементы в различных форматах: от стандартного .png, до векторного .svg, тем самым облегчая жизнь разработчикам, которым не потребуется верстать 2 разных версии сайта под ретина и неретина дисплеи. Svg-элементы одинаково хорошо отображаются на любых дисплеях.

Чтобы вы понимали, что Sketch — это не какой-то мелкий проект, его использовали дизайнеры для создания Google’s Pixate и Fleet Feet.

3. Adobe Muse

Screen Shot 2015-11-06 at 12.40.08

Последний в моем списке инструмент, про который я обязан рассказать — Adobe Muse. Простой и легкий в освоении инструмент визуального редактирования, по функциональности схожий с Macaw: также генерирует HTML и CSS для созданного дизайна.

Главное отличие Adobe Muse от Macaw в том, что его создатели предусмотрели интеграцию с большинством своих продуктов. Это значит, что у вас всегда будет доступ к персональной библиотеке шрифтов Typekit, а также документам в облаке Creative Cloud.

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

Что в итоге

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

Пришло время бросить приевшиеся продукты Adobe — Photoshop и Illustrator — и обратить свое внимание на те редакторы, которые созданы действительно для дизайнеров, для решения их задач и потребностей.

Расскажите, а вы уже пользуетесь чем-то из моего списка приложений? Вы довольны?

Автор: Rafay Saeed Ansari
Источник: creativebloq

Комментарии

Lisa Hakimova
кого поцеловать в лобик за такую статью?
Процесс разработки UI/UX дизайна и чем он может помочь дизайнеру
Большое спасибо за информацию!!!
18 уроков фотографии для новичков

Статьи по теме

6 комментариев

  • http://facebook.com/profile.php?id=100001537238776 Женя Павловский

    Я юзал Adobe Muse там есть очень много не доработок к сожалению, иногда если в коде есть ощибко то ее там очень тяжело обнаружить. Плюс эта программа сливает весь код в один не разбивая по катигор. Конечно удобная прога но еще есть не доработки.

  • https://www.facebook.com/app_scoped_user_id/10206371443622472/ Илья Михеенко

    Мьюз уж слишком глючная. Скетч отличный, но увы, если необходимо отдавать исходник верстальщику или другому дизайнеру, то в 90% случаев сталкиваешься с отсутствием у них макинтоша… Спасает разве что zeplin.io. Macaw хорош, но совсем без знания верстки в нем не очень-то просто собрать не кривую страницу, хотя что-то простое, типа заглушек — вообще без проблем. Надо теперь дождаться Scarlet от разработчиков Macaw.

    • Аноним

      Попробуй плагин Marketch для Sketch. С ним я забыл ад фотошопа для виндовых фронтендеров. Этот волшебный плагин сделает твоих фронтендеров счастливым в не зависимости от платформы. Сначала погундят конечно с непривычки, но потом поймут, что верстать из того что генерирует Marketch в 10 раз быстрее чем из самого скетча, не говоря уже о фотошопе. Единственный минус — собирать макет надо более аккуратно. Для этого достаточно вывести свой дизайн в маркетче и посмотреть как и что он генерирует и что лучше не делать или делать более деликатно.

    • https://plus.google.com/110927452466133341640 ALex Free_Think

      Добрый вечер. Что посоветуете новичку, для правильного понимания самого процесса написания вёрстки!? Как в начале статьи сказано, активно изучаю HTML и CSS. Хочу попробовать Extract? или другой бесплатный инструмент для визуальной вёрстки.
      Насчёт Muse и Dreamweawer, понял что это уже не актуально.
      Ищу новые способы закрепит свои знания на практике!

  • Аноним

    Макав очень хорош если понимать основы верстки. Нуб наверстает хрен пойми что, лучше начать работать с ним под присмотром нормального верстальщика, который объяснит что все это херня, нужно делать дивами, не плодить стили и и т. д. Но как Muse сюда попал, а главное зачем? Ума не приложу. На нем даже интерактивные прототипы делать стремно. Вы на код посмотрите, который он генерирует. Тот кто видел макав никогда не вернется на мьюз.

    • http://vk.com/id133277406 Руслан Фурсевич

      да) согласен)

Комментарии для сайта Cackle