Топ-100 Дизайн страниц - Разработка сайтов на WordPress
Дизайн страниц

Дизайн сайта и веб-страниц

“Дизайн” может означать много вещей, но в этой статье мы рассмотрю два аспекта дизайна страниц сайта:

  1. Понятность и доступность: легко ли воспринимается дизайн; насколько легко пользователи могут ориентироваться на страницах сайта;
  2. Художественно: каковы основные принципы графического дизайна.

Понятность и доступность

Вы можете сделать текст сайта более легким для восприятия, следуя нескольким простым правилам:

  • Делайте обобщения. Главная мысль страницы должна быть ясна с самого начала. В большинстве случаев, вы не должны заставлять посетителя прочитать половину страницы, чтобы понять, о чем речь.
  • Избегайте слишком длинных предложений. Стиль чтения книг и сайтов значительно отличается. Сама структура интернета призывает множество интернет-пользователей просматривать наспех каждую страницу. Подобный стиль чтения больше сочетается с короткими, легкими для восприятия предложениями.
  • Разделите страницу на несколько колонок или задайте приемлемую ширину страницы.Все больше людей используют компьютеры с большими мониторами – на них всего один абзац может растянуться в одну длинную строку. Если текст растянуть от одного края экрана до другого, читатель легко потеряет след, при переходе на следующую строку.
  • По возможности, избегайте слишком длинных страниц. Если все-таки понадобиться написать длинный текст, в конце добавьте ссылку для перехода на начало станицы – люди не любят много скролить.
  • Добавьте удобную навигацию – меню и ссылки. В идеале, любая страница на вашем сайте должна быть доступна с любой другой страницы. Если ваш сайт содержит много страниц, сгруппируйте их по темам и предоставьте каждой странице доступ из категорий. Также неплохо добавить Sitemap – отдельную страницу с кратким описанием и гиперссылкой на каждую страницу.
  • Вставьте поле поиска по ключевым словам. Многие пользователи интернета привыкли находить нужную им информацию посредством поисковых систем. Вы можете легко добавить такую возможность на свой сайт – читайте статью “Как вставить поиск на сайт“.
  • Вставьте соответствующие alt для всех изображений на странице.Некоторые из пользователей не могут видеть изображения на странице – может у них плохое зрение, или есть проблема с загрузкой изображений. В таких случаях вам нужно поставить соответствующие имена фотографий, используя альтернативное имя alt. Соответствующий альтернативный текст будет отвечать не только моральным и правовым требованиям (в некоторых странах требуется, чтобы веб-сайты были доступны для людей с ограниченными возможностями), но также являться одним из условий для лучшего ранжирования страниц поисковых систем, в которых слова индексируются в пояснениях.
  • Проиллюстрируйте диаграммами или картинками сложные тексты, которые трудно объяснить или понять идею.
    Картинки помогут разнообразить текст и удерживать читателя до конца страницы. Вы можете прочитать больше о типах изображений, которые вы можете использовать на своих веб-страницах в разделе «Изображения в Интернете: типы и использование».

Художественно – основные принципы графического дизайна

Сайты подчиняются универсальным принципам графического дизайна:

Баланс

Задача баланса – правильно расположить элементы страницы. Существует три типа балансировки:

  • симметрично: элементы расположены горизонтально или вертикально симметрично. Такая балансировка текста легко достигается путем разделения страницы по вертикали или по горизонтали с использованием, например, линий. Такой способ аранжировки дает ощущение полноты, спокойствия, формальности.
  • асимметричный: один элемент намеренно выставлен, чтобы иметь приоритет над другими. Он используется для привлечения внимания или создания напряженного ощущения.
  • радиально: элементы сгруппированы по кругу вокруг некоторого центра.

Правило третьих (rule of thirds)

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

Расстояние

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

Выравнивание

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

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

Повторение

Использование одного и того же стиля для одних и тех же элементов помогает пользователям запомнить что это значит, и облегчает навигацию по сайту.

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

Контраст

Контрастность – это разница между двумя элементами. Эта разница может быть в цвете, интенсивности, форме или размере. Чем больше разница, тем больше контраст и тем больше эффект.

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

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

Пустое пространство

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

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

Еще несколько деталей

После написания интересного и удобного для чтения текста вы можете сделать страницу более сложной, сделав несколько мелких деталей:

  • Вставьте ваш логотип, который будет в начале каждой страницы.Он объединяет страницы вашего сайта вокруг основной идеи и позволяет посетителям легко узнать ваш сайт. Ваш логотип может содержать какой-либо символ или просто текст. Вы можете заказать логотип у профессионалов.
  • Создайте фавикон.Это маленькая иконка, которая стоит рядом с названием страницы в поле адреса браузера. Когда ваши пользователи сохранят ваш сайт в качестве закладки, значок будет сохранен с заголовком страницы. Наличие легко запоминаемого фавикона поможет вашим посетителям быстро найти закладку для вашей страницы и вернуться к ней. Вы можете сделать Фавикон, например, из фотографии с помощью редактора GIMP или используйте бесплатные онлайн-редакторы:
    фавикон-генератор-из-файла: этот фавикон генератор преобразует указанный вами графический файл (JPEG, GIF, PNG) в форме фавикон .ico
    фавикон-генератор: на этой странице вы можете создать фавикон пиксель за пикселем, либо указать файл, и он сам создаст фавикон.
Акция! Сайт + логотип + продвижение всего за 29000!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Получить предложение

Pin It on Pinterest