9 примеров дизайна домашней страницы, которые работают

Опубликовано: 2020-10-11

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

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

Откройте с вашим ключевым сообщением

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

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

Источник: formsonfire.com

И добавь кое-что еще своему герою.

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

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

Источник: freshbooks.com

Выбирайте цвета, которые выделяются

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

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

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

Источник: pixelgrade.com

Используйте цифры, чтобы проиллюстрировать свои мысли

Иногда цифры могут говорить громче слов. Таким образом, вместо того, чтобы указывать, со сколькими клиентами вы работали, лучшим выбором было бы донести суть с использованием реальных цифр.

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

My Company Works демонстрирует свой опыт работы с точными цифрами, и это работает очень хорошо — в конце концов, похвастаться более чем 60 000 клиентов на самом деле не хвастовство, а скорее заявление.

Источник: mycompanyworks.com

Используйте собственные иллюстрации

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

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

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

Источник: evernote.com

Или показать немного продукта

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

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

Источник: mint.com

Хвастайтесь своими достижениями

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

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

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

Источник: jillkonrath.com

Выберите мощный призыв к действию

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

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

Например, у Startup Resources есть отличный CTA. Он включает в себя все, чем занимается бренд: присоединяйтесь к их списку рассылки, насчитывающему более 2000 предпринимателей, и получайте еженедельную кураторскую рассылку полезных инструментов, которые вы можете попробовать.

Источник: startupresources.io

Сделайте это по-своему

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

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

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

Источник: ahrefs.com

Подводя итог

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