Что необходимо знать о дизайне сайта
Сегодня мы поговорим о дизайне.
Дизайн – один из главных элементов сайта. Случается, что продуманный и внешне красивый дизайн при установке на сайт отображается не так, как было задумано.
Лучший учитель, конечно – собственный опыт, и я хочу поделиться с Вами основными моментами, на которые надо обратить внимание на этапе согласования дизайна.
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-скриптах.
Надеюсь, что это небольшое практическое руководство будет полезно и менеджеру, и дизайнеру, и разработчику для исключения недоразумений на этапе создания и согласования веб-проекта.