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

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

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

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

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

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

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

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

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

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

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

А также:

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

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

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

Блог

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

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

далее

Хорошая верстка в LESS: как?

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

далее

Хороший веб-дизайн: как?

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

далее

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

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

далее

Весь блог тут