Особенности дизайна и Макет
Помнить про экранные разрешения
Версии макетов для устройств (адаптив) должны быть с постфиксом разрешения брейкпоинта (index-320.psd, index-1024.psd, index-1920.psd) или названия типа устройства, на котором данная версия будет показана (index-desktop.psd, index-tablet.psd, index-mobile.psd).
Десктопный макет – минимум 1920 px (х2 в случае ретины) по ширине. Даже если рабочая область занимает всего 1000 пикселей. Сам холст должен быть 1920. Для того, чтобы видеть, как сайт будет смотреться развернутым на полный экран на большом десктоп дисплее.
Не забываем про скролл и рамки браузера. Если мы создаем макет, который должен помещаться в 1024 пикселя экран, то это означает, что на винде у браузера будет скролл и рамки. Значит макет должен быть вписан в 1002 пикселей.
Не забываем про отступы от края окна. Если сделать контентную часть в 1000 пикселей при 1024 разрешении, то контент будет прилипать к краям на этом разрешении, получается что реально сайт должен быть 960 — 980 пикселей. Остальное – отступы.
Устаревшее правило - некоторые его уже не соблюдают аргументируя что нет пользователей с 17” монитором
Оформлять рабочую часть страниц в пределах 1000 пикселей, если нужно, чтобы сайт одинаково хорошо смотрелся на всех экранных разрешениях.
Использовать сетку
В ряде случаев рекомендую использовать сетку. Оформленный по сетке контент лучше воспринимается пользователем и легче верстается.
Настроить сетку можно с помощью направляющих («Guides»)
Сетка – это круто. Использование сетки упрощает и ускоряет разработку в несколько раз. Используй сетку правильно. Колонки должны быть колонками, отступы – отступами.
Направляющие в макете – очень важная штука. На их основе также можно создавать сетку. Направляющие удалять не надо.
Шрифты, графика и иконки должны быть лицензионными. Оригиналы купленных (или бесплатных) исходников должны быть в папке рядом с psd.
Шрифты
Использовать точные значения для шрифта,
14px – хорошо,16.3312px – плохо. После ресайза блока через ctrl(cmd)-t исправлять все значения на цельные.Задавай межстрочный интервал явно.
Аккуратнее с межбуквенным интервалом.
Никаких непропорциональных искажений шрифта!!! В браузере этого нет.
Особые сглаживания шрифта не работают. Сглаживание шрифта в браузере всегда будет отличаться от фотошопного
Размеры текст-бокса должны соответствовать тексту, в обе стороны. Плохо, когда текст скрывается за границами блока. Плохо, когда слой с текстом закрывает половину макета.
Использовать стандартные шрифты уже не обязательно, но подключаемый шрифт должен быть доступен для веба. Хорошо, если он бесплатен (https://www.google.com/fonts) , но если он покупается за деньги, у него должна быть соответствующая лицензия и версия шрифта. Это важно. Генераторы шрифтов делают хрень, которая сильно отличается от того, что в макете
Шрифтов должно быть не слишком много. Это обговаривается отдельно. но 2 шрифта и 10 начертаний на каждый в двух языках – это пять мегабайт. ПЯТЬ МЕГАБАйТ, КАРЛ. Да интернет бесплатен и быстр, но никто не любит ждать дольше пары секунд.
Высоту шрифта (кегль) задавай целыми числами. Результат верстки будет более прогнозируемым.
font-management-best-practices-guides ресурс в помощь
Эффекты
Текстуры должны быть текстурами. Повторяющийся элемент должен без проблем вычленяться из общего эффекта. Всякие градиенты сверху это убивают. Хорошо, если рядом в скрытом слое будет лежать сам тайл, без повторов.
Многие стили слоя не доступны в вебе. У текста, например, не бывает внутренней тени. Bevel and Embos эмулируется плохо. Использование стилей на динамических элементах требует понимания, какие из них будут работать.
Ограничивай количество стилей. Чем их меньше, тем больше результат будет похож на макет.
Перед экспортом проверить орфографию
Перед экспортом изображений всегда ПРОВЕРЯТЬ орфографию. Не своевременно обнаруженная ошибка может понизить ваш авторитет и лишить вас клиента.
Save for Web & Devices…
Не сохранять файлы через
«Save as». Файлы будут большего размера, чем при сохранении с помощью«Save for Web & Devices…».При сохранении через
«Save As…»записывается много служебной информации. Например, превью картинки или информация о снимке (EXIF). Все это отрицательно сказывается на размере файла.Разумное JPEG-качество при экспорте
По умолчанию поставь качество в пределах 51—80. Опытным путем определено, что ниже 51 качество изображений начинает катастрофически падать.
Подробности? Сергей Чикуёнок изучал этот вопрос и написал подробную статью.
JPEG или PNG?
Выбирать правильные форматы при экспорте изображений. Фотографии и сложные рисунки с обилием градиентов сохранять в JPEG. Если не сложная иллюстрация или требуется прозрачность, то сохранять в PNG.
Last updated