Каждую неделю я получаю огромное количество писем от людей, которые просят меня критиковать их сайты за недостатки дизайна и удобства использования. Надеюсь, однако, что если вы используете звуковой процесс для разработки своего сайта, вам не понадобится критика.
Вот основные элементы, которые я рассматриваю каждый раз, когда проектирую сайт — используя их в качестве контрольного списка, я могу быть уверен, что я охватил все основы веб-дизайна в каждом завершенном дизайне. Попробуйте эти советы и отметьте каждую точку в списке при создании своего следующего сайта!
# 1: Выберите цветовую схему и придерживайтесь ее
Однажды во время серфинга вы решаете проверить новую ссылку. Когда он загружается в ваш браузер, вы замечаете, что домашняя страница окрашена в красный, черный и серый цвета. Затем вы нажимаете на ссылку, например, на страницу О нас, и вас приветствует желтая и зеленая страница, украшенная синим текстом.
Такая непоследовательная окраска достаточна, чтобы удержать посетителей от того, чтобы они когда-либо возвращались на сайт — это не только плохо сказывается на глазах, но и кричит об отсутствии профессионализма.
Прежде чем вы начнете кодировать свой сайт, выберите два или три дополнительных цвета и придерживайтесь их. Если организация, для которой вы создаете сайт, имеет логотип или бренд, который использует определенные цвета, вы можете рассмотреть возможность их использования. Если вы посмотрите на какой-либо сайт крупной или успешной компании (попробуйте www.coca-cola.com или www.ford.com ), вы увидите это, даже если различные подразделы сайта имеют цветовую кодировку. фирменные цвета представлены на каждой странице сайта.
Посмотрите на другие сайты, которые вам нравятся: какие цвета они используют и как они их используют? Постепенно ли они вводят цвета, или они все бьют по середине экрана, когда вы загружаете их домашнюю страницу? Я составил список пяти наиболее часто используемых цветовых комбинаций в Интернете:
- Красный, желтый и белый
- Синий и белый
- Красный, серый и белый
- Синий, оранжевый и белый
- Желтый, серый и белый
# 2: Дизайн для кросс-браузерной совместимости
Это один из самых важных аспектов для дизайнера. Никогда, никогда не применяйте на сайте функцию, специфичную для Internet Explorer или Netscape, если только она не будет использоваться только закрытой группой пользователей (например, интранетом компании).
Конечно, может быть заманчиво реализовать эффекты супер-dooper DHTML, такие как автоматическая прокрутка iFrame, но имейте в виду: те, у кого не установлен последний браузер, не будут любезно относиться к вашему незнанию их потребностей. Если вы отчаянно хотите внедрить на своем сайте летающих свиней или падающих снежинок, но при этом хотите совместимость с разными браузерами, взгляните на BrowserHawk из Cyscape . BrowserHawk — это отличный набор COM, который позволяет вам обнаруживать всевозможные вещи в браузере клиента, в том числе на том, включен ли JavaScript, а также версию и имя его браузера.
№ 3: Обеспечить интуитивно понятную, простую в использовании навигационную систему
Вы когда-нибудь были на сайте и задавались вопросом, где в мире ссылки на остальные его страницы? Доступность меню является одним из ключевых элементов в создании положительного опыта для посетителей вашего сайта.
На большинстве веб-сайтов либо отображается выровненное по левому краю меню, ориентированное по вертикали, либо выровненная по верхнему краю система меню, ориентированная по горизонтали. Опросы показали, что использование любого из этих стилей меню (или обоих вместе, если вы размещаете их в дополнительном формате) гарантированно обеспечит вашим посетителям положительный опыт работы с сайтом. Использование этих знакомых стилей позволит вашим пользователям чувствовать себя комфортно при переходе от страницы к странице, а значит, им не придется нажимать кнопку «Назад» каждый раз, когда они захотят вернуться на домашнюю страницу.
Чтобы понять, что я имею в виду, потратьте пару минут на Amazon.com . Теперь проведите столько же времени на сайте www.isonsw.com.au . Какая система меню сайта вам понравилась? Я уверен, что вы ответили на Amazon, потому что он был последовательным, простым в использовании и позволял совершенно очевидно, на какой странице вы находитесь, независимо от того, где вы находитесь на сайте. Когда вы разрабатываете новый сайт, вы должны создать прототип как минимум трех систем меню и спросить друзей, семью и коллег по работе, какую из них они предпочли бы использовать и почему.
# 4: Используйте каскадные таблицы стилей
Каскадные таблицы стилей (CSS) позволяют разрабатывать определенный набор классов стилей, которые вы можете реализовать на своем сайте. Таблицы стилей также можно использовать для изменения определенных атрибутов стиля встроенных тегов HTML, таких как выделение красного цвета тега <H1> или выделение желтого цвета фона ячейки <td> и т. Д.
Используйте цветовую схему, указанную в совете № 1, для создания различных стилей, включая жирный заголовок, стиль «важных точек» и стиль текста по умолчанию. Вы также можете изменить стиль тега привязки по умолчанию, чтобы ваши ссылки соответствовали цветовой схеме вашего сайта.
Если вы никогда раньше не использовали каскадные таблицы стилей, вот несколько полезных статей, которые помогут вам начать:
# 5: Открыть внешние ссылки в новом окне
Один легко реализуемый совет, который часто упускается из виду, заключается в следующем: убедитесь, что все ссылки, которые не ведут посетителя прямо на страницу вашего сайта, должны открываться в новом окне по умолчанию.
Когда вы думаете об этом, этот подход приносит пользу посетителю так же, как и вам самому: им предоставляется бесплатное управление для просмотра внешней ссылки с возможностью вернуться на ваш сайт, просто закрыв окно браузера внешнего сайта.
Чтобы открыть ссылку в новом окне, вам просто нужно указать значение «_blank» для целевого атрибута тега привязки ссылки. Например, вы бы использовали это …
<a target="_blank" href="http://www.sitepoint.com">Click here</a>… Чтобы открыть SitePoint.com в новом окне браузера.
# 6: Подчеркните и раскрасьте ваши гиперссылки
Большинство веб-пользователей спешат и так или иначе нуждаются во времени. Наши глаза воспринимают только определенные вещи, и они не включают гиперссылки, которые выглядят как часть тела документа. Когда вы разрабатываете новый сайт, всегда следите за тем, чтобы ваши гиперссылки были подчеркнуты, предпочтительно другим цветом, чем текст, который их окружает.
Вот выдержка из страницы, которую я получил, когда зарегистрировался в партнерской программе пару дней назад:
Регистрация прошла успешно!
Спасибо, что стали участником нашего сайта.
Детали вашей учетной записи были отправлены на адрес электронной почты [email protected].
Чтобы вернуться на наш сайт, пожалуйста, нажмите здесь.
Если вы хотите порекомендовать наш сайт кому-то из ваших знакомых, нажмите сюда.
Быстро просматривая текст, показанный в примере выше, сколько ссылок вы заметили? Если бы ты не ответил ни на что, ты бы не был одинок.
Каждый «щелчок здесь» на самом деле был ссылкой, но веб-дизайнер даже не удосужился выделить эту ссылку из остального текста вокруг нее. Посмотрите, насколько легче обнаружить ссылки, когда они подчеркнуты и окрашены:
Регистрация прошла успешно!
Спасибо, что стали участником нашего сайта.
Детали вашей учетной записи были отправлены на адрес электронной почты [email protected].
Чтобы вернуться на наш сайт, пожалуйста, нажмите здесь .
Если вы хотите порекомендовать наш сайт кому-то из ваших знакомых, нажмите сюда .
# 7: оптимизируйте ваши изображения
Одна из основных причин, по которой многие сайты работают медленно, заключается в том, что их изображения не полностью оптимизированы. Оптимизация изображений приведет к уменьшению размера их файлов, что означает, что для их отображения необходимо будет загрузить меньше данных с сайта. Вот три способа оптимизировать ваши изображения:
1. Уменьшить размер изображения:
Убедитесь, что ваши изображения как можно меньше. Обрезать любое «белое пространство» по краям — это увеличивает размер файла изображения.
2. Уменьшите количество цветов:
Многие форматы изображений, включая графический формат обмена (GIF), позволяют уменьшить глубину цвета изображения без заметного снижения его визуального качества. Если у вас есть изображение, например логотип, попробуйте использовать программу, например PhotoShop, чтобы уменьшить глубину цвета с 16 до 8 бит. Сохраните изображение и просмотрите его в своем браузере. Если он все еще выглядит четким и чистым, сохраните изображение. Заметили разницу в размере файла по сравнению с 16-битной версией?
3. Снизить качество изображения:
Если вы работаете с изображением Объединенной группы экспертов по фотографии (JPEG), вы можете уменьшить его размер, уменьшив его качество. Используя такую программу, как PhotoShop, вы можете указать величину «потерь» для изображения, что в свою очередь уменьшает его размер.
# 8: Расскажите посетителям, кто вы и чем занимаетесь
Это, вероятно, самый простой совет для реализации. Когда на ваш сайт впервые приходит новый посетитель, он хочет знать, кто вы и чем вы занимаетесь, особенно если вы продаете товары.
На вашей домашней странице у вас должен быть небольшой абзац, в котором рассказывается, кто вы и чем занимаетесь. Это повысит их доверие к вашей компании, и если у вас есть то, что им нужно, у них больше шансов остаться на месте. Вот пример для вымышленного сайта Fred-Smith-Tools.com, который продает садовые инструменты:
«Привет, спасибо, что заглянули на Fred-Smith-Tools.com. Мы находимся в Лос-Анджелесе, США, и продаем широкий ассортимент садовых инструментов, включая лопаты, инструменты для обрезки, ножницы, краскопульты и лопаты. Пожалуйста, прокрутите эту страницу вниз взглянуть на наш список ежедневных событий! «
# 9: Используйте отзывы клиентов
Отзыв клиента — это просто комментарий одного из посетителей вашего сайта, который включает в себя некоторые положительные детали их отношений с вашей организацией, такие как:
«Я нашел ваш сайт на прошлой неделе на Google.com и должен сказать, что я действительно впечатлен его макетом и вашим ОГРОМНЫМ ассортиментом продукции. Я заказал у вас компакт-диск в четверг, и он пришел прямо к моей двери на следующий день. Если бы в сети было больше таких сайтов, как ваш. Отличная работа! «
Отображая отзывы клиентов на вашем сайте, посетители могут видеть, что другие люди использовали ваш сайт или продукты, и нашли их полезными и ценными. Отзывы клиентов также являются одним из лучших способов повысить доверие посетителей к вашему бизнесу.
Чтобы отобразить отзывы клиентов на вашем сайте, добавьте в свою систему меню ссылку «Отзывы клиентов». Ссылка это на страницу, где вы отображаете все отзывы, которые вы получили от ваших клиентов. Или отобразить отзывы на боковой панели, которая ссылается на страницу со списком их всех. Чтобы на самом деле собирать отзывы, либо попросите их у своих клиентов напрямую, либо создайте форму обратной связи на своем сайте.
# 10: Предоставьте контактную информацию на каждой странице
Одним из основных источников разочарования для многих веб-пользователей является отсутствие контактных данных на многих сайтах. Если вы пользуетесь веб-сайтом, на котором продаются продукты, то многие из ваших потенциальных клиентов могут предпочесть сделать заказ по телефону, чем заказывать в Интернете. Поэтому убедитесь, что в правом верхнем углу каждой страницы указан либо адрес электронной почты для продаж, либо номер телефона для горячей линии продаж.
Полный контрольный список
Если вы веб-разработчик, попробуйте воспользоваться этими советами при создании прототипа каждого сайта, который вы разрабатываете, но имейте в виду, что эти указатели также легко применяются к существующим сайтам.
Без сомнения, по мере того, как вы будете разрабатывать больше веб-сайтов с течением времени, вы получите список собственных советов и рекомендаций по дизайну. Используйте их всякий раз, когда можете, и делитесь ими с новичками-веб-разработчиками, чтобы они не делали те же ошибки, что и вы!