Ситуация
Перед дизайнером стоит задача о создании psd-макета, который верстальщик будет переносить в HTML&CSS.
Умолчим о том, насколько это правильная ситуация, и что к ней привело.
Почти умалчиваем о дизайне как о таковом.
Поговорим о бюджетной разработке, заточенной под минимальное качество. Например, миримся с названиями слоёв «фигура 14 копия 5» и ратуем за упрощения.
Расскажем о частых ошибках дизайнеров в psd-макетах, из-за которых верстальщики могут испытывать проблемы. С этими ошибками столкнулись мы. Порекомендуем как это исправить. Приведём также некоторые советы для дизайнеров, упрощающие работу верстальщика.
Статья следует из нашего опыта веб-разработки. Вот другой опыт и ещё.
Формат
Пишем кратко по формату:
Ошибка. Как исправить. Для чего это.Ошибки
- Плохое начертание шрифта, например, ЖКД Windows. Не ошибётесь, если поставите резкое. Иначе шрифт не перенести.
- Логотип в PNG, на просьбу перевести в SVG, делают конвертацию в data:img/png;base64. Перевести в вектор или сказать, что не получится. Векторный формат показывает без размытий.
- Отсутствие шрифтов макета в папке с дизайном. Положить шрифты в папку, а лучше использовать бесплатные CDN шрифты или встроенные в OS. Без шрифта не выудишь и рыбку из пруда.
Предупреждения
- Ширина основного содержимого больше 1300px. Не ошибётесь если выберите от 940px до 1200px. Если десктопная версия одна, то её легче разрабатывать и поддерживать.
- Отсутствие реакций при наведении или реакции сделаны в разнобой. Нужно делать реакции, например, при наведении курсора на ссылку; стараться делать однотипные реакции для одинаковых действий. Реакции должны помогать пользователю взаимодействовать с сайтом, а не мешать.
Хотелки
- Маленькие иконки не из набора. Подойдут и распространены иконки Font Awesome версии 4.7 или 5. Для упрощения вёрстки рекомендуем использовать иконки из какого-либо готового набора.
- 24 битные цвета #abcdef. Использовать 12 битные цвета #ace. Упрощает вёрстку.
Критическая ошибка, рушащая всё на своём пути
- «Наши покупатели выберают», «расчитать стоимость» и иные орфографические ошибки. В безударном положении в корне бер-/бир- пишется буква «и», если после корня следует суффикс -а-, а если его нет, то пишется буква «е». Филолог-верстальщик не будет метать икру.
Заключение
«Хороший дизайн ? это как можно меньше дизайна»
Дитер Рамс
calliko
Думаю, что начинающему дизайнеру надо начинать работать в Фигме или в Скетче.
JerryJJ
Быстро начать работать в них проще, это верно. И задачи вроде «теперь поиграем со шрифтами» в них намного быстрее решаются, если компоненты аккуратно использовать. Но соорудить хоть немного сложный графический эффект — можно не начинать. При этом не все заказчики согласны на скругленные прямоугольники и градиент на фоне :)
Finesse
Эти графические эффекты слишком сложно и не целесообразно воспроизводить в CSS, поэтому они для верстальщика лишние и только мешают в макете. Photoshop намного менее удобен для вёрстки, чем Figma и Sketch. Эффекты лучше сделать отдельно и вставить в макет для верстальщика как статичные изображения.