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

Основная функция дизайна – это эффективное достижение цели объекта дизайна.

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

Юзабилити – это наука, которая изучает вопросы удобства сайта.

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

Основные принципы дизайна и юзабилити:

  • Выделите главное на странице. Что должно привлекать внимание в первую очередь? Это может быть картинка, крупный заголовок, вкусное предложение и т.д. За счет чего это достигается? Цвет, контраст, размер, анимация, расположение.
  • Делайте проще. Не заставляйте посетителя думать «Что же это значит?». Выбирайте самые простые средства для реализации. Помните, что сложные элементы могут совсем по-другому работать на мобильниках и старых браузерах.
  • Будьте последовательными. Не надо удивлять читателя вычурными шрифтами. Делайте то, что ожидает от вас посетитель. Учитывайте единый стиль оформления. Делайте правильные выравнивания (т.е. элементы должны быть выровнены относительно какой-либо линии, а не подвешены в воздухе).
  • Соответствие ссылок и страниц. Давайте понятные лаконичные названия ссылкам и страницам. Ссылка должна точно соответствовать странице, на которую она ссылается.
  • Не более 3 кликов. Для выполнения цели юзеру нужно сделать не более 3 кликов. У вас так на сайте?
  • Все самое важное – наверх. Не думайте, что пользователь будет читать ваш сайт от начала и до конца. Если посмотреть карту скроллинга, то подавляющая часть смотрит только первый разворот сайта. Поэтому самое важное размещайте сразу наверху.
  • Короткие предложения и фразы. Люди не любят читать сложный текст. Пишите покороче и простыми словами.
  • Структурируйте текст. Делайте понятные заголовки и подзаголовки, чтобы можно было бегло проходить по вашему тексту. Для картинок делайте подписи. Люди их читают. Хотите, чтобы текст обязательно прочитали? Поместите его в постскриптум. Выбирайте читабельный шрифт текста (размер, текст, шрифт), не делайте его очень широким (неудобно читать).
  • Не более 5-7 элементов. Это действует для всего. В меню, в буллитах (списках), в картинках и т.д. Если указывать больше, то человеку это уже трудно обрабатывать. Если у вас больше элементов, то объединяйте некоторые из них, либо сделайте иерархичную систему, либо выделите основные, а остальные скройте под ссылкой «Подробнее…».
  • В идеале должно быть понятно все без инструкции. Никто не будет изучать на сайте ваши сложные непрозрачные механизмы. Делайте так, чтобы все было понятно с первого раза.

Сотрудничество с дизайнером

Теперь давайте разберемся как взаимодействовать с дизайнером. Тут есть несколько моментов:

  • Пусть дизайнер сразу учитывает функционал по ТЗ, а не придумывает его из головы. Он может с легкой руки добавить в дизайн кучу элементов, которые вам придется реализовывать просто потому, что он их туда занес (Сложно потом объяснять заказчику, что это на самом деле не нужно). Поэтому четко следите за этим моментом.
  • Дизайнер в своей работе должен учитывать браузеры, которые будут поддерживаться. Если нужно будет разрабатывать под старые браузеры, то лучше отказаться от некоторых элементов дизайна (которые потребуют использования CSS3, например).
  • Сразу договаривайтесь с дизайнером о порядке приемки результата. Т.е. сколько раз можно вернуть на доработку, будет ли предварительный макет, пояснение идеи дизайна и выбора решений. Это позволит избежать недопонимания на более поздних стадиях работы над дизайном.
  • Важный момент, надо сразу понять, на что делает ставку клиент. На визуальную составляющую (дизайн) или на функционал (программирование). Если на дизайн, то обязательно тестируйте четко все нюансы, которые мы обговорили. Т.е. вы сделали хороший функционал, а клиент постоянно придирается к мелочам по дизайну – это распространенный случай. Лучше изначально так организовать процесс, чтобы дизайн проходил контроль от заказчика. Тогда будет меньше с этим проблем на стадии внедрения (постоянные доработки и правки по дизайну). Еще хорошая практика – сразу оговорить с клиентом количество итераций по косметическим доработкам, иначе клиент может вас потопить в болоте этих мелких правок (мы через это проходили).

Переходим к работе с сервером.