Материал этой статьи написан на основе опыта работы с готовыми «дизайнами» сайтов. В первую очередь он предназначен для самих дизайнеров (скорее для начинающих или специализирующихся в основном на полиграфии), но может быть полезен и заказчикам (например для контроля качества работы дизайнера).
Многие дизайн-макеты, попадавшие в мои руки, были сделаны далеко не идеально в техническом плане. Я не говорю про концепции, цветовые сочетания и тому подобное — это епархия дизайнеров, а также предпочтения заказчиков, их вкусы и пожелания.
Но когда нам приходится верстать макеты, сделанные «на коленке» или дизайнерами-полиграфистами, не имеющими опыта в создании дизайна для WEB, то разобраться в предоставленном макете иногда бывает очень и очень непросто.
В этой статье вы найдёте некоторые советы по созданию технически качественного дизайна для WEB. Вы можете спросить — зачем мне это нужно, у меня и так есть клиенты и они не жалуются. Навскидку предлагаю четыре причины:
- рост вашего профессионализма в WEB-дизайне;
- уважение верстальщиков;
- новые заказы от клиентов, которые будут видеть в вас профессионала;
- экономия времени в будущем.
Общие пожелания к дизайну
- Мы считаем, что каждый WEB-дизайнер должен знать особенности вёрстки и правила CSS (в идеале — уметь верстать самостоятельно). Причина проста — дизайнер должен понимать, какие его идеи можно реализовать на WEB-странице, а какие — очень затруднительно или вообще невозможно.
- Делая меню, помните, что количество пунктов и их названия могут быть легко изменены. Делайте меню так, чтобы такие изменения не влияли негативно на ваш дизайн.
- Если планируется многоязычный сайт — предыдущий пункт становится особенно актуален, так как длина слов и фраз на разных языках может значительно различаться.
- Используйте сетку и направляющие. Настройте стандартную сетку на подходящий минимальный шаг, добавьте к ней свои дополнительные направляющие и старайтесь соблюдать одинаковые отступы между блоками.
- Не растрируйте шрифты! Верстальщик должен узнать, какой шрифт вы применяли, с каким стилем, кеглем и цветом. Из растрированного шрифта получить точные сведения крайне трудно.
Файлы проекта
- Называйте файлы проекта только английскими буквами — при сбое кодировки русские названия могут принять вид ???????.psd и разобраться где что будет крайне затруднительно.
- Нумеруйте версии файлов, чтобы легко было найти самую последнюю версию (maket_v1.psd, maket_v2.psd).
- При упаковке в архив используйте формат ZIP, а не RAR. На Linux и MacOS часто возникают проблемы при распаковке RAR архивов, особенно, если в архиве файлы с русскими буквами в названии.
- По возможности предоставляйте исходники иконок и других посторонних мелких элементов. Если вы используете в дизайне полупрозрачные иконки — приложите их оригиналы к готовому PSD, чтобы верстальщик не вырезал их из макета, гадая, где же заканчиваются границы полупрозрачности.
Нестандартные шрифты
- Старайтесь избегать использования нестандартных шрифтов. Методы их подключения к WEB-странице не идеальны и часто работают неправильно в разных браузерах. Кроме того, каждый шрифт увеличивает размер страницы на 100 и более килобайт, что увеличивает время загрузки страниц и отрицательно сказывается как на отношении пользователей к сайту, так и на позиции в поисковой выдаче.
- Если нестандартный шрифт необходим — используйте его только для текста с кеглем от 16pt. Часто после преобразования в WEB-формат нестандартные шрифты теряют чёткость и становятся трудно читаемыми.
- Используйте только качественные шрифты (выбросьте на помойку диски типа «100500 шрифтов для дизайнера»). Подавляющее число шрифтов из интернет и с подобных дисков конвертируются в форматы для WEB с ошибками и неправильно отображаются на страницах (обычно увеличивается высота строки, причём в разных браузерах она отображается по-разному).
- Не забывайте о лицензионных ограничениях на коммерческие шрифты. Уважайте заказчика и помните, что если коммерческий шрифт был использован в дизайне по вашей инициативе, то и ответственность за его использование тоже будете нести вы.
Слои и внутренняя организация PSD файлов
- Группируйте слои в папки по их принадлежности. Очень сложно разобраться в нескольких десятках слоёв, если они никак не упорядочены.
- Располагайте слои и группы логически по месту их нахождения на странице. То есть шапка — вверху, футер внизу, остальное между ними в порядке своего появления на странице.
- По возможности используйте цветовое кодирование групп и слоёв (указывайте цвет в панели слоёв).
- Если вы делаете несколько страниц сайта в одном PSD файле, выносите общие элементы (шапку, подвал, сайдбар) в отдельные группы, не дублируйте их для каждой страницы. Это уменьшит итоговый размер файла и упростит не только работу верстальщика, но и вашу собственную, если придётся вносить изменения в эти группы.
- Называйте слои так, чтобы было понятно, что на них расположено. Если на слое разделитель пунктов меню (вертикальная черта), то в качестве названия лучше поставить эту же черту — это нагляднее («|»). Если подчёркивание ссылки — назовите «__»
- Каждый объект WEB-страницы должен быть независимым от других! Не используйте верхние полупрозрачные слои, которые корректируют тон, яркость или контраст сразу нескольких нижележащих объектов. В таком файле невозможно узнать точные значения цветов до полного объединения зависимых слоёв. Верстальщики в таких случаях не только повышают цену за свою работу, но и высказывают заказчику всё, что они думают о подобных дизайнерах, а такие отзывы заказов вам не прибавят.
«Редкие» элементы WEB-страниц
Не забывайте прорисовывать все элементы управления, которые могут встретиться на странице:
- Стили оформления контента — заголовки, списки обоих типов, таблицы, ссылки во всех состояниях, изображения.
- Постраничная навигация.
- Формы регистрации и авторизации, а также элементы «запомнить меня» и «я забыл пароль».
- Форму поиска и страницу результатов этого поиска.
- Код Captcha для проверки в формах, а также ошибки при неверном заполнении форм.
- Форму комментариев, если они предусмотрены (комментарии не появляются сами по себе!).
По материалам ilovepsd.ru и Хабрахабра