Каким должен быть PSD-макет сайта?

Мало нарисовать красивый дизайн, нужно позаботиться о дальнейшей разработке по готовому макету

За время своей профессиональной деятельности, я работал с самыми разными макетами множества дизайнеров. Из них можно было бы выделить всего несколько примеров, с которыми было действительно приятно иметь дело.

На написание этого поста меня вдохновил ресурс Ps-etiquette. Ниже хотелось бы поделиться частью из приведенных там примеров «Ps-этикета» в подготовке макета сайта со своими дополнениями и комментариями. Вся информация предоставляется в качестве рекомендаций дизайнерам.

Сначала о проблемах

Макеты бывают разные, огромного размера (более 50 Мбайт), с мешаниной внутри в виде кучи слоев, масок и стилей, с множеством мусора в виде невидимых слоев и следами поиска идеи дизайнером. Сам дизайн в итоге может быть крутым и вызывать самые положительные эмоции заказчика и команды разработчиков, но когда верстальщик открывает исходник, то и дело слышен отчетливый шлепок ладони по лбу.

Напомню, сейчас речь идет не о тех или иных решениях дизайнера, которые могут вызывать у разработчиков депрессию, а о качестве подготовки макета. Ниже я перечислю самые распространенные ошибки дизайнеров.

Организация файлов

Так как обычно при дизайне того или иного проекта необходимо отрисовывать несколько страниц, вопрос с организацией файловой структуры макета играет не маленькую роль.

Объединяйте логически связанные файлы в одном

Не нужно разбивать на отдельные файлы различные состояния элементов страницы и форм, а так же страницы, где меняется только какая-то часть интерфейса. Все можно уместить в одном файле, разбив логически на папки.

Давайте файлам понятные имена

По названию файла разработчик должен понимать, что находится внутри, и у него не должно возникать сомнений в актуальности версии.

Делайте папку с используемыми материалами

Отдельная папка с различными исходниками очень сильно упрощает дальнейшую работу с макетом как в плане разработки, так и в плане внесения каких-либо изменений в дальнейшем.

Организация слоев в макете

Эта область самая богатая на наличие «косяков». Именно тут возникает большая часть проблем у верстальщика.

Давайте слоям имена

По возможности, максимально подробно описывайте слои в вашем макете. Это сильно повысит «читаемость» макета и избавит от возможной путаницы.

Разбивайте слои по папкам

Сгруппированные слои сильно упрощают навигацию по файлу, а также это позволяет быстро скрывать/показывать целые логические блоки на странице.

Удаляйте неиспользуемые слои

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

Используйте глобальные элементы

Не дублируйте повторяющиеся фоновые, или иные элементы макета. Четкая структура слоев позволяет избавиться от множества лишних копий, что ведет к уменьшению размера файла.

Дополнение по слоям

По возможности, связывайте друг с другом слои, которые при любых обстоятельствах должны оставаться вместе. Это могут быть различные многосоставные пиктограммы, списки с иконками и т.п.

Используйте только «Нормальный/Обычный» режим наложения слоев. Если для каких-либо целей вам нужно использовать другой режим, то  позаботьтесь о возможности сохранения такого элемента дизайна для браузера.

Шрифты

Шрифты для WEB — это отдельная и большая тема. С ними связано множество сложностей и подводных камней, начиная с некорректного отображения после конвертации для использования в браузере и заканчивая лицензионными соглашениями, в случае платных версий. Ниже приведу ряд правил, которых стоит придерживаться дизайнеру.

Используйте целочисленные значения размеров шрифта

Нет никакой веской причины использовать дробные значения, задавая размер шрифта. Так же не стоит забывать о фиксированной единице измерения в 1px. К тому же, множество шрифтов ведут себя некорректно в браузере при подобных фокусах с размерами.

Хотите использовать нестандартный шрифт? Подбирайте его на Гугле!

С нестандартными шрифтами возникает столько проблем, что иногда задаешься вопросом, а настолько ли он нужен? Начать можно с того, что все шрифты должны быть переконвертированы в специальные форматы для отображения в браузере. Но нужно заметить, что не все они хорошо переживают этот процесс. Поэтому, настоятельно рекомендуется использование сервиса шрифтов от Гугла. Имеющиеся там шрифты уже подготовлены и оптимизированы для браузеров.

Необходимо также обратить внимание на то, что не стоит использовать на сайте более одного нестандартного шрифта в 2-3 начертаниях, т.к. это серьезно влияет на скорость загрузки страницы.

Разделяйте текстовые блоки

Подобные фокусы приводят к тому, что верстальщику приходится делать больше кликов внутри такого обобщенного текстового блока, чтобы определить стили отображения текста. А если там используется нестандартный шрифт, которого нет в системе у разработчика, то проблем становится еще больше.

Эффекты

Относительно эффектов действует простое правило: их должно быть как можно меньше, и сами они должны быть как можно проще. В идеале, все стили должны воспроизводиться средствами CSS.

Обводка элементов

Обводка элементов должна выполняться только с положением «Внутри» и «Нормальным» режимом наложения.

Заключение

В завершении хотелось бы сказать, что к выполнению любой задачи нужно подходить ответственно, особенно, если с результатами вашей работы будут иметь дело другие люди. Это простые, но очень важные нормы профессионального этикета.

Выше я привел лишь небольшой список «технических» вопросов, на которые стоит обращать внимание дизайнерам при подготовке макетов. Следование этим несложным правилам станет прекрасным показателем вашей квалификации и залогом хороших отношений с другими разработчиками :)