← Назад в «Блог»
580

Улучшаем шапку сайта

Переделываем шапку на сайте бухгалтерских услуг.

Улучшаем шапку сайта 1
Старая версия шапки

Давайте посмотрим и скажем, что здесь не так.

  1. Шапка растянута на всю ширину страницы, это плохо так как на широких мониторах будут дыры, как и видно на изображении выше.
  2. Лого и навигация занимают очень мало места, хотя и являются важными элементами в шапке сайта.
  3. Нет призыва к действию, номера телефона, шапка сама по себе в данном виде бесполезна.
  4. При клике на пункт меню ничего не происходит. Поначалу я не понимал что там не там, оказывается что ссылка-то была, но это было не слово, а полоска высотой в 1px под пунктом меню. Только при нажатии на неё, браузер переходил на другую страницу. Сложная задачка 🙂
Улучшаем шапку сайта 2

Теперь давайте исправим эти недостатки

Улучшаем шапку сайта 3
Первая версия обновленной шапки сайта

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

Спустя время я решил её немного подкорректировать. Я задал себе вопрос: «Что хочет сделать человек, попав на сайт бухгалтерских услуг?». Сам я в прошлом искал информацию на таких сайтах, и единственное что я хотел, задать вопрос, попросить помощи.

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

Улучшаем шапку сайта 4
Вторая версия обновленной шапки сайта

Как вам? Понравилась трансформация?

Полезно
2
1
Непонятно
Поделиться
Отправить
Линкануть
Вотсапнуть

Канал о фрилансе

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

← Назад в «Блог»

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *