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

Из всего разнообразия, что вы видите на скрине, в реальных проектах чаще всего встречаются четыре «основных блюда». Остальное это скорее экзотика, и знать их стоит ну разве что для того, чтобы где-то выпендриться по случаю😅

Итак, самые частые:

🍔 Hamburger menu / Бургер
Три горизонтальные полоски, в которых спрятана основная навигация. Это база для мобильных устройств: экономит место и выглядит привычно.

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

🍢 Kebab menu / Кебаб
По нажатию открывается выпадающее меню с дополнительными действиями или настройками. Его используют, когда нужно вызвать опции для конкретного элемента.

Где живет: очень популярно в Android-интерфейсах.

🧆 Meatballs menu / Фрикадельки
Три горизонтальные точки, лежащие рядышком. Функционально это брат-близнец кебаба, разница только в ориентации точек.

Выбор между ними часто зависит от платформы:
🟡Android чаще использует кебаб.
🟡iOS чаще использует meatballs.

🍱 Bento menu / Бенто-меню
Сетка из маленьких квадратов (3х3). Похоже на японский ланч-бокс с отделениями. Это иконка для переключения между приложениями или сервисами.

Где живет: самый яркий пример: «девять точек» в Google, где спрятаны Почта, Диск и Календарь. Или там CandyBox?😱😅

Всё остальное на скрине (всякие печеньки, конфетки, хот-доги) это уже скорее дизайнерские изыски, которые редко приживаются в массовом UX. Ведь главное правило интерфейса: пользователь не должен гадать, что произойдет после клика.

А вам на реальных сайтах попадалось что-то интересное из остального списка?

Маленький кусочек одного из разборов на моем курсе. Сколько красоты в рамках разработки одного лендинга😍

Я когда разбираю работы девочек, просто кайфую!
Очень-очень люблю разбирать дизайн❤️

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

Ну правда очень нравится, и правда правочки небольшие😅

PS: Кто оставлял заявку в предзапись на 4-й поток курса, проверьте почту и бота в Телеграм. Предложение с ценами предзаписи я вам уже отправила😉

Я сегодня весь день сижу без интернета. Вай-фай не работает совсем😭

А мобильный настолько слабый, что его не раздать. Только на мессенджеры и хватает.

Даже фигму не открыть😒

Но вообще то я пришла не поныть, а пригласить вас на
2х дневный интенсив «Анатомия тарифов на GetCourse»

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

Мы разберем этот блок «по косточкам» с точки зрения дизайна и верстки.

Программа интенсива:

📌 День 1: Дизайн и логика

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

📌 День 2. Верстка

Сверстаем блок тарифов в прямом эфире на GetCourse.

ИНТЕНСИВ МОЖНО КУПИТЬ В ЗАПИСИ ЗА 1190 РУБ.

Что вы получите:
🟢Продленный доступ к записям интенсива на 1 месяц.
🟢Макет материалов первого дня эфира в Figma.
🟢Готовые коды верстки этого блока со второго эфира в твое личное пользование.

Записи эфиров и коды блока можно купить по ссылке⤵️
https://belousova-anna.ru/tariffs-anatomy

Готовлюсь к эфиру 24 марта: хожу по реальным лендингам и по макетам в портфолио дизайнеров. Скриню для вас примеры блоков тарифов для разбора. 📸

Заметила одну штуку: в портфолио часто встречаются красивые таблицы со сравнением тарифов. Галочки, прочерки, всё наглядно... А вот на реальных лендах такое почти не встретишь. 🧐

Почему? Удобно же!

Да, НО только на десктопе. 💻

А на мобильных устройствах такая таблица просто не входит в ширину экрана 🤷‍♀️ Чтобы увидеть все условия, человеку приходится скроллить вправо.

А это не основной паттерн поведения пользователя на лендинге. Пользователь привык активно скроллить ВНИЗ. Он просто может проскочить блок тарифов, не увидев все варианты.

⚠️ Нельзя прятать критически важную информацию в слайдер!

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

Что еще стоит учитывать при проектировании блока тарифы — расскажу на эфире 24 марта 😉

Купить записи интенсива можно по ссылке ниже: 👇

Купить записи и коды

Почему на курсе «Формула лендинга» не получится сделать плохо?

Многие боятся идти на курсы, потому что боятся остаться один на один с уроками. Или получить сухой ответ в стиле «Принято» или «Поправь шрифты».

У меня на курсе тарифы только с моей личной обратной связью.

А это значит:

✅ Подробный видеоразбор каждой домашки. Я открываю ваш макет в Figma или верстку на GetCourse и записываю видео. Показываю где и как можно улучшить ваш дизайн или как поправить CSS^ чтобы всё заработало идеально.

✅ А еще вы можете смотреть разборы работ других учеников. Это мощнейший инструмент: вы учитесь не только на своих ошибках, но и видите чужие ошибки, и учитесь на них.

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

🟢Полный курс: 52 000 39 000 руб.

🟢Дизайн или Верстка: 32 000 27 000 руб.

Хотите научиться делать лендинги круто под моим присмотром? Присоединяйтесь😉

👉 [ЗАНЯТЬ МЕСТО И ПОСМОТРЕТЬ ПРОГРАММУ]