Правила хорошего тона веб-дизайнера
или как удовлетворить фронтенд-разработчика

+55

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

Pravila-horoshego-tona-dizainera/pravila-xoroshego-tona-veb-dizajnera


Начала писать, потом перечитала и поняла, что куда-то меня понесло... Человеческим языком:

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

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


Сроки сдачи на грани срывастрадает вся команда.


Между тем, только ли у верстальщиков руки растут не из того места? Всегда ли вина верстальщика в расхождении макета и верстки? Оказываетсянет. Бывает в этом и вина криворукого дизайнера. Когда последний признает это, воцарит любовь и гармония между дизайнерами и верстальщиками.

Утопия? Вовсе нет.

Всего-то навсего, надо следовать заповедям идеального дизайнера.

 

Заповеди идеального дизайнера
или 6 этапов удовлетворения верстальщика


Фронтенд-разработчикам передаем
:

  1. Макет, подготовленный для верстки
  2. Комментарии к макетам - в отдельном текстовом файле
  3. Элементы и иконки - в векторе
  4. Frontend Style Guide
  5. Спецификацию
  6. Фавиконку и шрифты


Рассмотрим каждый из перечисленных пунктов подробнее.


Этап 1. Макет, подготовленный для верстки


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


Макет для верстки должен быть:

1. Разработан по модульной сетке

Элементы в дизайне по модульной сетке

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

znak-vazhnо
При
передаче макетов в другие отделы
не удаляйте модульную сетку




Этому есть несколько объяснений:

  1. Отсутствие сетки выдает дизайнерадилетанта
    Вы же не хотите давать шанс усомниться в вашем таланте?
  2. Макет, разработанный не по сетке, увеличивает сроки завершения верстки
    Верстальщики злы и недовольны. А мы добиваемся всеобщего счастья.


2. С логически проименнованными группами, элементами и слоями:

Шапка, меню, сайдбар, контент, футер и тд.

Группы слоев в макете логически названы


3. Не
содержит ненужных скрытых слоев/групп/папок

Все скрытые слои, не влияющие на дизайн удаляются - мусор в макете никому не нужен.

4. С встроенным профилем sRGB

Его отсутствие может привести к расхождению цветов макета и верстки.

5. Стили наложения слоев не растрированы

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

Поддерживаемые CSS стили наложения

Не использовать другие режимы наложения, кроме Normal.
Изображения и элементы дизайнав нормальном режиме.


6. Шрифты

Не деформированы, размеры заданы целочисленной величиной:

Размер шрифта задается целым числом

Все изменения в шрифтах проводятся с помощью изменения кегля, интерлиньяжа и межсимвольного интервала. Изменять шрифт трансформациейнельзя.
Размер задается только целым числом.



7. Текст заглавными буквами

Используем не Caps, а инструмент, предусмотренный программой.

Игнорируем КАПС

Параметры блоков, кнопок и прочих элементовцелое число, желательно, кратное 8.


8. Одинаковые отступы между элементами одного типа

Отступы между элементами одного типа должны быть одинаковы. К примеру, если перед заголовком H2 64 px, то перед следующим H2 необходимо, чтобы было тоже 64 px.




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

 

Этап 2Комментарии к макетам в отдельном текстовом файле

Комментарии к макетам прикладывайте отдельным файлом. В нем же описываются анимация и прочие спецэффекты. В идеалес указанными параметрами.

Это позволит свести к минимуму вероятность того, что верстальщик не «заметит» комментарии в силу различных обстоятельств (к примеру, если дизайнер работает в Photoshop, а верстальщик для нарезки использует Avocode, последний просто не видит комментариев, написанных в фотошопе).

Пока он изучает комментарии, можно заняться любимым делом.

poka-verstalshhik-izuchaet-kommentarii-zanimaemsya-lyubimyim-delom


Этап 3. Элементы и иконки в векторе

Передавайте иконки в векторе, сохраненные в SVG-формате. А если вы импортируете их в макет, у верстальщика непременно мелькнет мысль, что  жизнь хороша.
Это еще шаг на пути к цели.

Fontello - шрифт для маленьких иконок

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


Этап 4. Frontend Style Guide

Подкрепите эффект предыдущих этапов Frontend Style Guide.


Скачать пример (архив, 348 Кб)


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

верстальщики искренне радуются

Пусть верстальщик порадуется.


Этап 5. Спецификация для макета

Добейте верстальщика - сделайте спецификацию для проекта.

спецификация для проекта


Верстальщик рыдает в экстазе.

Верстальщик рыдает в экстазе


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


Вишенка на торте:

В заключениес макетом передаем фавиконку (в необходимом формате) и шрифты.


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

 



А если серьезно:

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

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

Посему, дорогие мои коллеги-дизайнеры!

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

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


Понравилась статья? Поделись с друзьями:
Читайте также
Лучшие разработчики сайтов Воронежа
Лучшие разработчики сайтов Воронежа
Если вы хотите качественный сайт, то постараетесь выбрать лучших разработчиков сайтов.
ДоменАРТ и разработчики интернет-магазинов
ДоменАРТ и разработчики интернет-магазинов
Веб-студия "ДоменАРТ" в этом году оказалась на втором месте в Рейтинге разработчиков интернет-магазинов.
Еще раз из встреч и переписок  с Заказчиками
Еще раз из встреч и переписок с Заказчиками
Разговаривать с Заказчиками - особое искусство, которым далеко не все владеют. И при этом надо делать серьезное лицо. Ну, или иногда улыбаться...

Комментарии ()

    Категории
    События студии все
    Поздравляем, 2021 наступил! Сколько на него надежд во всем мире...
    01 Января 2021
    Поздравляем, 2021 наступил! Сколько на него надежд во всем мире...
    Наступил Новый 2021 год! Очень надеемся на то, что он будет лучше прошлого, отступит коронавирус, восстановится экономика, справится малый и средний бизнес, а государство поможет ему в этом реальной помощью!
    338 просмотров
    подробнее
    Популярное
    Последнее