Дизайн сайта

Попытаемся ответить на важные вопросы при формировании макета дизайна сайта, такие как:

  • Что такое дизайн сайта
  • Как сделать дизайн сайта
  • Оформление шапки
  • Оформление подвала
  • Дизайн главной страницы
  • Как выглядят остальные страницы
  • Ширина сайта
  • Количество колонок
  • Стилизация кнопок
  • Выделяем ссылки
  • Стилизуем заголовковки

Что такое дизайн сайта

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

Чем рисовать дизайн сайта

Сделать дизайн для будущего сайта можно в любом графическом редакторе которые Вы можете осились/ Это могут быть всем известные Adobe Illustrator, Adobe Photoshop, Corel Draw. Можно использовать и графические редакторы онлайн, например такие как Canva.

С чего начать дизайн

Чтобы начать рисовать в графическом редакторе, наверное все же стоит набросать некие идеи карандашом на чистом листе. Что бы было представление что выхотите сделать. После чего приступать к созданию дизайна в графическом редакторе. Итак пройдемся по важным пунктам дизайна будущего сайта.

Оформление шапки

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

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

Оформление подвала

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

Дизайн главной страницы

После того когда ждизайн шапки и подвала сайта нарисованы, можно приступать к оформлению главной страницы. Это визитная карточка самого сайта. Чаще всего попадают именно сюда. Она является наким центром сайта, потому уделить внимание главной странице нужно должным образом. Что нужно размещать на главной странице:

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

Как выглядят остальные страницы

Когда главная страница сформированна, необходимо позаботиться о том как будут выглядеть остальные, не главные страницы сайта, тексты, разделы, карточки товаров, форма отправки, страницы оформления заказа и т.д. Все это нужно проработать, иначе впечатление о сайте быстро закончится, как только дело дойдет до второстепенных страницах сайта. 


Ширина сайта

Сайт бывает двух типов: фиксированный и резиновый. Фиксированный макет сайта, это когда независимо насколько широкий монитор, у сайта ширина не будет превышать заданных размеров. У резинового сайта - ширина будет от край до края монитора. И если сайт разрабатывался на мониторе шириной 1200 пикселей, то на мониторе 2600 пикселей он будет растянут от края до края, и поверьте такие сайты смотрятся просто ужасно. Выбирайте фиксированной ширины. Так вы избежите расползание дизайна сайта не зависимо от разрешения.

Количество колонок

Колонки - это проработка интерфеса сайта в целом. Бывают одноколоночные сайты, где контент занимает всю ширину сайта. Есть двухколоночные, слева или справа, кому как нравится. Они не равные, а к примеру в пропорции 70% и 30%, но это условные цифры. Есть сайты с тремя колонками, к примеру 25% 50% 25%, где большая колонка отведенная как основной, а боковые несут навигационный и вспомогательно-информационный контент. И это удобно, если на сайте очень много полезной информации, к примеру посетитель не дочитал потому что ему стало скучно, возможно автор не раскрыл тему, или она ему просто знакома, глаза могут зацепиться за другой интересный материал, который он прочитает, немного задержавшись на этом сайте.

Стилизация элементов

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

Как должны выглядеть заголовки

Заголовки - это короткая информативная подача материала. Она должна передать суть статьи. Потому ее размерам стоит уделить внимание. Существует 6 заголовков, от H1 до H6. От большего к меньшему по весу и значению. Самый важный - H1 и он должен быть самым крупным, чтобы был заметен, но не стоит перебарщивать иначе он может не вписаться в мобильную версию сайта. Это тоже нужно учитывать. Далее на несколько пунктов меньше идет H2 и так далее.


Итог

Когда дизай сайта готов, в нем можно и нужно все проверить. Посмотреть на отступы, чтобы они были симментричны, благо в гарфических инструментах это предусмотренно. Чтобы элементы были на одной линии. Шрифт не прыгал относительно друг друга и т.д. Когда дизайн сайта готов, стоит приступать к мобильной версии сайта. На базе существующего дизайна сайта, нужно сделать расположение всех элементов сайта с учетом разрешения мобильных устройств. Только после этого можно такой дизайн передавать заказчику, и после утверждения макета дизайна передавать его верстальщику. Который с нарисованных картинок начнет создавать объекты будущего сайта, который в точности повторит ваш макет.