Субъективно можно сказать, что сегодня многие веб-сайты являются вариациями одного и того же. Это почему? И хорошо это или плохо? Давайте посмотрим на это.
С легкодоступными платформами (37% веб-сайтов используют WordPress) и обилием бесплатных шаблонов и стоковых изображений, это неудивительно. Любой может создать прилично выглядящий сайт, если у него есть терпение и немного времени. Более того, благодаря тем же шаблонам эти сайты могут предложить относительно хороший пользовательский интерфейс. В них используются хорошо разработанные системы навигации, цветовые схемы и макеты, и это то, к чему посетители Интернета уже привыкли. Естественно, и компании, и дизайнеры одинаково понимают, что работает, и создают веб-сайты, которые следуют общим тенденциям, которые люди знают и любят.
Итак, с некоторого времени дизайнеры замечают, что веб-сайты становятся все более похожими. И когда вы смотрите на достаточно дизайнов, кажется, что в этом что-то есть.
Но что это означает для дизайнеров и владельцев бизнеса? Должны ли они пытаться выделиться? Или есть преимущества в приспособлении?
Дело в том, что на эти вопросы может не быть однозначного, научно обоснованного ответа — и уж точно не тот, который подходит для всех.
Таким образом, вместо того, чтобы слепо следовать любым советам по веб-дизайну, организациям следует стремиться изучить каждый аспект своего веб-сайта в отношении того, как он служит бизнесу.
В конечном итоге вопрос не в том, следует ли вам использовать тот или иной шрифт, макет или цветовую палитру. Напротив, это то, как эти элементы способствуют конверсии и пользовательскому опыту, как они представляют ваш бренд и как они заставляют вас выглядеть по сравнению с вашими конкурентами.
В конце концов, вам нужно выделиться, не жертвуя удобством использования — тонкий баланс, который требует времени, чтобы довести его до совершенства.
Увеличение сходства веб-сайтов можно отнести к общим эстетическим тенденциям, присутствующим во всех формах творческого самовыражения.
За последние 25 лет, когда использование Интернета стало широко распространенным, большинство разработчиков придерживались нескольких тенденций в дизайне. Фактически, основываясь на внешнем виде, эксперты смогли четко определить четыре выдающихся периода мирового дизайна. Их называли рудиментарным, хаосом, формирующим и уплотняющим. Web 1.0 — это пример рудиментарного периода, который имел отчетливый, насыщенный текстом вид. Таким же образом и современные веб-сайты следуют определенным эстетическим тенденциям.
Как видно из приведенных ниже примеров, в 2000 году два популярных СМИ, CNN и The New York Times, придерживались схожего выбора дизайна. Это логично, особенно если учесть два основных фактора. Прежде всего, в это время все еще существовали серьезные технические ограничения в отношении того, что можно было делать в Интернете. С другой стороны, цель этих двух ресурсов была одинаковой: они были нацелены на то, чтобы дать посетителям Интернета возможность читать новости в Интернете.
Но, хотя мы могли ожидать, что технологический прогресс уступит место большей оригинальности, современные скриншоты доказывают обратное. Несмотря на то, что эти две компании были сильно обновлены в соответствии с современными стандартами, сегодня эти две компании все еще используют относительно похожие макеты на своих веб-сайтах, за исключением нескольких вариаций в использовании цвета и типографики.
Причина подобного сходства может заключаться в склонности художников следовать определенным правилам того периода. Но при обсуждении единообразия и оригинальности недостаточно указать эстетические (или технологические) периоды веб-дизайна. Чтобы иметь четкое представление о том, как они появились и как развиваются, нам необходимо определить точные особенности, которые можно легко сравнить друг с другом. В связи с этим команда Гори обнаружила, что существует три ключевых маркера веб-дизайна:
меню навигации
визуальные ароматы
медиа-композиция
Со временем они будут меняться по внешнему виду в соответствии с текущими технологическими и эстетическими тенденциями. Мы можем утверждать, что они будут продолжать меняться по мере того, как мы внедряем новые технологии или формируем новые привычки в отношении того, как мы используем Интернет.
Другой фактор, который способствует тому сходству, которое мы видим на сайтах, связан с растущей доступностью руководств и курсов по веб-дизайну, которые часто являются единообразными (ммм, неоригинальными) в своих предложениях. В конечном итоге, результатом этих руководств по передовой практике стала растущая тенденция выбирать похожие визуальные и функциональные элементы, которые медленно, но верно делают Интернет странно однородным местом.
Даже крупные игроки, у которых есть значительные бюджеты на дизайн, склонны придерживаться почти идентичных эстетических решений. Это работает и выглядит хорошо, так зачем рисковать что-то менять? Просто взгляните на приведенные ниже примеры, один от AirBnb, а другой от onefinestay. За исключением меню навигации, домашние страницы этих двух компаний очень похожи.
Почему соблюдение правил проектирования — это хорошо —
Конечно, следовать тенденциям — не обязательно плохо.
Придерживаясь распространенных советов, дизайнеры создают онлайн-пространства, которые пользователям уже знакомы. Теоретически это сокращает время адаптации, поскольку пользователям не нужно тратить время на привыкание к функциональным возможностям веб-сайта.
Например, на веб-сайтах электронной коммерции значок корзины размещается в правом верхнем углу. Когда пользователи хотят оформить заказ и произвести оплату, они автоматически просматривают этот раздел страницы.
Когда единообразие становится недостатком? —
У единообразия веб-дизайна есть много преимуществ, но есть и недостатки.
Первое, что происходит, когда все веб-сайты похожи друг на друга, — это снижение активности Интернета. Согласно отчету о состоянии здоровья в Интернете за 2018 год, одна из основных областей, в которых Интернету не хватает, — это разнообразие. Не только пользователи преимущественно белые и мужчины, но и те, кто проектирует и разрабатывает страницы. Результат такого сходства означает, что требования и точки зрения маргинализированных групп часто игнорируются.
Более того, тот же отчет обращает внимание на тот факт, что крупные компании, такие как Google, могут устанавливать глобальные стандарты, которые могут быть доступны или недоступны для мелких игроков. В результате те же самые крупные корпорации получают возможность подвергать цензуре информацию или использовать Интернет в своих собственных интересах.
Почему важна оригинальность? —
Что ж, это просто. Яркая визуальная идентичность — это не просто случайный выбор дизайна. Это визитная карточка бренда. Благодаря уникальному внешнему виду любой бренд может:
стали легко узнаваемыми (вспомните золотые арки McDonald’s)
вызывают эмоциональный отклик у своей целевой аудитории (например, рождественская реклама Coca Cola)
имеют единообразное присутствие во всех онлайн- и офлайн-практиках (франчайзинги делают это особенно хорошо, в местах по всему миру, предлагающих почти идентичный опыт)
передают ценности и миссию (например, на сайте Organic Valley ясно, о чем они все)
Общие передовые практики веб-дизайна, которых следует придерживаться —
Прежде чем вы начнете думать о способах выделиться, важно знать о наиболее часто схожих функциях веб-дизайна. Вы должны понять правила, прежде чем сможете их нарушать. Следующие десять пунктов представляют лучшие практики веб-дизайна, рекомендованные экспертами по дизайну и онлайн-ресурсами.
Причины, по которым эти функции реализованы на большинстве веб-сайтов, различны. С одной стороны, некоторые из них стали стандартной практикой в ответ на обычное поведение пользователей при просмотре страниц. Подтверждающие их данные были получены либо с помощью тепловых карт, либо с помощью сплит-тестирования.
С другой стороны, другие практики стали обычным явлением, поскольку веб-дизайнеры начали искать подсказки в психологических исследованиях, изучающих поведение потребителей. Если бы определенный тип языка оказался более убедительным (например, слова, используемые в CTA), он с большей вероятностью был бы внедрен в веб-дизайн.
Наконец, некоторые советы основываются на эстетической интуиции, а также на простых фактах доступности. В конце концов, не нужно проводить эмпирическое исследование, чтобы понять, что зеленый текст на красном фоне трудно читать.
Для хорошего, ориентированного на пользователя веб-дизайна необязательно соблюдать все эти правила. Но понимание того, почему они важны, может дать вам необходимую информацию, чтобы сделать правильный выбор в соответствии с потребностями вашего бренда.
1. Размещение логотипа
Подавляющее большинство веб-сайтов размещают интерактивный логотип в верхнем левом углу. Этому стандарту соответствуют даже самые посещаемые веб-сайты мира. Причина относительно проста. В западном мире, где говорят на индоевропейских языках, люди читают слева направо. Это также влияет на их поведение в сети. Обычно они тяготеют к левому верхнему углу страницы. Размещая логотип в этой области, графические дизайнеры полагаются на привычки посетителей Интернета и используют их для демонстрации информации, которую они считают наиболее важной.
2. Навигация
Когда дело доходит до легкости, с которой пользователи могут просматривать содержимое веб-сайта, решающую роль играет хорошо продуманное меню навигации. Большинство экспертов сходятся во мнении, что наилучшей практикой является использование устоявшихся стилей, которые уже знакомы пользователям, а это означает, что у них короткий (или несуществующий) период обучения.
Простейшим из этих решений является горизонтально ориентированная панель навигации, которая используется на 88% веб-сайтов. Конечно, есть и другие популярные варианты, чаще всего это липкое меню, навигация по боковой панели, гамбургер-меню и раскрывающееся меню.
3. Изображения раздела "Герой"
По умолчанию наиболее заметный раздел веб-сайта зарезервирован для целей брендинга. Это означает, что раздел с героями, как его часто называют, обычно имеет поразительную визуализацию. Суть этих изображений в том, что они не обязательно должны представлять продукт или услугу бренда. Следуя совету, чтобы раздел привлекал внимание, дизайнеры могут выбрать изображения, не связанные с продуктом, или использовать стоковые фотографии. Для многих этот подход будет работать, но он также может выглядеть очень похожим на другие веб-сайты.
4. Типографика
По общему мнению, шрифт, используемый на любом веб-сайте, должен быть разборчивым, поэтому использование крупной жирной типографики, адекватно контрастирующей с фоном, является стандартной практикой. Лучшие шрифты для использования на веб-сайтах — это веб-шрифты.
5. Кнопки с призывом к действию
Кнопки с призывом к действию, один из основных факторов конверсии веб-сайтов, привлекают много внимания разработчиков и дизайнеров. Как правило, рекомендуется, чтобы призывы к действию были хорошо заметны, использовали короткие тексты и обучающие глаголы, создавали ощущение срочности и обращались к посетителям Интернета с помощью местоимений от первого или второго лица.
6. Макет
Согласно данным тепловой карты, большинство пользователей просматривают веб-сайты одним из трех способов, из которых F-шаблон является наиболее распространенным. Страницы продуктов часто следуют этой практике, с изображениями в верхнем левом углу и текстом справа от них, разделенными на маркеры. Возможно, лучший пример этого — Amazon, где все страницы https://zomasleep.com/product следуют этому типу макета, предполагая, что посетители сначала посмотрят на изображение, а затем продолжат читать (или, что более вероятно, бегло просмотреть) текст.
7. Пустое пространство
Большинство ресурсов советуют использовать отрицательное пространство в веб-дизайне. С точки зрения дизайна, это позволяет креативщикам получить необходимый контраст между фоном, визуальными элементами и кнопками CTA. Минималистский веб-дизайн развивает эти принципы еще дальше. Он направлен на то, чтобы убрать все отвлекающие факторы и вместо этого сосредоточиться на упрощении взаимодействия с пользователем.
8. Цветовые схемы
Хотя существует очень мало доказательств того, что психология может предсказать реакцию пользователей на цвета, многие источники предлагают использовать определенные оттенки (например, синий, зеленый, красный или оранжевый) в зависимости от предпочтений людей. Нередко можно увидеть дизайны с зелеными или оранжевыми CTA, как показано в примере Mithium ниже.
9. Скорость загрузки страницы
«Think with Google» сообщает о значительном увеличении показателя отказов, когда скорость загрузки страницы превышает 3 секунды. Поскольку дизайнеры и разработчики хотят избежать отказов любой ценой, они с большей вероятностью пожертвуют элементами страницы ради достижения более высокой скорости загрузки. Следовательно, большинство страниц будут иметь одинаковое количество элементов.
10. Оптимизация для мобильных устройств
Более 50% всего интернет-трафика в 2019 году приходилось на мобильные устройства. Это явный индикатор того, что веб-дизайн нужно разрабатывать с учетом небольших экранов. Такие инструменты, как Bootstrap, упростили эту задачу. Однако, к сожалению, ориентация на мобильные устройства может ограничивать дизайнеров, в основном из-за необходимости придерживаться сеток, чтобы сделать веб-сайты адаптивными.
Когда и как выделиться из толпы —
Конечно, дизайнеры могут пожертвовать свободой творчества, чтобы соблюдать правила и методы, которые обещают более высокий коэффициент конверсии. Но в конечном итоге такое единообразие приводит только к скуке. Только представьте, если бы все изменили свои кнопки CTA на красные, основываясь на одном тесте, показавшем, что этот цвет на 21% эффективнее зеленого.
Независимо от того, являетесь ли вы предпринимателем или дизайнером, убедитесь, что задаете правильные вопросы. Хорошее начало — понимание практик веб-дизайна, которые приводят к результатам. Следование им еще лучше. Но принесение в жертву уникальности процесса — это, в конечном счете, само саботажное решение.
Если вы хотите сделать свой веб-сайт уникальным, вот несколько способов добавить свой собственный стиль.
1. Будь собой
Ваш веб-сайт больше всего должен демонстрировать идентичность вашего бренда. Он должен быть интегрирован во все аспекты вашего сайта, от верхнего до нижнего колонтитула. Выберите визуальные эффекты, которые представляют вас, даже если они отличаются от того, что делают все в вашей отрасли, и найдите время, чтобы представиться своим посетителям.
2. Покажите свою аудиторию
Если вы хорошо провели исследование, вы хорошо понимаете свою целевую аудиторию. Один из способов выделиться — сделать эту аудиторию частью вашего бренда.
Не бойтесь использовать социальное доказательство. Отзывы работают хорошо, но контент работает еще лучше. Такая простая вещь, как добавление пользовательского контента на вашу домашнюю страницу, как это делает здесь Zoma, может дать вашему бренду преимущество над конкурентами. Тем более, что вы не будете использовать те же стандартные стоковые фотографии, которые все остальные выкладывают в Интернет.
3. Эксперимент с медиа
Вы хотите, чтобы ваша аудитория взаимодействовала с содержанием вашего веб-сайта, поэтому посмотрите, можете ли вы использовать элементы, которые стимулируют взаимодействие. Используйте видео и анимацию, и вы не только увеличите доход, но и получите уникальную возможность продемонстрировать свои продукты. Вы также можете пропустить фотографии и видео и выбрать творческие иллюстрации веб-сайтов, чтобы донести свое сообщение до дома.
4. Покажите свое истинные цвета
Хотя психология цвета может предложить понимание того, как люди реагируют на определенные оттенки, не думайте, что вам нужно придерживаться цветовой схемы только потому, что вы работаете в определенной отрасли или нише. Вместо этого стремитесь создавать гармоничный веб-дизайн с использованием фирменных цветов, которые продвигают индивидуальность вашего бренда и помогают выделиться среди конкурентов. Подумайте о том, как Pepsi и Coca Cola используют очень разные цветовые схемы, хотя их продукты относительно похожи.
5. Дайте советы
Один из лучших способов использовать веб-дизайн, чтобы выделиться среди конкурентов — это предложить что-то дополнительное. Раздел ресурсов, подобный приведенному ниже от Aura, помогает клиентам повысить ценность. Это один из верных способов привлечь их внимание, а также сделать ваш веб-сайт незаменимым инструментом.
6 . Копия
Помимо предоставления информации, копия на вашем веб-сайте должна работать рука об руку с вашей визуальной идентичностью. Убедитесь, что это соответствует вашему бренду. Если вы выбрали веселую и красочную визуализацию, не используйте формальную, надменную лексику. Будьте оригинальны, держитесь подальше от клише и всегда ищите способы дать больше.
7. UX
И последнее, но не менее важное: выдающийся веб-дизайн поддерживает конверсии и требует короткого обучения. Но это не значит, что это ограничит инновации. Один из лучших способов выделиться среди конкурентов — предоставить пользователям исключительный пользовательский опыт, даже если для этого потребуется делать что-то, чего раньше никогда не делали.
Возьмем, к примеру, Festicket. То, что изначально начиналось как веб-сайт для покупки фестивальных билетов, превратилось в единый ресурс для всех связанных с фестивалем услуг, включая проживание и транспорт.
Уникальный Интернет дизайн: следует придерживаться правил или заниматься своим делом? —
Жизнь была бы намного проще, если бы у нас всегда были правильные ответы. То же самое и с оригинальным веб-дизайном. Универсального совета, который можно применить к своему сайту, не существует. В конце концов, любой, кто предлагает вам окончательную формулу того, следует ли вам идти стандартным или оригинальным — за исключением вашей проверенной команды дизайнеров, конечно, оказывает вам медвежью услугу.
Подумайте об этом так: вы бы не попросили музыканта прекратить использовать тональность до мажор только потому, что она популярна, не так ли? Тот факт, что элемент используется обычно, не обязательно означает, что он не может быть использован в оригинальном произведении искусства. Моцарт любил использовать мажорные клавиши. Делает ли это его композиции скучными, неинтересными или плохими? Точно нет. С другой стороны, слепое следование тенденциям — тоже не выход.
Итак, как вы знаете, что делать? В конце концов, ваша миссия — найти баланс. Создавая какое-либо произведение искусства, которым определенно может быть отличный веб-сайт, вы должны сначала изучить основы. Вам нужно точно знать, как реализовать техническую деталь и как заставить стандартные методы работать в вашу пользу. Когда вы овладеете ими, вы сможете найти способы отклониться от этих стандартов, не жертвуя при этом удобством для пользователей. Конечно, вы хотите сделать выбор дизайна, который поддержит брендинг вашей компании, донесет ее миссию и ценности и понравится вашей целевой аудитории.
Если вы будете просто следить за тем, что делают все остальные, вы рискуете стать еще одним незабываемым брендом. Но если вам удастся найти способ сделать что-то новаторское, даже если это просто забавная цветовая палитра, и при этом сохранить высокий уровень удобства использования веб-сайта — что ж, в этом случае вы все делаете правильно.
Хотите действительно уникальный веб-дизайн для вашего бизнеса?
Работайте с нашими талантливыми дизайнерами, чтобы это произошло.