НОВОСТИ 8 ошибок начинающего PSD дизайнера. Как упростить работу верстальщика

[NewsBot]

Ситуация


Перед дизайнером стоит задача о создании psd-макета, который верстальщик будет переносить в HTML&CSS.

Умолчим о том, насколько это правильная ситуация, и что к ней привело.

Почти умалчиваем о дизайне как о таковом.

Поговорим о бюджетной разработке, заточенной под минимальное качество. Например, миримся с названиями слоёв «фигура 14 копия 5» и ратуем за упрощения.

Расскажем о частых ошибках дизайнеров в psd-макетах, из-за которых верстальщики могут испытывать проблемы. С этими ошибками столкнулись мы. Порекомендуем как это исправить. Приведём также некоторые советы для дизайнеров, упрощающие работу верстальщика.

Статья следует из нашего опыта веб-разработки. Вот

You must be registered for see links

и

You must be registered for see links

.

Формат


Пишем кратко по формату:


Ошибка. Как исправить. Для чего это.

Ошибки

1. Плохое начертание шрифта, например, ЖКД Windows. Не ошибётесь, если поставите резкое. Иначе шрифт
   You must be registered for see links
   .
2. Логотип в PNG, на просьбу перевести в SVG, делают конвертацию в data:img/png;base64. Перевести в вектор или сказать, что не получится. Векторный формат показывает без размытий.
3. Отсутствие шрифтов макета в папке с дизайном. Положить шрифты в папку, а лучше использовать бесплатные CDN шрифты или встроенные в OS. Без шрифта не выудишь и рыбку из пруда.

Предупреждения

1. Ширина основного содержимого больше 1300px. Не ошибётесь если выберите от 940px до 1200px. Если десктопная версия одна, то её легче разрабатывать и поддерживать.
2. Отсутствие реакций при наведении или реакции сделаны в разнобой. Нужно делать реакции, например, при наведении курсора на ссылку; стараться делать однотипные реакции для одинаковых действий. Реакции должны помогать пользователю взаимодействовать с сайтом, а не мешать.

Хотелки

1. Маленькие иконки не из набора. Подойдут и распространены иконки Font Awesome версии 4.7 или 5. Для упрощения вёрстки рекомендуем использовать иконки из какого-либо готового набора.
2. 24 битные цвета #abcdef. Использовать 12 битные цвета #ace. Упрощает вёрстку.

Критическая ошибка, рушащая всё на своём пути

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

Заключение

«Хороший дизайн − это как можно меньше дизайна»
Дитер Рамс​