Советы дизайнеру от Верстальщика

Советы Дизайнеру от Верстальщика

Приветствую, меня зовут Даниил Вершинин. Я — full-stack разработчик. Уже более 3 лет занимаюсь версткой сайтов. И мне хотелось бы дать несколько советов дизайнерам, которые занимаются разработкой макетов для сайтов. Перед тем, как начну сразу предупрежу, что я очень ценю труд дизайнеров, ибо понимаю насколько все это тяжело)

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

Используйте сетку

Сейчас абсолютно любой верстальщик использует какой-либо фреймворк или заготовку, придерживаясь определенной разметки. Чаще всего — это 12-ти колоночная сетка Bootstrap:

12-ти колоночная сетка Bootstrap

12-ти колоночная сетка Bootstrap

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

Подробнее про сетку Bootstrap можно почитать тут

Преобразовывайте картинки в смарт-объекты или присылайте отдельным архивом

На самом деле, работа с картинками занимает достаточно много времени. Что-бы не отнимать его у верстальщика — пришлите все исходные изображения отдельным архивом (они у вас и так есть, а ему будет приятно).

Был случай, когда дизайнер умудрился еще и наложить эффекты на фотографии прямо в макете. Приходилось вручную объединять слои, триммить и сохранять(

Присылайте шрифты отдельным файлом

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

Структурируйте слои

Как по мне, тут особых комментариев не нужно, но напомню, что названия как групп слоев, так и самих слоев должны нести смысловую нагрузку т четко разделятся на секции сайта (header, nav, main, breadcrumb, footer).

Используйте UI-kit

Точнее, присылайте данный файл верстальщику. В парадигме сайта в нем должны присутствовать:

  • Элементы, не присутствующие в макете. Например, в основном макете может не присутствовать кнопки с классом .danger, а вот в файле UI-kit она должна быть прорисована
  • hover-эффекты и другие элементы взаимодействия с пользователем
  • Палитра цветов, которые используются в макете

Пример хорошего UI-kit недавно сверстанного мною сайта:

UI-kit

UI-kit

Подробнее про UI-kit тут

Рисуйте несколько макетов

Тут я прекрасно понимаю, что лишнюю работу бесплатно делать никто не хочет, но, все-таки, постарайтесь убедить клиента или свою команду в том, чтобы получилась хорошая верстка, необходимо рисовать не менее 3 макетов:

  • Под мобильные устройства (телефоны)
  • Под таблетные устройства (планшеты)
  • Под десктоп (компьютер) и больше

    Дизайн нескольких макетов

    Дизайн нескольких макетов

Знать основы HTML&CSS, фремворков

Если вы планируете долго работать в сфере разработки дизайна сайтов, то рано или поздно вам придется столкнуться с изучением основ HTML&CSS и Фреймворков. Это необходимо для того, чтобы вы понимали базовые принципы верстки и не ставили перед верстальщиком невыполнимых задач (хотя, выполнить можно все что угодно, но, как правило, для этого приходится ставить костыли).

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

Знать CMS на которую будет натягиваться верстка

Особенно это правило относится к CMS, разработанных по MVC. Например, Opencart — практически все сайты на этой системе похожи по структуре, так ка там изначально встроен Bootstrap. Если  об этом знать заранее, то вы выполните гораздо меньше работы (вам останется просто перестилизовать блоки — так как они уже стоят на своих местах) и не обречете верстальщика на вечные страдания.
К тому же, знать CMS полезно и для того, чтобы не забыть про все страницы, которые необходимо прорисовать)

Читайте свежие статьи про дизайн

Это необходимо не только для того, чтобы быть «в тренде». На самом деле, дизайн очень сильно влияет, например, на конверсию. С недавнего времени хорошо разработанный дизайн и взаимодействия с пользователем влияют и на SEO — подробнее об этом в статье Почему UX действительно важен для SEO.


Надеюсь, было интересно. Если не трудно, отпишитесь в комментариях чтобы вы еще добавили в этот список.

Спасибо за внимание)

  • NINBO

    Эммм… Ты допустил ошибку в этой главе «Знать CMS на которую будет натягиваться верстка» в предложении «Ели бо этом знать заранее, то вы выполните гораздо меньше работы (вам останется просто перестилизовать блоки — так как они уже стоят на своих местах) и не обречете верстальщика на вечные страдания». Не «ели бо» а «если об»

    • Titamik Computer

      Спасибо, уже поправил))

  • Between Layers

    несоблюдение сетки — это прям боль) а ещё веселее, когда макет на десктоп про одно, а мобилка вообще про другое (