Разработка дизайна сайта — основные правила

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

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

Из чего состоит страница сайта

Классическими основными элементами страницы сайта являются:

• шапка (header, хедер);
• меню;
• контентная область
• подвал (footer, футер).

Шапка сайта — располагается в самой верхней части страницы. Именно в шапке размещают название сайта, логотип, горизонтальное меню, всю ту информацию, которая с первого взгляда позволяет понять назначение сайта. В коде шапка размечается тегом <header></header>.

Меню — блок основной навигации по сайту. Как правило, используются два варианта — горизонтальное и вертикальное. Горизонтальное располагают в шапке, вертикальное чаще всего в левой колонке.

Контентная область — область, которая содержит основную текстовую и графическую информацию сайта. Может компоноваться из колонок;

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

Дополнительные элементы и понятия

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

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

Кнопки социальных сетей — элемент, позволяющий делиться ссылкой на страницу сайта в соцсетях или ставить лайки.

Ссылки (внешние и внутренние) — используются для навигации по сайту и поискового продвижения. К внутренним относятся ссылки меню, а также ссылки в тексте страниц, ведущие на другие страницы сайта. Например, в статье о строительстве ссылками могут быть сделаны упоминания строительных материалов. При переходе по такой ссылке пользователь попадет на страницу каталога с описанием конкретного стройматериала. Внешние ссылки — это ссылки, ведущие с вашего сайта на другие ресурсы.

Скроллинг — прокрутка страницы. В классическом варианте осуществляется движением колесика мыши или перемещением ползунка на странице. Есть ряд скриптов, обеспечивающих различные эффекты скроллинга, делающие отображение прокрутки более интересным. Главное правило — эффекты не должны мешать просмотру контента.

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

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

Очень важно поискать в сети и показать разработчикам примеры сайтов, внешний вид которых вам нравится или подходит по стилистике. Ими могут быть сайты любой тематики, не обязательно связанные с вашим бизнесом. Это позволит вам получить ожидаемый результат, избежать недопонимания и субъективности при разработке дизайна, а значит сократить количество итераций и время согласования.

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

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

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