Дизайн и вёрстка

Прежде, чем Вы приступите к изображению будущего сайта в графическом редакторе, настоятельно рекомендую создать набросок макета на бумаге. Бумага – очень удобный материал для быстрого излияния мыслей и материализации задумок. Карандашом начертите образно расположение графических элементов, блоков, текстовой части, шапки сайта и подвала. Представьте себе, словно Вы рисуете уже готовый проект. Как будет располагаться меню, какая вообще информация будет представлена на данной странице. Это поможет сэкономить кучу времени и поможет найти новые решения. И уже после этого можно смело «вооружаться» графическим редактором для создания будущего макета сайта.

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

Не забудьте о модульной сетке, о которой подробно можно прочесть в статье «Создание макета».

Помните, что у разных пользователей различные мониторы с различным разрешением экрана. Ваш сайт должен быть доступен для любого пользователя. Поэтому большинство дизайнеров предпочитают делать всё же «резиновые» сайты.

различные варианты разрешения мониторов

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

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

вариант увеличения количества пунктов меню

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

Немаловажную роль на сайте имеет навигация. Позаботьтесь о том, чтобы пользователю было удобно ориентироваться на страницах сайта, чтобы чётко выделялись элементы текста, имеющие ссылку, чтобы ссылка меняла своё состояние (внешний вид) в зависимости от того наведён ли на неё курсор, была ли она посещена или, быть может, мы как раз находимся на этой странице. Очень хорошо, если на сайте присутствует так называемый глубиномер или «хлебные крошки». По которым можно легко проследить из какого раздела вы прошли в данный подраздел и какую статью читаете, что бы можно было легко вернуться на любой уровень иерархии вверх и не потеряться на сайте, особенно, если он многостраничный и очень информативный.

активная ссылка

Ссылки, находящиеся непосредственно в тексте, обязательно должны быть подчёркнутыми, а, если ссылка является псевдо-ссылкой (при нажатии не делает переход на отдельную страницу, а раскрывает скрытое содержимое) она должна быть подчёркнута пунктирной линией.

ссылки в тексте

Следует так же предусмотреть реакцию курсора , особенно, если на сайте присутствуют нестандартные элементы управления, такие как: навигация, псевдо-ссылки и табы (hand), подсказки (help), изменение размера элемента и перетаскивание.

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

Соблюдая эти нехитрые правила , Вы обязательно создадите интересный, удобный и качественный ресурс!


При перекопировании информации ссылка на сайт обязательна.

разработка сайта DDI Group