Как выбрать шрифт для инфографики?
Previous
выбрать за меня
Функциональная анимация в веб-дизайне: 9 основных групп
Next
веб-дизайн, ошибки, интерфейс, юзабилити, UX, iu
Юзабилити

Создаём свой первый сайт: 10 распространённых ошибок

Самостоятельное создание собственного сайта может показаться хорошей идеей для организаций с ограниченным бюджетом. И, как правило, в таких случаях только лишь по прошествии некоторого времени — уже после того, как стартап наберет ход и добьется некоторого прогресса, — предприниматели задумываются над тем, чтобы заручиться поддержкой дизайнера. Не так ли?

Но, значение дизайна для развивающегося бизнеса куда более весомо, чем это может показаться. При запуске коммерческого интернет-проекта впечатление посетителей о нем формируется по малозаметным на первый взгляд деталям.

Новым брендам приходится разрушать сложившуюся и устоявшуюся систему предпочтений: потребители уже доверяют нескольким крупным брендам — зачем им еще один? И если в течение нескольких секунд вам не удастся их заинтересовать — они для вас потеряны.



В конечном счете какая-то неприметная деталь может стать определяющим фактором. Эти нюансы необходимо тщательно тестировать и улучшать, если, конечно, вы задались целью создать бренд, которому бы люди доверяли и который бы приносил прибыль.

В этой статье будут описаны распространенные ошибки, типичные для новичков в веб-дизайне.

1. Неправильное использование шаблонов

веб-дизайн, ошибки, интерфейс, юзабилити, UX, iu

Использование шаблонов крупным бизнесом выглядит по меньшей мере странным, но применение их небольшими стартапами, которые пробивают себе дорогу без сторонней поддержки, вполне оправдано. Если вышло так, что ваша компания относится ко второй категории, тогда не помещает подыскать хорошего дизайнера, который бы несколько видоизменил шаблон и разработал бы веб-дизайн с учетом специфики бизнеса.

Общая проблема сайтов, созданных на основе готовых шаблонов, — недостаток визуальной связи между логотипом и остальными веб-элементами. Зачастую цвета, используемые для логотипа, либо не встречаются ни в каком другом месте на веб-странице, либо же шрифт логотипа не согласуется с остальными шрифтами.

Если вы экономите на пакете программ для брендинга, тогда уж хотя бы попытайтесь добиться того, чтобы шаблон не бросался в глаза.



2. Использование шаблонов Bootstrap

веб-дизайн, ошибки, интерфейс, юзабилити, UX, iu

Другая, не менее распространенная ошибка, — использование стандартного дизайна Bootstrap. С помощью Open Sans никого не удастся ввести в заблуждение.

Добиться, чтобы веб-ресурс смотрелся выигрышно на фоне множества других сайтов с одинаковым дизайном, крайне проблематично. Единственное, что может получить ваш бренд в такой ситуации – репутационные потери.

3. Проблема контраста в веб-типографике

веб-дизайн, ошибки, интерфейс, юзабилити, UX, iu

Шрифты — одна из важнейших составляющих дизайна, которая может стать либо катализатором успеха, либо напрочь испортить весь облик сайта. Да-да, это не  “просто буквы”.

Общий недостаток кустарного веб-дизайна — малозаметный контраст между шрифтами заголовка и основного текста.

Попробуйте подобрать для заголовков более заметный и отчетливый по сравнению с основным текстом шрифт. Это поможет выстроить иерархическую структуру сайта, которая сможет стать визуальным проводником пользователя.

4. Черный фон

веб-дизайн, ошибки, интерфейс, юзабилити, UX, iu

Фоновый цвет охватывает большую часть сайта, поэтому целесообразнее подбирать его тщательнее.



На практике, совершенно черный веб-сайт никогда не смотрится на отлично, если, конечно, дизайном не занимался профессионал.

Белый цвет в качестве фона — беспроигрышная ставка, но чаще всего дизайнеры отдают предпочтение очень светлому оттенку серого. Стоит учитывать, что чем темнее серый цвет, тем менее читабельными выглядят на нем черные буквы. Лучше не выходить за рамки 15% черного в сером цвете, чтобы общий тон цветовой гаммы был светлым. 

5. Множество одинаковых CTA

некачественный веб-дизайн

На каждой странице сайта должен присутствовать один главный CTA-элемент. В противном случае у пользователей могут возникнуть затруднения и, вероятнее всего, им понадобится больше времени на принятие решений.

Попытайтесь избегать большого количества CTA-кнопок или сделать так, чтобы действия, к которым призывают эти кнопки, выполнялись без лишних раздумий.

Так, кнопка, выполняющая функцию регистрации или выбора плана, должна быть заметной, с графическим акцентом на том, каких именно действий вы ждете. Другие элементы могут быть и не столь яркими.

6. Проблемы с выравниванием и выбором пространства

веб-дизайн, ошибки, интерфейс, юзабилити, UX, iu

Оставить достаточно, но не слишком много белого пространства рядом с элементами — это, вероятно, самая сложная часть веб-дизайна. Но есть правила, которые несколько упрощают эту задачу. Во-первых, проверьте, что все элементы должным образом сгруппированы, во-вторых, оставьте достаточно белого пространства вокруг этих групп элементов.

7. Непрофессиональный копирайтинг

веб-дизайн, ошибки, интерфейс, юзабилити, UX, iu

Писать хорошо — задача не из простых. Но, качественный копирайт – необходимое условие успешного существования в интернет-пространстве.

К сожалению,  очень часто встречаются предложения, практически ничем не отличающиеся от содержимого текстов-заполнителей, которые используются на этапе разработки веб-дизайна.

8. Проблема читабельности

веб-дизайн, ошибки, интерфейс, юзабилити, UX, iu

Многие мелкие детали могут негативным образом сказаться на возможности текста быть прочитанными. Избегайте таких вещей, как слишком низкая высота строки, крошечные нечитабельные шрифты или слабый контраст между фоном и текстом.

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

9. Непоследовательность

веб-дизайн, ошибки, интерфейс, юзабилити, UX, iu

В брендинге должна прослеживаться определенная последовательность. Идеальный вариант, это когда клиенты сразу же узнают ваш бренд, где бы они с ним ни столкнулись — в соцсетях или в офлайне.

Одинаковые ли hex-коды у цветов логотипа и остальных цветов? Применяются ли те выбранные оттенки повсеместно, или же «чего-то похожего будет достаточно»? Как правило, упорядочение CSS-файлов и устранение всех ненужных кодов решает проблему непоследовательности.

10. Нельзя идти против тренда

веб-дизайн, ошибки, интерфейс, юзабилити, UX, iu

Нравится кому-то или нет, но на сегодняшний день скевоморфизм — это уже история. И любые веб-сайты с плавными переходами цветовых оттенков и тяжеловесными эффектами теней неизбежно производят впечатление чего-то замшелого и устаревшего. Редкие вкрапления 3D еще терпимы и простительны, но все же другие креативные вариации из области плоского дизайна выглядят предпочтительнее.

Реакция на статью
поделюсь
0%
интересно
0%
полезно
0%
не уверен
0%
скучно
0%
где автор?
0%
Комментарии
Оставить отзыв

    You must log in to post a comment

    ПОДПИШИТЕСЬ НА НАШУ РАССЫЛКУ!
    Уведомления о новостях, статьях и инфографике будут приходить раз в неделю.
    ПОДПИШИТЕСЬ НА НАШУ РАССЫЛКУ!
    Позвольте нам обновлять ваши знания раз в неделю.