3 вещи, за которые разработчики обычно хотят задушить дизайнера


Доброго времени суток, рада приветствовать вас на моем блоге. Отвечаю на вопрос одного из моих читателей по поводу взаимодействия frontend-разработчика (верстальщика) и дизайнера.

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

Главная особенность заключается в том, что не все, что написано пером, то не вырубишь топором. Ой, то есть не закодишь на клавиатуре. То есть обычный дизайнер он такой весь творческий и, как правило, не знает, как технически реализовывать ту или иную красивость, которую он нарисовал. И уже согласовал это с заказчиком, тому это понравилось. Потом это выливается в проблемы с адаптивностью, отображением в браузере и топаньем ногами по полу, что “а на картинке было вот так”.  Обратите внимание, что ругаться заказчик придет именно к вам. В то время как дизайнер уже посчитает свою премию и будет мирно попивать кофеёк где-нибудь в сторонке. И тут-то руки у разработчика тянутся к горлу дизайнера. Не потому, что разработчик, сволочь, такой вредный, а потому, что приходится убивать кучу рабочего времени.

Повод 1 — макет рисовался по принципу “как бог на душу положит” без сетки

Отсутствие сетки выливается в проблемы с отображением, а в случае отсутствия бутстраповской сетки — в проблемы с адаптивностью. На прошлом проекте веб-сервис был нарисован по какой-то кастомной сетке и с ним намучились все. Сложности начались, когда нужно было внедрять таблицы (для отображения данных из финансовой отчетности — нетрудно догадаться, что столбцов и строк там до кучи и все на div-ах не заверстаешь), которые должны были быть адаптивными на всех популярных мобильных устройствах и планшетах. Если прописывать все через медиа-запросы, то уже через полчаса можно взвыть диким голосом. Интерфейс становится очень трудно дорабатывать и добавлять в него новые модули и элементы.

Не факт, что в проекте вы будете использовать весь Bootstrap, но его 12-колоночная адаптивная сетка (весит сущие килобайты) значительно упростит вам жизнь как разработчику. А нарисованные по ней макет всегда выглядит гармонично за счет одинаковых отступов между колонками и центрирования по умолчанию. Дополнительный плюс — 80% макетов для проектов рисуется именно по этой сетке. Поэтому один раз скачал в базовый template и забыл.

rules

Повод 2 — где шрифты?

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

Рекомендация дизайнеру — ОБЯЗАТЕЛЬНО все использованные в проекте шрифты сложить в отдельную папочку и отдать вместе готовым макетом. Форматы ttf, eot, otf, чтобы не пришлось шарить в поисках замены. Затем необходимо собрать тоже в отдельный файл стандартные элементы типографики (заголовки, цитаты, параграфы) и не использовать в макете больше 2-3 шрифтов (1 основной + 1-2 декоративных).

Когда подключено множество шрифтов, страница начинает безбожно жрать память, соответственно это отображается на скорости загрузки. А медленные страницы не любит никто. Даже у Google в свое время проводился эксперимент — они искусственно увеличили скорость загрузки у испытуемых сайтов на 0,2 секунды и стали наблюдать за людьми. В течение полугода посещаемость страницы уменьшилась в 2,5 раза, потому что пользователю было некомфортно находиться на сайте, который его раздражал.недовольный_разработчик

Повод 3 — а что он хотел этим сказать?

Почему мне, разработчику, нужно додумывать, как должна вести себя кнопка или ссылка при нажатии, в покое или при наведении? Обычно руки так и чешутся забабахать нечто вырвиглаз-зеленое, если дизайнер не приложил styleguide к макету — такой файлик, где описаны основные шрифты для параграфов, цитат, заголовков; кнопки и ссылки — при наведении, в покое, после нажатия и неактивная (заблокированная). Это все хранится в отдельном файле и вкладывается в папочку с макетом.

Минимальный комплект материала для передачи верстальщику

  • Макет в формате PSD .
  • Шрифты.
  • Иконки.
  • favicon.ico (если нет возможности в ICO, то можно в PNG-24).
  • Паттерн текстуры, если используется для фона, в виде отдельного файла PSD.

Вывод из статьи: дрессировка дизайнера — дело тонкое. И ей иногда необходимо заниматься, так как она идет на пользу и дизайнеру (наш творческий товарищ становится организованнее и не закатывает глаза с выражением лица «опять вы ко мне привязались»), и разработчику (не приходится копаться в помойке из слоев, рыскать по интернету), и заказчику (верстка в браузере соответствует утвержденному макету, он счастлив).

3 вещи, за которые разработчики обычно хотят задушить дизайнера: 2 комментария

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *