Что необходимо знать о дизайне сайта

Сегодня мы поговорим о дизайне.

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

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

1.      Ширина страницы.

Оптимальный диапазон ширины страницы – от 1000 до чуть менее 1280 пикселей, так как уже на расширении 1280 пикселей на странице сайта добавляется горизонтальная прокрутка.

2.      Согласованность  ширины страниц, header и  footer.

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

3.      Шрифты.

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

4.      Оформление слайдера.

Именно на слайдере посетитель сайта кратко и наглядно получает самую важную информацию. Дизайнер должен иметь реальные фото, которые клиент хочет видеть на слайдере, и отрисовать все слайды, чтобы на этапе верстки не возникла ситуация, когда картинка не может быть встроена в слайдер. Как правило, слайдер имеет определенный формат:  300-400 пикселей в высоту и 1900 в ширину. Контентная область слайда  должна быть равной контентной области сайта: если контентная область сайта фиксированная и составляет 1000 пикселей, то и смыслосодержащая часть слайдера так же должна быть 1000 пикселей, а все остальное - остаться фоном.

5.      Вид элементов навигации.

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

6.      Фотографии.

Клиент должен понимать, что все фото на сайте будут отображаться именно в тех пропорциях,  которые обозначил дизайнер.  Лучше всего смотрятся фотографии, пропорции которых равны 4:3. Дизайнеру в своем распоряжении нужно иметь реальные фото, предполагаемые к размещению

7.      Цены.

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

8.      Адреса и номера телефонов.

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

9.      Новости.

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

10.   Форма обратной связи.

Если на сайте предполагается возможность обратной связи в виде ссылок «Заказать обратный звонок» или «Заполните форму обратной связи»,  дизайнер должен показать, что должно происходить при нажатии посетителем этих кнопок: прорисовать всплывающие формы,  согласовав с клиентом, какие поля для заполнения должны быть созданы, и не забыть поместить на модальном окне закрывающий крестик.

11.   Графические формы.

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

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


Понравился наш подход? Давайте начнем работать вместе

Возврат к списку





Наверх