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

Браузер или Photoshop

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

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

И все же творческий процесс — дело индивидуальное и важно выбрать наиболее удобный способ. Сегодня мы рассмотрим некоторые плюсы и минусы обоих форм проектирования.

В этой статье приведены в пример Photoshop и UXPin. Однако речь идет не только об этих инструментах, подразумеваются также другие программы и сервисы, которыми мы пользуемся, например Sketch, Balsamic и т. д. Просто перечислять их нет смысла.

Дизайн в браузере

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

Плюсы

• Фреймворки типа Bootstrap и Foundation делают процесс проще и быстрее. Но практика показывает что полезно изучить и попробовать весь процесс создания с нуля. Так вы будете понимать что на самом деле происходит «за сценой».
• Изучение кода на уровне фронтенда поможет сократить количество слабых мест в организации, особенно если ваша команда сильно в основном в дизайне. Вы сможете позволить разработчикам сконцентрироваться на более сложных задачах и узкоспециализированных областях.

Минусы

• Дизайн в браузере может занять больше времени, если вы недостаточно уверенный кодер. Исправить это могут курсы фронтенда и шлифовка навыков на создании простых лэндинг-страниц.
• Процесс создания кода может отвлечь дизайнера от его непосредственной задачи. Конечно, хорошо иметь навык программирования, но существует мнение что узкоспециализированные профессионалы более эффективны чем «многостаночники». Реалии рынка, тем не менее, вполне могут изменить это мнение.

Дизайн в Photoshop/UXPin

Программы типа Adobe Photoshop и сервисы вроде UXPin — инструменты, которые которые кормят дизайнеров. Даже те из них, кто умеет программировать, часто пользуются вышеупомянутым софтом, например при планировании.

Плюсы

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

Минусы

• Дизайн адаптивного дизайна в Photoshop заставит вас делать повторную работу, при этом на практике все может получиться совсем не так, как выглядело на макете. Практика показывает что в этом случае накидать хотя бы приблизительный макет в браузере и смотреть что получается в режиме реального времени.
• Довольно сложно распознать технические ограничения, работая в Photoshop. К примеру, вы можете нарисовать шикарную форму заполнения, которую будет довольно сложно написать. Зато в итоге может оказаться что можно было создать простую с точки зрения кода форму, практически ни в чем не уступающую нарисованной Photoshop.

Заключение

Каждый сам решает какой вид дизайна ему ближе. Работа непосредственно в браузере дает мгновенное понимание недочетов и помогает развиваться. Тем не менее не стоит отметать такие инструменты как UxPin и Adobe Photoshop. Эти два подхода не являются взаимоисключающими. Вы можете использовать Adobe Photoshop, даже занимаясь дизайном в браузере, тем более что сегодня эта программа дает множество инструментов, помогающих работать с кодом.

Автор статьи

Перевод — Дежурка

Смотрите также:

• Линии настроений и их применение в дизайне
• 10 советов для создания сайта на базе фотографий
• Пять эффективных техник для веб-дизайнера