Расположение элементов в веб-дизайне



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

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

Если на сайте будут размещаться рекламные баннеры, то здесь следует задать себе вопрос: вы хотите добиться от рекламы высокой кликабельности или же предпочтете удобство для пользователя?

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

Перед тем, как начать «строить» будущий макет, необходимо встать на место посетителя, представить как и что он хочет увидеть на сайте.

— Сможет ли посетитель найти на сайте необходимую ему информацию?

— Ищет ли посетитель что-то интересное и полезное ?

— Будет ли посетитель читать информацию, и сможет ли собрать все в одно целое?

Все для людей

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

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

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

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

Если я захожу на какой-то сайт и жду его загрузки больше 3 секунд..ой ладно, иногда и больше жду, я такая терпеливая :) Но если он слишком долго грузится, то я закрываю это окно и забываю. Тоже самое если перед моими глазами открывается страница, где совершенно не понятно что делать и куда кликать, то я просто ухожу. Вы наверняка делаете тоже самое? Правильно! Зачем тратить время на такое безобразие?

Неудачный «дизайн»:

Удачный дизайн:

Порой задаюсь вопросом, о чем думали создатели того или иного сайта, когда выкладывали его в интернет? Не знаю как для них, может и все устраивает, но о людях они в тот момент вряд ли думали.

Юзабилити сайта

Так как создание сайта начинается с идеи , то удобство пользования сайтом начинается оттуда же. Какими бы небыли креативными ваши мысли, они должны быть понятны как посетителям, так и заказчику сайта. То есть «рисую что хочу, а вы потом сами разберетесь» или «ничего страшного, захотят — привыкнут»- тут не подойдет.

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

Главная страница. Самая первая — главная страница должна быть страницей, а не анимированной заставкой или картинкой. На главной странице должна быть информация о сайте: о чем этот сайт и что на нем можно найти. Только не следует впихивать невпихнуемое. Лучше четко, кратко и понятно написать небольшую статью. Большие тексты все равно никто читать не будет.

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

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

Несколько важных деталей:

  1. Выделяйте ключевые слова и важные фразы, с помощью жирного текста;
  2. Разбивайте текст на абзацы;
  3. Для заголовков должен быть использован большой шрифт, для подзаголовков — поменьше;
  4. Используйте изображения и иллюстрации, с ними текст воспринимается легче;
  5. Не забывайте о списках, пунктах и других моментах, касающихся выделения текста.

Стремление к простоте

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

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

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

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

Советы по улучшению юзабилити сайта:

Среди сайтов очень высокая конкуренция. И риск потерять посетителя рассчитывается несколькими секундами, что бы закрыть ваш сайт и уйти к конкуренту.

Посетитель уйдет от вас, если:

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

1 . На сайте посетителю ничего не должно мешать и отвлекать.
2. Текст должен быть разделен на небольшие абзацы , с выделением важных моментов.
3. Дизайн и вся навигация должна быть интуитивно понятной и доступной, особенно если человек зашел в первый раз.
4. Поиск по сайту обязательно должен быть рабочим.
5. Уберите фоновую музыку и звуковые баннеры, это отпугивает всех.
6. Логотип сайта должен находиться вверху страницы, в левом углу и быть кликабельным.
7. Гиперссылки должны быть рабочими и отличаться цветом от основного текста.
8. Баннеры можно располагать в видимых местах, но следите за тем, чтобы они не раздражали пользователей.
9. Создайте карту сайта.
10 . Интересную и важную информацию старайтесь разместить вверху страницы.
11. Исключайте заумные названия и фразы, это затруднит понимание текста.




  1. HuntingDog17:

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

    А для блога решающее значение имеет личность автора и его стиль общения с аудиторией.

  2. HuntingDog17:

    И опять же — есть примеры удачного и неудачного дизайна, было бы круто, очень информативно и наглядно разобрать прямо на этих примерах что сделано хорошо, а что плохо. А то теория — это здорово, а теория + практика = шикарная статья)

  3. Ольга:

    Очень нравится Ваш сайт. Удивительно, что на нем нет совсем рекламы. Почему?

    На карте сайта стоит имя разработчика плагина для нее, а какой именно это плагин? Где можно узнать про этот плагин подробнее и на русском?

    • Mistli Mistli:

      Спасибо за комментарий, Ольга! Извиняюсь с поздним ответом на ваш вопрос, возможно вы уже все нашли сами. Но все же отвечу, может быть кому-то понадобится: рекламы нет, из-за небольшого кол-ва посетителей и маленьких «пузомерок». На счет плагина: имя разработчика решила не убирать, не знаю почему, пускай авторам будет приятно :) Все таки хороший плагин. Один называется Google XML Sitemaps для поисковиков, второй Dagon Design Sitemap Generator для пользователей, ставьте оба.

  4. Yevgeniy:

    Ну я бы не сказал что мало посетителей, нашёл Ваш сайт с помощью Google, причем достаточно быстро. Ввёл вот это «Этапы создания сайта» и сайт Ваш оказался на первой странице, пусть и не первый в списке :-)

    • Mistli Mistli:

      Спасибо за информацию. Действительно по этому запросу сайт неплохо ранжируется

  5. Мансур:

    Нужны конкретные коды элементов чтобы ставить в html-код на странице сайта.

Ваш отзыв