5 важных элементов, которые могут повлиять или разрушить дизайн вашего сайта
AsadКажется очевидным, что одностраничные сайты намного проще создавать, чем многостраничные. По правде говоря, сделать одностраничный интерфейс удобным и одновременно привлекательным зачастую бывает гораздо сложнее.
Создание дизайна одностроничника обычно не занимает в 10 раз больше времени, чем создание нескольких страниц многостраничного сайта. Сложность в том, что для помещения всего, что вы хотите сказать, в одну страницу, требуется намного больше планирования.
Конечно, вы можете создать страницу такой длины, какой захотите, но посетили начнут закрывать ее уже после третей прокрутки.
Это руководство по созданию одногостраничника сосредоточено вокруг 5 критических элементов. Не совсем так, как 5 основополагающих элементов природы: огонь, земля, вода, воздух и дух. Но предположительно близко.
Мы намерены вам их прояснить.
5 важных элементов, которые могут повлиять или разрушить дизайн вашего сайта
#1 ЦЕЛЬ: определите цель веб-сайта и стремитесь к ней
Нет смысла начинать свой дизайн, пока вы не поймете, к чему стремится ваш сайт. Исходя из этой цели, вы сможете планировать ее структуру.
Одностраничный веб-сайт должен вести пользователя к единой цели; который может быть:
- продать что-то
- представить портфолио
- объявить событие
Вы должны искать особенности, которые могут заставить посетителей быстро выйти. Это может произойти еще до того, как они ответят на призыв к действию.
Например, скорость загрузки страницы.
Интерактивные эффекты этого сайта не снижают скорость его загрузки.
Этот встроенный одностраничный BeTheme имеет статическое изображение, которое выглядит динамичным.
Крошечные анимированные элементы оживляют иллюстрацию этой страницы, ничего не замедляя.
Вот пример того, как свежий вид страницы сам по себе является преимуществом.
Эта страница прекрасно показывает пример роли, которую играют большие изображения и слайд панели в привлечении пользователей.
Вам не нужна длительная техническая речь для продвижения приложения. Яркие цвета, аккуратный эффект и действительно классная презентация помогут вам.
#2 ТЕКСТ: сведите его к минимуму и сделайте его легким для чтения
Заполните одностраничный веб-сайт текстом выше нормы, и лишь немногие пользователи потрудятся прокрутить страницу вниз. Вместо этого вам нужно свести количество текста к минимуму, сосредоточившись на жирных заголовках. Вы можете иметь короткие абзацы и списки.
Избегайте блоков текста - где угодно на странице. Разделите текст на разделы и интегрируйте их в визуальные элементы. Вы можете делать что-нибудь еще, что делает его интересным и легким для понимания.
Одностраничники, которые стоит добавить в закладки, включают в себя:
Это так интересно, что вы захотите просмотреть каждый раздел - может быть, дважды.
Пример аккуратной организации.
Основная информация хранится в верхней части страницы, а списки с маркерами помогают сделать сообщение как можно более кратким.
Еще один пример, когда большие привлекательные изображения помогают делать продажи. Здесь они сопровождаются соответствующим образом размещенными абзацами текста.
Когда автомобиль имеет статус, который делает этот бренд, больше внимания уделяется качественным изображениям, а не тексту.
#3 ВИЗУАЛИЗАЦИИ: Определите правильные образцы и разумно используйте отрицательное пространство
Люди, как правило, читают текст в виде буквы F и смотрят на визуальные элементы в виде буквы Z. Таким образом, необходимо правильно размещать текст и изображения, чтобы поддерживать поток.
Это область, где щедрое использование пустого пространства полезно для разделения разделов. Вы можете сделать текст легко читаемым и держать людей вовлеченными. Просто не переусердствуйте.
Пример того, как пустое пространство может использоваться, чтобы обеспечить чувство порядка.
Этот сайт очень креативный. Пустое пространство - это его холст.
Пустое пространство на этом предварительно созданном одностраничном сайте поддерживает порядок. Оно также заставляет различные секции казаться всплывающими.
Вот пример того, как вы можете максимально использовать несколько различных принципов дизайна, чтобы создать удивительный визуальный всплеск.
Нельзя ожидать, что страницы, рекламирующие капли в нос, будут интересные. Этот ломает стереотипы, благодаря изобретательному использованию слайдов, пустого пространства и анимации.
#4 НАВИГАЦИЯ: упрощайте навигацию и занимайтесь прокруткой
Мало что раздражает посетителей больше, чем проблемы с навигацией и прокруткой. Вы должны быть осторожны с длинными страницами. Вам необходимо разработать навигацию на своем сайте таким образом, чтобы посетители хотели узнать больше.
Хорошим подходом является использование горизонтального меню палки или меню боковой панели. Людям проще переходить к интересующим их разделам или областям одним щелчком мыши. Это противоположно иногда утомительному аналоговому подходу - прокрутке мыши.
Авто-прокрученные навигационные ссылки тоже хорошо работают. Посетитель может наслаждаться просмотром прокрутки страницы «по команде», а не переходить из одного раздела в другой.
Эти одностраничники отличаются привлекательной и удобной навигацией:
Веб-сайт этого дизайнера использует 3 различные ссылки с автоматической прокруткой.
Be Game предлагает навигацию, которая может показаться вам очень интересной.
Выделяются три вещи: цветовая схема, структура макета и способ сканирования страницы с помощью трех прокруток мыши.
Эти люди действительно хотят помочь вам быстро перемещаться по их сайту, предоставляя меню сверху и одно слева.
#5 ПРИЗЫВАЙТЕ К ДЕЙСТВИЮ: Определите правильный Призыв к Действию и не бойтесь его использовать
Кнопка CTA обычно приводит к цели веб-сайта, поэтому не бойтесь использовать ее, чтобы побудить людей к действию. В этом прелесть одностраничного сайта. Обычно он направляет людей к единой цели.
Вы обычно хотите кнопку CTA больше нормы, например если вы представляете портфолио. Но для услуг или продуктов вам может понадобиться несколько.
На этом предварительно созданном веб-сайте кнопка CTA находится на главной странице вместе с кнопкой в меню.
Две кнопки CTA, позволяют пользователям выбирать, что они хотят видеть.
На этом сайте используется простая форма для подписки с выделенной кнопкой CTA.
Reneza не возится при работе с кнопками CTA. Однако они используют их разумно и с правильным выбором цветов и размеров текста.
Подводя Итоги
Вы были ознакомлены с 5 важнейшими одностраничными элементами веб-сайта и тем, как их можно использовать. Теперь это просто вопрос практики с ними, пока вы не освоите навык.
Не обманывайте себя, однако. Эти принципы достаточно просты и понятны. Тем не менее, не всегда легко применить несколько из них при разработке длинного одностраничного веб-сайта. Если вам удобно использовать ярлык, используйте готовые веб-сайты. У них есть эти принципы, встроенные и доведенные до совершенства.
Хорошим ресурсом является Be Theme, с огромной библиотекой из более чем 60 одностраничных на выбор. Он также имеет более 400 готовых веб-сайтов всех видов, которые можно настроить в соответствии с вашими потребностями.
Источник: Designmodo
Перевод: Craftwork Design