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

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Разработка дизайна в браузере и в Photoshop: за и против

5 мая 2015 | Опубликовано в статьюшечки | 15 Комментариев »

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

Браузер или Photoshop

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

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

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

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

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

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

Плюсы

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

Минусы

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

Дизайн в Photoshop/UXPin

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

Плюсы

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

Минусы

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

Заключение

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

Автор статьи

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

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




Комментарии

  1. Demichev
    Thumb up Thumb down +2

    Что за бред я сейчас прочитал? "Дизайн адаптивного дизайна в Photoshop заставит вас делать повторную работу, при этом на практике все может получиться совсем не так, как выглядело на макете. " ЧТА!!!??? То есть вы мало того, что предлагаете дизайнеру делать не свою работу, а сейчас тенденция наоборот предполагает узкоспециализированных специалистов. Так еще и не понимаете, что если человек понимает как работает сайт, у него не может получится «совсем не то».

    Ответить

    Дмитрий Ответ:

    Thumb up Thumb down 0

    Где вы нашли тенденцию «узкоспециализированных специалистов бла-бла».

    Вы Россию нынче с Западом не путаете? У нас кризис как бы.

    Чтобы конторке содержать 3-4 людей на разработку 1 сайта, надо задирать космическую цену для заказчиков. А сейчас высокая цена — отсутствие заказов.

    В общем палка о двух концах. А дизайнер и правда должен уметь кодить, даже если это не его работа.

    Ответить

    Demichev Ответ:

    Thumb up Thumb down +5

    Нее, ну если говорить что «руководитель-еврей» то да, возможно. Нет, я не путаю как раз наоборот, вижу тенденцию. Начнем с того, что заказы есть. А издержки нужно снижать за счет «бек-фронт» один человек. А дизайнер не должен кодить, это вообще ни с точки зрения логики и ни с точки зрения психологии, не сочетается. Это вообще разные полушария — математическое и творческое восприятие. А дизайнер не должен кодить, он должен знать основы html, css, js, php. И понимать как все это работает. Так что не надо ля-ля сударь. А вот такие вакансии «All in» весят по пол года в нашем городе..

    Ответить

    Stanislav Morozov Ответ:

    Thumb up Thumb down -7

    Комментарий скрыт из-за рейтинга

    Ответить

    Demichev Ответ:

    Thumb up Thumb down +4

    Что вы там просчитываете в модульной сетке? Ахахахах, просто лол. Отлично, вот скажите кто вот все эти анимации, состояния кнопок, кто пишет? Ответ очевиден, выучил язык разметки и сиди рисуй! Че там епта нахреначил кнопочек, «е..ул зелёного»и готово. Неужели так сложно? К слову интерлиньяжем должен заниматься верстальщик или копирайтер. А то, что вы написали выше, называется «я Иосиф».

    Ответить

    Олег Ответ:

    Thumb up Thumb down +1

    Согласен!

    При грамотной адаптивной верстке «совсем не то» не может получится!

    Ответить

    kopch Ответ:

    Thumb up Thumb down +2

    Ну лично мне, уже намного проще делать дизайн сразу в браузере. Правда я сперва собрал свой собственный модульный фреймворк, с которым лично мне удобно работать. Что заняло месяца 2 и тоже требовало очень мощного дизайнерского подхода, в плане сделать всё удобно. Теперь в Sketch рисую прототип, затем быстро верстаю шаблоны со всеми адаптациями. Затем остаётся только UI элементы править, которые у меня вынесены отдельной страницей и разбиты на SCSS блоки. Всё работает через CodeKit и в реальном времени обновляется в браузере и сразу готово в продакт. В эру адаптивных, не пиксель-пёрфект сайтов эта схема экономит время в разы.

    Ответить

    kopch Ответ:

    Thumb up Thumb down +2

    Опять же сразу все анимации сразу готовы. Чаще всего мне хватает animate.css + простенький js скрипт. Любая анимация делается заменой/добавлением пары-тройки css селекторов в скрипте и кратким описанием поведения.

    Ответить

  2. Mclaut
    Thumb up Thumb down +8

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

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

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

    Ответить

  3. Hango
    Thumb up Thumb down +2

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

    не думаю, что браузер может быть таким гибким, как графическая программа

    Ответить

  4. Диплодок
    Thumb up Thumb down +3

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

    Ответить

  5. Demichev
    Thumb up Thumb down +2

    Ну да, а дизайнеру интерьеров «нужно взять шуруповёрт и гипсокартон», чтобы потолок и стены, которые он задумал, получились как он задумал. А электрику, заодно и сантехнику сделать это ведь все отделочные работы.. Такой бред. Если вы хотите что бы было все как в дизайне научитесь блядь руководить и работать с людьми, а не писать ахинею. Делайте такой дизайн, в котором нормальные слои и комментарии. Или хотя бы прочитайте про AxureRP, где прекрасно можно показать и анимации, и ховеры и много чего другого..

    Ответить

  6. Chenzo
    Thumb up Thumb down +9

    Я делаю макеты в иллюстраторе. Если к макетам нужны какие-то картинки (растровые — фото, коллажи и т. д.), то я их готовлю в фотошопе. У иллюстратора больше преимуществ в плане гибкости работы с цветом (особенно глобальные цвета, например, которых в фотошопе тупо нет), объектами и др.

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

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

    И все счастливы, фронтэнд радуется, никто никого не материт.

    Согласен с тем, что пусть дизайнер и небудет гуру кодером, но общее понятие и принципы должен знать. Это же его хлеб, ему не помешает знать больше в смежных областях ХОТЯ БЫ для кругозора. Это же интересно, в конце концов.

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

    Ответить

    htmleater Ответ:

    Thumb up Thumb down +2

    Я уже года два назад (с появлением flat-тенденций, которые приветствую) перешёл для пассивного прототипирования и макетов на вектор. Правда, использую для этого Корел, который, имхо, лучше заточен для черчения, чем, в большинстве, современные сайты являются.

    1. Сетка, зашитая в темплейт, на нижнем слое + привязка к направляюшим. Быстро рисуются блоки, быстро заполняются «рыбами» (базовые элементы: формы, кнопки, меню, текстовые и картиночные поля уже давно в библиотеке). Всей работы на час-полтора, если точно знаешь, что делаешь = пассивный прототип. Показали, обсудили.

    2. Детализация прототипа (пропорции, цвет, картинки, тексты, обводки, отступы, невидимые внутренние блоки) с разнесением элементов по слоям и группировкой. Сохраняем как большое избражение, которое выставляем бэкграундом в html-файл. Сверху абсолютами верстаю активные элементы (селекты, меню, спойлеры, аккордеоны, табы, слайдеры, кнопки), добавляю скрипты = активный макет. Примерно 1 рабочий день. Заказчик может потыкать по кнопкам, посмотреть на выпадающее меню, слайдер и пр. бантики. При сильном желании можно было бы поиграться с респонсив, но на этом этапе просто лениво, да и вся прелесть в скорости. Показали, заказчик счастлив.

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

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

    Ответить

    Chenzo Ответ:

    Thumb up Thumb down 0

    Вот! Еще один единомышленник по поводу плюсов векторных редакторов. Правда Корел я очень не люблю. Меня коробит от кернинга текста, который в Кореле почему-то очень коряво выглядит (может исправили в последних версиях, но до Х6 версии все было так). Меня одного бьет по глазам? Конечно, текст на самом сайте никогда не будет таким же как в Кореле, Иллюстраторе и даже в Фотошопе, но вот просто глаза цепляются.

    Хотя инструментарий, конечно, сугубо дело вкуса. У Корела, насколько я помню тоже есть фишки, которых нет в люстре. Кому как удобно. Не об том же речь :)

    С картинкой на бекграунде — тоже ОТЛИЧНЫЙ подход *THUMBS UP*. Согласен!

    Успехов в работе! :)

    Ответить

Оставить ответ


2 + один =

Вставить изображение