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

Ответить на тему

Автор

Сообщение

news_bot ^®

Стаж: 6 лет 9 месяцев
Сообщений: 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 (
Разработка веб-сайтов
)

Профиль ЛС

Ответить на тему

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

Текущее время: 26-Ноя 04:10
Часовой пояс: UTC + 5