Почему верстальщики не любят дизайнеров

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

Работа команды online

Прототипы, исходники

Axure - прототипы

https://www.axure.com/

Invision - прототипы

https://www.invisionapp.com/

Zeplin - исходники

https://zeplin.io/

Avocode - исходники

https://avocode.com/

Логика работы сайта

PDF - сетка, переходы

● Облегчает понимание сетки, как перестраивается между разрешениями

● Нет необходимости отрисовывать все разрешения

● Дает возможность показать общую схему передвижения элементов

Video - анимации

● Красиво :)● Заставляет задуматься, а реально ли оно

так можно и нужно?● Нет недопонимания, всё наглядно

показано● Сразу видно не только “как должно”, но

и с какой скоростью и т.д.

UI-kit и все состояния

Одним из основных макетов должен быть ui-kit. Именно там собирается вся информация по кнопочкам/ссылочкам/иконочками. Обычное состояние, при наведении, при нажатии, меню при скролле…

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

Но это не значит, что все остальные страницы рисуются “как получится”, они должны соответствовать уи киту.

Ui-kit дисциплинирует и дизайнера, и верстальщика!

Ссылки на похожие проекты

Если уже есть готовое и верное решение, то зачем изобретать велосипед?

Аналитика блоков дизайна

Бизнес процессы

Подготовка макета

Иконки в svg (причем правильные)

Плюсы

● не зависит от разрешения● поддерживается во всех

современных браузерах● актуален в будущем (W3C

стандарт)● легко создавать и

редактировать● изменяется с помощью CSS & JS● поддается сжатию

Что сделать

● перевести текст в кривые● Перед тем как сделать экспорт,

необходимо проверить, все ли изображения находятся в целочисленной пиксельной сетке (то есть, например не 23.3px × 86.8px)

● разместить по сетке, убрать лишние точки

● удалить все ненужные перекрытия

Проверять в браузере

В конце концов, возьмите себе за привычку проверять, что в итоге у вас получилось.

Откройте иконку в браузере, увеличьте/уменьшите масштаб.

Иногда бывает очень больно смотреть на иконки :(

Нормальные шрифты

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

Разработчику должны они попадать уже в готовом виде. Конечно есть много сервисов, через которые можно прогнать шрифт и получить “что-то на выходе”.

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

Адекватные разрешения

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

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

Проверка на большие тексты

Не забывайте, что информация на сайте может изменяться.

Если вы нарисовали 10 товаров, то у этих 10 товаров должно быть описание с разным количеством строк.

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

Имена могут быть не только Иван Иванов, но очень длинные с составными фамилиями и тд

Что касается файлов

● Нормальная структура и названия. Интуитивно понятная структура, названия файлов с указанием страницы и разрешения. РАЗРЕШЕНИЕ указывать то, где это должно быть показано!! Если вы делаете для разрешения 768 но в 2х, то в название 768 а не 1520.

● Все исходники: папки с иконками в svg, логотипы, шрифты и т.д.● Правильные версии файлов. Никаких main-copy● Название по-английски. главная страница.psd после разархивации на маке станет

???????.psd● Используйте zip. Rar не рулит )● Постоянная ссылка на исходники. Если выкладываются исходники в онлайн

хранилищах, не удаляйте ссылки до конца проекта, не плодите по 80 разных ссылок только из-за того, что добавилась новая страница

Что касается самого psd

● Layer 1, 2 - это не информативно. Называйте слои нормально, разделяйте по папкам, раскрашивайте папочки.

● Удаляйте ненужные слои. Если у вас скрыта нужная информация (попап) и пара десятков ненужных слоев, то разработчик не сможет найти необходимые слои.

● Все скрытые, но нужные моменты (попапы, всплывающее меню) выносите наверх. ● Создавайте библиотеки и используйте одни стили на всем сайте. Разнообразие из 10

черных цветов никому не нужны.● Все размеры должны быть указаны целым числом, а не 13,8. Это относится и к

размерам блоков, и к размеру кегля шрифта.

Дизайнеры!

Мы вас не всегда понимаем, но всё равно любим!

С уважением, .

Булавин Сергей

Телефон: +7 (917) 605-05-90

E-mail: murdoc3862@gmail.com

https://www.facebook.com/murdoc3862