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

Красивые ссылки на вашем сайте

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

Сведения из этой статьи будут полезны всем, у кого есть и будет сайт на чистом HTML или на движке, где вы контролируете стили. Если у вас условная «Тильда» или «Редимаг», это не подойдёт — там управление стилями ограничено.

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

• ссылки не подчёркнуты, непонятно, что это ссылки;
• когда наводишь мышку, ссылка подчёркивается, но очень толсто;
• ссылки, по которым мы уже щёлкали, не выделяются другим цветом — так не ясно, что мы уже читали, а что нет.

Как будет

Давайте исправим каждый пункт, чтобы получилось как на скриншоте ниже: тонкие красивые подчёркивания, красный цвет при наведении, а ещё должно быть видно посещённые ссылки:

Всё дело в CSS

Чтобы сделать красиво, нам понадобится CSS — специальная разметка, которая отвечает за внешний вид и поведение элементов на странице.

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

Между фигурными скобками мы напишем код, который превратит наши ссылки в ссылки со стильным тонким подчёркиванием. Для этого нам понадобится:

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

Сделаем всё по очереди.

Убираем стандартное подчёркивание

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

Задаём цвет ссылки

Это стандартный цвет ссылок в браузере Chrome, возьмём его за основу.

Делаем тонкую линию внизу

border-bottom: 1px solid;
border-bottom-color: rgba(15, 122, 252, 0.2);

Первая строчка говорит браузеру, чтобы он нарисовал под ссылкой (border-bottom) сплошную линию (solid) толщиной в один пиксель (1px).

А вторая — чтобы эта линия была определённого цвета. RGBA означает, что нам нужно смешать красный, зелёный и синий цвета (RGB) и задать им какую-то прозрачность (A). Сделаем всё тем же цветом, что и ссылки, а прозрачность поставим 0.2 — так линия будет выглядеть тоньше, чем один пиксель.

Собираем всё вместе

Меняем цвет ссылки при наведении

За реакцию на наведение мышки отвечает hover, поэтому нам в CSS-раздел нужно добавить такое:

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

Нам нужно, чтобы ссылка поменяла цвет на оранжевый и при этом осталась тонкая линия подчёркивания. Для этого повторим все шаги из предыдущего раздела, кроме border-bottom: 1px solid; — это свойство достанется в наследство сразу всем ссылкам, а вот всё остальное нужно прописать заново.

Убираем стандартное подчёркивание:

Чтобы текст ссылки стал оранжевого цвета, используем команду:

Делаем у линии тот же цвет, что и у активной ссылки:

border-bottom-color: rgba(208, 64, 0, 0.2);

В итоге получим:

a:hover

Помечаем использованные ссылки

Здесь всё то же самое, что и в предыдущем разделе, только вместо hover будем использовать visited — именно оно отвечает за поведение ссылки, по которой мы уже переходили. Цвет возьмём стандартный фиолетовый: #800080, и этот же цвет переведём в RGBA для подчёркивания ссылок.

a:visited

Готовый CSS-код для красивых ссылок

a < text-decoration: none; color: #0f7afc; border-bottom: 1px solid; border-bottom-color: rgba(15, 122, 252, 0.2); >a:hover < text-decoration: none; color: #cf0000; border-bottom-color: rgba(208, 64, 0, 0.2); >a:visited

Дальше — больше

Если вам кажется, что статья закончилась слишком быстро и что можно было сделать ещё красивее, приходите учиться веб-разработке в «Практикум». Будет много HTML, CSS и остальной красоты.

Получите ИТ-профессию

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

40 лучших бесплатных шаблонов сайтов на CSS3 и HTML5

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

Популярно на Бегиндоте.

рябь

Универсальное управление персоналом HR.

Monday.com

monday.com — ведущее решение для управления проектами и CRM.

Salesforce CRM

Salesforce является одним из.

HubSpot CRM

HubSpot CRM является одним из.

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

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

Есть много Шаблоны HTML5 CSS3 которые доступны в вашем распоряжении, которые вы можете использовать, чтобы сделать свой дизайн уникальным и расширить свою интернет-базу.

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

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

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

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, WordPress, Bootstrap

Главная » Основы CSS » Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу

Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу

Всем привет!
Вот и подошли мы к завершению изучения основ CSS.
Сегодня испробуем на практике все знания, которые вы получили, изучая основы CSS. Предлагаю вместе со мной создать простой сайт-визитку с использованием HTML + CSS.
Вот сама схема и план действий:

1). Создание файла «index.html» и «CSS».
2). Вставка в файл «index.html» скелет html (стандартный код).
3). Подключение «index.html»с «style.css».
4). Создание меню.
5). Вставка логотипа.
6). Создание блока для контента.
7). Создание подвала.
8). Создание остальных страниц.

Создание файла «index.html» и «CSS».
Итак, создайте себе отдельную папочку «Мой сайт». Теперь в этой папочке создайте два файла «index.html» и «style.css» .
Чтобы создать «index.html»:
на компьютере снизу в левом углу нажмите на кнопку «Пуск» .
Далее выберите «Все программы» => «Стандартные» => «Блокнот» .

Далее нажмите «Файл» => «Сохранить как» :

Укажите место, куда вы хотите сохранить файл, в нашем случае это папка под названием «Мой сайт».
В поле « Имя файла » напишите « index.html» , а не просто « index» ( это важно! ). Таким способом мы создаем файл с расширением « *.html » для веб-страниц. Далее нажмите на кнопку « Сохранить »:

Чтобы создать «style.css»:
кнопка «Пуск» => «Все программы» => «Стандартные» => «Блокнот» :

В открывшем блокноте нажмите в меню сверху «Файл» => «Сохранить как…» :

Далее укажите место, куда вы хотите сохранить файл, лучше файл разместить вместе с остальными HTML файлами.

В поле «Имя файла» напишите «style.css» , а не просто style ( это важно! ). Таким способом мы создаем файл с расширением « *.css ». Далее нажмите на кнопку « Сохранить »:

Вот, что должно получиться у вас в папке «Мой сайт»:

Вставка в файл «index.html» скелет html (стандартный код)
Откройте файл «index.html» через программу «Блокнот» и вставьте вот такой стандартный HTML код:

Сохраните файл «index.html».

Подключение «index.html» к «style.css»
Напомню вам, чтобы подключить файл со стилями « style.css » к « index.html » перед тегом ,пропишите вот такой код:

Сохраните файл «index.html» .
Вот теперь можем создавать сайт.
Начнем с меню.

Создание меню
Через списки HTML создадим меню и, естественно, сразу пропишем для каждого раздела меню ссылку на другую страницу:

Вот полный пример:

В результате ничего особенного вы не увидите:

Теперь в CSS сделаем меню горизонтальным, уберем маркеры, сделаем отступы. Для этого в CSS пропишите:

* < margin:0px ; padding:0px; >.menu li

Теперь выровняем меню посредине

.menu

Закрасим меню и добавим тень:

.blok-menu

Осталось поменять размер и цвет в названиях меню:

.menu li a < font: 18px Verdana, Arial, Helvetica, sans-serif; color:#fff; text-decoration: none; >.menu li a:hover

Итак, вот весь CSS стиль для меню:

* < margin:0px ; padding:0px; >.menu li < float:left; list-style: none; margin:10px 25px ; >.blok-menu < overflow: hidden; background: #444; box-shadow: 0px 13px 17px -6px #000000; >.menu < margin:0 auto; display:table; >.menu li a < font: 18px Verdana, Arial, Helvetica, sans-serif; color:#fff; text-decoration: none; >.menu li a:hover

Смотрим на результат:

Вставка логотипа

Для логотипа создайте папку « image ». В этой папке будут храниться все изображения сайта-визитки.

Залейте в эту папку « image » ваш логотип, размерами примерно 200 х 200 px.
Дайте название логотипу « logo » и расширении файла « png ».
Вот так это будет выглядеть в HTML:

Выровняем лого по центру и закруглить через CSS:

.logo < margin:0 auto; width:200px; margin-top:30px; margin-bottom:30px; >.logo img < -moz-border-radius: 200px; /* Firefox */ -webkit-border-radius: 200px; /* Safari, Google Chrome */ -khtml-border-radius: 200px; /* KHTML */ -o-border-radius: 200px; /* Opera */ -ms-border-radius: 200px; /* IE8 */ -icab-border-radius: 200px; /* Icab */ border-radius: 200px; /* CSS3 */ >

Создание блока для контента
Теперь создадим блок для контента. Добавьте в HTML вот такой код:

 
У нас самая крутая фирма.
 
Опять много текста
 
 

В CSS выровняем блок «content» по центру. Укажем ему ширину, сделаем внутри отступы, выделим блок тенью:

.content

Выровняем заголовок по центру, увеличим размер и поменяем цвет:

.content h2

Теперь изменим размер и цвет текста. Добавим отступ для красной строки:

.content p

Вот весь CSS код для блока «content» :

.content < width:700px; margin:0 auto; padding:20px; box-shadow: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) inset; >.content h2 < font: 30px Verdana, Arial, Helvetica, sans-serif; color:#444; text-align:center; >.content p

Создание подвала
Теперь внизу сайта создадим подвал и разместим там копирайт.
В HTML добавьте вот такой код:

StepkinBlog.com © 2017
 
 

В CSS выровняем подвал по центру, изменим цвет текста и ссылки, поменяем размер:

.footer < width:100%; text-align:center; margin-top:20px; >.footer p, .footer a < font: 14px Verdana, Arial, Helvetica, sans-serif; color:#444; >.footer a < text-decoration: none; border-bottom:1px dotted #444; >.footer a:hover

Вот так выглядит мой абсолютно весь CSS код файла «style.css» :

* < margin:0px ; padding:0px; >.menu li < float:left; list-style: none; margin:10px 25px ; >.blok-menu < overflow: hidden; background: #444; box-shadow: 0px 13px 17px -6px #000000; >.menu < margin:0 auto; display:table; >.menu li a < font: 18px Verdana, Arial, Helvetica, sans-serif; color:#fff; text-decoration: none; >.menu li a:hover < font: 18px Verdana, Arial, Helvetica, sans-serif; color:#ccc; border-bottom:1px dotted #ccc; >.logo < margin:0 auto; width:200px; margin-top:30px; margin-bottom:30px; >.logo img < -moz-border-radius: 200px; /* Firefox */ -webkit-border-radius: 200px; /* Safari, Google Chrome */ -khtml-border-radius: 200px; /* KHTML */ -o-border-radius: 200px; /* Opera */ -ms-border-radius: 200px; /* IE8 */ -icab-border-radius: 200px; /* Icab */ border-radius: 200px; /* CSS3 */ >.content < width:700px; margin:0 auto; padding:20px; box-shadow: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) inset; >.content h2 < font: 30px Verdana, Arial, Helvetica, sans-serif; color:#444; text-align:center; >.content p < font: 14px Verdana, Arial, Helvetica, sans-serif; color:#444; text-indent:20px; >.footer < width:100%; text-align:center; margin-top:20px; >.footer p, .footer a < font: 14px Verdana, Arial, Helvetica, sans-serif; color:#444; >.footer a < text-decoration: none; border-bottom:1px dotted #444; >.footer a:hover

Создание остальных страниц
Вот и готова первая страница. Весь HTML код файла « index.htm l»:

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

• rabota.html – для страницы «Наши работы»
• prais.html – для страницы «Прайс»
• contakt.html – для страницы «Контакты»

И во все эти файлы вставьте такой же код, какой в файле « index.html », меняя только текст в и текст с заголовками в блоке « content ».
Смотрим результат!

А те, кто пришел сюда случайно по запросу «создать сайт визитку бесплатно», могут скачать результат, который получился в процессе сегодняшней практики:

Поздравляю всех, кто изучал мои курсы от самого начала до сегодня, с окончанием изучения основ CSS.

Урааааааа . Вы перешли на еще одну ступеньку выше в сайтостроении.
Если вам интересны мои уроки, то оставайтесь на моем блоге stepkinBLOG.RU, я и далее буду продолжать писать уроки для начинающих по другим темам, таким как «php»,«javascript» и«WordPress».
Удачи!

Как красиво оформить дизайн для сайта? 16 лучших примеров дизайна главной страницы сайта

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

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

Что должен делать современный дизайн сайта и его главной страницы?

Красивый дизайн сайта и его главной страницы четко отвечает на вопрос «Кто я?», «Что я предлагаю?» и/или «Что пользователь может сделать здесь?»

Если вы представляете хорошо известный бренд ( например, Coca-Cola ), вам может сойти с рук отсутствие описания того, кто вы и что вы делаете. Но большинство компаний должны отвечать на эти вопросы, так чтобы каждый посетитель знал, что он находится в « нужном месте ». Если пользователи в течение нескольких секунд не смогут понять, что вы делаете, долго они не задержаться.

Резонанс с целевой аудиторией

Главная страница должна говорить с целевой аудиторией на ее языке. Лучшие дизайны сайтов избегают « корпоративной абракадабры » и устраняют все лишнее и отвлекающее.

Сообщение о ценном предложении

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

Юзабилити

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

Включает в себя призыв к действию (СТА-элемент)

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

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

Постоянно изменяется

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

Использует отличный общий дизайн

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

Вдохновляющий веб-дизайн: 16 лучших дизайнов главной страницы

FreshBooks

Этот дизайн гениален, потому что:

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

Airbnb

• Это оформление главной страницы сайта пример впечатляет: она встречает посетителей полноэкранным видео с красивыми кадрами, высокого разрешения. Она рассказывает о путешественниках, которые проводят время, как будто они местные жители: готовят пищу на кухне, покупают местные сыры. Выглядит очень естественно и достоверно;
• Прямо по центру главной страницы располагается форма поиска с местом назначения и датой прибытия/отбытия, которую ищет большинство посетителей, направляя пользователей к следующему логическому шагу;
• Форма поиска » умная «: она автоматически отобразит последний поиск пользователя, если тот авторизован;
• Основной призыв к действию (» Поиск «) контрастирует с фоном и выделяется, а вторичный призыв к действию виден в верней части.

Mint

• Это супер простой дизайн с сильным заголовком и подзаголовком без сленга;
• Домашняя страница обеспечивает безопасную, но спокойную атмосферу, что очень важно для продукта, который обрабатывает финансовую информацию;
• Он также содержит простой и убедительный призыв к действию: » Зарегистрируйтесь бесплатно «. Дизайн CTA также замечателен — иконка в виде замочка попадает точно в цель, сообщая о безопасности еще раз.

Dropbox(Consumer)

• Главная страница сайта Dropbox — пример предельной простоты. Ограничено использование рекламы и видеороликов, а также объединено все фоновое пространство;
• По статическому скриншоту выше трудно понять, но этот оформления сайтов вариант привлекает внимание тонким использованием причудливой анимации в графике;
• Подзаголовок — простой, но мощный: « Открывайте свои файлы где угодно и на любых устройствах, и без труда предоставляйте к ним доступ ». Не нужно расшифровывать какую-либо терминологию, чтобы понять, что делает Dropbox ;
• Акцент на одном первичном призыве к действию: » Зарегистрируйтесь бесплатно «.

Dropbox(Business)

• Это яркий пример обеспечения поддержки сайта для разной аудитории. Она отличается от главной страницы, которая изначально была создана для потребителя ( смотрите выше ). Бизнес-пользователи требуют больше информации, а также дополнительное подтверждение того, что Dropbox(Business) — безопасное и масштабируемое решение для компаний ( проблему восприятия Dropbox решает непосредственно на своей домашней странице );
• Dropbox по-прежнему продолжает применять простой дизайн и брендинг. Он включает в себя только то, что важно: большое изображение с поддержкой рекламы и кнопку » Попробуй бесплатную 30-дневную ознакомительную версию «, призывающую к действию.

Whitehouse.gov

• Создание сайта, который выступает за целую нацию — задача не из легких. Whitehouse.gov постоянно меняется, чтобы отразить главные проблемы и приоритеты. Тестирование и оптимизация — ключевой компонент блестящего дизайна домашней страницы;
• Что особенно замечательно в Whitehouse.gov так это отличие от большинства сайтов, связанных c правительством. Он имеет чистый дизайн и способствует развитию сообщества;
• Довольно легко найти то, что вы ищете, когда оказываетесь здесь. А если вы не можете сразу найти то, что нужно, есть удобное поле поиска.

4 Rivers Smokehouse

• В сочетании с большой картинкой для оформления сайта заголовок « ГРУДИНКА. 18 лет мастерства. Для вашего удовольствия » звучит заманчиво;
• Прокрутка параллакса проведет для вас краткую презентацию услуг, меню и покажет людей, прекрасно проводящих время – прекрасное использование популярного дизайнерского тренда.

Cobb Pediatric Therapy Services

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

Jill Konrath

• Дизайн простой и переходит прямо к делу. Из заголовка и подзаголовка сразу понятно, чем занимается Джилл Конрэт ( и как она может помочь вашему бизнесу );
• Также предоставляется легкий доступ к аналитическим материалам Джил , что важно для установления ее авторитета в качестве основного докладчика;
• Легко подписаться на рассылку новостей и установить контакт – два ее основных призыва к действию;
• Включает в себя логотипы новостных каналов и отзывы, как социальное признание – все правила оформления сайта соблюдены.

Evernote

• За эти годы Evernote превратился из простого приложения, сохраняющего записи в набор инструментов для бизнеса. Это не всегда легко передать на домашней странице, но Evernote проделал хорошую работу по компоновке возможных сообщений в несколько ключевых преимуществ;
• Эта домашняя страница использует сочетание насыщенных, приглушенных цветов в видео, а также подписи ярко-зеленого и белого цвета, чтобы выделить их на общем фоне;
• После простого заголовка (« Помни все »), взгляд останавливается на призыве к действию « Зарегистрируйтесь Бесплатно ».

Telerik by Progress

• « Скучное предприятие » — это не то чувство, которое возникнет, когда вы зайдете на сайт Telerik . Компания предлагает множество технологий и продуктов, использует смелые цвета, интересные дизайны и видеосъемку с энергетикой подобно Google . Одним из важных аспектов является создание обстановки, чтобы посетители чувствовали себя желанными и знали, что имеют дело с реальными людьми;
• Мне нравится простой, выполненный на высоком уровне обзор шести товарных предложений. Это абсолютно понятный способ сообщить о том, что делает компания;
• Реклама несерьезная и легко читается. Они говорят на языке своих клиентов.

Boxbee

• Заголовок представляет собой призыв к действию, направленный прямо на целевую аудиторию: предпринимателей, работающих в индустрии хранения данных;
• Оформление главной страницы сайта имеет чистый и простой дизайн. Он подчеркивает заголовок, а затем сразу же демонстрирует первичный призыв к действию;
• Этот первичный призыв к действию выделяется за счет контрастного цвета.

eWedding

• Для влюбленных, планирующих важный день, eWedding – прекрасное место для создания свадебного сайта. Домашняя страница не загромождена и включает в себя только необходимые элементы;
• Подзаголовок « Создано более чем 800,000 свадебных сайтов! » — это большое социальное доказательство;
• Включает в себя отличные видеоролики продукта, отличный заголовок и убедительный призыв к действию, который уменьшает сомнения благодаря тексту: « Создайте сайт ».

Basecamp

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

charity: water

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

TechValidate

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

ВЛ Виктория Лебедева автор-переводчик статьи « 16 of the Best Website Homepage Design Examples »