Статьи

5 основных элементов для создания отмеченных наградами одностраничных сайтов

Эта спонсорская статья была создана нашим партнером по контенту BAW Media . Спасибо за поддержку партнеров, которые делают возможным использование SitePoint.

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

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

5 критических элементов, которые приведут вас к удостоенному наград дизайну

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

# 1 Цель: прежде всего — определить цель и работу сайта

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

Шаг 2 состоит в том, чтобы понять и спланировать всю структуру сайта.

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

Какой будет эта цель? Возможно:

  • рекомендовать или продавать что-то
  • объявить событие
  • представить и представить свое портфолио
  • или по любой другой единственной причине.

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

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

Бистро Агентство

Интерактивные эффекты этого сайта выше сгиба, и они не снижают скорость загрузки страницы.

Двигайся 3

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

Think Pixel Lab

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

Быть продуктом 2

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

Sheerlink

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

Be App 4

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

# 2 Текст: сведите к минимуму и сделайте его легким для чтения

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

Хорошим подходом является разделение страницы на легкодоступные разделы. Используйте визуальные элементы и текст вместе в разделе — как в следующих примерах:

Опасный робот

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

Будь Чай 3

Аккуратно организовано. Достаточно сказано.

Привет альфред


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

Быть пирожными

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

Мерседес Бенц

Когда автомобиль имеет статус Mercedes-Benz, обычно достаточно изображений высокого качества, сопровождаемых минимальным количеством текста.

# 3 Визуальные: определить правильные шаблоны и разумно использовать негативное пространство

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

Крис Коннолли

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

WeShootBottles.com

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

Быть диетологом 2

Использование этого предварительно созданного веб-сайта пустого пространства создает впечатление порядка и выделяет различные разделы.

Год Dribble в обзоре

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

Капли для носа

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

# 4 Навигация: упрощайте навигацию и занимайтесь прокруткой

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

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

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

Вот несколько примеров удобной навигации:

Серхио Педерчини

Веб-сайт этого дизайнера эффективно использует 3 ссылки с автопрокруткой.

Быть игрой

Be Game предлагает своим посетителям развлекательный подход к их навигации.

Be Landing 2

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

Brainflop

Меню сверху и слева помогают быстро перемещаться по сайту.

# 5 Призыв к действию: определите правильный CTA и не бойтесь его использовать

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

Будь парикмахером

Кнопка CTA этого предварительно построенного веб-сайта находится выше сгиба. Там также один в меню.

Искусство текстуры

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

Pyrismic

Pyrismic использует простую форму подписки вместе с жирной кнопкой CTA.

Reneza

Reneza не дурачится при работе с кнопками CTA, но тщательно выбирает цвет и размер текста.

Завершение

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

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

Хорошей новостью является то, что вы можете использовать готовые веб-сайты. Они уже включили эти 5 элементов в свои проекты. Превосходным готовым ресурсом для сайта является Be Theme. Он имеет обширную библиотеку из более чем 60 одностраничных и более 400 готовых сайтов всех видов. Вы можете настроить любой из них в соответствии с вашими потребностями.