Домашняя страница — 10 дизайнов, которые можно и нельзя делать

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

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

Сделать шаг назад

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

1 Устанавливайте близкие отношения с брендом и его клиентами

Будь то компания по производству игрушек, магазин роскошных ювелирных изделий или благотворительный веб-сайт, у каждой организации есть бренд и образ бренда, который нужно изображать. Это требует большого количества исследований и исследований, а не просто того, что может сказать генеральный директор или директор по маркетингу. Как компания представлена ​​в социальных сетях и на ее текущем веб-сайте? Что такое «культура» внутри самой компании? Какое место занимает компания в своей отрасли? KIA — это не Cadillac и наоборот. Традиционный банк не является новым и инновационным кредитором. Каждая организация имеет индивидуальность, и любая домашняя страница должна соответствовать этой индивидуальности.

Знайте клиентов — соберите профиль:

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

То, что нравится владельцу компании, может не понравиться его клиентам. Иногда бывает сложно убедить в этом владельцев компаний. В 1971 году Кэролин Дэвидсон, студентка факультета искусства и дизайна, разработала галочку Nike. Фил Найт был не в восторге от этого, но согласился попробовать. Хорошо, что он пошел с дизайнером, а не со своими первоначальными мыслями. Возможно, вам придется быть немного напористым здесь и дипломатичным в этом утверждении. Если вы не можете прийти к соглашению, предложите A/B-тестирование двух дизайнов. Доказательство тому — количество тех, кто остается дольше и тем или иным образом конвертируется.

2 Изучайте психологию визуального контента и используйте ее при разработке

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

• Внутренние реакции: У всех нас был такой опыт. Мы смотрим на главную страницу и совершенно ее любим (или ненавидим). Мы не можем точно сказать, почему, но наше подсознание реагирует на некоторые триггеры, активированные визуальным образом. Психология говорит нам, что эти типы реакций обычно активируются базовыми желаниями и потребностями — безопасностью, угрозой, комфортом, любовью, выживанием и т. д. Например, использование пасторальной или мирной водной обстановки вызовет приятное чувство, но и открытое и гладкий дизайн на самом деле способствует ощущению безопасности и защищенности, чего мы можем не осознавать.

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

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

• Настроение и тон/цвет. Дизайн должен соответствовать настроению и тону предлагаемого продукта или услуги. Большинство дизайнеров, конечно, знают это, но психология цвета играет главную роль в создании этого настроения, тона и эмоций:

3 Поэкспериментируйте с узорами; Не перебарщивайте с узорами

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

• Генеративный паттерн: это повторяющиеся паттерны — геометрические узоры, частицы и т. д. Некоторые могут быть довольно тонкими; другие могут быть смелыми и неотразимыми. Вот примеры каждого:

  Этот узор тонкий и мягкий — для французского сайта музыкальных композиций.

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

• Шаблоны данных. Многие компании продают больше абстрактных услуг, а не конкретных продуктов. Используемые фоновые узоры должны отражать это. Эти узоры могут быть вдохновлены математикой или высокими технологиями и могут дать ощущение «запредельного». Вот пример очень тонкого и минималистского шаблона данных для Optimizely:

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

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

• Анимационные шаблоны: движущиеся части могут быть очень привлекательными, и есть новые технологии, которые делают их довольно забавными и привлекательными. Кроме того, легкость, с которой дизайнеры теперь могут добавлять анимацию, заставила некоторых переборщить. Опять же, прежде чем добавлять анимацию, учитывайте аудиторию и индивидуальность компании. Вот пример от Manchester Masters Fieldwork, британской компании веб-дизайна, демонстрирующий тип анимации, которую они могут создавать. Вы не можете испытать анимацию всех циклов и движений. Это, конечно, преувеличение и было бы уместно для сайта, торгующего детскими товарами.

• Шаблоны сетки: традиционный дизайн сетки можно использовать для размещения фоновых объектов в симметричном шаблоне. Рассмотрим этот узор фоновой сетки для Aark Collective, продавца часов — идеально.

• Кровотечение: это относительно новый, но достойный элемент дизайна, подходящий для определенных типов компаний. По сути, узор начинается на странице контента, а затем переходит в сплошной цветной фон. Вот как Web Designer Depot использовал его для своего сайта.

4 Ищите уникальный способ дизайна кнопок

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

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

Custom Tshirts — британская компания, которая позволяет клиентам создавать собственные футболки. Кнопки навигации размещены на футболке вместе с другими элементами меню ниже.

5 Экспериментируйте с меню

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

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

6 Сделайте формы приятными или забавными:

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

Может быть хорошей идеей для туристического сайта.

Вот образец для британского агентства дизайна и брендинга.

7 Часто добавляйте новые материалы на домашнюю страницу; Не позволяйте этому устаревать

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

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

8 Не переусердствуйте с текстом

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

9 Попробуйте дизайн одностраничного веб-сайта

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

10 Не используйте карусели на главной странице

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

Вывод

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