Ошибки при дизайне сайта

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

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

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

Ошибка №1. Стильно, ярко, но непонятно и неуместно

В чем ошибка?

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

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

Здесь плохо всё и такого креатива не должно быть вообще, иначе репутацию компании будет не спасти

Как нужно делать?

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

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

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

Ошибка №2. Плохо продуманная навигация

В чем ошибка?

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

Основные ошибки:

Меню расположено не вверху, как привык пользователь, а внизу.

Как нужно делать?

Важно помнить такие правила, касающиеся навигации на сайте:

Меню расположено удобно, информация в нем хорошо считывается, названия разделов понятные

Ошибка №3. Никак не обработанные фото со стоков или сделанные на телефон

В чем ошибка?

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

Картинки в разном стиле, с разными фонами и выглядят плохо

Как нужно делать?

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

Ошибка №4. Отсутствие свободного пространства

В чем ошибка?

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

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

Неровное расстояние между столбцами, слишком много мелкого текста, небольшое расстояние между блоками

Как нужно делать?

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

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

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

Ошибка №5. Сложные формы регистрации, которые нужно долго заполнять

В чем ошибка?

Часто этим грешат дизайнеры, которые делают дизайн для интернет-магазинов. Им кажется, что чем больше информации они запросят сразу, тем лучше будут знать клиентов (и в итоге смогут превратить их в постоянных и лояльных), но это так не работает. Когда человек видит, что на заполнение формы у него может уйти больше 10 минут, он просто выходит из сайта и идет к конкуренту, где на это уйдет до 2 минут.

Слишком много данных, которые нужны для регистрации прямо здесь и сейчас

Как нужно делать?

Идеально, когда в контактной форме есть максимум 4 строки, еще лучше 2. Обычно это имя и какой-то из контактов (телефон, почта). Оптимальное время на заполнение формы — 2 минуты. Если это интернет-магазин, то следует разделить форму на несколько блоков (основная информация о клиенте, способ доставки, способ оплаты, прочее), но на оформление заказа все равно не должно уходить больше 5 минут.

В форме 4 строки — как раз оптимальное количество, одно из полей в виде выпадающего списка, что очень удобно, на заполнение уйдет 1-2 минуты

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

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

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

Статью мы разбили на 2 части, в первой части поговорим про ошибки в проектировании сайтов (UX), а во второй уже про визуальный дизайн (UI) — всё, что касается красоты.

Ошибки юзабилити сайта (UX)

Начнем с недочетов, которые существенно сказываются на удобстве для пользователей.

1. Отсутствие реального контента

Да, вам не показалось — бывают сайты без реального контента. Настоящий контент на сайте важнее, чем кажется. Прошли времена, когда можно было добавлять стоковые «вылизанные» фотки и смотрелось красиво.

Сейчас посетители сайта хотят видеть настоящий работающий бизнес, а стоковые картинки и «рыбный текст», наоборот, отталкивают. Из-за использования таких элементов возникает ощущение, что сайт ненастоящий и бизнеса за ним нет.

Сайт со стоковыми картинками и водянистыми текстами может собрать любой студент.

А для размещения реального контента. Не все могут сфотографировать свое производство, показать сотрудников, склады и офисы.

Без реального контента — нет доверия. А без доверия — нет продажи.

Какой реальный контент мы советуем размещать:

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

2. Игнорирование поведенческих паттернов

В проектировании интерфейсов есть понятие — поведенческий паттерн. Грубо говоря, паттерн — это привычный способ взаимодействовать с интерфейсом. Еще короче паттерн — это привычка.

Например, пользователи привыкли, что ссылкой на главную страницу сайта является логотип. А раньше для этого использовали отдельный пункт меню «Главная». Это стало паттерном, и все его используют. Больше на сайтах нет ссылки «Главная».

Или также привыкли к тому, что ссылка на «личный кабинет» и корзину располагается в правом верхнем углу или где-то неподалеку.

Обратите внимание на маркетплейсы — они как будто все одинаковые. Отличаются лишь мелочами. Всё дело в паттернах.

Если пользователи привыкли пользоваться условным Wildberries или Ozon, для чего Яндекс Маркету выдумывать что-то новое — лучше взять готовые решения у конкурентов. И делается это не от лени: когда пользователь видит знакомый элемент, он знает, как с ним взаимодействовать.

Нажимает посетитель сайта на товар и добавляет в корзину. Он знает, что в разделе «Корзина» появится этот товар. Также он знает, что может его оттуда удалить. Потому что он привык к такому поведению элементов.

А если мы будет выдумывать свои новые элементы и придумывать своё им поведение — пользователи не захотят разбираться с тем, как это работает, и просто уйдут на тот сайт, где всё знакомо и понятно.

Но мы всё равно часто встречаемся с тем, что на сайтах придумывают новые неведомые элементы и изобретают без нужды велосипед.

Хороший сайт — понятный сайт.

3. Никакая адаптивность

Писать про адаптивность в 2022 году уже стыдно 🙂 Но неадаптированные сайты встречаются так же часто, как и 5 лет назад. Сейчас распространение мобильный устройств достигло такого размаха, что почти каждый сайт просто обязан корректно отображаться на мобильных устройствах.

Например, на нашем сайте количество просмотров с мобильных устройств составляет чуть больше половины.

Если мы не будем адаптировать сайты для телефонов и планшетов — то мы возможно потеряем половину клиентов!

Проектирование мобильной версии возможно даже важнее, чем десктопной. А по сложности точно сложнее, ведь продумать и разместить весь необходимый функционал — задача не из простых. Если вам необходимы подобные доработки — обращайтесь. А мы идем дальше.

4. Перегруженные формы

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

Нужно такси? Нет времени разбираться — скажите стоимость и поехали.

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

Мы перестаем заводить себе «личные кабинеты» — они генерируется автоматически при регистрации.

А на прогрессивных сайтах для регистрации достаточно вбить номер телефона и подтвердить вход по SMS.

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

5. Сложная навигация

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

Сейчас с таким изобилием проще найти похожий товар у конкурента, чем пытаться найти нужное на сложном сайте.

Не заставляйте пользователей думать — вытащите всё самое нужное в меню. Используйте для этого системы аналитики. И не забудьте добавить альтернативу в виде поиска по сайту.

6. Отсутствие призывов к действию

Призыв к действию или CTA (Call to action) — это элементы сайта, призванные подтолкнуть пользователя и показать ему, где и что он может сделать: тут заказать звонок, там скачать прайс-лист, а здесь рассчитать стоимость.

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

Главное, будьте честными: если предлагаете калькулятор с расчетом стоимости — не обманывайте пользователя, выдавая вместо обещанного результата форму с запросом номера.

«Покупатель не дурак — покупатель твоя жена» — сказал однажды Огилви.

Ниже пример сайта, которому не достает призыва к действию.

7. Никаких социальных доказательств

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

Но чтобы у вас купили, посетители должны увидеть, что у вас УЖЕ покупают.

Для этого существуют такие элементы сайта, как:

• отзывы
• кейсы (портфолио)
• список клиентов
• грамоты и достижения
• цифры статистики

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

8. Перегруженность рекламой

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

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

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

Ошибки визуального дизайна сайта (UI)

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

9. Визуальная иерархия и акценты

Для UX-дизайнера (проектировщика) главное на сайте — это помощь в решении задач пользователя. Для UI-дизайнера это же становится приоритетной задачей. Для этого дизайнер должен грамотно расставить акценты и навести порядок на странице — тогда пользователь быстрее разберется, где что находится и что он сможет сделать.

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

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

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

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

Хороший сайт можно прочитать по заголовкам. Плохой сайт — тот, где надо читать, вникать и разбираться.

«Не заставляйте меня думать» — говорит Стив Круг в названии своей книги о юзабилити.

К примеру, этому сайту требуется расстановка акцентов, сейчас элементы примерно одинаковые.

10. Сетка и выравнивания

Сайты строят по модульной сетке. Сетка — это линеечки, по которым выравнивают и размещают элементы на сайте.

Сетка важна, и ей пользуются большинство веб-дизайнеров, кроме совсем новичков.

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

Пренебрежение сеткой также усложняет адаптацию макета страницы под мобильные устройства.

Сетка и выравнивание элементов относительно друг друга — это то, что формирует опрятность сайта. Такой ресурс, как мятые брюки — вроде сносно, но впечатление портится.

Взгляните на пример: тут элементы сайта располагаются не в случайном порядке, а по сетке.

11. Перебор с декором

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

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

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

Но сайты с «красотой» всё ещё попадаются. Если что — не надо так

12. Несовременный стиль

В веб-дизайне так же, как в дизайне интерьеров и в дизайне одежды, есть определенные стили.

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

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

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

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

13. Разнобой/нарушение стиля

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

Так и хочется спросить дизайнера: «что забыла эта великолепная антиква на сайте про тяжелое машиностроение?».

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

Ну и про гармонично подобранную цветовую гамму тоже забывать не стоит. Сочетайте сочетаемое и не сочетайте несочетаемое. Используйте свои фирменные брендовые цвета на сайте, чтобы поддержать целостность бренда. Вы можете представить, чтобы МТС сделали сайт в зеленом цвете?

14. Слепое следование трендам

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

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

Это скорее не даст вам результатов, но может запутать постоянных посетителей сайта.

Цвет года — это скорее относится к миру моды, а у нас тут IT и высокие технологии.

Из трендов стоит брать, то что вам принесет пользу, сами по себе тренды бесполезны. Лучше поработать над базовыми вещами: SEO-оптимизацией, улучшением юзабилити, копирайтингом и наполнением.

15. Визуальный шум

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

Визуальный шум — это излишнее использование теней, обводок, линеек и оттенков.

Правило такое, всё что можно убрать без потери смысла — убираем.

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

До сих пор дизайнеры грешат излишним использованием подобных элементов. Всё вычищайте, убирайте, сокращайте — повышайте информативность.

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

Вывод

На этом всё, давайте подытожим, какие ошибки часто встречаются на сайтах:

Ошибки юзабилити (UX)

• отсутствие реального контента
• игнорирование поведенческих паттернов
• никакая адаптивность
• перегруженные формы
• сложная навигация
• отсутствие призывов к дейсвтию
• никаких социальных доказательств
• перегруженность рекламой

Ошибки визуальные (UI)

• визуальная иерархия и акценты
• сетка и выравнивания
• перебор с декором
• несовременный стиль
• разнобой/нарушение стиля
• слепое следование трендам
• визуальный шум

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

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

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

1. Цветовой профиль

Проблема с цветовыми профилями чаще всего возникает из-за отсутствия понимания у дизайнера, что же такое цветовой профиль и как его выбирать. Наиболее часто встречаются профили Adobe RGB (1998) и sRGB IEC61966-2.1 (далее просто sRGB), о которых можно почитать, например, здесь.

Для веба, как правило, используется профиль sRGB — он является профилем по умолчанию, например, в ОС Windows. Это значит, что мы видим изображение на экране в цветах, определенных стандартом sRGB IEC61966-2.1. Разница между Adode RGB и sRGB заключается в ширине цветового спектра.

В чем же проблема? Дизайнер, создавая в Photoshop новый проект, не указывает цветовой профиль, и, как следствие, Photoshop оставляет значение по умолчанию — Adode RGB. В свою очередь, верстальщик, получив макет, нарезает его, и в какой-то момент замечает, что цвета в макете и на свёрстанной странице отличаются на несколько тонов.

Что же произошло? Еще на стадии сохранения нарезанных изображений, верстальщик воспользовался замечательной функцией Save for Web & Devices, которая по умолчанию выполняет преобразование изображения в sRGB. В итоге мы видим одни цвета в рабочем пространстве Photoshop и совсем другие на готовом сайте.

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

Решение проблемы — всегда при начале работы убеждаться, что установлен правильный профиль.

2. Направляющие

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

Почему так получилось? При близком рассмотрении видно, что направляющие сами не привязываются к границам пикселей, соответственно, когда дизайнер «на глаз» ставит направляющую, то, скорее всего, она не попадёт ровно между пикселями

Выделение, наоборот, привязывается к пикселям:

Даже если верстальщик был внимателен и заметил это, то все равно встаёт вопрос: куда всё таки дизайнер хотел поставить направляющую — левее или правее?

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

3. Группы, слои, маски

Верстальщику необходимо отдавать именно подготовленный к вёрстке макет, а не рабочий проект весом под 100 Мб.

Что значит «подготовленный к вёрстке макет»?

1. Группы и слои проименованы: основные элементы дизайна желательно именовать в соответствии с их назначением (лучше всего латиницей)
2. Если есть сгруппированные слои, то группировка выполнена в соответствии с логической структурой страницы:
   шапка, контент, баннер, кнопка, список и т. д., и вложенность не превышает разумных пределов, а лучше вообще избегать вложенности групп.
3. Скрытые, но не играющие никакой роли в дизайне слои, должны быть удалены
4. Обрезка фотографий (скругление углов и т.п.) должны производиться с сохранением исходных изображений — лучше всего делать это с помощью масок
5. Размер холста должен соответствовать максимально возможной ширине/высоте дизайна

4. Цвета

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

Что за ерунда? И так ведь понятно, что цвет одинаковый.
Но не тогда, когда, например, цвет одной надписи отличается от другой всего на половину тона. Придирчивый заказчик может запросто испортить верстальщику, выбравшему неверный вариант их двух возможных, настроение до конца дня, если заметит эту разницу. А дизайнер по факту будет не при чём.

Совет дизайнерам: используйте палитры или каким-либо образом заготовленные наборы цветов, чтобы избежать разногласий.

5. Трансформации, фигуры

Прошли времена вёрстки скругленных уголков картинками. Каждый уважающий себя браузер умеет скруглять углы с помощью CSS-свойства border-radius, чем и пользуются верстальщики.

Но порой встречаются дизайн-макеты, в которых скругления «не совсем округлые». Что это значит? Просто дизайнер в какой-то момент изменил размер своего скругленного прямоугольника с помощью функции Transform, изменив его пропорции. В результате углы оказались вовсе не скругленными, а «овальными».

Само собой, верстальщик не станет из-за этого нарезать блок картинками. Но это говорит о ненадлежащем отношении дизайнера к работе.

Решив вопрос скгругления углов, верстальщик вновь столкнулся с проблемой:

Когда речь идет о pixel-perfect вёрстке, подобные неточности в дизайне могут доставить немало хлопот верстальщику. В данном случае левый край блока имеет нечёткую границу, а из-за этого невозможно точно определить ширину блока.

Для предотвращения нечеткости границ фигур в Photoshop 13 есть специальная опция «выровнять края».

6. Единицы измерения, символы, абзацы

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

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

Если Вы изменили размер текста с помощью Transform, то после этого кегль или другие свойства символа могут принять дробное значение (например, 14.5 px). При подготовке макета к вёрстке обязательно нужно привести все размеры к целым значениям. В противном случае перед верстальщиком вновь встанет дилемма: 14 или 15 пикселей?

Что касается выключки строк (выравнивания), то дизайнеру следует помнить: браузеры полноценно поддерживают лишь 3 варианта: по левому краю, по правому краю или по центру. Выключка по формату в браузере зачастую сильно отличается от того, что мы видим в Photoshop.

7. Параметры наложения, стили слоя

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

Посмотрим, какие стили слоя в Photoshop имеют полную или частичную возможность реализации с помощью CSS (без использования картинок):

• Тени и свечения (внутренние и внешние)
  text-shadow — тень для текста
  box-shadow — тень для блока
• Обводка
  border — обводка линией
  box-shadow — возможна обводка однопиксельной тенью
  outline — строго прямоугольная обводка
• Заливка
  background-color — заливка цветом (возможно полупрозрачным)
  background-image — заливка узором/картинкой
  background-image: linear-gradient() — линейный градиент
  background-image: radial-gradient() — радиальный градиент
• Прозрачность
  opacity — прозрачность элемента целиком
  [color:] rgba(r,g,b,a) — прозрачность rgb-цвета, где a — степень непрозрачности от 0 до 1
  [color:] hsla(h,s,l,a) — прозрачность hsl-цвета, где a — степень непрозрачности от 0 до 1

О поддержке браузерами того или иного свойства можно узнать здесь.

Стоит помнить: браузеры не поддерживают ни один из режимов наложения, такие как Overlay, Screen и др. Это необходимо обязательно учитывать и при необходимости обходиться нормальным режимом наложения в сочетании с прозрачностью и градиентами.

Подводя итог

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

25 мая 2016 г.
10 самых распространенных ошибок веб-дизайна

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

1. Непродуманный макет

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

Чтобы основные ошибки веб-дизайна не попали на ваш следующий макет:

1. Всегда используйте сетку (grid). Она разделяет макет на вертикальные и/или горизонтальные направляющие, вокруг которых происходит построение содержимого страницы.
2. Применяйте правило двух третьих: разделите изображение на 9 одинаковых частей (3 x 3) и разместите объект, к которому требуется привлечь внимание на пересечении этих линий.
3. Придерживайтесь правила золотого сечения — вам даже не нужно делать расчеты вручную, просто воспользуйтесь одним из многочисленных онлайн-калькуляторов. Макет страницы при этом разделяется на две части, большую (a) и меньшую (b), при этом (a+b) : a = a:b.

2. Неудобная навигация

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

Помните о следующем:

1. Пользователь ожидает, что горизонтальная навигация будет располагаться вверху, а вертикальная — слева.
2. Если разделов немного, не используйте выпадающие меню.
3. Больше всего внимания привлекают пункты, которые идут вначале и в конце. Поэтому размещайте все самое важное вначале, а последним пунктом пусть будут данные для связи.

3. Непоследовательность в дизайне страниц

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

Чтобы дизайн был консистентным:

1. Используйте на всех страницах одну и ту же цветовую схему.
2. Следите за тем, чтобы расстояния по вертикали и горизонтали между элементами макета везде были одинаковыми.
3. Заголовки на разных страницах должны быть одинакового размера.
4. Не меняйте расположение навигации на разных страницах.
5. Придерживайтесь единого оформления ссылок.
6. Используйте иконки, выполненные в одном стиле.
7. Обеспечьте единство оформления форм.

4. Неудачная цветовая схема

Цвета, которые не подходят под тематику или резонируют с ней, повлияют на восприятие сайта. Используя сливающиеся цвета, вы рискуете потерять посетителя в первые же секунды:

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

1. Имеются ли у компании корпоративные цвета. Если да, то их следует использовать при создании дизайна для сайта.
2. Какая у сайта цель. Теория цвета говорит, что красный — это цвет страсти и воодушевления, он привлекает внимание и побуждает к действию, в то время как синий — цвет спокойствия и уверенности, он говорит о надежности и вызывает чувство доверия к бренду. Если вы свободны в выборе цветов, уделите время тому, чтобы подобрать те, которые максимально соответствуют цели сайта.
3. Существуют ли изображения и фотографии, которые требуется использовать. В таком случае вам понадобиться использовать цвета, которые будут хорошо с ними сочетаться.
4. Используйте 3 разных цвета. При этом рекомендуемое соотношение составляет 60%, 30% и 10%. Помните, что чем больше цветов вы используете, тем тяжелее будет создать гармоничную и сбалансированную страницу.

5. Дизайн выглядит плохо на некоторых разрешениях экрана

Этот недостаток также входит в топ-10 ошибок веб-дизайна и может проявляться по-разному: например, у пользователей с меньшим разрешением экрана появляется горизонтальная прокрутка.

Чтобы дизайн выглядел хорошо на большинстве разрешений:

1. Самые важные блоки должны находиться верху страницы, чтобы пользователям не приходилось много скроллить.
2. Проверьте, удобно ли читать текст в разных колонках, учитывая их ширину.
3. Убедитесь, что все ли элементы остаются на нужных местах и ничего не съезжает.

Проверьте, верно ли это для разных разрешений экрана в диапазоне от 800 x 600 до 1280 x 1024. Кроме того, вы можете предложить клиенту создать адаптивный сайт, чтобы эти ошибки веб-дизайна больше не беспокоили клиентов, которые заходят на сайт.

6. Отсутствие свободного пространства

Разумеется, основная, функция веб-сайта — это предоставлять информацию. Но принцип «чем больше, тем лучше» здесь не работает:

Информацию нужно подавать так, чтобы между блоками текста оставалось достаточно свободного места. Это поможет:

1. Улучшить читаемость и общее восприятие текста.
2. Привлечь внимание к тексту, просто окружив его пустым пространством.
3. Создать ощущение элегантности и открытости.

7. Слишком сложные формы регистрации

Дни, когда пользователям приходилось заполнять множество полей и по несколько раз вводить данные в поля с валидацией, давно прошли:

Делайте формы максимально простыми — дополнительные данные всегда можно запросить позже, не раздражая пользователя:

8. Неразумное использование изображений

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

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

1. У изображения должна быть цель: подкрепить идеи из текста, вызвать эмоции, объяснить принцип использования продукта и т. д.
2. Используйте изображения с реальными людьми, а не стоковые фотографии.
3. Оптимизируйте размер изображений, чтобы они загружались не слишком долго.

9. Незаметные контактные данные

Это особенно критично для магазинов — контактная информация должна быть доступна на каждой странице сайта и быть достаточно заметной:

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

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

Загляните в портфолио stfalcon.com — мы создаем сайты, которые решают проблемы наших клиентов, и будем рады разработать для вас дизайн.

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

Внешний вид

1. Много рекламы

2. Всплывающие окна

3. Отсутствие единой дизайнерской концепции

4. Ошибки верстки

5. Отсутствие логотипа

6. Реклама на коммерческом сайте

7. Автоматический запуск видео или музыки

8. Неудачная цветовая гамма и контрастность

9. Неудобное и нелогичное расположение элементов

10. Избыточная анимация

Навигация

11. Лишнее меню

12. Битые ссылки

13. Не оформлена страница 404

14. Нет «хлебных крошек»

15. Малый размер кликабельных элементов

16. Горизонтальная прокрутка

17. Отсутствие внутреннего поиска на сайте

18. Нет страниц «Контакты» и «О нас»

19. Тупиковый сценарий

Функциональность

20. Медленная загрузка страниц

21. Мгновенный запрос регистрации

22. Проблемы с формами регистрации

23. Скрытые поля ввода паролей

24. Отсутствие оптимизации для мобильных устройств

25. Нет поддержки мониторов с высоким разрешением

26. Нет «социальных» кнопок

Контент

27. Непонятно, о чем сайт

28. «Полотна» текста

29. Нечитабельный шрифт

30. «Растягивание» статьи на несколько страниц

31. Отсутствие навигации внутри статьи

32. Неактуальная информация

33. Узкая или широкая колонка текста

34. Переизбыток (или недостаток) изображений

35. «Многотекстаибукв»

Внешний вид

1. Много рекламы

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

2. Всплывающие окна

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

Сюда же относятся всплывающие окна (виджеты) с различными предложениями (подписаться на группу, купить товар, заказать обратный звонок). Если вы их используете, то дайте возможность пользователю ознакомиться с содержимым сайта (настройте отображение окон по определенному алгоритму, например, после 15 секунд просмотра страницы).

10 готовых сценариев для виджетов найдете в этой статье, а как собрать email-адреса посетителей сайта при помощи виджетов — здесь.

3. Отсутствие единой дизайнерской концепции

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

4. Ошибки верстки

Верстка должна быть «ровной», без перекосов. Текст не должен выходить за рамки отведенных блоков, изображения не должны «скакать» по разным углам. Проверьте, как отображаются страницы в разных браузерах. Некорректная верстка может существенно подпортить вашу репутацию, ведь она свидетельствует о непрофессионализме.

5. Отсутствие логотипа

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

6. Реклама на коммерческом сайте

Рекламные баннеры сторонних ресурсов или блоки контекста на страницах интернет-магазина — явление, как минимум, странное. Это может вызвать недоверие со стороны клиентов.

7. Автоматический запуск видео или музыки

Представьте, что пользователь зашел на ваш сайт с рабочего компьютера, и вдруг на весь офис раздается «Марш Мендельсона». Если вы ожидаете, что он вернется к вам позже, чтобы дослушать композицию, то на это вряд ли стоит рассчитывать.

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

8. Неудачная цветовая гамма и контрастность

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

9. Неудобное и нелогичное расположение элементов

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

10. Избыточная анимация

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

Навигация

11. Лишнее меню

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

12. Битые ссылки

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

13. Не оформлена страница 404

Не всегда удается отследить все битые ссылки, а иногда пользователи ошибаются в написании URL, вбивая адрес вручную. Если все-таки посетитель попал на несуществующую страницу, она не должна выглядеть так:

Расположите здесь интересные записи, форму поиска, рубрики, объясните, почему возникла ошибка 404. Можно также поместить интересную картинку или видео — это привлечет внимание. Подробнее о работе с такими страницами мы писали в этой статье.

14. Нет «хлебных крошек»

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

15. Малый размер кликабельных элементов

По всем ссылкам и кнопкам должно быть удобно и легко кликать. Особенно это важно для мобильной версии сайта. В противном случае человек может случайно нажать не туда и покинуть сайт.

16. Горизонтальная прокрутка

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

17. Отсутствие внутреннего поиска на сайте

Внутренним поиском пользуются не так часто, но он должен присутствовать. Особенно это касается крупных сайтов с множеством страниц. Поместить окно поиска надо на видном месте вверху страницы.

А как действовать, если по запросу пользователя на сайте ничего не нашлось, рассказали в этой статье.

18. Нет страниц «Контакты» и «О нас»

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

В этой статье — инструкция, как оформить страницу «Контакты». А здесь найдете гайд по разделу «О компании».

19. Тупиковый сценарий

Не создавайте случаев на сайте, когда у посетителей возникает вопрос: «А что дальше?». Часто такая тупиковая ситуация возникает после оформления и отправки заказа (нет уведомления о том, что заказ принят), после проведения оплаты и так далее. После каждого действия информируйте пользователя о том, что происходит и что ему делать дальше.

Попробуйте SEO с гарантией: выведем сайт в топ Яндекса и Google по целевым ключевым запросам за 30-40 дней. Если результатов не будет, вернем деньги за первый месяц работ.

Функциональность

20. Медленная загрузка страниц

Увеличение времени загрузки страницы до 7 секунд повышает показатель отказов на 30%. Если страница грузится еще дольше, то показатель отказов стремится к 100%. Медленные сайты хуже индексируются и ниже ранжируются поисковиками. Именно поэтому надо работать над увеличением скорости загрузки страниц и времени ответа сервера. Для проверки отклика страниц используйте этот бесплатный сервис от Google. Гайд по работе с ним — здесь.

21. Мгновенный запрос регистрации

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

22. Проблемы с формами регистрации

Форма регистрации — это не анкета. Десяток и более полей в форме очень часто становятся причиной отказа от использования ресурса. Практика показывает, что 2-4 поля вполне достаточно. Остальную информацию человек может ввести позже в личном кабинете.

23. Скрытые поля ввода паролей

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

24. Отсутствие оптимизации для мобильных устройств

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

25. Нет поддержки мониторов с высоким разрешением

Учитывайте движение прогресса и настройте поддержку мониторов с высоким ppi. В противном случае элементы (логотипы, пиктограммы) могут выглядеть размыто, а качественные фото — не так хорошо смотреться, как могли бы.

26. Нет «социальных» кнопок

Связь сайта с соцсетями обеспечивает дополнительный трафик. Разместите кнопки «Поделиться», «Мне нравится», и ваш ресурс начнет получать ссылки и переходы из соцсетей.

В блоге PromoPult есть подборка плагинов для кнопок соцсетей для сайтов на WordPress.

Контент

27. Непонятно, о чем сайт

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

Сайт о строительстве и ремонте? Не угадали

28. «Полотна» текста

Текст должен быть визуально привлекательным. Это не значит, что надо вставлять рамки с «бегущими муравьями», но подзаголовки, списки, блоки с важной информацией пойдут на пользу. Не делайте большие абзацы: один абзац — одна законченная мысль.

29. Нечитабельный шрифт

Красивый шрифт — не значит читабельный. Особенно этим грешат разработчики логотипов, когда название фирмы или слоган пишут витиеватым шрифтом, который разобрать сложно даже при длительном анализе.

30. «Растягивание» статьи на несколько страниц

Накрутка поведенческих факторов за счет разбивки статьи на несколько страниц — путь в никуда. Помните, что всегда найдется конкурент, у которого такой разбивки не будет. Цените время своих пользователей, и они обязательно отплатят за это.

31. Отсутствие навигации внутри статьи

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

32. Неактуальная информация

Это распространенная проблема корпоративных сайтов. Когда-то кто-то создал сайт, наполнял его какое-то время, и на этом все. В результате на сайте годами висят записи, которые давно утратили актуальность. У посетителя сразу возникает вопрос: работает ли компания? Поэтому обновляйте информацию, проявляйте активность. Это оценят и посетители, и поисковики.

33. Узкая или широкая колонка текста

Ширина поля для текста должна составлять 60-70% ширины страницы. Очень узкие колонки вытягивают текст, и их неудобно читать. Широкие колонки усложняют чтение, ведь можно потерять строку (как на рисунке ниже).

34. Переизбыток (или недостаток) изображений

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

35. «Многотекстаибукв»

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

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

Встречают по одежке

Посетитель формирует первое впечатление о сайте в течение нескольких секунд после «приземления». Он неосознанно оценивает визуальную информацию: цветовую гамму оформления страницы, изображения, расположение элементов навигации и информационных блоков. По данным издания Instant shift, 94 % пользователей не доверяют содержанию сайта и бизнесу в целом, если сталкиваются с крайне неудачным дизайном.

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

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

1. Каким не должен быть сайт

Неравнодушные люди, ведущие борьбу за качественный веб-дизайн, создали худший в мире сайт. Цель существования ресурса The world’sworst website — показать, каким не должен быть интернет-ресурс. Похоже, создатели достигли цели.

Создатели этого сайта специально допустили следующие ошибки:

• На сайте отсутствуют элементы, привлекающие внимание посетителя. Попадая на этот ресурс, пользователь тратит несколько секунд, чтобы найти визуальную или смысловую точку начала взаимодействия.
• Элементы сайта расположены хаотично. Цель существования отдельных элементов непонятна.
• Большое количество gif-анимации мешает пользователю.
• На сайте отсутствуют элементы навигации.

2. Когда gif-анимация может нанести серьезные увечья

Обратите внимание, Texterra не несет ответственности за последствия посещения сайта Afterlife. К возможным последствиям относятся головная боль, мельтешение в глазах, тошнота. Кроме того, посетив сайт, вы рискуете лишиться сна из-за попыток понять цель его существования.

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

3. Как скрыть самую важную информацию

Чтобы ни один человек не узнал военную тайну, опубликуйте ее на сайте. Возьмите пример с автора сайта Time cube. Он не стал тратить время на визуальный дизайн, ограничившись изменениями размера и цвета шрифта. Зачем тратить время на визуальную привлекательность, если сайт посвящен «новой модели реальности»?

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

4. Как заставить пользователя забыть о цели визита

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

5. Норвежцы тоже могут сделать Amazon

Норвежский аналог Amazon называется Arngryn. Видимо, норвежцы не любят тратить время на навигацию по сайту. Поэтому создатели площадки решили поместить все продающиеся товары на главной. Для удобства пользователей работает горизонтальная и вертикальная прокрутка.

6. Почему у Артемия Лебедева аллергия на креативные решения

В разделе «О нас» студии Артемия Лебедева написано, что «у них» аллергия на словосочетание «креативные решения». Природа этой аллергии становится понятной, если взглянуть на сайт Reforms.net. Креативности здесь очень много. Собственно, на сайте нет ничего, кроме креативности.

7. Не оставайтесь в 90-х

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

8. Как удивить посетителя

Предложите ему немедленно после «приземления» обновить страницу, чтобы получить самые свежие публикации. Не забудьте использовать депрессивный фиолетовый фон и ни в коем случае не позволяйте посетителю быстро понять, о чем ваш сайт. Вероятно, именно этот рецепт использовали создатели Great dreams.

9. Как причинить посетителю боль

Далеко не все цветовые комбинации причиняют физическую боль. Создателям сайта Wrdaonline удалось отыскать сочетание цветов, которое буквально режет глаза. Еще одно неудачное решение дизайнера — использование карточек для игры в «Монополию» в качестве фонового рисунка.

10. Почему фэншуй и веб-дизайн несовместимы

Даосская практика подходит для организации пространства дома, но ее нельзя использовать для дизайна сайта. Это подтверждает блог специалиста по фэншуй Jami Lin. К основным недостаткам дизайна этого ресурса относятся:

• Сложная навигация.
• Нечитабельность контента.
• Сочетание нейтрального фона с яркими разноцветными элементами навигации.

11. Как запутать посетителя

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

12. Как проверить эрудицию посетителей

В популярной игре «Угадай, кто» участники должны узнавать знаменитостей по фото. Создатели сайта DS+R предложили посетителям новый вариант этой игры. Они должны найти желаемый элемент меню по превью фотографии.

13. Когда веб-дизайн убивает искусство

Вероятно, скульптор John Procario заказал минималистический сайт, дизайн которого не будет отвлекать пользователей от фото его работ. Вот что он получил. К недостаткам ресурса относятся:

• Неудобная навигация. Кликнув на фото работы для просмотра, посетитель рискует потратить несколько минут, чтобы найти способ вернуться на главную.
• Засекреченная информация о владельце сайта и его контактных данных. Чтобы найти эти данные, пользователь должен навести курсор на автограф скульптора.

14. Как все испортить с помощью логотипа

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

15. Когда одна картинка заменяет тысячи слов

Создатели ресурса Mama’s Cheesies продают одежду ручной работы. Они написали об этом на главной странице большими буквами. Видимо, одежда выглядит не очень хорошо, так как дизайнеры нашли место для небольшой фотографии продукта только в нижней части страницы.

Зачем критиковать неудачный дизайн и изучать чужие ошибки

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

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

Как вы думаете, может ли человек без специальной подготовки оценивать предложенные варианты дизайна сайта?

Адаптация материала 27 Cringe Worthy Website Design Mistakes to Avoid.

Читайте также:

Уроки дизайна: оформляем сайт по канонам глянцевых журналов

Контент vs дизайн: что важнее?

Как улучшить сайт с помощью SEO и юзабилити: 4 мини-кейса

Интернет прошел долгий путь в веб-дизайне с 90-х годов. Помните Apple 1998 года? Или Amazon в 1999 году? Веб-дизайн значительно улучшился за последние десятилетия, но и сегодня в сети есть хорошие и плохие веб-сайты. Под «хорошим» и «плохим» мы не имеем в виду нечто субъективное, например, красивое и уродливое. Хороший веб-сайт ориентирован на пользователя. Он позволяет людям легко ориентироваться внутри себя, находить ответы или выполнять действия, например, совершать покупки. Плохой веб-сайт не ориентирован на пользователя. Это может означать, что он загроможден, его трудно просматривать, есть проблемы с доступностью или что-то еще.

Мы расскажем, что делает веб-сайт «плохим», и рассмотрим несколько примеров, чтобы вы могли избежать этих ошибок в своем собственном дизайне.

Что делает дизайн сайта плохим?

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

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

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

19 примеров «плохого» дизайна сайтов: что с ними не так

ZARA

Что не так: нетрадиционная навигация

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

Wayfair

Что не так: отсутствие визуальной иерархии.

Домашняя страница Wayfair также может парализовать пользователей — на ней слишком много всего и человек может растеряться. Основная проблема: отсутствие визуальной иерархии.

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

На домашней странице Wayfair почти все элементы имеют одинаковый размер и цвет, а также имеют похожие копии и значки. Пользователю сложно выбрать и сосредоточиться.

eBay

Что не так: сложные страницы продуктов.

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

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

Липтон

Что не так: изображения с низким разрешением

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

Madewell

Что не так: непонятная мобильная навигация

Мобильные сайты создают проблему дизайна: вы хотите предоставить посетителю все возможности навигации и информацию, не загромождая интерфейс. Мобильный сайт Madewell не совсем сбалансирован. Он чистый и гладкий, но в нем отсутствуют некоторые ключевые функции, которые влияют на путь пользователя.

Paper Source

Что не так: устаревший дизайн

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

The Room — официальный сайт фильма

Что не так: отсутствие доверия

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

IMDB

Что не так: беспорядочный макет

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

Фанданго

Что не так: нет четких призывов к действию

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

Yahoo!

Что не так: много пробелов

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

CNN

Что не так: медленная загрузка

Как и Yahoo, CNN предназначен для демонстрации контента, включая изображения, видео и текст. В результате страница становится тяжелой и загружается медленно. Настолько медленной, что Speedmonitor.io назвал его одним из самых медленных сайтов в Интернете. Согласно последнему аудиту Lighthouse, CNN требуется 4,8 секунды для отображения видимых частей страницы и вдвое больше (9,6 секунды), чтобы стать интерактивным.

Daily Mail

Что не так: слишком много рекламы
Реклама — неизбежное зло. Она гарантирует, что сайты могут предоставлять посетителям бесплатный контент, в то же время получая доход от партнерских программ и продаж продуктов. Цель — показывать рекламу таким образом, чтобы как можно меньше мешать работе пользователей. Daily Mail не выполняет эту задачу. Реклама загромождает основную часть веб-страницы, выталкивая контент вниз и затрудняя чтение.

Йельская школа искусств

Что не так: несогласованность

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

Нью-Йоркский университет

Что не так: цвет

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

Университет Луизианы

Что не так: сложная раскрывающаяся навигация

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

Craigslist

Что не так: не адаптивный дизайн

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

Hacker News

Что не так: проблема с удобочитаемостью

Камерный оркестр New Century

Что не так: непоследовательный брендинг

Камерный оркестр New Century имеет потрясающий логотип, состоящий из трех цветов: розового, синего и желтого. Эти цвета используются по всему сайту, но в разных оттенках. Например, заголовки, форма подписки и нижний колонтитул на главной странице имеют разные оттенки синего — ни один из них не соответствует синему в логотипе. На сайте есть кнопки CTA неонового розового, желтого и синего цветов. Некоторые из этих вариантов кажутся непоследовательными и непреднамеренными, что может навредить пользовательскому опыту и ослабить идентичность бренда.

ODC/Dance

Что не так: проблема с доступностью

ODC / Dance имеет ряд проблем с доступностью. Например, видео автоматически воспроизводится на главной странице. Хотя в нем должны быть элементы управления, позволяющие пользователю приостанавливать его.

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