Статьи

 

Как делать качественный WEB-дизайн

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

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

Но когда нам приходится верстать макеты, сделанные «на коленке» или дизайнерами-полиграфистами, не имеющими опыта в создании дизайна для WEB, то разобраться в предоставленном макете иногда бывает очень и очень непросто.

В этой статье вы найдёте некоторые советы по созданию технически качественного дизайна для WEB. Вы можете спросить — зачем мне это нужно, у меня и так есть клиенты и они не жалуются. Навскидку предлагаю четыре причины:

  • рост вашего профессионализма в WEB-дизайне;
  • уважение верстальщиков;
  • новые заказы от клиентов, которые будут видеть в вас профессионала;
  • экономия времени в будущем.

Общие пожелания к дизайну

  1. Мы считаем, что каждый WEB-дизайнер должен знать особенности вёрстки и правила CSS (в идеале — уметь верстать самостоятельно). Причина проста — дизайнер должен понимать, какие его идеи можно реализовать на WEB-странице, а какие — очень затруднительно или вообще невозможно.
  2. Делая меню, помните, что количество пунктов и их названия могут быть легко изменены. Делайте меню так, чтобы такие изменения не влияли негативно на ваш дизайн.
  3. Если планируется многоязычный сайт — предыдущий пункт становится особенно актуален, так как длина слов и фраз на разных языках может значительно различаться.
  4. Используйте сетку и направляющие. Настройте стандартную сетку на подходящий минимальный шаг, добавьте к ней свои дополнительные направляющие и старайтесь соблюдать одинаковые отступы между блоками.
  5. Не растрируйте шрифты! Верстальщик должен узнать, какой шрифт вы применяли, с каким стилем, кеглем и цветом. Из растрированного шрифта получить точные сведения крайне трудно.

Файлы проекта

  1. Называйте файлы проекта только английскими буквами — при сбое кодировки русские названия могут принять вид ???????.psd и разобраться где что будет крайне затруднительно.
  2. Нумеруйте версии файлов, чтобы легко было найти самую последнюю версию (maket_v1.psd, maket_v2.psd).
  3. При упаковке в архив используйте формат ZIP, а не RAR. На Linux и MacOS часто возникают проблемы при распаковке RAR архивов, особенно, если в архиве файлы с русскими буквами в названии.
  4. По возможности предоставляйте исходники иконок и других посторонних мелких элементов. Если вы используете в дизайне полупрозрачные иконки — приложите их оригиналы к готовому PSD, чтобы верстальщик не вырезал их из макета, гадая, где же заканчиваются границы полупрозрачности.

Нестандартные шрифты

  1. Старайтесь избегать использования нестандартных шрифтов. Методы их подключения к WEB-странице не идеальны и часто работают неправильно в разных браузерах. Кроме того, каждый шрифт увеличивает размер страницы на 100 и более килобайт, что увеличивает время загрузки страниц и отрицательно сказывается как на отношении пользователей к сайту, так и на позиции в поисковой выдаче.
  2. Если нестандартный шрифт необходим — используйте его только для  текста с кеглем от 16pt. Часто после преобразования в WEB-формат нестандартные шрифты теряют чёткость и становятся трудно читаемыми.
  3. Используйте только качественные шрифты (выбросьте на помойку диски типа «100500 шрифтов для дизайнера»). Подавляющее число шрифтов из интернет и с подобных дисков конвертируются в форматы для WEB с ошибками и неправильно отображаются на страницах (обычно увеличивается высота строки, причём в разных браузерах она отображается по-разному).
  4. Не забывайте о лицензионных ограничениях на коммерческие шрифты. Уважайте заказчика и помните, что если коммерческий шрифт был использован в дизайне по вашей инициативе, то и ответственность за его использование тоже будете нести вы.

Слои и внутренняя организация PSD файлов

  1. Группируйте слои в папки по их принадлежности. Очень сложно разобраться в нескольких десятках слоёв, если они никак не упорядочены.
  2. Располагайте слои и группы логически по месту их нахождения на странице. То есть шапка — вверху, футер внизу, остальное между ними в порядке своего появления на странице.
  3. По возможности используйте цветовое кодирование групп и слоёв (указывайте цвет в панели слоёв).
  4. Если вы делаете несколько страниц сайта в одном PSD файле, выносите общие элементы (шапку, подвал, сайдбар) в отдельные группы, не дублируйте их для каждой страницы. Это уменьшит итоговый размер файла и упростит не только работу верстальщика, но и вашу собственную, если придётся вносить изменения в эти группы.
  5. Называйте слои так, чтобы было понятно, что на них расположено. Если на слое разделитель пунктов меню (вертикальная черта), то в качестве названия лучше поставить эту же черту — это нагляднее («|»). Если подчёркивание ссылки —  назовите «__»
  6. Каждый объект WEB-страницы должен быть независимым от других! Не используйте верхние полупрозрачные слои, которые корректируют тон, яркость или контраст сразу нескольких нижележащих объектов. В таком файле невозможно узнать точные значения цветов до полного объединения зависимых слоёв. Верстальщики в таких случаях не только повышают цену за свою работу, но и высказывают заказчику всё, что они думают о подобных дизайнерах, а такие отзывы заказов вам не прибавят.

«Редкие» элементы WEB-страниц

Не забывайте прорисовывать все элементы управления, которые могут встретиться на странице:

  1. Стили оформления контента — заголовки, списки обоих типов, таблицы, ссылки во всех состояниях, изображения.
  2. Постраничная навигация.
  3. Формы регистрации и авторизации, а также элементы «запомнить меня» и «я забыл пароль».
  4. Форму поиска и страницу результатов этого поиска.
  5. Код Captcha для проверки в формах, а также ошибки при неверном заполнении форм.
  6. Форму комментариев, если они предусмотрены (комментарии не появляются сами по себе!).

По материалам ilovepsd.ru и Хабрахабра

<< Вернуться на предыдущую страницу