Важные элементы дизайна сайта

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

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

Отсутствующие кнопки и формы

Форма входа на сайт не должна ограничиваться только полями для ввода логина и пароля. Важно не забыть про возможность восстановления пароля, запоминания данных пользователя. Здесь же может присутствовать кнопка «Регистрация». В противном случае есть риск потерять целевого пользователя, который не смог отыскать страницу для регистрации.

Важно иметь в виду, что посетитель может неправильно ввести данные, о чем он должен быть обязательно оповещен. Лучше показать как именно будут отражаться ошибки. Не будет лишним сразу нарисовать «код антибот», чтобы верстальщик учел этот элемент.

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

Навигация и страницы

Новости и другие ленты, как правило, имеют постраничную навигацию, которую также необходимо прорисовать. Сегодня стал популярным метод подгрузки части контента. Например, к существующему списку прибавляются 3-4 блока, после которых стоит ссылка «Показать еще». Каким образом будет выглядеть такой формат ленты, тоже необходимо отразить.

Навигация часто присутствует не только в лентах новостей и на странице «О компании», но и в других разделах. Администратор сайта может удалять некоторые разделы, добавлять новые. Это обстоятельство важно предусмотреть при создании макета.

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

Прочие составляющие

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

Русская и английская (или любая другая) версия сайта различаются. В частности, разделы и заголовки имеют разное количество символов.

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