Хороший веб-дизайн: как? дружеские рекомендации от программиста-верстальщика художнику-дизайнеру

Photoshop и PSD-файлы были популярны в начале века, а сейчас чтобы создать дизайн сложного веб-сайта практичнее использовать специализированные инструменты. И не только потому, что статические PSD-файлы с трудом справляются с задачей визуализации динамической тянущейся верстки и анимации. Еще и потому, что важно не только нарисовать красиво, но и удобно передать результат верстальщику.

Таким образом появились специальные инструменты для веб-дизайна, такие как например Adobe XD, а также среды для коллективной работы над дизайном и версткой, такие как Zeplin.io. В этой статье раскрыты несколько принципов создания дизайна с помощью подобных современных инструментов, придерживаясь которых дизайнер вызовет уважение, а не скепсис верстальщика.

Общие рекомендации по разработке красивого дизайна

СНАЧАЛА создайте guideline:

  • создайте страницу с типовыми семантичными HTML-элементами, типа h1, h2, h3, формы, ссылки и т.д.
  • определите опорные цвета, шрифты, их размеры
  • опишите словами принцип возможных модификаций: какие шрифты каких цветов и размеров могут быть, приведите примеры
  • продумайте, и опишите словами общие принципы вашего дизайна. Например:
    • есть всего три разрешения.
    • толщина рамок: такая, сякая, этакая.
    • базовый размер шрифта: такой сякой, этакий.

ПОТОМ рисуйте свой красивый дизайн, используя ТОЛЬКО те типовые элементы и принципы (а также их комбинации), которые вы описали выше.

Больше НИКАКОЙ самодеятельности. Если вы рисуете типовой элемент, но, почему-то вам ваше тонкое чувство вкуса подсказывает, что он именно тут должен быть серо-буро-малиновым, а не таким, как на всем остальном сайте, то СНАЧАЛА внесите изменения в guideline, и потом -- в ваш макет. Если же ваш guideline слишком разрастется и им станет неудобно пользоваться, сокращайте его, упрощая параллельно сам дизайн.

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

В результате вы будете делать так, как надо. А как не надо?

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

А также:

Не рисуйте одно и то же два раза. Если страница слабо отличается от уже нарисованной, просто напишите это словами.

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

Если вы взялись заняться веб-дизайном, сначала научитесь верстать, ей-богу. Хотя бы чуть-чуть. А лучше еще и программировать.

Комментарии (1)

Doodle Doodle (2020-06-16, 15:46)

очень злая статья : ) "если вы решили заняться дизайном, сначала научитесь программировать"

А вдруг это касается вообще всего? Прежде чем заняться чем-то, сначала научитесь программировать :) Мир был бы другим если б так.

Finar.

Блог

Что с Мастерхостом? Когда заработает?!

Этот вопрос всё чаще задают в Интернете начиная примерно с 12:00 дня 2 марта. А всё потому, что он накрылся!

далее

Автоматизированная Система Управления Бэкапами

Автоматизированная Система Управления Бэкапами позволяет добиться полного контроля над резервными копиями сайтов внутри инфраструктуры веб-студии. Если вы поддерживаете десятки сайтов на разных хостингах, без подобной системы вы не можете быть на 100% уверены в том, что каждый из них был корректно зарезервирован прошлой ночью.

далее

WebSocket: интеграция с NetCat

Хотите добавить на сайт под управлением CMS NetCat поддержку технологии WebSocket? Обращайтесь к нам! Посетители сайта смогут получать мгновенные уведомления о событиях сайта без обращений к серверу и перезагрузок страниц. Превратите свой сайт в интерактивную площадку, работающую в реальном времени!

далее

NetCat: техническая поддержка и доработка сайтов

Мы работаем с CMS NetCat уже больше 10 лет. У нас большой опыт и ответственный подход к делу.

далее

Весь блог тут