Одностраничный сайт не оставляет места для скрытого размещения информации. Нет меню, под которым можно было бы спрятать слабые разделы, и нет второй страницы, куда можно было бы поместить то, что не удалось уместить.
Всё необходимое посетителю находится на одном свитке, в одном порядке. Этот порядок и есть весь дизайн.
Если все сделать правильно, сайт будет выглядеть как удачная рекламная кампания. Если же ошибиться, он будет похож на бесконечный поток текста.
Восемь приведенных ниже примеров одностраничных веб-сайтов демонстрируют удачные решения, хотя и по-разному. Некоторые из них — это страницы личного бренда, созданные для поиска работы. На другом сайте с помощью одной прокрутки экрана размещен целый бизнес по дизайну интерьеров.
Их объединяет четкая задача для каждого экрана. Используйте те элементы, которые подходят для вашей работы.
Что такое одностраничный веб-сайт?
Одностраничный веб-сайт размещает весь свой контент на одной непрерывной странице. Вместо того чтобы переходить между разделами «Главная», «О нас», «Работа» и «Контакты», посетитель прокручивает эти разделы последовательно.
Обычно фиксированная навигация позволяет перейти к каждому из этих пунктов. Такой сайт, также называемый одностраничным или сайтом с одной прокруткой, представляет собой простейшую структуру в интернете: один URL, одна загрузка, один путь.
Одностраничные сайты лучше подходят для целенаправленного донесения информации. Например, сайт фрилансера, предлагающего одну услугу, сайт дизайнера, демонстрирующего одну серию работ, или сайт студии, которая хочет, чтобы изображения говорили сами за себя.
Если у вас пять различных сервисов и блог на 40 постов, значит, вы переросли этот формат. Если же вам есть что сказать и вы хотите сказать это хорошо, то превзойти его будет сложно.
Наиболее сфокусированная версия формата — это целевую страницу построен вокруг одного действия, а не вокруг полноценной личной или студийной истории.
Что делает веб-сайт по-настоящему успешным (одностраничный сайт)?
Во всех убедительных примерах встречаются одни и те же несколько решений:
- Одно сообщение, указанное на первом экране. Посетитель должен знать, кто вы и чем занимаетесь, прежде чем прокручивать страницу. Никакой предварительной подготовки.
- Порядок прокрутки, имеющий значение. Лучшие одностраничные сайты построены по принципу аргументации: зацепка, доказательство, индивидуальность, вопрос.
- Одно основное действие. Нанимайте меня, смотрите мои работы, свяжитесь со мной. Один повторный призыв к действию лучше, чем пять конкурирующих.
- Визуальные разрывы, которые разбивают прокрутку на фрагменты. Цветовые блоки, изображения, занимающие всю страницу, или большие интервалы между строками не позволяют воспринимать длинную страницу как одну серую полосу.
- Быстрая загрузка. Одна страница — это всего лишь один шанс произвести первое впечатление. Перегруженные видеоролики и несжатые изображения — вот где одностраничные сайты теряют посетителей.
При чтении сопоставляйте приведенные примеры со списком.
Одностраничные рекламные тексты для личного бренда, в которых типографика играет ключевую роль.
Когда продуктом является человек, основную роль играет текст. На обоих этих сайтах роль, а не имя, является самым заметным элементом на странице.
Jon Kirschner
Jon Kirschner Он — стратег в области брендинга и развития бизнеса, и на его сайте об этом говорится буквами, в четыре раза превышающими размер его собственного имени.
Название отображается мелким шрифтом в навигационной панели в форме таблетки, а слова "Стратег по брендингу и развитию" заполняют весь экран.
Ниже, под сгибом страницы, расположено простое и понятное вступление («Я создаю бренды, которые приводят к конверсиям»), задающее тон.
Разделы типа «В чём я действительно хорош» и «Что я читаю» придают сайту человеческий облик, который большинство сайтов, посвящённых стратегическим вопросам, игнорируют. Он читается как рассказ человека, а не как шаблон.
Возьмите это: Сделайте так, чтобы посетитель запомнил вашу деятельность гораздо важнее, чем просто название. Они пришли узнать, чем вы занимаетесь, поэтому начните с этого, используя шрифт, который невозможно не заметить.
Jordon Melo
Jordon MeloСпециалист по медиапланированию и закупке рекламы из Торонто решает классическую проблему одностраничного сайта: как перемещаться по длинной полосе прокрутки? Он нумерует элементы навигации.
«01. О нас, 02. Краткое резюме, 03. Работа, 04. Отзывы, 05. Контакты» точно соответствует порядку прокрутки, поэтому меню одновременно служит и оглавлением.
Заголовок с засечками и изогнутый портрет придают странице, подходящей для резюме, некоторую теплоту. Это одностраничный дизайн сайта, который функционирует как многостраничный сайт, но без необходимости полной загрузки страниц.
Возьмите это: Пронумеруйте навигационные элементы в соответствии с порядком прокрутки. Длинная страница перестает казаться длинной, когда посетитель видит, где он находится.
Одностраничные документы с разделенным экраном и в портретном режиме
Два сайта, одна идея: разместить человека и действие на первом экране, чтобы занятому посетителю не приходилось прокручивать страницу, чтобы совершить действие.
Simrran Benvait
Simrran Benvait Она — специалист по маркетингу из Британской Колумбии, и её герой делает всю работу на одном экране.
Левую половину занимает портрет, плавно переходящий в кремовую панель справа. На этой панели размещены приветствие, должность и три контактных поля: электронная почта, LinkedIn, телефон.
Рекрутер может прочитать, кто она, и отправить ей сообщение, не прокручивая ленту. Волнообразная разделительная перегородка предотвращает ощущение, будто это два склеенных вместе квадрата.
Возьмите это: Укажите свою должность, местоположение и контактные данные на первом экране. На одностраничном документе главным элементом является ваша визитная карточка, поэтому относитесь к ней соответственно.
Noor Harajli
Noor HarajliКоординатор по социальным сетям и маркетингу из Лондона создает свой единственный свиток из больших красных карточек на черном фоне.
Каждый раздел — профиль, навыки, работа — располагается в отдельном закругленном блоке, поэтому страница воспринимается как серия отдельных комнат, а не как одна длинная полоса.
Моноширинный шрифт подчеркивает креативно-технический стиль, а карточки «Создание контента» и «Арт-дизайн и оформление» ведут непосредственно к реальным проектам. Это доказывает, что на сайте с одной прокруткой может поместиться полное резюме и портфолио, не создавая ощущения перегруженности.
Возьмите это: Разделите длинный текст на закругленные цветовые блоки. Четкое визуальное разделение позволяет разместить на одной странице много информации, не давая читателю потерять нить повествования.
Одностраничные портфолио, основанные на изображениях
Когда речь идёт о презентации, изображения занимают всю страницу, а текст не мешает. В обоих случаях визуальное оформление занимает всю страницу.
Dillan Vanner
Dillan Vanner Он фотограф, и сайт открывается так же, как и качественный печатный экземпляр: одно изображение во всю ширину страницы, от края до края, перед первым словом текста.
На первом экране разворачивается документальный кадр, по центру расположен небольшой логотип, а слоган «Запечатлевая мир и все, что в нем есть» подчеркивает основную идею.
Минималистичная навигация (Главная, Портфолио, О нас) и ряд значков контактов — вот и все элементы дизайна. Фотография — вот что продает.
Возьмите это: Для одностраничной рекламной брошюры с фотографией пусть один яркий снимок заполнит первый экран. Лучший кадр — это более убедительный элемент, чем любой заголовок.
cmc designworks
cmc designworksАрхитектурно-дизайнерская студия отбрасывает лишние тексты и позволяет работе стать главным достоинством.
На главной странице отображается асимметричная фотосетка, занимающая всю площадь экрана: рендеры зданий, снимки интерьеров, вывески, а над ними — практически невидимая навигация.
Для визуальной дисциплины это правильное решение. Изображения продают, поэтому ничто не может с ними конкурировать. Это один из примеров веб-сайтов с более плавной прокруткой, именно потому что он доверяет фотографиям.
Возьмите это: Если ваша работа визуальная, сократите текст. Полноэкранная сетка изображений в качестве главного текста говорит больше, чем любой абзац.
Краткие информационные листовки по вопросам обслуживания и подбора персонала
Одностраничный веб-сайт предназначен не только для демонстрации портфолио. Эти два элемента выстраивают последовательность прокрутки, как презентацию, так что все суть излагается за один раз.
Arrowood Design
Arrowood DesignКомпания, занимающаяся дизайном интерьеров в районе залива Сан-Франциско, размещает весь спектр своих услуг на одной странице. Последовательность текста напоминает презентацию.
Вверху, над нарисованным изображением сипухи, размещено обещание «Вне времени роскоши», за которым следуют услуги, позиционирование «Не просто декор», история основателя («Кто такая Лиза?»), проекты и контактная информация.
Редакторские подписи, написанные заглавными буквами, помогают сохранить целостность текста. К тому моменту, как вы дочитаете текст до конца, вы прочитаете полный текст коммерческого предложения по порядку, не кликнув ни разу.
Возьмите это: Одностраничный буклет может охватить весь бизнес в сфере услуг. Расположите страницы в порядке, подобно презентации: обещание, услуги, доказательства, человек, а затем просьба.
Kaitlyn Barry
Kaitlyn Barry — актёр, режиссёр и исполнитель из Перта. Сайт открывается с именем, занимающим всю ширину экрана, поверх одного портрета, сделанного в «золотой час», как фотография в начале профиля на кастинге.
Далее сразу переходим к делу: краткая биография, затем список последних работ в кино и на телевидении, например: The Twelve и Cephalopod, затем свяжитесь.
Список кандидатов составлен так же, как и описание кастинга: кто они, чем занимались, как с ними связаться. Ничто не может этому помешать.
Возьмите это: Если вас нанимают на основании резюме, разместите резюме на странице. Начните с описания вашей должности, перечислите ваши достижения и обязательно укажите, что вакансия открыта для вас.
Что общего у лучших одностраничных сайтов?
Если посмотреть на все восемь элементов вместе, то закономерность становится очевидной. Лучшие одностраничные сайты — это не самые красивые. Это те, где каждый экран выполняет свою задачу, и эти задачи выполняются в правильном порядке.
Они придерживаются одного сообщения и повторяют одно действие. Для структурирования прокрутки они используют реальную визуальную систему: нумерованная навигация, цветные карточки, сетка изображений, разделенный заголовок.
Они поставили на первое место самое важное: роль и контакты для соискателей, работа для студий.
И они придерживаются лёгкого стиля, потому что одностраничный сайт — это всего лишь один скачиваемый файл и одно первое впечатление. Простые примеры сайтов здесь побеждают чаще, чем сложные. Сдержанность — вот что главное.
Когда работает одностраничный сайт (и когда вам нужно больше одной страницы)
У этого формата есть предел. Одностраничный сайт идеально подходит, когда ваше сообщение сфокусировано, а контент ограничен.
Как только у вас появляется несколько разных целевых аудиторий, растущий блог или каталог услуг, каждая из которых заслуживает отдельного предложения, даже один клик начинает работать против вас.
Если вы скорее художник-практик, чем дизайнер, многостраничный формат обычно лучше подходит для вашей работы. сайты портфолио артистов В обзоре рассматривается этот маршрут. Вот честная информация:
Если вы размещаете свой сайт в правой колонке, создайте дополнительные страницы. Попытка разместить всё на одной прокрутке для минималистичного вида — это решение, за которое платят ваши посетители.
Как создать собственный одностраничный сайт
Вам не нужно ничего кодировать. Начните с написания кода для прокрутки, прежде чем менять шаблон.
Перечислите разделы в том порядке, в котором с ними должен ознакомиться незнакомец, а затем вырежьте один. Большинство одностраничных сайтов содержат на один раздел больше, чем нужно.
При создании сайта конструктор, ориентированный на портфолио, дает больше преимуществ, чем обычный конструктор, поскольку его макеты уже разработаны для однократной прокрутки.
Pixpa's шаблоны одностраничных сайтов Предоставляет вам фиксированную навигационную панель с привязкой к тегу, полноэкранные разделы с изображениями и встроенный блок контактов «из коробки». Вы можете увидеть их в действии в... портфолио на одной странице галерея.
Пользовательские CSS-стили позволяют задать тип текста или отступы по своему усмотрению. Jon Kirschner и Noor Harajli сделал.
Если вы предпочитаете сначала сравнить специализированные одностраничные инструменты, наш обзор конструкторы одностраничных сайтов является полезной отправной точкой.
Все сайты, перечисленные выше, были построены на PixpaЭто достаточно точно отражает то, как может выглядеть формат без участия разработчика.
В какой бы основе вы ни строили, изображения должны быть сжаты, а разделов — немного. Сдержанность — это и есть замысел.
Выводы
Одностраничный сайт — это своего рода принудительная функция. Он заставляет вас определить, что действительно важно, и упорядочить это, потому что нет второй страницы, которая бы скрывала всё остальное.
Приведенные здесь примеры охватывают таких людей, как стратег по поиску работы, лондонский креативный специалист, фотограф-документалист, архитектурная студия, фирма по разработке элитных интерьеров и работающий актер.
Все они работают по одной и той же причине: четкое сообщение, целенаправленное пролистывание, одно действие, которое нужно выполнить дальше.
Изложите свою мысль в форме аргумента, начните с главного вывода и сократите до тех пор, пока не останется только самое необходимое.
Часто задаваемые вопросы на одном сайте
Что такое одностраничный сайт?
Одностраничный веб-сайт размещает весь свой контент — информацию о нас, о работе, услугах и контактные данные — на одной прокручиваемой странице, вместо того чтобы разделять его на отдельные страницы.
Также называемый одностраничным или сайтом с одной прокруткой, он подходит для сфокусированного сообщения: одна услуга, одно портфолио или одно личное предложение. Фиксированная навигация обычно перенаправляет посетителя к каждому разделу.
Полезны ли одностраничные сайты для SEO?
Они могут занять высокие позиции в поисковой выдаче по вашему имени и одной-двум ключевым фразам, чего зачастую достаточно для личного бренда или бизнеса, предоставляющего одну услугу.
Проблема заключается в широте охвата. Поскольку Google в основном ранжирует страницы, а не сайты, одна страница может быть ориентирована лишь на ограниченное количество ключевых слов, прежде чем контент начнет конкурировать сам с собой. Если вы хотите занимать высокие позиции по многим темам, вам нужно больше страниц.
Сколько разделов должен содержать одностраничный веб-сайт?
Достаточно, чтобы обосновать свою позицию, и не более того. Большинство самых эффективных одностраничных сайтов содержат от пяти до семи разделов: главный раздел, краткое описание, описание работы или услуг, некоторые доказательства и контактная информация.
Если вы решили добавить восьмой элемент, проверьте, действительно ли сайт предназначен для многостраничного формата.
Одностраничный или многостраничный вариант: что лучше?
В абстрактном плане ни один из них не лучше другого. Они решают разные проблемы.
Одностраничный дизайн сайта выигрывает за счет целенаправленного донесения информации, быстрого принятия решений и визуального портфолио.
Многостраничный дизайн предпочтительнее, если у вас разные целевые аудитории, растущий блог или множество сервисов, каждый из которых заслуживает отдельной страницы. Выбирайте, исходя из глубины контента, а не из того, какой дизайн выглядит современнее.
Где можно найти больше примеров одностраничных сайтов?
Помимо восьми представленных здесь галерей, есть и другие, например, такие. One Page Love и Awwwards«Одностраничные подборки заслуживают того, чтобы их просмотреть для вдохновения в дизайне».
При просмотре сайта не обращайте внимания на визуальную составляющую: изучите порядок прокрутки и призыв к действию, потому что именно это вам и нужно скопировать.
Сколько стоит одностраничный сайт?
Если вы создадите сайт самостоятельно с помощью конструктора сайтов, одностраничный сайт обойдется вам так же, как и любой небольшой сайт: примерно в стоимость тарифного плана плюс домен. Проверьте последние цены на тарифные планы актуальные данные.
Нанять дизайнера для создания индивидуальной одностраничной презентации обойдется от нескольких сотен до нескольких тысяч долларов, в зависимости от объема работы. Для большинства людей из этого списка шаблон оказался вполне подходящим решением.