Содержание

Верстка адаптивной шапки на Bootstrap

На этом уроке мы сделаем верстку адаптивной шапки сайта (лендинга), используя Bootstrap сетку. Если вы не знаете что это такое, советую почитать статью «Верстка PSD макета по Bootstrap 4 сетке» (часть 1 и часть 2).

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

Для наглядности я установил в браузере расширение Bootstrap Grid, чтобы показать вам на примере шапки сайта, как распределятся 12 колонок сетки между тремя её блоками.

На больших и средних экранах:

  • номер телефона занимает 2 колонки (col-lg-2)
  • меню с ссылками — 8 колонок (col-lg-8)
  • кнопка — 2 колонки (col-lg-2)

У вас уже должен быть в хедере подключен Bootstrap.

Дальше создадим всю необходимую HTML структуру, частично используя бутстраповские и свои CSS классы.

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

<header>..</header>

.header {
    border-bottom: 1px solid #f5f5f5;
    background-color: #fff;
}

По макету размер шапки сайта (ширина между двумя направляющими) равен 960 пикселей. Для фиксированной ширины контейнера, есть бутстраповский класс container. В контейнере всегда есть строка row, а в строке — столбцы col. Структура Bootstrap

сетки напоминает таблицу. Элементы шапки сайта расположены в одну строку и занимают определенное количество колонок.

<div>
  <div>
    <div>номер телефона</div>
    <div>меню сайта</div>
    <div>кнопка</div>
  </div>
</div>

Внутри первого блока вставляем кликабельный номер телефона (для мобильных телефонов).

<div>
  <div>
    <a href="tel:+7499 3228580">+7 499 322-85-80</a>
  </div>
</div>

Во второй блок вставим навигационные ссылки для меню шапки. Обратите внимания, что я здесь не использую, привычные теги списков <li></li>. Считаю, что для построения одноуровневого меню — это лишний код.

<div>
  <nav>
    <a href="#">Как мы работаем</a>
    <a href="#">Преимущества</a>
    <a href="#">Отзывы</a>
    <a href="#">Тарифы</a>
    <a href="#">Партнеры</a>
    <a href="#">Отзывы</a>
  </nav>
</div>

В третий блок поместим кнопку.

<div>
    <a href="">Перезвоните мне</a>
</div>

Поместим все три блока в кастомный флекс-контейнер header__inner.

<div>..</div>

Это необходимо для выравнивания всех элементов шапки в CSS стилях.

.header__inner {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
    max-width: 960px;
    height: 50px;
    margin: 0 auto;
    line-height: 50px;
}

Этот CSS код выравнивает ссылки в меню.

.topnav {
    display: flex;
    align-items: center;
    justify-content: center;
}

Как сделать шапку сайта адаптивной?

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

. Можно взять готовую иконку с FontAwesome и вставить в код сразу после кнопки.

<button>
    <i></i>
</button>

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

@media screen and (max-width: 960px) {
    .topnav {
        display: none;
    }

    .topnav__btn {
        margin-right: 20px;
    }

    .topnav__icon {
         display: block;

        background: #fff;
        border: none;
        font-size: 25px;
         width: 40px;
        height: 40px;
        cursor: pointer;
        position: absolute;
        top: 6px;
        right: 10px;
    }


Заключение

Умение эффективно пользоваться Bootstrap позволяет верстальщикам, не знающим JavaScript, взаимодействовать с пользователями. Хотите узнать об этом больше? Переходите на сайт видео-курса по Bootstrap

.

Пример адаптивной шапки

  • Создано 03.02.2020 10:27:38
  • Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Верстка шапки сайта • фриланс-работа для специалиста • категория HTML и CSS верстка ≡ Заказчик Николай Сыч

6 из 6

проект завершен

  1. публикация

  2. прием ставок

  3. утверждение условий

  4. резервирование

  5. выполнение проекта

  6. проект завершен


  • Десктопная и адаптивная верстка
  • Bootstrap 5
  • Сверстать шапку, строку поиска и боковую панель.
  • Боковая панель остается неподвижной при прокрутке
  • Макет предоставляется в Figma
  • Шапка: https://prnt.sc/z2p7s9
  • Поиск: https://prnt.sc/z2ox6l

Верстка меню под WordPress. Меню должно выводится через стандартные настройки WordPress.

Просьба обратить внимание на выпадающее меню. Оно двухколоночное https://prnt.sc/z2sdu9. Но выводится должно стандартными средствами вордпресс. 

Отзыв заказчика о сотрудничестве с Nadiia Haida

Верстка шапки сайта

Качество

Профессионализм

Стоимость

Контактность

Сроки


Спасибо. Все было выполнено в срок. Все помарки оперативно устранены.

Отзыв фрилансера о сотрудничестве с Николаем Сычом

Верстка шапки сайта

Оплата

Постановка задачи

Четкость требований

Контактность


Рекомендую работать с данным заказчиком. Чёткое и понятное задание. Оплату не задерживал. Быстро выходил на контакт.

Nadiia Haida | Сейф

  • Ставки 16
  • Отклоненные 1

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


  1.  фрилансер больше не работает на сервисе

  2. ставка скрыта фрилансером

  3. 1 день400 UAH

    1 день400 UAH

    Добрый день. Готов взяться. Обращайтесь в лс обсудим детали.

  4. ставка скрыта фрилансером

  5. 1 день500 UAH

    1 день500 UAH

    Добрый день! С макетом ознакомился, готов приступить.
    Сделаю полностью адаптивным, под все устройство до 320px.

    Пару примеров моих работ по верстки сайтов.
    http://nst.your-site.ru.com
    http://realty.your-site.ru.com
    http://partnertax.your-site.ru.com
    Готов ответить на все ваши вопросы в личных сообщениях.

  6. 1 день500 UAH

    1 день500 UAH

    Добрый день Николай готов сверстать шапку и поиск все сделаю быстро и качественно

  7. 1 день1000 UAH

    1 день1000 UAH

    Здравствуйте, заинтересовал ваш проект.
    Мой опыт более 3-х лет, верстаю под PixelPerfect.
    Портфолио в профиле!
    Сделаю быстро и качественно.
    Учту все ваши пожелания.
    Жду вашего ответа.
    Спасибо

  8. ставка скрыта фрилансером

  9. 1 день300 UAH

    1 день300 UAH

    Здравствуйте, готов сотрудничать с вами , сейчас свободен, занимаюсь веб разработкой уже более 4 лет, Вёрстка будет полностью кроссбраузерной и адаптивной под любые экраны планшетов и смартфонов, а также для больших мониторов.Также настрою meta-тэги на SEO-дружелюбность и выведу все в зеленую зону на Google PageSpeed

    Примеры работ:

    http://barbershop. nwdev.net/

    http://grano.nwdev.net/

    Мои навыки:html5, css, sass, git, gulp,js/jquery,CMS, vue.js, php,python, opencart, mysql работаю в phpshtorm и Figma, Zeplin, Avacode,Photoshop

  10.  фрилансер больше не работает на сервисе

  11. 1 день400 UAH

    1 день400 UAH

    Добрый день, Николай.
    Выполню Ваш заказ точно по макету.
    Готова приступить к выполнению сразу после утверждения.
    Пишите в лс обсудим детали и Ваши пожелания.
    Портфолио можно посмотреть в профиле.

  12. 1 день300 UAH

    1 день300 UAH

    Добрый день, увидел, что нужно сделать.
    Сверстаю качественно, применяя сетку Bootstrap 5. Меню будет адаптивным под все современные устройства.
    Буду рад сотрудничеству 🙂

  13. 1 день700 UAH

    1 день700 UAH

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

  14. 1 день300 UAH

    1 день300 UAH

    Добрый день!

    Сделаю чистую вёрстку, настрою меню с админ панели, как вам и нужно.

    Жду ответ!

  15.  фрилансер больше не работает на сервисе

  16. 2 дня3000 UAH

    2 дня3000 UAH

    Доброго дня!
    Можемо зробити та розпочати просто зараз) Надсилайте фігму, щоб можна було детальніше ознайомитись дизайном)

  1. 7 дней10 000 UAH

    7 дней10 000 UAH

    Здравствуйте, меня зовут Роман, занимаюсь версткой и разработкой сайтов на WordPRess 3 года и могу Вам помочь.

    Заинтересовало ваше задание, делал уже такие проекты и все было успешно

    Примеры работ можете посмотреть

    Работаю на качество и делаю заказ в срок также вношу правки после сдачи проекта

    Готов обсудить задания в личной переписке, оплата и сроки тестовая, все обсудим в личной переписке
    …

    Всегда на связи, отвечаю в течении 30 мин.


1 год назад

259 просмотров

Как сверстать шапку сайта html css

Шапка страницы

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

Рис. 6.3. Ширина шапки

Само добавление картинки в шапке делается через фоновый рисунок, который необходимо выровнять по центру элемента <header> .

В идеале рисунок должен иметь большую ширину от 2000 пикселов, тогда практически при любом разрешении монитора рисунок будет показывать центральную часть, обрезая всё, что не помещается в окно. Но беда в том, что изначально картинка не настолько широкая, а рисовать бесконечно тянущиеся по бокам чёрные полоски не хочется. Один из вариантов решения это включить повторение фона по горизонтали. Те, у кого разрешение 1280 пикселов по ширине и меньше, увидят единственную картинку, а владельцы широких мониторов смогут полюбоваться сразу несколькими животными и одновременно заходящими солнцами. Здесь важно подредактировать рисунок так, чтобы он без стыков совмещался сам с собой по горизонтали (рис. 6.4). Градиент для наглядности спрятан.

Рис. 6.4. Совмещение изображения по горизонтали

На данном рисунке место стыка обозначено стрелкой и промежутком, чтобы стык можно было заметить. Если правильно отредактировать правую и левую часть фоновой картинки, то она будет повторяться по горизонтали без видимых стыков, как один сплошной рисунок. Остаётся слегка подправить стиль, заменив значение no-repeat (без повторения) на repeat-x (повторение по горизонтали).

На этом можно считать, что фоновый рисунок в шапке готов (рис. 6.5).

Рис. 6.5. Фоновая картинка для шапки

В формате PNG-24 файл с фоном размером 1325х405 пикселов занимает около 32 Кб, а в PNG-8 с 256-цветовой палитрой, где качество градиента несколько хуже — около 15 Кб. Можно разбить фон на две составные части — градиент и картинку и сохранить каждое изображение в своём формате, что должно привести к повышению качества отображения градиента. Впрочем, 32 Кб для столь большого изображения это немного и дополнительную оптимизацию кто-то посчитает «экономией на спичках». Тем не менее, альтернативный подход к созданию шапки сайта кому-то окажется полезным, а при желании вы можете его пропустить.

Оптимизация шапки

Поскольку градиент в шапке повторяется по горизонтали, его можно вырезать из макета и установить как фоновую картинку. На рис. 6.6 показан градиент высотой 405 пикселов, подготовленный для этой цели. Формат PNG-24 не вносит искажения в изображение, а градиенты хорошо сжимает (итоговый объем 402 байта), так что в этом случае однозначно следует использовать именно его. Рамка вокруг рисунка добавлена для наглядности.

Рис. 6.6. Градиентный рисунок (header-gradient.png)

Картинка с силуэтными животными делается на прозрачном фоне и высотой 198 пикселов, нет смысла делать её на всю высоту шапки, поскольку она занимает лишь часть. Фрагмент изображения показан на рис. 6.7. Шахматное поле означает прозрачность.

Рис. 6.7. Фоновая картинка с прозрачностью (header-animal.png)

Поскольку сохранение этой картинки идет в формате PNG-8, у которого только один уровень прозрачности, в отличие от 256 уровней формата PNG-24, важно обеспечить корректное наложение на градиентный фон. Для этого при сохранении в Photoshop-е надо указать цвет краёв (Matte) близкий к средней части градиента, где идёт наложение силуэта. Примерно это цвет #9de1f0. В этом случае не возникнет грязных контуров вокруг деревьев и животных, а картинка при наложении на градиент будет восприниматься как единое целое.

Два рисунка для фона шапки подготовлены, пишем код HTML.

И стиль для элемента <header> и слоя header-bg .

В итоге объем файлов оказался 12,5 Кб, что даже меньше ожидаемого.

Название сайта

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

  1. Использовать формат PNG-24 при сохранении прозрачности.
  2. Сохранить рисунок в формате GIF или PNG-8 с фрагментом градиента, а затем наложить рисунок на градиент так, чтобы совпадение было с точностью до пиксела.

Очевидно, что второй способ имеет ряд недостатков — изображение нельзя сдвинуть даже на пару пикселов, оно привязано к градиенту, и если его градиент изменить, придётся менять и картинку. Так что сохраняем заголовок в формате PNG-24. Код HTML останется прежним, а стили расширятся.

Выравнивание по центру делается через свойство text-align , добавляемое к родителю тега <img> , а сдвиг вниз через свойство top . Чтобы это свойство сработало, необходимо для картинки задать относительное позиционирование с помощью свойства position со значением relative .

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

Значение / у атрибута href указывает на главную страницу и работает только на веб-сервере, но никак не локально.

Верстка сайта с нуля. Меню навигации. Часть 1.

Начиная с этого урока, мы будем учиться верстке сайта с нуля в популярном flat стиле. Эта тема очень объемная и мы посвятим ей не один урок. Что означает это на практике?

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

Будем исходить из того, что заказчик оказался добрым человеком и предоставил нам вместе с макетом и заранее порезанные картинки. Для создания HTML страницы, нам потребуется: .psd макет, папка с картинками, Photoshop, Notepad++ и браузер.

Мы говорим с вами про макет, но пока это только картинка, из которой нам предстоит сделать полноценную HTML страницу.

Обратите внимание, что наш макет представляет из себя классический пример flat дизайна. Flat дизайн – это значит «плоский», здесь вы не увидите объемных теней, градиентов и других «наворотов».

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

Верстка шапки сайта

Создаем HTML страницу и делаем разметку нашей шапки. Содержимое шапки пишем внутри парного тега header.

Без оформления CSS стилями выглядит шапка совсем не так, как надо. В файле style.css, пропишим селекторам соответствующие свойства, чтобы шапка выглядела согласно макету.

Разберем основные моменты. Логотип и меню навигации должны быть в одной строке. Поэтому в блоке div с логотипом задаем обтекание — float: left; Навигационное меню встанет справа от логотипа. Пункты меню должны быть в одной строке — display:inline-block; Отменить обтекание можно вставкой в код пустого дива — <div ></div>, в стилях соответственно записываем так — .clear

Грамотное адаптивное выравнивание шапки сайта

Зачастую вроде бы простые задачи верстки требуют сложной структуры HTML-разметки и использования CSS-трюков. Центрирование элементов или выравнивание контента может быть очень утомительным. Одна из таких задач — это выравнивание элементов верхней части сайта так, чтобы логотип был слева, а пункты меню — справа. Можно использовать float и position:absolute, а для выравнивания по вертикали — добавлять margin и padding разным элементам. Вроде бы ничего сложного. Но если сайт должен корректно отображаться и на мобильных устройствах, возникает много проблем.

Ниже описан лаконичный способ решения этой проблемы.

HTML-разметка максимально проста:

Высота шапки фиксированная, добавляем text-align: justify, для дочерних элементов:

Добавляем display: inline-block для всех элементов nav, чтобы можно было расположить их друг за другом:

Чтобы атрибут text-align: justify работал, как мы хотим, нужно использовать небольшой трюк с псведоэлементами, который был найден в статье Perfectly justified CSS grid technique using inline-block, автор Jelmer de Maat:

В итоге получилось выравнивание по горизонтали, без использования float и position:absolute. Теперь необходимо выравнивание элементов по вертикали. При использовании vertical-align для элементов nav будет зависимость от высоты родительского блока — шапки. А это не очень правильно. Примеры использования vertical-align: top и vertical-align: middle на jsbin. Ниже представлен возможно наиболее удобный способ вертикального выравнивания.

Используем снова псевдоэлементы. используя пример из статьи Centering in the Unknown, упомянутый Michał Czernow:

В результате получается то, что нужно:

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

Используем трюк с псевдоэлементом на header:

Выглядит намного лучше:

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

Если же необходимо задать высоту шапки, то придется использовать и второй трюк с псевдоэлементами, и добавлять media query для экранов разных размеров:

Результат адаптивен и на мобильных устройствах выглядит так:

В примере используется 820px для наглядности, на живом сайте значение конечно должно быть другое, в соответствии с требованиями. Для поддержки Internet Explorer 8 необходимо вместо “::” использовать “:” для псевдоэлементов.

14 удивительных заголовков веб-сайтов для вашего вдохновения (обновлено в 2022 г.)

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

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

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

А теперь подумайте о заголовке главной страницы.

Что такое «заголовок» в наши дни?

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

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

Итак, что вы сделаете с этим пространством, чтобы заинтересовать своих посетителей?

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

Примечание: Не все приведенные ниже примеры сайтов используют WordPress, но их можно сделать с помощью WordPress.

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

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

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

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

1. Негабаритное главное изображение

Некоторые заголовки, например, у Cleverbird Creative, огромны.

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

Возьмем, к примеру, веб-сайт Cleverbird Creative. Он использует уникальное и яркое изображение, наложенное на простой текст, чтобы приветствовать посетителей. Нет никакой ошибки в том, к чему они здесь стремятся: упрощенная красота. Кроме того, иметь Чудо-женщину не помешает.

2. Скользящие изображения

Ммм… мороженое…

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

3. Преобразующие изображения параллакса

Веб-сайт Anakin Design Studio.

Параллакс уже некоторое время является особенностью современного веб-дизайна. Хотя использование эффектов параллакса считалось «горячим» несколько лет назад, оно по-прежнему популярно, и заголовок оказался идеальным местом для применения такого рода визуальной «иллюзии» в веб-дизайне. Однако в последнее время вы увидите, как дизайнеры придают своей параллаксной прокрутке преобразующее преимущество, вероятно, чтобы удивить посетителей неожиданным результатом прокрутки. Студия дизайна Anakin сделала именно это со своим заголовком.

4. Видеофоны

Веб-сайт Brave People отлично справляется с размещением видео.

Фоновое видео — еще одна из последних тенденций, которая действительно лучше всего работает в заголовке главной страницы. Этот от Brave People отлично справляется с заданием тона их веб-сайта, демонстрируя различные клипы.

5. Скрытая навигация

Заголовок каналов очень современный, а навигацию трудно заметить.

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

6. Бренд-талисман

Как сказал бы Тигр Тони о заголовках талисманов: «Они классные!»

Если заголовок — это место, где посетители могут познакомиться с вашим сайтом, что может быть лучше, чем познакомить их с «персонажами», которых они встретят на своем пути? Если на вашем сайте используется фирменный талисман, как на сайте Kellogg’s Frosted Flakes, самое время и место показать их.

7. Привлекательная типографика

Сильная типографика действительно может сделать ваш контент сияющим.

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

WPMU DEV AccountFREE

Бесплатное управление неограниченным количеством сайтов WP