Источник: ☭ Создание макетов страниц
Позволяет проработать все нюансы навигации по сайту, согласовать содержимое и получить общее представление о расположении элементов на странице до того, как вы начнете заниматься графическим дизайном.
До создания графического дизайна сайта нужно иметь готовые, хотя бы в первом приближении, макеты страниц. Очень трудно реализовать графический дизайн сайта, когда у вас нет даже малейшего представления о содержимом и элементах. Если начать проработку дизайна раньше времени, вы рискуете создать нечто, что очень понравится заказчику, но будет совершенно непрактичным и к тому же потребует значительных изменений и доработок. С точки зрения временных и денежных ресурсов мудрее немного повременить с графическим дизайном до тех пор, пока не будут согласованы макеты страниц.
Обязательно нужно сделать “защиту от дурака”, так как я уже поняла, что никогда нельзя надеяться на однозначную трактовку пользователями рисунка, расположенного на кнопке для пояснения ее функций. За исключением пиктограммы печати или другой, который все узнают. Неплохо было бы сопровождать свои кнопки и пиктограммы обычными текстовыми надписями. В конце концов, вы никогда не подберете картинку, которая однозначно представляла бы на сайте раздел с каталогом товаров.
Когда вы определитесь с картинкой, которая иллюстрирует содержимое вашего раздела, советую вам сохранить ее и добавить небольшую сопроводительную надпись. Я не говорю, что не нужно использовать рисунки на кнопках. Такие рисунки придают живость дизайну сайта. Но для обеспечения ясности и однозначности просто добавьте к ним надпись.
Чтобы улучшить впечатление от сайта, всегда помните о скоростях интеренет-соединений ваших пользователей. Именно этот показатель оказывает влияние на простоту доступа к различным областям сайта. Избегайте создавать, например, анимационные заставки, так как во время их загрузки пользователи не могут переходить между разделами сайта. Даже если на вашей Flash-заставке есть кнопка пропуска анимации, она становится активной только после загрузки заставки целиком. Получается, что поль юватели получат доступ к системе глобальной навигации по сайту лишь после загрузки анимации. Эта процедура занимает длительное время, что раз фажает пользователей, которые повторно заходят на сайт.
Лучше загрузить глобальную навигацию сразу вместе с заставкой. Таким образом, пользователи смогут пропустить заставку и перейти непосредственно к содержимому сайта. Еще один вариант: создать титульную страницу сайта, где пользователь сможет определить, нужно ли загр} жать сайт с анимацией (этот сайт обычно появляется на экране в новом окне).
Навигационная система должна не только обеспечивать доступ к основным функциональным областям сайта, но и каким-то образом указывать пользователям, в каком разделе они находятся. Как с помощью карты легко найти выход из лабиринта, так и на сайте необходимо обеспечит пользователей удобной системой навигации. Ваша система должна давать графическое представление о границах и размерах сайта.
Небольшая карта сайта. Она позволяет быстро сориентироваться с размерами сайта и перейти к интересующему пользователя разделу. Когда пользователь наводит указатель мыши на одну из маленьких пиктограмм, она выделяется цветом, и появляется надпись с краткой информацией о содержимом раздела. Иерархия навигационных цепочек указывает на раздел сайта, в котором вы находитесь на данный момент.
Часто разработчики забывают сделать ссылку для возврата на главную страницу. Пользователь уже достаточно глубоко забрался в дебри вашего сайта, нашел интересующую его информацию, и тут он осознает, что единственный способ вернуться на главную страницу — снова ввести его URL адрес.
Часто логотип компании, размещенный в верхней части страницы, используется в качестве ссылки для возврата на главную страницу Опытные пользователи будут пытаться щелкнуть на логотипе для перехода к главной странице. Однако для новичков изображение логотипа на странице ни о чем не говорит, это просто фирменный знак и ничего более.
Для возврата на главную страницу я советую добавить отдельную кнопку к вашему набору элементов навигзцип Обычно такую кнопку добавляют к вторичным или дополнительным элементам навигации.
Хотя повторное использование графики с точки зрения кеширования браузером звучит заманчиво, но не стоит применять одно и то же изображение для кнопки на одной странице и для эффектного заголовка— на другой. Например, если вы взяли пиктограмму для кнопки, которая осуществляет переход к разделу с информацией о компании, не используйте ту же графику лишь для того, чтобы как-то украсить заголовок. Иначе пользователи подумают, что это снова кнопка. Следует немного изменить графическое оформление пиктограммы, чтобы сигнализировать о смене функции этой пиктограммы.
Вы всегда должны по разному оформлять активные и неактивные элементы интерфейса: заголовки, изображения и т.д. Дизайн интерактивных компонентов должен намекать пользователю об их функциональности. К примеру, текстовая ссылка всегда должна отличаться по цвету от обычного текста на странице, она должна быть шбо полужирной, либо подчеркнутой. То же самое касается текстовых ссылок в заголовках. На всем сайте должен быть выдержан определенный стиль оформления кнопок.
Создайте руководство по стилю для всех элементов дизайна, которые присутствуют у вас на сайте, — для ссылок, текста, заголовков разных уровней, кнопок, табличных элементов, маркеров списка и т.д. После того как пользователь осознает принцип организации вашей системы, ему будет гораздо проще работать с Web-сайтом.
Еще один мой совет — создавайте однотипные элементы. Если вы когда - нибудь проходили логические тесты, то помните задание, в котором нужно было выбрать лишний предмет, непохожий на остальные. Это чудесная аналогия с дизайном пользовательского интерфейса.
Однотипность должна быть не только в графическом оформлении навигационных элементов, но и в их расположении на странице и логическом объединении в группы. Ваши главные, вторичные и дополнительные элементы навигации должны всегда располагаться на странице в одном и том же месте. Кроме того, в каждом из наборов навигационных элементов ссылки должны иметь одинаковую функциональность и приоритет. Например, если вы реализовали такие функции, как “просмотр карты” и “просмотр календаря”, нужно их сгруппировать, оформить в одном графическом стиле и отделить от других навигационных элементов.
Хороший интерфейс остается однотипным для всего сайта. Пользователи свыкаются с расположением кнопок и помнят, где их можно быстро найти. Интерфейс становится очевидным для пользователя, который наконец - то может сосредоточиться на содержимом страницы.
Если вы меняете расположение кнопок от страницы к странице, есть вероятность, что пользователи не найдут нужную им кнопку, а если и найдут, то подумают, что ее функции изменились (даже если надпись на кнопке не поменялась). Пользователь проигнорирует такую кнопку и продолжит поиски.
Порой заказчики просят сделать сайт, на котором вы должны смоделировать какую-либо местность или поведение объекта, или создать у пользователя впечатление просмотра фильма, или имитировать видеоигру. Например, заказчик детского сайта представляет себе основной интерфейс в виде трехмерной игровой площадки.
Хотя метафоры реальной жизни позволяют создать интересные решения по дизайну сайта, они налагают и очень серьезные ограничения. Например, вы хотите сделать интерфейс, напоминающий экран цифровой камеры с хромированными кнопками. Однако это сразу уменьшает видимую область содержимого.
Не подходите к метафорам слишком буквально, подумайте сначала о какой-то теме, идее или сюжете. Например, тема “придерживайтесь своего стиля” может воодушевить вас на интересные дизайнерские решения, реализацию возможности выбора пользователем звукового сопровождения сайта, разработку уникального оформления — включая наименования навигационных элементов. Кроме того, сформулированная тема может расширить выбор используемых на сайте медиа- компонентов, например брошюр, электронной почты, простых баннеров и т.д.
Благодаря разному цветовому оформлению основных разделов можно упростить ориентирование пользователей на сайте. Цветовые обозначения особенно эффективны, если у вас небольшое количество разделов, каждый из которых имеет объемное содержимое. Например, у корпоративного сайта есть электронный магазин, цветовое оформление которого отличается от оформления основного сайта. Или другой пример — сайт форума, на котором обсуждается несколько разных тем. Каждая тема обозначается своим цветом. Поэтому посетители сайта, прочитав раздел с описанием сайта, уже знают, какое цветовое оформление их интересует.
Если вы решили использовать на своем сайте цветовые обозначения, убедитесь, что выбранные вами цвета одинаковы по яркости и хорошо сочетаются. Никогда, например, не используйте набор из пяти цветов, где все цвета одинаково темные и мрачные, а один цвет— ярко-желтый. Если вы это сделаете, то не сможете впоследствии применить одну и ту же стратегию дизайна для всех разделов. Использование ярко-желтого предполагает наличие темного текста, а мрачные темные тона — наоборот — предполагают наличие светлого текста.
Цветовые обозначения эффективно используются лишь в случае, если у вас немного основных категорий. Если число категорий достаточно велико, очень трудно будет подобрать хорошо сочетающиеся цвета и к тому же отличные друг от фуга, чтобы не потерять весь смысл применения цветовых обозначений.
# ЧИТАЙТЕ ЕЩЁ:
Услуги юзабилити — реальный способ заставить свой бизнес развиваться
Внутренняя перелинковка – результаты эксперимента
Интернет технологии CPA (Cost per action)
Сервис WEB - аналитики Google Analytics
Можно выучить JQuery без JavaScript?
Веб-сайт рекламного агентства
7 бессмертных SEO-мифов
Фриланс: проблема доверия между заказчиком и клиентом
Копирайтинг - плюсы и минусы работы
Основные правила фриланса
Разработка сайтов - вёрстка, макет, дизайн
Как заработать на фрилансе?
Что такое уникальный текст?
Создание сайтов WEB сайтов и HTML