[Веб-дизайн, Разработка веб-сайтов] 8 ошибок начинающего PSD дизайнера. Как упростить работу верстальщика

Автор Сообщение
news_bot ®

Стаж: 6 лет 7 месяцев
Сообщений: 27286

Создавать темы news_bot ® написал(а)
22-Авг-2020 05:30


Ситуация
Перед дизайнером стоит задача о создании 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. Упрощает вёрстку.

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

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

===========
Источник:
habr.com
===========

Похожие новости: Теги для поиска: #_vebdizajn (Веб-дизайн), #_razrabotka_vebsajtov (Разработка веб-сайтов), #_vebdizajn (веб-дизайн), #_verstka_sajtov (верстка сайтов), #_vebdizajn (
Веб-дизайн
)
, #_razrabotka_vebsajtov (
Разработка веб-сайтов
)
Профиль  ЛС 
Показать сообщения:     

Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы

Текущее время: 28-Сен 03:27
Часовой пояс: UTC + 5