11 советов, как не разбудить зверя в верстальщике

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

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

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

Наведите порядок в psd-файлах.

Создайте логику в файлах и разделите их на папки. Не используйте глубоких иерархий и сложных схем. Подпишите все слои и сохраните логику всех расположенных элементов. В панели слоев указывайте наиболее важные действия и элементы. Всегда проверяйте наличие всех состояний кликабельных элементов макета.
Если вы используете наложение слоев лучше переведите их в smart-объекты. Разные версии Photoshop, или тем более другая программа, может не отобразить все детали или элементы макета.

Фотошоп

Ограничьтесь парой-тройкой используемых цветов

Для хорошего дизайна вполне достаточно трех основных цветов. Также не злоупотребляйте разными размерами и шрифтами. Достаточным будет 4 размеров: заголовки, подзаголовки, основной контент, дополнительная информация.

Выбирайте оптимальный размер текста

Если целью создания сайта является доход, то основной текст должен быть не менее 16 пикселей.

Ускорить верстку поможет демонстрация сетки экрана

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

Веб-дизайн

Предоставьте экраны всех действий

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

Предоставьте screenflow (навигация по экранам)

screenflow

Используйте svg-иконки в шрифте

Это позволит уменьшить вес продукта, благодаря использованию большого количества картинок. Иконка в шрифте не плохо смотрится и легко масштабируется через код.

Не забудьте про страницу 404 и favicon.

Для последнего предоставьте изображение в psd-формате высокого качества.

Размер иконок

Учитывайте большой палец

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

Предоставьте анимацию работы интерфейса

Если она имеет место в вашем проекте.

Анимация

Обеспечьте комфортный размер кликабельных элементов

Размер кликабельной области должен быть не менее 44*44 пикселя.

Элементы

Обсуждение закрыто.