Начиная изучать веб-дизайн, вы наверняка будите делать много ошибок. Это нормально и обучение на этих ошибках поможет стать вам хорошим веб-дизайнером. В этой статье я разбираю некоторые из основных ошибок, который делают новички, присоединившись к миру веб-дизайна.
Если знать и избегать их с самого начала — это сильно облегчит вам жизнь, и ваши посетители задержатся на сайте подольше — что всегда должно быть вашей целью!
Плохо читаемый контент
Разбейте весь текст в удобные для чтения параграфы. Стену текста трудно прочесть. Профильтруйте содержимое, действительно ли вам нужны все использованные слова. У вас есть предложение из 20 слов? Можно сократить его до 10? Краткость — ключ к хорошему тексту.
Помните, контраст — ваш друг. Чтение темного текста на темном фоне практически невозможно. Если фон вашего сайта белый, тогда цвет текста не должен быть серым, потому что его сложно прочесть.
Также убедитесь, что выбранный вами шрифт хорошо читается на разных устройствах. Красивый готический шрифт будет выглядеть шикарно на мониторе, но не будет читаем на маленьком экране телефона.
Беспорядок в файлах и коде
Разберите все файлы по полочкам и держите их в постоянно порядке. Если у вас на страничке есть картинка, положите ее в папку картинок! CSS должен лежать в папке CSS, JavaScript — в папке JavaScript и так далее.
Организованность поможет и с макетами, созданными в Фотошопе или Иллюстраторе. Убедитесь, что слои названы имеющими смысл именами. «Линия 27» не поможет вам вспомнить, что это за элемент, а «НижняяЛинияНавигации» — да. Имена пригодятся, когда надо будет собрать целый дизайн по макету.
Еще один совет по организации — сохраняя файлы, убедитесь что разрешение написано правильно, например .html или .css, и что ваш код правильно отформатирован. Используйте отступы для разделения элементов от их родителей. Онлайн можно найти бесплатные «очистители» кода, которые помогут вам отформатировать его.
Горизонтальная прокрутка
Это бесит. Не надо так.
Отсутствие ссылки на главную
Самая простая и логичная вещь — это сделать лого ссылкой на главную страницы. Таким образом у пользователя всегда есть возможность вернуться на главную с любой просматриваемой страницы. Неплохо было бы продублировать ссылку и в футере тоже.
Размещение фото и шрифтов без разрешения и лицензии
Всегда получайте разрешение на фото, которые вы используете. Храните изображение на своем сервере, а не просто копируйте ссылку с чужого сайта. Это называется хотлинкинг (hotlinking) и является воровством пропускной способности сайта, на котором находится изображение.
Может быть, тот сайт удалит картинку или поменяет ее расположение. В таком случае ваш посетитель будет любоваться на совершенно неуместное изображение или на битую ссылку. При этом когда пользователь находится на вашем сайте, другой сайт также получает просмотры, но они не настоящие.
Копирование картинки, которая вам очень понравилась, из чужого блога, сохранение ее к себе на сервер и использование ее — тоже большой косяк, если у вас нет разрешения на ее использование.
Не воруйте.
Есть куча мест онлайн, где вы можете достать картинки и многие из них бесплатны.
Те же правила работаю и для шрифтов. Если вы нашли красивый бесплатный шрифт на dafont.com, это еще не значит, что вы можете использовать его на своем сайте. Обязательно изучите рекомендации к использованию, включенные в загрузку.
Если там написано «только для личного использования», то его нельзя использовать на сайте. Обычно для коммерческого использования есть специальные указания под документацией или во включенном со шрифтом файле.
Запуск сайта без теста
Начните тестирование с проверки отображения сайта в разных браузерах. Вы можете быть любителем Google Chrome, но вам нужно, как минимум, установить Firefox, Internet Explorer, Safari и Opera, чтобы провести базовое тестирование.
Мультибраузерность не единственная вещь, которую стоит проверить. Убедитесь, что сайт выглядит одинаково на разных операционных системах, например в Firefox для Мака и в Firefox на PC.
Некрасивые или битые ссылки
Постарайтесь не использовать фразы «нажми сюда» при создании ссылки. Вместо этого название их по содержанию ссылки. Например: «Не забудьте оценить наш новый веб-курс» вместо «Нажми сюда, чтобы увидеть наш новый веб-курс».
Проверьте дважды другие страницы, на которые ведут ссылки и убедитесь, что они нормально работают. Представьте недовольство пользователя, когда они проходят по ссылке, предоставленной вами и натыкаются на 404 error.
Всплывающие окна
Никто не любит всплывающие окна. Избегайте их по возможности, особенно с учетом того, что у большинства пользователей стоит их блокировщик. Самое неудачное использование всплывающего окна — размещение там важной информации.
Большинство закроют окошко, даже не посмотрев что там, предположив, что это реклама. А если посетитель подумает, что это спам, то он покинет сайт с неприятными впечатлениями.
Использование яркой графики и музыки
Ненужное мерцание текста, анимированные гифки и самозагружающаяся музыка могут раздражать и отвлекает пользователя.
Если вам хочет привлечь внимание к кнопке «Подпишись», не обязательно выделять ее 21 разными мерцающими цветами.
Если ваша страница грамотно составлена, с понимание того, зачем посетитель пришел на ваш сайт, то вы создали прекрасный дизайн и кнопка «Подпишись» находится в логичном и очевидном месте, без раздражающей и яркой графики. Что приводит нас к следующей ошибке…
Уход от главного
Понимание, с какой целью пользователь посетил ваш сайт — это важнейший приоритет для дизайнера. Если вы делаете свадебный сайт для пары, то дата свадьбы и жених с невестой должны быть отображены сразу же. Никто не хочет копаться в навигации, чтобы найти нужную информацию.
Заключение
Избегание этих ошибок помогут сделать сайт гораздо удобнее для пользователей и вас самих. Подумайте о сайтах, которые вы покидали в раздражении и постарайтесь избежать их ошибок. Если ничто не помогает, помните, что чем проще, тем лучше.
