Как и мода, веб-дизайн постоянно меняется с приходом и уходом различных трендов. Если вы хотите создать сайт, который выглядел бы профессионально, вы должны всегда быть в курсе последних тенденций в веб-дизайне. Как и при знакомстве с новым человеком, здесь важно произвести хорошее первое впечатление.
Веб-дизайн включает в себя все правила дизайна (сочетание цветов, соблюдение пропорций и прочее), но в веб-дизайне есть правила, при несоблюдении которых вы не добьетесь хороших результатов и приятных отзывов от заказчиков.
Ниже я приведу самые важные из них. Каждое несоблюдение правил — по сути ошибка. Поэтому я назову только те правила, от которых на мой взгляд нельзя отступать.
– На сегодняшний день принято делать дизайны опираясь на двенадцатиколоночную сетку: сетку из 12-ти колонок, которая есть во всех популярных framework-ах для верстки.
Вот заготовка дизайна для фотошопа: шаблон дизайна для Bootstrap 4
Аналогичный шаблон можно найти или сделать и для любой другой графической программы и для любого другого фреймворка.
Запомните, что все элементы сайта, практически без исключений, должны начинаться и заканчиваться на вертикальных направляющих 12-тиколонночной сетки.
– Есть стандартные разрешения экранов, под которые разрабатывается дизайн. Т.е. дизайн страницы не может иметь произвольный размер и масштаб. Если хотите получить хороший результат, используйте шаблон, который вы можете скачать по ссылке выше, и проблем с масштабами и разрешениями страниц у вас не должно возникнуть.
– Шрифты. На всех страницах сайта нужно использовать 2-3 шрифта, не больше. Иначе сайт будет тяжелым и возникнут проблемы со скоростью загрузки его страниц. Возможно, вам будет интересно прочитать нашу статью «Оптимизация скорости загрузки сайта. Почему долго грузится сайт?» На сайте не должно быть бесконечно много типоразмеров шрифтов! Если сайт будет иметь все размеры шрифтов от 14px до 110px, то страница потеряет целостность.
– Размеры элементов и отступов. Все элементы и отступы должны быть стандартизированы, чтобы дизайн страницы не превратился в кашу.
– Цвета. Чем больше цветов на сайте, тем больше он похож на разукрашку.
– Пустое (белое) пространство. Очень многие дизайнеры боятся делать отступы между элементами дизайна. Большие незаполненные ничем пространства действительно смотрятся плохо, но элементы не отделенные друг от друга тоже портят внешний вид страниц..
– Текст на изображениях. Не стоит делать надписи на неоднородном и смысловом изображении. Дело в том, что адаптивный дизайн предполагает то, что текст будет отображаться на изображении по-разному на разных устройствах и сделать так, чтобы изображение сохранило смысл и текст не попал на значимый объект на фотографии зачастую очень сложно, если не невозможно. Осторожно следует относится и к выбору иллюстраций, которые ставятся в качестве заполнения блока конкретных размеров. При изменении его габаритов за счет адаптивности обрезка изображения будет происходить в зависимости от размера экрана. Об этом не стоит забывать и это нужно учитывать.
– Иконки. Для иконок необходимо использовать icon fonts или генерировать шрифты, чтобы иконки были одного стиля, весили мало и при верстке их было удобно использовать.
Это совсем не относится к правилам веб-дизайна, но, беспокоясь за то, что верстальщику придется проделывать двойную работу, а заказчику ее оплачивать, скажу, что к верстке следует приступать только тогда, когда полностью готовы структура сайта и веб-дизайн страницы, дизайн которой нужно конвертировать в HTML.
Здесь я писал об этапах разработки сайта, при работе с клиентами
Кстати, структуру сайта и прототипы я бы посоветовал вам делать в программе Microsoft Visio.
На этом все. В остальном желаю вам вдохновения и творческих успехов! Постоянно расширяйте кругозор, будьте в курсе тенденций и творите! И как бы вам не казалось, что правила дизайна сужают его границы и делают его скучным, на самом деле они делают его логичным, простым и дают возможность любому человеку, имеющему вкус и терпение, научиться делать шедевры. Последний совет. Люди привыкают к стандартам, которые уже есть, и сложно адаптируются к новшествам. Поэтому не мудрите и не пытайтесь сделать ноу-хау, дизайн должен быть интуитивно понятен.
Успехов вам и удачи!