Как оформить свой сайт красиво

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

Содержание

0.1 Какие задачи решает главная страница
0.2 Как оформить логотип
0.3 Какой должна быть навигация
0.4 Нужен ли футер
0.5 Каким должно быть ценностное предложение
0.6 Помогите посетителю выбрать наиболее желаемое для вас действие
0.7 Изображения на главной
0.8 Оформление главной — это бесконечный процесс

1 Как оформить главную страницу сайта, чтобы влюбить в себя всех
2 15 гениальных примеров главной страницы сайта
3 Адаптивные блоки с анимацией для красивого оформления одностраничного сайта
4 Красивое оформление блоков на сайте

Какие задачи решает главная страница

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

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

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

Идеальная главная страница должна обладать следующими характеристиками:

Информативность. На главной посетитель должен найти короткий и четкий ответ на ряд вопросов:

Общую информацию о бизнесе (что это за компания/сайт).
Общую информацию о продуктах (что здесь можно купить).
Информацию о выгодах (почему стоит сотрудничать с этой компанией и покупать ее продукт).

Если речь идет о главной странице известных брендов, например, «Сбербанка» или Microsoft, информацию о бизнесе и выгодах можно пропустить.

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

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

Как оформить логотип

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

Не тратьте время и деньги на сложный графический дизайн. Вы можете самостоятельно сделать красивый текстовый логотип. Достаточно выбрать визуально привлекательный шрифт и написать название вашей компании. Обратите внимание на логотипы известных компаний:

Какой должна быть навигация

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

Иногда инновации вредят эффективности. Обратите внимание на это меню навигации:

Подробнее о навигации читайте в нашей статье.

Нужен ли футер

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

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

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

Каким должно быть ценностное предложение

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

О чем этот сайт, какой бизнес он представляет?
Что можно приобрести на этом ресурсе?
Почему это выгодно, каковы преимущества перед конкурентами?

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

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

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

К сильным сторонам этого варианта изложения относятся:

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

Здесь можно было бы добавить разве что несколько слов об отличиях от конкурирующих продуктов.

Банк «ТКС» не нуждается в представлении. Поэтому ценностное предложение акцентировано на флагманском продукте организации. К преимуществам этого способа изложения относятся:

Лаконичное описание преимуществ.
Отсутствие лишней информации.
Ориентация на немедленную конверсию.

Помогите посетителю выбрать наиболее желаемое для вас действие

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

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

На сайте «Евросети» есть несколько предложений: подписка на рассылку, сопутствующие сервисы, разделы сайта. Однако главное предложение пользователь видит в центре экрана. Он может купить самую новую продукцию, сэкономив время на поиске товара в каталоге.

Изображения на главной

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

Можно написать о красоте дома, его удачном расположении и уютных комнатах. А можно показать все это с помощью фото.

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

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

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

Оформление главной — это бесконечный процесс

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

kak-pravilno-oformit-glavnuyu-stranitsu-sayta

Источник: https://TexTerra.ru/blog/kak-pravilno-oformit-glavnuyu-stranitsu-sayta.html

Как оформить главную страницу сайта, чтобы влюбить в себя всех

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

на рассылку и получи книгу в подарок!

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

Каким должно быть оформление главной страницы сайта?

Информативным, полезным, удобным и приятным глазу. Это если вкратце. Разберем подробнее.

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

На главной стоит обязательно указать:

Кто вы и чем занимаетесь.
Что вы предлагаете.
Почему стоит выбрать вас, а не любую другую компанию

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

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

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

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

Шапка и навигация

Здесь все просто: тут размещается логотип (он же ссылка на главную), меню со ссылками на страницы. Здесь не стоит оригинальничать, потому что отступив от классической вертикальной или горизонтальной планировки вы рискуете запутать пользователя. Если делаете меню с иконками, снабдите их текстовым пояснением. «Контакты» размещайте либо справа, либо снизу, зависимость от типа меню.

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

Хороший пример оформления шапки главной страницы сайта – «Сбербанка». Все просто и правильно – под каждую услугу отдельный блок, контакты интегрированы в шапку.

Блоки с информацией

Если вы не «Газпром», стоит сообщить пользователю о том, чем вы вообще занимаетесь – это будет первый информационный блок. В нем стоит кратко рассказать о ваших услугах, товарах и преимуществах.

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

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

Призыв к действию

Оформление главной страницы сайта должно решает две задачи: привлекает внимание пользователя к нужным вещам и плавно подводит его к покупке. Поэтому важно в подходящий момент подтолкнуть пользователя к нужному решению. С этим всегда справлялся грамотный «Call-to-acton» – «призыв к действию».

Он может быть разным. Если у вас всего одна услуга, то все очевидно – вам нужно подвести потенциального клиента к ее покупке, а потом «дожать» грамотно размещенной кнопкой.

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

Пример – сайт «Семантики». Призыв к действию один для всех услуг, поэтому внимание пользователя не рассеивается.

Подвал

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

Там размещаются все контакты, ссылки на соцсети, страницы с вакансиями, реквизитами и другими вещами не первой важности.

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

Не перегружайте

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

Выделяйте выгодные предложения

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

Так сделал «Связной» – акция на виду и привлекает внимание.

Используйте изображения

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

Не перехваливайте себя

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

Постоянно редактируйте страницу

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

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

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

Как оформить главную страницу сайта с точки зрения SEO-оптимизации

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

Итоги

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

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

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

В статье используются изображения Дмитрия Миролюбова.

Источник: https://semantica.in/blog/kak-oformit-glavnuyu-straniczu-sajta-chtoby-vlyublyat-v-sebya-polzovatelej.html

15 гениальных примеров главной страницы сайта

Источник изображения

У вас не будет второго шанса произвести первое впечатление второй раз. Вот почему главная страница — одна из самых важных страниц вашего сайта. Если новому посетителю не нравится то, что он видит, не сомневайтесь, что он нажмет кнопку «Назад». Многие пользователи до сих пор судят о книге по обложке.

Что делает главную страницу привлекательной? Как получить высокую конверсию и низкий коэффициент отказов? Как оформить главную страницу блога? Каковы удачные примеры текстов о компании? В этой статье вы найдете ответы на эти вопросы.

На любой главной странице должны быть следующие элементы:

Ясный ответ на вопросы пользователя: «Кто вы?», «Что вы предлагаете?» и/или «Что я могу сделать здесь?». Ваша компания должна ответить на эти вопросы так, чтобы каждый посетитель понял, что оказался в нужном месте. Если пользователи в течение нескольких секунд не смогут найти ответ на поставленные вопросы, следующий их шаг — это отказ!
Резонанс с целевой аудиторией. страница должна говорить с целевой аудиторией на ее языке. Старайтесь избегать «корпоративной абракадабры» и устраните все лишнее и отвлекающее.
Ценное предложение. Заголовок и еще раз заголовок! Выразите смысл своего товара или услуги в одном предложении так, чтобы у пользователей не возникло желания поискать что-то получше у ваших конкурентов. Решение проблемы — вот о чем необходимо писать; не нужно перечислять технические составляющие оффера.
Юзабилити. Все страницы, показанные ниже, очень удобны: на них легко ориентироваться, на них нет «кричащих» объектов, например, флэш-баннеров, анимаций или других чрезмерно сложных и ненужных элементов. Многие также оптимизированы для мобильных устройств, что очень важно в современном веб-маркетинге.
Призыв к действию (СТА-элемент). На каждой из 15 примеров главной страницы эффективно использованы первичный и вторичный СТА-элементы. Они направляют посетителей к следующему шагу. Например, «Бесплатная пробная версия», «Купить сейчас» или «Подробнее». Помните, что цель главной страницы — удержать посетителей на вашем сайте и провести их до конца воронки конверсии.
Общий дизайн. Хорошо продуманная страница — залог успеха в воспитании лояльности пользователей к бренду, настройке связи с целевой аудиторией и продвижении пользователей в воронке конверсии.
Не останавливайтесь на достигнутом. Если вас устраивает коэффициент конверсии вашего ресурса, знайте, что его можно увеличить на 10-50% с помощью несложного сплит-теста главной страницы.

1. FreshBooks 2. Золотая семерка: lp пример с удачным оформлением отзывов 3. CloudPassage: видео на главной странице 4. Box 5. Aweber: пример хорошей текстовой страницы 6. Carbonmade 7. Evernote.com: пример страниц описания сайта

Unlocking 9. Tribal Media: образец для панорамы на главной странице 10. eWedding 11. Basecamp: сайт с удачной лид-формой 12. Eventbrite: новость на главной странице 13. GoodData: удачная картинка на главной странице сайта 14. TechValidate

15.

Endeavor.org

Идеальная целевая страница — с чего начать? Может, с пары вопросов?

1. FreshBooks

на сайт

Этот пример главной страницы сайта html гениален, потому что:

Удачно использовано сочетание цветов и эффективно расставлены СТА-элементы.
Очень заманчивый текст на СТА-элементе: «Попробуйте бесплатно в течение 30 дней».
Эффектный подзаголовок: «Для более 5 миллионов людей, использующих FreshBooks, финансовая отчетность теперь не проблема». Это заявление привлекательно для целевой аудитории, потому что освоение бухгалтерского программного обеспечения, как правило, мучительно сложно для фрилансеров и владельцев малого бизнеса.

2. Золотая семерка: lp пример с удачным оформлением отзывов

на сайт

Это гениально, потому что:

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

3. CloudPassage: видео на главной странице

на сайт

Это гениально, потому что:

Четкий и чистый дизайн страницы. Текстовый контент, точно передающий суть деятельности CloudPassage. Вот как на главной странице сайте разместить вместо фото презентацию или видео, закрепляя послание (месседж, message) с его помощью.
Только один направляющий призыв к действию. Чтобы у пользователей не оставалось сомнений, ниже указаны два сообщения: «Без кредитных карт», «Без обязательств».

4. Box

на сайт

Это гениально, потому что:

Домашняя страница Box является отличным примером того, как красиво разместить на главной странице информацию, используя силу визуальных эффектов и текстового контента. Простой, но сильный заголовок.
На главной странице отлично смотрятся логотипы заказчиков с надписью «Более 140,000 компаний используют Box», доказывающие популярность бренда.
Дополнительное доверие вызывают размещенные на видном месте контакты для сайта. Пример Box содержит хорошо заметный номер телефона вверху страницы.

5. Aweber: пример хорошей текстовой страницы

Это гениально, потому что:

Текстовая страница с сильным заголовком «7 причин подписаться на рассылку бесплатных советов по емейл-маркетингу» сообщает посетителю о множестве бонусов и предъявляет социальные доказательства.
Данная страница повысила процент подписок на рассылку на 321%.

6. Carbonmade

на сайт

Это гениально, потому что:

Оригинальная и забавная графика наглядно демонстрирует, на что способны специалисты этой компании.
Цифры и краткий, но емкий список преимуществ выглядят очень убедительно.
Красивая интеграция меню с иконками. Значки главной страницы для сайта, разделов «О нас», «Примеры работ» и «Цены» вызывают улыбку и запоминаются.

7. Evernote.com: пример страниц описания сайта

на сайт

Это гениально, потому что:

Заголовок страницы Evernote «Помни все» наверняка оказался бы победителем в номинации «Все гениальное – просто».
На этой странице видны три простых предложения, которые буквально «выскакивают» на зеленом фоне.
При просмотре страницы взгляд невольно останавливается на кнопке призыва к действию: «Попробуй Evernote бесплатно».

8. Unlocking

на сайт

Это гениально, потому что:

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

9. Tribal Media: образец для панорамы на главной странице

Это гениально, потому что:

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

10. eWedding

на сайт

Это гениально, потому что:

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

11. Basecamp: сайт с удачной лид-формой

на сайт

Это гениально, потому что:

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

12. Eventbrite: новость на главной странице

на сайт

Это гениально, потому что:

Заголовок на главной странице «Если что-то происходит, здесь вы об этом узнаете» работает потому, что любопытство всегда двигало деятельностью людей.
Интересный подзаголовок. В нем пользователям предлагают либо просмотреть тысячи событий, либо создать собственное событие и продавать на него билеты.
Яркое праздничное фото, лаконичный дизайн, новости на главной странице, повествующие о грядущих интересных событиях, усиливают эффект.

13. GoodData: удачная картинка на главной странице сайта

на сайт

Это гениально, потому что:

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

14. TechValidate

на сайт

Это гениально, потому что:

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

15. Endeavor.org

на сайт

Это гениально, потому что:

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

Высоких вам конверсий!

blog.hubspot.com

Источник: https://lpgenerator.ru/blog/2013/01/11/15-genialnyh-primerov-glavnoj-stranicy-sajta/

Адаптивные блоки с анимацией для красивого оформления одностраничного сайта

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

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

Потому что данный элемент встречается на любом одностраничнике и его необходимо выделить.

Еще оформление элементов на сайте:

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

Чтобы увидеть эффекты перейдите на страницу с примером:

Если у Вас есть трудности с созданием лендинга, тогда начните с данного мини-курса: “Лендинг за 60 минут”.

Вот как выглядит блок при наведении:

1 HTML структура

Сперва подключаем иконки от FontAwesome между тегами , которые будем использовать для описания:

HTML КОД

У нас есть один общий блок, в котором находятся все 3 блока с описанием и иконками:

HTML КОД

123456789101112131415

Выгода 1 Дополнительныйскрытый текст 1

Несколько слов по структуре:

Строки: с 1 по 15 — общий блок, который содержит 3 блока с описанием.
Строки: со 2 по 6 — один отдельный блок с описанием выгоды.
Строка: 3 — иконка блока.
Строка: 4 — видимая часть с описанием выгоды.
Строка: 5 — скрытая часть с подробным описанием выгоды.

Структура прозрачна и проста. Переходим к оформлению и создании анимации.

2 CSS стили

Для создания анимации нам понадобится лишь CSS3 и никакого Javascript.

Прописываем общие стили для 3-х блоков:

CSS КОД

1234567891011121314151617181920212223242526272829

.bulletsBlock:after { content: “”; display: table; clear: both;} .bulletsBlock > div { width: 30%; float: left; background: rgba(0,0,0,0.3); margin-left:5%; text-align: center; position: relative; padding-bottom: 31.7%; cursor: pointer; -webkit-transition:all 0.35s linear; transition:all 0.35s linear;} .bulletsBlock > div:first-child { margin-left:0;} /*Тень снизу у блока при наведении*/.bulletsBlock > div:hover { -webkit-box-shadow: 0 35px 35px -35px #000000; -moz-box-shadow: 0 35px 35px -35px #000000; box-shadow: 0 35px 35px -35px #000000;}

Далее идет иконка и ее анимация при наведении:

CSS КОД

12345678910111213141516171819

.bullet-item span{ line-height: 1.5em; font-size: 12.5em; color:#fff; position: absolute; top:0; left:0; display: block; width: 100%; -webkit-transition:all 0.35s ease; transition:all 0.35s ease;} /*Анимация иконки при наведении – уменьшение и сдвиг вверх*/.bulletsBlock > div:hover span.iconBullet{ line-height: 1.35em; font-size: 10.625em; top:-2.7%;}

Далее напишем стили для блоков с текстовым описанием:

CSS КОД

12345678910111213141516171819202122232425262728293031323334353637383940

.titleBullet, .hideText { position: absolute; left:0; bottom:0; text-align: center; width: 100%; margin: 0; color: #fff; -webkit-transition:all 0.35s ease; transition:all 0.35s ease;} .titleBullet { line-height: 2.5em; font-size: 2.1875em; background:#3B3B3B; z-index: 10;} .hideText { line-height: 1.3em; font-size: 1.25em; padding: 1em 0; background:#3B3B3B; font-weight: 300; z-index: 8; height: 50px; -webkit-transition:all 0.35s linear 0.2s; transition:all 0.35s linear 0.2s;} /*Анимация при наведении видимого текстового блока*/.bulletsBlock > div:hover p.titleBullet{ bottom:80px;} /*Анимация при наведении скрытого текстового блока*/.bulletsBlock > div:hover p.hideText{ background:#454545;}

На этом всё!

Вывод

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

ВНИМАНИЕ: я понимаю что не у всех получается установить эффекты, скрипты и плагины, которые находятся на сайте, поэтому я сделал возможность проконсультироваться по любому вопросу в сайтостроении здесь: SKYPE Консультация!

Успехов!

Юрий Немец

Источник: https://sitehere.ru/krasivoe-oformlenie-sajta-oformlyaem-krasivo-odnostranichnyj-sajt

Красивое оформление блоков на сайте

Очередной урок с идеями — как можно оформить блоки с записями на страницах категорий или блоки с услугами на странице-портфолио.

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

Адаптивная верстка сделана на основе медиазапросов и модели Flexbox.

Соответствующие шрифты вы можете скачать с сайта Google Fonts.

Перейти на страницу с примерами

Услуги фотографа

Праздники и корпоративы
Свадебная фотография
Интерьеры
Фотосессия

Адаптивный дизайн

* { box-sizing: border-box; margin: 0; } body { background: #EAE7D8; } .portfolio-item { max-width: 300px; margin: 50px auto; } .portfolio-wrapper { position: relative; background: #CFC9BA; } .

portfolio-wrapper:after { content: “”; position: absolute; right: 0; bottom: -29px; left: 0; width: 105%; height: 50px; background: #EAE7D8; transform: rotate(-4deg); } .

heading h3 { font-family: ‘Montserrat Alternates’, sans-serif; font-size: 12px; line-height: 16px; color: white; text-align: center; text-transform: uppercase; font-weight: 300; padding: 20px 0; } .

thumbnail { position: relative; padding-bottom: 98%; overflow: hidden; } .thumbnail img { position: absolute; left: 0; top: 0; width: 100%; cursor: pointer; transform: translateY(0%); transition: 3.5s; } .thumbnail:hover img { transform: translateY(-100.5%); }

Полноэкранный фон

Полноэкранное фоновое изображение и простой дизайн

* { box-sizing: border-box; margin: 0; } .demo-wrapper { display: table; max-width: 420px; margin: 0 auto; } .link { text-decoration: none; display: block; position: relative; padding: 20px; text-align: center; color: #102030; } .link-inner { perspective: 820px; } .link img { display: block; width: 300px; transform: rotateX(0deg) rotateY(30deg); border-left: 5px solid #ccc; border-radius: 8px; transition: .5s ease-in-out; } .link img.mobile { position: absolute; z-index: 5; right: 20px; top: 45px; width: 90px; transform: rotateX(0deg) rotateY(-30deg); border-right: 4px solid #ccc; border-left: 0 solid #ccc; border-radius: 8px; } .link:hover img { transform: translateY(-20px); border-left: 0 solid #ddd; border-right: 0 solid #ccc; } .post-meta { margin-top: 20px; } .post-meta h2 { margin-bottom: 15px; }

Пример 4. Идея для оформления блоков записей

Декабрь 18, 2018 Красивые вещи

Уютные вещи для вашего дома

Декабрь 18, 2018 Красивые вещи

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel arcu purus. Duis egestas purus et ex interdum lobortis. Quisque nec magna viverra, interdum dolor at, congue augue. Quisque sed interdum augue, a lacinia nulla. Sed risus nibh, vestibulum eu nisi eu, imperdiet tempor quam.

Пример 7. Блок с анимацией при наведении

Перейти на сайт Перейти на сайт Перейти на сайт * { margin: 0; box-sizing: border-box; } .post-wrap { max-width: 1120px; margin: 0 auto; display: flex; justify-content: center; flex-wrap: wrap; } .post-item { padding: 10px; } .

post-link { text-decoration: none; display: block; color: #FC473E; font-weight: 500; position: relative; z-index: 5; } .post-item-wrap { position: relative; background-color: #FDFDFD; background-image: radial-gradient(#CADAD9 2px, transparent 2px); background-size: 6px 6px; } .

post-item-wrap img { display: block; width: 100%; box-shadow: 2px 2px 10px rgba(0,0,0,.3); transition: .3s; } .post-item:hover .post-item-wrap img { transform: translate(12px, 12px); } .line { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; margin: 12px 0 0 12px; opacity: 0; transition: .3s; } .

line:before { content: “”; position: absolute; bottom: -15px; left: 50%; width: 5px; height: 5px; margin: 0 0 0 -2px; background: #FC473E; border-radius: 50%; } .

line:after { content: “”; position: absolute; width: 1px; left: 50%; height: 50px; top: 100%; bottom: 0; margin-top: 13px; transform: scaleY(-1); background: linear-gradient(to bottom, rgba(252,71,62,0) 0%,rgba(252,71,62,1) 100%); } .post-item:hover .line { opacity: 1; } .

post-item-wrap:after { content: “”; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; background: white; transition: .3s; } .post-item:hover .post-item-wrap:after { opacity: .7; top: 12px; left: 12px; right: -12px; bottom: -12px; } @media (min-width: 768px) { .post-item { flex-basis: 50%; flex-shrink: 0; } } @media (min-width: 960px) { .post-item { flex-basis: 33.333333333%; } }