Что касается меня, мне нравится отдавать приоритет функциональности сайта и удобству для пользователей. Интерфейс важен, но функциональность вашего сайта должна иметь больший вес. Вы должны ясно и логично донести до пользователя свои идеи или свой продукт. Когда вы создаете бренд, вам нужно, чтобы ваш сайт выглядел заслуживающим доверия.
Плохой дизайн сайта
Но как создать надежный веб-сайт?
Ключевой момент падает на дизайн. Даже если вы небольшой стартап, лучше найти веб-дизайнера, который поможет вам с дизайном вашего веб-сайта. Конечно, будет лучше, если веб-дизайнеры смогут сотрудничать с разработчиками с самого начала с помощью хорошего онлайн-инструмента для совместной работы .
Нелегко создать хороший веб-сайт, который был бы красивым и функциональным. Опытные консультанты по UX могут помочь вам проанализировать поведение вашего целевого пользователя, создать и внедрить эффективный пользовательский интерфейс — с конечной целью вывести пользовательский опыт вашего продукта на новый уровень. Это то, что позволяет вам добиваться хороших результатов в бизнесе.
Кроме того, важно знать распространенные ошибки в веб-дизайне и способы их эффективного предотвращения. Если вы запутались, я покажу вам, как должен выглядеть хороший веб-сайт, представив 10 лучших примеров плохого веб-дизайна.
Различия между хорошим и плохим веб-дизайном
Тенденции веб-дизайна постоянно меняются, поэтому принципы веб-дизайна действительно сложно определить, однако все же существуют золотые правила, которые выдерживают испытание временем. Я проверил сотни сайтов и обнаружил несколько принципов дизайна. Это включает:
- Легкая для понимания навигация
- Правильное использование анимации
- Хорошая цветовая гамма
- Чистая планировка
- Визуально привлекательный интерфейс
- Выбор дизайна, соответствующего теме или теме
- Организация элементов дизайна и контента
Вышеупомянутые принципы — это всего лишь несколько правил веб-дизайна, но все они четко указывают на то, что хороший веб-дизайн должен быть эстетичным, простым для понимания и легким в использовании. То есть хороший веб-сайт должен обеспечивать отличное взаимодействие с пользователем.
10 лучших примеров плохого веб-дизайна
1. Арнгрен — Дизайн в хаосе и беспорядке из-за отсутствия сетки.
Я не хочу быть злым, но каждый раз, когда я это вижу, у меня действительно болят глаза. Сайт буквально размещает графику, контент и ссылки где угодно. Все элементы вместе делают сайт непонятным беспорядком.
Почему Арнгрен — это плохо спроектированный веб-сайт?
1) Самая большая проблема в том, что на сайте не используется сетка.
2) Невероятная навигационная структура.
3) Плохая типографика делает его нечитаемым.
4) Случайное использование цветов.
Сетка может сделать все на вашем сайте чистым и организованным. Он удерживает все ваши элементы на своих местах и помогает вам определить их размер, размер и пространство текста и т. Д. С помощью сетки вы можете создать последовательный, хорошо продуманный интерфейс.
Плохой дизайн сайта
Хороший пример использования сетки в веб-дизайне — все организовано.
2. Верстка — в дизайне отсутствует контраст.
Четкий и мощный контраст между элементами может помочь пользователям узнать, что является основной информацией на странице. Это помогает пользователю лучше читать и понимать информацию. На этом сайте цвет фона и цвет текста очень похожи, что оставляет очень слабый контраст. Из-за плохой контрастности текст становится нечетким для глаз. Кроме того, небольшой размер шрифта делает текст очень плохим для чтения.
Хороший веб-дизайн должен обеспечивать удобочитаемость текста и изображений. На самом деле, нетрудно улучшить читаемость, просто используйте все — цвет, пространство и размер, чтобы сделать их более контрастными. Например, хорошее использование типографики позволяет выделить важную информацию с помощью шрифтов разных размеров, а контраст между цветами усиливает визуальные эффекты.
Плохой дизайн сайта примеры
Хороший веб-дизайн с правильным контрастом должен выглядеть так:
3. Theweddinglens — Неадаптивный дизайн.
Вы всегда должны использовать среду адаптивного дизайна или принимать другие лучшие решения. Ваша веб-страница должна бесперебойно работать на мобильных устройствах, как и на веб-сайте. На этом сайте при загрузке на мобильный телефон все равно показывает целую страницу с таким убогим интерфейсом открытых текстов. У него нет мобильной версии для просмотра, поэтому его нельзя использовать на телефоне. Я просто откажусь от такого веб-сайта.
Хороший веб-дизайн — адаптивный дизайн.
4. Pacific Northwest X-Ray Inc — неприятная цветовая гамма.
Этот веб-дизайн похож на смешанную цветовую палитру, которая содержит множество конфликтующих цветов и цветов текста, а также смешана с цветом фона. Все это затрудняет чтение пользователями. К тому же навигация довольно сложная.
Хороший веб-дизайн должен правильно использовать цвета, чтобы создать красивый и лаконичный интерфейс и атмосферу. Это должно облегчить взору пользователя и заставить работать без усилий, как этот:
Подробнее о цветовой схеме: Как разумно использовать цвет в дизайне пользовательского интерфейса, чтобы создать идеальный интерфейс?
Самая большая особенность навигации для веб-сайта очевидна. Когда пользователь входит на ваш сайт, он / она должны понимать, что они могут делать дальше и какие действия предпринять, чтобы добраться до места назначения. Навигация должна быть привлекательной и часто должна располагаться вверху страницы. Не пытайтесь создать навигацию как на этом сайте. Это только сбивает пользователя с толку.
Кроме того, содержимое навигации и взаимодействия также должны быть четкими, поэтому не используйте горизонтальную полосу прокрутки или другой необычный дизайн анимации. Если вы это сделаете, вы должны хотя бы дать пользователю несколько подсказок, чтобы он узнал, как работает ваш сайт.
Хорошая навигация по веб-дизайну должна выглядеть так ：
6. Uat — Плохая ссылка и неправильные настройки CTA.
Беспорядок ссылок и мертвые ссылки — это основные ошибки веб-сайта. Вам следует проверять свои ссылки вручную или часто использовать такие инструменты, как Проверка ссылок на веб-сайты.
Также нужно убедиться в работоспособности ссылок. Особенно ссылки в тексте, вы должны сделать их достаточно очевидными и удобными для нажатия. Например, не добавляйте в текст много текстовых ссылок. При просмотре текста на небольшом экране мобильного устройства пользователям будет сложно перейти по правильной ссылке.
На этом сайте каждое движущееся маленькое изображение на самом деле является ссылкой. Оставьте в покое, он все время движется, сам текст очень расплывчатый, поэтому пользователь не знает, какая информация отображается.
Настройки CTA тоже должны быть ясными. Не давайте пользователям слишком много вариантов призывов к действию на одном уровне, потому что это будет стоить пользователю больше времени, чтобы понять, какой из них они предпочитают выбрать. Взгляните на пример:
Слишком много призывов к действию одного уровня запутают пользователя. Кроме того, вы должны оставить только один призыв к действию, чтобы выделить ключевой момент. Ниже приводится хорошо продуманный призыв к действию.
7. Nmg-group — Непонятный фон изображения интерфейса.
Изображение, которое вы используете на веб-странице, может быть входной дверью вашего веб-сайта. Красивое изображение сделает ваш сайт красивее и удобнее. Некоторые дизайнеры даже используют всю картинку в качестве фонового изображения.
На этом сайте дизайн действительно очень хорош, но если присмотреться, вы обнаружите, что текст и фоновые изображения слишком перегружены. Фоновое изображение веб-сайта покрыто другими элементами, поэтому весь интерфейс фактически не работает.
Здесь лучше использовать прозрачные кнопки. То есть при разработке кнопок на веб-странице следует отказаться от сложных цветов, стилей и текстур. Вместо этого просто обведите каркас и используйте текст, указывающий только на функцию. Вот вариант получше.
8. Wateronwheels — непоследовательный стиль.
Если вы хотите, чтобы страница была гладкой и лаконичной, не используйте слишком много элементов разных стилей. На этом сайте в текстовой области используются контрастные цвета и разные размеры шрифта для выделения информации. Но текст на втором уровне также использует выделение синего цвета, что фактически нарушает единство и сбалансированность иерархического интерфейса.
Единство имеет решающее значение для общей красоты и плавности веб-интерфейса, см. Ниже:
9. Великие мечты — без пробелов.
Весь сайт выглядит красочно, контрастно и эффектно, а также соответствует тематике детских соков. Но очень много слишком ярких цветов слишком смешано и совсем нет места. Он больше похож на красочную картину, чем на бизнес-сайт в Интернете. Кроме того, сочетание преувеличенных цветов ухудшает читаемость текстов. Более того, на сайте не было никакой навигации, поэтому вы могли прокручивать вниз, чтобы найти нужную информацию.
Хороший веб-дизайн с пустым пространством прост и понятен:
Выше приведены некоторые списки плохих веб-сайтов. Но существуют и другие ошибки веб-дизайна:
1. Автоматическое воспроизведение музыки (без уведомления пользователя).
2. Длительное время загрузки страницы . Чем больше времени потребуется на загрузку, тем больше вероятность того, что пользователь покинет ваш сайт.
3. Веб-страница слишком длинная . Как вы думаете, сколько пользователей заинтересованы в том, чтобы пройти весь путь до конца вашей страницы? Не пытайтесь проверить терпение пользователя.
3. Просроченная информация . Необновляемая информация введет пользователя в заблуждение и сделает ваш сайт непрофессиональным.
5. Изолированная страница . Пользователь не знает, как вернуться на главную страницу. Это плохой опыт.
6. Отсутствует интерактивный контент. Если вы не можете предоставить пользователям возможность выражать эмоции и идеи, ваш веб-сайт может медленно умирать.
Дизайн прототипа — первый шаг к веб-дизайну
Ничего страшного, если вы виновны в некоторых из ошибок, упомянутых выше. Практика ведет к совершенству, вам просто нужно больше практики. Я предлагаю начать с прототипа.
Вы можете использовать более быстрый и простой инструмент для создания веб-прототипов — Mockplus , чтобы начать свой веб-дизайн. Mockplus поддерживает веб-проекты. Теперь я покажу вам, как создавать веб-страницы в Mockplus.
Шаг 1. Откройте Mockplus и создайте веб-проект.
На стартовой странице вы можете выбрать отдельные проекты или командные проекты. После выбора выберите веб-проект во всплывающем окне. Здесь вы также можете установить размер страницы веб-сайта.
Шаг 2. Свободный дизайн в Mockplus
Mockplus содержит более 200 тщательно продуманных компонентов и более 3000 векторных иконок, которые помогут вам быстро разрабатывать дизайн. Вот несколько советов для вас:
1) Иерархия текста: текст на панели навигации, в главном заголовке, субтитрах и теле должен быть другим. Вы можете использовать компоненты текстовой области и установить размер текста в Mockplus, чтобы выделить иерархию текста.
2) Быстрый дизайн: вы можете использовать средство рисования форматов и автоматическое заполнение данных, чтобы быстро закончить свой дизайн. Средство рисования формата может отображать весь текст в одном и том же формате, а функция автоматического заполнения данных может автоматически заполнять текстовые данные и данные изображений.
3) Настройки свойств: Вы можете установить цвет, прозрачность компонентов.
4) Импорт изображений: специальный компонент изображения может импортировать изображения, которые вы хотите использовать в качестве фонового изображения веб-страницы, и вы также можете свободно создавать его.
Совместное онлайн-проектирование — избегайте плохого веб-дизайна и ошибок с самого начала
Чтобы избежать плохого веб-дизайна и распространенных ошибок, упомянутых выше, дизайнерам необходимо позволить разработчикам, менеджерам по продукту и другим членам продуктовой группы участвовать в разработке веб-сайта с самого начала и своевременно собирать от них предложения и отзывы.
Удобный онлайн-инструмент для совместной работы над дизайном, такой как Mockplus Cloud, может стать для вас хорошим началом.
Как дизайнеры веб-сайтов, вы можете просто импортировать дизайны веб-сайтов с деталями ресурсов и из Photoshop / Adobe XD / Sketch (используя плагины Mockplus Cloud ) одним щелчком мыши, своевременно собирать отзывы и предложения от других членов команды и создавать интерактивные прототипы, чтобы делиться ими с другими. .
Как разработчики интерфейса веб-сайта, вы можете просто просматривать все дизайны веб-сайтов и свободно оставлять комментарии, легко искать повторяющиеся элементы и цвета, а также быстро проверять и загружать ресурсы дизайна.
Как менеджеры по продукту, вы можете просто проверять процесс проектирования, свободно загружать и предварительно просматривать документы, чтобы более эффективно управлять проектами дизайна веб-сайтов.
В целом, Mockplus Cloud может эффективно объединить весь рабочий процесс разработки продукта с самого начала и помочь вам избежать многих ошибок дизайна веб-сайтов.
Подводить итоги
Дизайн сайта должен соответствовать функциональности самого сайта. Также нужно учитывать красоту и другие требования. Я надеюсь, что приведенные выше 9 примеров плохого веб-дизайна будут вам полезны и помогут понять, что такое плохой веб-дизайн и как их избежать в будущем.
