Главная / Блог / Блог компании «БиАй Интеграция» / 60 катастрофических ошибок в веб-дизайне

60 катастрофических ошибок в веб-дизайне

На примере худшего сайта Интернета www.theworldsworstwebsiteever.com. 

  1. Пикселизированный header – заголовок должен быть текстовым, а не графическим. Только в этом случае он будет проиндексирован поисковыми системами. 

  2. Рекомендуется избегать прозрачности букв (чтобы сквозь них был виден фон). 

  3. Запрещены разные цвета букв в хэдлайне. 

  4. Анимированные звезды, как и другие анимационные картинки - это не самая лучшая идея для современного веб-сайта. 

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

  6. Более того, рекомендуется не использовать саму формулировку "Сайт находится в разработке". Лучше что-то типа «Скоро открытие».

      60 катастрофических ошибок веб-дизайна

  7. "<--" и другие текстовые маркеры - это настоящая дизайнерская бестактность.

  8. Лучше избегать примитивных url, в данном случае - new_page_1.htm.

  9. Избегайте очевидных пояснений, например, "Главное меню" (main menu). Если пользователь не знаком с понятием главного меню, то мировая паутина не для него.

  10. Лучше не использовать контент, написанный в подростковой манере. 

  11. Старайтесь избегать графических и любых других смайлов.

  12. Анимированная иконка "e-mail" очень раздражает, особенно если расположить ее в середине страницы без привязки к функционалу (после нажатия ничего не происходит).

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

  14. Фон с элементами флоры и фауны почти никогда не выглядят органично.

  15. Изображения с рамкой всегда выглядят непрофессионально.

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

  17. Табличная верстка прекрасно работает, если все сделано правильно. Представленный сайт, в свою очередь, является отличным примером того, как НЕ надо оформлять таблицы.

  18. Избегайте нелепого Javascript. Ведь если технология существует, совсем не обязательно ее использовать. Это же относится к ядерной бомбе.

  19. Выделение ссылок можно оформить качественно - без использования курсивного и жирного шрифта.

  20. Все ссылки в главном меню должны вести пользователя к соответствующему разделу.

  21. Грубая и слишком толстая граница для ячеек таблицы.

  22. Ссылка "Погода" нерабочая.

  23. Блестящие иконки "NEW" и "Updated" подойдут только в качестве стикеров для переписки с друзьями.

  24. Опция главного меню "Карты Google" содержит некорректную гиперссылку.

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

  26. Раздел "What's New" опечалил многочисленными орфографическими ошибками в тексте.

  27. Заменять "1" словом "one" или "U" использовать вместо "You" - это недопустимая ошибка для дилетантского сайта. Ни одни клиент не воспримет всерьез веб-ресурс с подобным текстом.

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

  29. Пункт меню "About TWWWE" опять-таки без ссылки.

  30. На сайте используются объекты Microsoft Word Art, которые подойдут только для школьных рефератов.

  31. Анимированная разделительная полоса назойливо дезориентирует на странице.

  32. Синий на красном - это плохая идея.

  33. Красный на синем - это плохая идея.

  34. Синий и красный на черном - это плохая идея.

  35. Другие примеры "плохой идеи" можно посмотреть в разделе "Fantastic Colours".

  36. colors_worst.png

  37. Рукописный шрифт "brush script", который используется в данном случае для выделения "The" и "Ever" в шапке сайта и для наименования раздела "Fantastic Colours". Здесь можно увидеть наглядный пример неуместного злоупотребления рукописным написанием.

  38. Англоязычные пользователи моментально заметят множество "детских" орфографических ошибок, например, в слове "COLOURS".

  39. Открытый счетчик на странице - это дурной тон в веб-дизайне.

  40. Ссылка "Shocking Pictures" ведет к разделу "Shocking Photos". Опять-таки очевидное несоответствие наименования ссылки и раздела сайта.

  41. Представленные на странице таблицы отличаются по ширине и расположению.

  42. В бонус к многочисленным орфографическим ошибкам идут грамматические неточности. Отмечу фразу "Эти фотографии ОТВРАТИТЕЛЬНО отформатированы УЖАСНО" или "These photos are SHOCKINGLY formatted HORRIFICLY".

  43. Бла-бла-бла. Нам просто не хватает еще одной ошибки до 60 J

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

  45. Вторая фотография слева также неверно отформатирована. Здесь имеет место скошенная рамка и искаженные цвета.

  46. Третье изображение уже сложнее оценить. Но если внимательнее присмотреться к закату, можно увидеть значительную зернистость. Этот дефект был получен в ходе конвертации фото из JPG в GIF.

  47. Четвертая картинка является отличным примером того, чтобы бывает, если взять фотографию малого размера и попытаться ее увеличить.

  48. Немного тонкого юмора в виде надписи "Тройной" для четвертого фото.

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

  50. Доменное имя www.theworldsworstwebsiteever.com очень длинное (вот почему мы используем www.twwwe.com).

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

  52. Повсеместно встречаются "битые" ссылки на изображения.

  53. Текстовое поле "Could we possibly do any more, said the cat" несет в себе тройной дефект. Во-первых, фраза не имеет смысла. Во-вторых, она никак не перекликается с тематикой сайта. В-третьих, надпись выполнена в качестве графического блока, хотя здесь нужно использовать простой HTML-текст.

  54. Информация о последних обновлениях сайта уместна только для блогов и новостных ресурсов.

  55. Слово "Sight" использовано вместо "site" - это действительно очень распространенная ошибка.

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

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

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

  59. Информация о количестве переходов на сайт была актуальна в 1996 году, но не сейчас.

  60. Раздел "What's New" отлично впишется в газетную сводку, но почему-то совсем не подходит для Интернета.

  61. Не менее "древним" считается объединение текстовых блоков и изображений табличной рамкой.

На этом все, хотя список можно продолжать еще долго.

Возврат к списку