Пока вы читаете эту статью, где-то создаётся сайт. И создание этого сайта может находиться на любом этапе создания: обсуждение, прототипирование, создание ТЗ, создание макета, вёрстка, программирование, тестирование, наполнение, продвижение или ещё что-нибудь. В этой статье я буду не освещать какой-то конкретный этап, но тема является очень актуальной. Я расскажу о переходе между созданием макета (т. н. дизайн сайта) и вёрсткой.
Обычно верстальщик в момент подготовки к работе (просмотр макета и пр.) не может заранее увидеть какие-то подводные грабли, которые по неопытности оставил для него дизайнер. И вот, после того, как верстальщик дал честное пионерское, что всё будет свёрстано к вчера, начинается веселье.
Итак, что же верстальщик должен потребовать от дизайнера перед началом работы?
Для кого эта статья
Эта статья для клиентов, дизайнеров и верстальщиков — все они заинтересованы в том, чтобы создание сайта было как можно более эффективным.
Клиент, как самое заинтересованное лицо, должен понимать, что работы дизайнера и верстальщика тесно взаимосвязаны. От качества исполнения работы дизайнера зависит качество работы верстальщика.
Чем лучше свою работу выполнит дизайнер, тем меньше его будут отвлекать в дальнейшем.
А верстальщик, на которого в итоге падают все шишки, должен более внимательно должен следить за тем, какой исходный материал ему дают и вовремя предупреждать остальных о нюансах, которые возникнут в процессе вёрстки.
И чем меньше в головах людей будет мелькать мысль «проблема не на моей стороне», тем лучше для всех.
Итак, поехали.
Шрифты
Стандартных шрифтов достаточно для 99% сайтов. Но, как обычно, всё упирается либо в буйную фантазию клиента, которому нужен нескучный сайт, либо в творческую личность дизайнера, который хочет использовать все шрифты, которые он когда-то скачал в наборе «1000 восхитительных шрифтов».
Однако есть формула, позволяющая вычислить пользу (P) от использования сторонних шрифтов:
Где F — количество сторонних шрифтов, M — количество макетов, S — зарплата дизайнера, а G = 0.
Если результат устраивает, то дизайнеру необходимо приложить к макету также и файлы сторонних шрифтов, чтобы верстальщик мог их установить и использовать при вёрстке.
Изображения
Хорошие браузеры начали поддерживать прозрачность PNG задолго до того, как многие верстальщики сдали ЕГЭ. Поэтому, если в макете используются какие-то иллюстрации, фон которых зависит от цвета фона блока (особенно если этот цвет меняется динамически, например, при наведении), в котором он находится, то в макете такая иллюстрация должна быть с прозрачным фоном.
На рисунке ниже изображения форм бриллиантов на белом фоне, хотя согласно дизайну активное изображение должно быть с другим фоном.
Такое зачастую бывает, когда дизайнер накачал со стоков изображений вместо их отрисовки и вставил в макет. И если вовремя не заметить такой халтуры, то решений несколько: ждать неделями от «дизайнера» эти же изображения, но на прозрачном фоне, или нарисовать самому (поэтому, скорее всего, результат будет отличаться).
Иконки
Иконки позволяют пользователю быстрее понять назначение типовых элементов (например, иконка телефонной трубки рядом с номером телефона). Заставлять дизайнера рисовать типовые символы (иконка телефона, иконка @, иконка карты, конверт, дискета, иконки социальных сетей), которые нарисованы другими уже тысячи раз — это пустая трата времени. Поэтому рекомендуется использовать шрифтовые иконки, которые очень просто интегрировать на сайт. Самым популярным набором шрифтовых иконок с широкими возможностями является FontAwesome. Я рекомендую использовать его при создании макета сайта.
Масштаб
Бывает такое, что макет имеет неверный масштаб. Например, макет, который должен иметь ширину 960px, дизайнер может сделать шириной 1920.
«А что такого?» — спросит дизайнер.
Ничего особенного, просто верстальщику придётся делать лишнюю работу: приводить все значения (кегль, отступы, размеры блоков и пр.) к нормальному виду.
«Уменьши размер изображения один раз и макет будет в нормальном масштабе» — скажет дизайнер.
Здравая мысль. Но почему она не пришла ему раньше? Да потому, что если привести макет к нормальному масштабу, то могут всплыть косяки. Например, мне однажды прислали макет сайта для экрана шириной 480px. И он нормально смотрелся. Ровно до тех пор, пока я не уменьшил макет действительно до 480px и не примерил его для смартфона с 5-дюймовым экраном.
Адаптивность
Здесь 2 источника проблем для дизайнера:
- Клиент, который сэкономил на дизайнере и заказал макет только для одного разрешения.
- Дизайнер, не имеющий понимания механизма адаптивности.
В идеале нужно иметь в виду популярные разрешения экрана (можно узнать, например, в статистике mail.ru), а также уточнить у верстальщика, какой grid-фреймворк он использует. Допустим, я обычно использую grid-фреймворк, который имеет 12 колонок, две контрольные точки: 600px для мобильных устройств, 993px для планшетов, а максимальная ширина контейнера — 1280px.
Дизайнер должен предусмотреть, как должна выглядеть навигация (меню) на всех контрольных точках и смежных значениях (например, 601px, 994px). Если дизайнер подготовил макет только для максимальной ширины 1280 пикселей, то он должен объяснить, как сайт должен выглядеть на широкоформатных экранах. Обычно достаточно добавить слева и справа поля, но иногда некоторые блоки необходимо всегда размещать на всю ширину экрана.
Векторная графика
Векторная графика хорошо подходит как для логотипов с иконками, так и для иллюстраций. Изображения в формате SVG не только имеют меньший объём, но и, что важнее, лучше выглядят на экранах с высокой плотностью пикселей. И если растровый логотип на дешёвом настольном мониторе может выглядеть нормально, то на смартфоне или планшете он, скорее всего, будет выглядеть размытым или пикселизованным.
Кстати, если в логотипе используется очередной неведомый шрифт, его тоже необходимо приложить. А надписи в логотипе, который будет вставлен на сайт, необходимо перевести в кривые.
Руководство
Считается хорошим тоном создать руководство по использованию макета — так называемый design guide. Обычно это руководство содержит общую информацию о всех макетах:
- Используемые шрифты.
- Используемые цвета и их CSS-представления (hex или rgba).
- Отступы, кегль, интерлиньяж и пр.
Допустим, дизайнер по невнимательности в одном макете сделал фон шапки цветом #233539, а в другом — #333538. В таком случае руководство должно разрешить неоднозначность.
Вывод
Я собрал наиболее встречающиеся проблемы, встречающиеся при использовании макетов верстальщиком. И эти проблемы касаются не только верстальщика, но и дизайнера, и клиента. Все эти нестыковки отнимают время у всех, а вёрстка даже простого макета может растянуться дополнительно на несколько дней.
Из полезного также советую прочесть это: https://github.com/nicothin/web-design