💻 Законы Гештальта в дизайне для No-code разработчика

Если вы ещё не читали наши прошлые тексты про UI дизайн для ноукодеров, то советуем сначала ознакомиться с постами про различия UI и UX дизайна, про типографику и про теорию цвета, а потом уже переходить к этому тексту. Так у вас будет более полное представление о UI дизайне и тех нюансах, которые необходимо знать сильному No-code разработчику. А теперь переходим к законам Гештальта ⬇️

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

Вот пять законов Гештальта:
1️⃣ Близость.
Элементы, находящиеся близко друг к другу, воспринимаются как связанные.
2️⃣ Сходство.
Похожие по цвету, форме и размерам элементы воспринимаются как единые.
3️⃣ Общая область.
Элементы в одной области воспринимаются как связанные и относящиеся к одной группе.
4️⃣ Завершённость.
Элементы воспринимаются как простые и соответствуют привычным шаблонам из жизненного опыта.
5️⃣ Связь.
Физическая связь элементов позволяет воспринимать их как единое целое.

➖➖➖➖➖➖➖➖➖➖➖➖➖

Конечно, это далеко не все нюансы цифрового дизайна. Если вы хотите освоить все тонкости digital-дизайна, научиться делать красивые, эффективные и высокооплачиваемые IT-проекты в любых форматах, — тогда ждём на курсе «No-code разработчик», на который осталось всего 2 свободных места! Скорее оставляйте заявку по ссылке ⬇️

🤑 Хочу стать высокооплачиваемым специалистом: codebreakers.tech/profession

И ловите полезную памятку, как обычно 💙

📹 Видеообзор 10 топовых No-code платформ

Мы в Code Breakers постоянно следим за развитием самых сильных ноукод-инструментов. Ведь флагманские No-code платформы в последние годы развиваются семимильными шагами. Так, как не развивается ни одна другая сфера IT и ни один язык программирования 🔥

И сегодня мы расскажем вам о 10 топовых No-code платформах в непривычном для нас формате — видео на YouTube! Речь пойдёт о тех инструментах, на которые точно стоит обратить внимание тем, кто намерен добиться успеха в сфере разработки без кода!

🎦 Посмотреть видео

А если вы поймёте, что вы готовы изучать No-code через флагманские программы, то скорей записывайтесь на один из наших курсов ⬇️

Топовым платформам для разработки мобильных приложений — Glide и Adalo — мы учим на курсе мобильной разработки. Старт обучения в последний день лета — 31 августа. И это отличный повод сделать карьерный рывок уже этой осенью!

📱Стать мобильным разработчиком: codebreakers.tech/mobile

Если вам нравится веб-разработка и хочется освоить самый мощный инструмент в этой нише — Bubble, то ждём на курсе по веб-разработке — он стартует 30 августа!

💻 Стать веб-разработчиком: codebreakers.tech/bubble

А если вы хотите изучить сразу все инструменты — то записывайтесь на курс «No-code разработчик». Обучение тоже начинается 31 августа!

📱➕ 💻 Научиться всему и сразу: codebreakers.tech/profession

🧑‍💻 Создание веб-приложения для размещения заказов

📄 Описание: Требуется разработать проект – платформу, на которой пользователи смогут размещать заказы, а другие пользователи могут на них откликаться. Процесс разработки дизайна в настоящее время находится в ходе выполнения. Мы стремимся к функциональности, аналогичной profi.ru, однако в рамках минимально необходимого набора функций, так как наш проект нацелен на быстрый запуск MVP.
Основной функционал включает в себя:..Читать далее

🧮 Модель: нет данных
🛠 Стек: на усмотрение разработчика
🔗 Референс|Материалы: нет данных
💶 Желаемый бюджет: 300'000 ₽ за проект

#проект #fl #web

🤚 Откликнуться на проект

💻 21 закон UX-дизайна для No-code разработчика

Сегодня мы расскажем про 21 закон UX-дизайна. Они очень ёмко излагают паттерны поведения пользователей и привычные схемы работы цифровых продуктов. Настоятельно рекомендуем прочитать их хотя бы раз, а потом временами возвращаться и освежать в памяти эту информацию. Используйте накопленный дизайнерами опытами в своей работе!

1️⃣ Закон эстетики юзабилити.
Красивый дизайн = эффективный дизайн.
2️⃣ Порог Доэрти.
Производительность возрастает, когда компьютер и пользователь взаимодействуют со скоростью меньше 0,4 сек.
3️⃣ Закон Фиттса.
Время достижения цели зависит от расстояния до неё и её размера.
4️⃣ Закон градиента цели.
Чем ближе цель, тем больше стремления её добиться.
5️⃣ Закон Хика.
Время принятия решений растёт с количеством и сложностью вариантов.
6️⃣ Закон Якоба.
Пользователи проводят на других сайтах больше времени, чем на вашем.
7️⃣ Закон общей области.
Если элементы находятся в области с чёткой границей, они воспринимаются как группа.
8️⃣ Закон близости.
Объекты, находящиеся рядом друг с другом, воспринимаются как единая группа.
9️⃣ Закон Прегнанца.
Люди мысленно интерпретируют сложные фигуры фигуры и объекты как просты.
🔟 Закон подобия.
Человеческий глаз будет воспринимать одинаковые фигуры как группу и целостную картину, даже если они раздельны.
1️⃣1️⃣ Закон связанности.
Связанные элементы воспринимаются как единая группа.
1️⃣2️⃣ Закон Миллера.
Человек может удерживать в оперативной памяти только 7+/-2 элемента.
1️⃣3️⃣ Бритва Оккама.
Среди разных гипотез и причин выбирать следует ту, что кажется самой очевидной.
1️⃣4️⃣ Принцип Парето.
80% событий происходит из-за 20% действий.
1️⃣5️⃣ Закон Паркинсона.
Работа заполнит всё время, отпущенное на неё.
1️⃣6️⃣ Правило пика и конца.
Пользователи лучше всего запомнят опыт на пике — то есть в начале и во время завершения какого-то важного действия — и в конце.
1️⃣7️⃣ Закон Постеля.
Будьте либеральны в том, что принимаете от пользователей, и консервативны в том, что отправляете им.
1️⃣8️⃣ Эффект серийной позиции.
Люди лучше всего запоминают первый и последний элементы серии.
1️⃣9️⃣ Закон Теслера.
У любой системы есть уровень, после которого её упрощение будет уже невозможно.
2️⃣0️⃣ Эффект Фон Ресторффа.
Если среди одинаковых объектов будет один, отличающийся от остальных, он и запомнится лучше других.
2️⃣1️⃣ Эффект Зейгарник.
Люди запомнят прерванные или незавершённые действия лучше, чем завершённые.

➖➖➖➖➖➖➖➖➖➖➖➖➖

Хотите освоить все тонкости цифрового дизайна, научиться делать красивые, эффективные и высокооплачиваемые IT-проекты в любых форматах? Тогда ждём на курсе «No-code разработчик», на который осталось всего 1 свободное место на ближайший поток! Стартуем в последний день лета — 31 августа.

Скорее оставляйте заявку по ссылке ⬇️

🚀 Сделать карьерный рывок: codebreakers.tech/profession

👨‍💻 Настроить в bubble.io api connector

📄 Описание: На сайт нужно подключить метрики рекламных компаний ВК. Есть флоу: менеджер добавляет ссылку на рекламную компанию в профиль клиента нужно по апи получать статистику.

🧮 Модель: нет данных
🛠 Стек: bubble
🔗 Референс | Материалы: нет данных
💶 Желаемый бюджет: 5'000 ₽ - 15'000 ₽ за проект

#проект #доработка #kwork #bubble #web

🤚 Откликнуться на проект

 📹 Видеоинструкция: создай своё мобильное приложение без кода

Мечтали когда-нибудь сами сделать мобильное приложение? Или хотели, чтобы у любимой кофейни/салона красоты/спортзала (нужное добавить) было приложение?

Мечты ближе, чем кажутся!

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

А как из этих ингредиентов собрать мобильное приложение — показали на нашем YouTube-канале ⬇️

📱Хочу узнать, как создать мобильное приложение

В ролике разрабатываем мобильное приложение для суши-шопа: показываем, как проработать базу данных, построить структуру приложения и как сделать IT-продукт не только эффективным, но и красивым!

➖➖➖➖➖➖➖➖➖➖➖➖

Хотите научиться делать такие и даже более сложные мобильные приложения? Тогда ждём на курсе «Мобильная разработка без кода»! Обучение стартует в последний день лета — 31 августа.

📲Научиться разрабатывать мобильные приложения: codebreakers.tech/mobile

💼 Вакансия "Разработчик на FlutterFlow (со знанием Flutter)"

📄 Описание: Мы компания Brainfab - платформа для проектирования и разработки цифровых продуктов с помощью AI и No-Code инструментов. Разрабатываем веб- и мобильные приложения для основателей и компаний со всего мира. Помогаем делать это очень быстро и эффективно с помощью AI и таких no-code инструментов, как Bubble, FlutterFlow (+Flutter), Xano...Читать далее

🤓 Требуемый опыт: 1–3 года
🛠 Технический стек: flutterflow
👔 Тип занятости: полная занятость, удаленная работа
💶 Размер оплаты: от 1000 до 1600 $ на руки

#вакансия #hh #mobile #flutterflow #от100к

🤚 Откликнуться на вакансию

💻 Мануал Bubble для ноукодера: все элементы визуального редактора

Мы уже много раз говорили о том, что Bubble — это один из самых сильных No-code инструментов, который каждый год развивается семимильными шагами. И работы для тех, кто уже освоил этот топовым инструмент, всегда много. Можете убедиться в этом и заглянуть в наш канал No-code Jobs!

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

Все элементы визуального редактора 
Элементы визуального редактора — всё, из чего будет состоять веб-проект. Они располагаются на боковой панели в разделе Design. 

Раздел делится на 5 подразделов: визуальные элементы, контейнеры, формы для ввода, ре-используемые элементы и шаблонные элементы. Остановимся на каждом из них чуть подробнее.

🟣 Визуальные элементы: кнопка, текстовый блок, иконка, ссылка, изображение, векторная форма, оповещение, видео, вставка HTML-кода, карта.
🟣 Контейнеры: группа, группа с выводом повторяющихся элементов, поп-ап, группа с фиксированным положением, фокус-группа.
🟣 Формы для ввода: ввод краткого текста, ввод длинного текста, чек-бокс, радио-кнопка, инпут-слайдер, выбор времени и даты, загрузка изображения, загрузка файла.
🟣 Ре-используемые элементы: их разработчик создаёт сам. Тут будут появляться элементы, созданные вами, для многократного использования на нескольких экранах.
🟣 Шаблонные элементы: предсозданные на платформы элементы для быстрого доступа — готовая форма регистрации, к примеру.

➖➖➖➖➖➖➖➖➖➖➖➖➖

Если вы хотите освоить один из самых востребованных инструментов в сфере No-code разработки и быстро начать зарабатывать на новом навыке, — приходите к нам на курс «Разработка веб-приложений на Bubble». Стартуем уже в среду, 30 августа!

👨‍💻 Хочу на курс по веб-разработке: codebreakers.tech/bubble

#code_breakers_мануал_bubble

👨‍💻 Создать web приложение на основе гугл таблицы (PWA)

📄 Описание: Необходимо создать платформу с авторизацией. Платформа - электронный журнал "забытых вещей" с синхронизацией базы данных на гугл таблице. 2 роли на платформе- 1 администратор и 1 управляющий платформой(для списания вещей)
Функции: поиск по данным - Дата принятия(автоматически фиксируется при регистрации), описание позиции, порядковый номер (генерируется автоматически при регистрации позиции), номер ячейки хранения, дата списания, дата выдачи, статус (хранение, списано, выдано), где нашли, кто нашел, фото...Читать далее

🧮 Модель: нет данных
🛠 Стек: glide (на усмотрение разработчика)
🔗 Референс | Материалы: нет данных
💶 Желаемый бюджет: ожидает предложений

#проект #fl #glide #mobile

🤚 Откликнуться на проект

📹 Видеообзор: ТОП-4 платформы для разработки мобильных приложений без кода

Вы уже видели наш видеообзор на 4 топовые платформы для разработки мобильных приложений самостоятельно и без кода? Если нет, — то скорее бегите смотреть!

С помощью этого видео вы за 10 минут разберётесь: для каких приложений подходит каждая из программ, в чём их плюсы и ограничения, насколько сложно их освоить и в каком порядке их лучше изучать. В общем, мощный ликбез лучших платформ в мире мобильной разработки без кода! И если вы стремитесь работать в сфере No-code, — эту подборку точно стоит посмотреть.

📹 Смотреть видео: http://youtube.com/watch?v=dZPccaiuGLY&t=1s

Если вы мечтаете сделать своё мобильное приложение или стать No-code разработчиком и начать зарабатывать на новом навыке, — мы вам поможем! Топовым No-code платформам Glide и Adalo мы обучаем на курсе «Мобильная разработка без кода». Где вы научитесь создавать приложения для iOS, Android, а также PWA, получите навыки продуктового мышления и проектирования сильных продуктов, разберётесь с дизайном приложений и, конечно же, научитесь зарабатывать на своём проекте и находить первых клиентов.

Учиться начинаем уже в этот четверг, 31 августа. Стартуйте в мире мобильной разработки без кода вместе с нами!

📲Научиться разрабатывать мобильные приложения без кода: codebreakers.tech/mobile

👩‍💻Как No-code разработчику выйти на фриланс

Один из самых популярных запросов наших учеников: хочу обучиться новому навыку и стать фрилансером. Зачастую это желание появляется, когда хочется самостоятельно распоряжаться своим рабочим временем без потери в доходе. И мы в этом нашим ученикам, конечно, помогаем. А сегодня решили и с вами поделиться нашими лайфхаками! А то вдруг вы ещё не наш студент и всего этого не знаете 😉

✅ Подготовьте финансовую подушку.
Цель фрилансера — найти и отладить через сарафанное радио или через биржу постоянный поток заказов. Но вначале, скорее всего, будет период затишья — то есть нет гарантии, что вы сразу выйдете на стабильный заработок. И это нормально!

Но по этой причине вам понадобится финансовая подушка безопасности. С ней вы будете чувствовать себя спокойно и уверенно в завтрашнем дне.

Насколько большой должна быть подушка? Рассчитайте комфортный ежемесячный минимум (еда, коммуналка, проезд, другие постоянные траты и проч.) и надбавьте 20% на непредвиденные расходы. Отталкивайтесь от этой суммы и накопите столько, чтобы хватило на 3-4 месяца.

✅ Поддерживайте актуальность портфолио.
Портфолио — то главное, что будет рекламировать вас на рынке фрилансеров. 

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

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

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

✅ Используйте сертификаты.
Рекомендуем получить официальный сертификат для каждой No-code платформы, если она такой выдаёт. Потому что иногда IT-проекты «переезжают» с одной площадки на другую и тогда в портфолио появляется дырка на месте проекта.

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

Сертификацию пройти несложно — достаточно загрузить проекты и оформить страницу мастера.

✅ Следите за временем и проектами.
Теперь босса нет и за всем придётся следить самостоятельно. Здесь необходим менеджмент и самоорганизация, а ещё подходящий способ отслеживания рабочих процессов и времени. Советуем вести дела в ежедневнике или таск-трекере.

А чтобы не начать работать 24/7, включайте тайм-менеджмент. Воспользуйтесь сервисами для отслеживания рабочего времени — тайм-трекеры вроде Pomodoro помогут сохранять концентрацию и не забывать делать перерывы. Ну и установите себе чёткое расписание рабочего дня, например: в 10:00 сели за компьютер, в 14:00 сделали часовой перерыв, а в 19:00 оставили работу и пошли отдыхать. Иначе без чёткого расписания вы сильно рискуете просидеть весь день за компьютером, не подняв головы.

➖➖➖➖➖➖➖➖➖➖➖➖➖

Если вы чувствуете в себе силы уйти из найма и отправиться в свободное плавание, — проще всего это сделать через No-code сферу. Приходите на наш курс «No-code разработчик» и сделайте шаг к своей цели уже этой осенью! Стартуем 14 сентября.

🤩Хочу уйти из найма: codebreakers.tech/profession

👨‍💻 Разработать веб-сервис на зерокоде (Bubble, Directual)

📄 Описание: Требуется разработать веб-сервис на одной из no-code платформ. Сервис состоит из Личного кабинета и админ системы.
ТЗ по запросу. Цена и сроки договорные.
При отклике обязательно приложить примеры ваших реализованных проектов на зерокоде.

🧮 Модель: нет данных
🛠 Стек: bubble, directual
🔗 Референс | Материалы: нет данных
💶 Желаемый бюджет: 100'000 ₽ за проект

#проект #freelance #bubble #directual #web

🤚 Откликнуться на проект

💻 Мануал Bubble для ноукодера: редактор свойств, настройка дизайна и стилей

Продолжаем рассказывать об одном из самых мощных No-code инструментов — Bubble. Если вы вдруг пропустили нашу рассылку про все элементы визуального редактора, — прочитать её можно по этой ссылке. А сегодня мы расскажем про редактор свойств, настройку дизайна и стилей.

Редактор свойств 
Это окно настроек свойств каждого элемента. Редактор свойств открывается при клике на элемент поверх рабочей области. И это очень важное понятие — через него происходят все настройки.

Тут настраивается и внешний вид элемента: цвет, размер, положение — выравнивание), и внутренние настройки элемента: сценарии, условия для изменения состояния, реакция элемента на действия пользователя.

Настройка дизайна и стилей 
Настройка внешнего вида, или UI вашего проекта, происходит в разделе Style — это стили и настройка дизайна веб-приложения. Здесь можно настроить шрифты, цвета, стили кнопок, форм для ввода, цвет фона и т.д. А также варианты стилей. Это, к примеру, главный шрифт и цвет текста, набор цветов, правила цветов для элементов. Эти параметры настраиваются во вкладке Style Variables, и они открывают быстрый доступ через настройки отдельных элементов: при настройке элемента появятся все наборы заданных цветов.

Раздел Style помогает No-code разработчику — он ускоряет разработку, потому что позволяет каждый раз не настраивать каждый элемент отдельно, а пользоваться параметрами, собранными в библиотеке. Это по сути UI-кит (набор готовых решений пользовательского интерфейса) в Bubble. Рекомендуется создавать его в начале процесса проектирования — это очень облегчит жизнь.

➖➖➖➖➖➖➖➖➖➖➖➖➖

Если вы хотите освоить один из самых востребованных инструментов в сфере No-code разработки и быстро начать зарабатывать на новом навыке, — приходите к нам на курс «Разработка веб-приложений на Bubble». Стартуем 13 сентября (следующая среда)!

🧑‍🎓Хочу на курс по Bubble: codebreakers.tech/bubble

#code_breakers_мануал_bubble

💸 No-code и финансовая грамотность

Сегодня мы разберём основные законы финансовой грамотности и как No-code поможет вам с ней.

1. Ведение бюджета (учёт расходов и доходов)
Отслеживание доходов и объёма расходов по категориям показывает насколько грамотно вы распоряжаетесь деньгами и позволяет делать финансовые планы и прогнозы.

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

2. Диверсификация источников дохода 
Чтобы чувствовать себя неуязвимым при любых внешних обстоятельствах, будь то увольнение, кризис или политическая обстановка, — необходимо иметь несколько финансовых опор (источников дохода). Именно в таком случае вы будете принимать грамотные решения и не впадать в тревогу и панику.

Знание No-code позволяет вам создать до 9 источников дохода, которые не будут мешать вашей основной занятости, но создавать вам дополнительные финансовые потоки. В сфере ноукода есть возможности как работы в найме, так и на фрилансе, создании собственного бизнеса и др. Знание ноукода — это навыки, которые легко монетизировать здесь и сейчас.

3. Увеличение активного дохода
Если вы развиваетесь в сфере No-code, то у вас есть возможность увеличить доход в течение года в 3-10 раз, что редкость для большинства ниш. Вы можете применять знания ноукода на своём рабочем месте, экономя работодателям миллионы на разработке, и тем самым повышая свою ЗП. А также можете работать на фрилансе и брать больше проектов и со временем часть работ делегировать подрядчикам, тем самым ещё повышая свой доход.

4. Формирование дополнительного гибкого дохода 
No-code — отличный способ для подработки. Например, можно проводить консультации или обучение, и делать всё это без отрыва от основного места работы и в гибком графике.

5. Формирование пассивного дохода 
No-code позволяет создавать источники пассивного дохода. Например, вы можете разрабатывать шаблоны или плагины, загружать их на платформы и получать деньги за их покупку. То есть вы один раз их создали — и зарабатываете на этом хоть всю жизнь, более не вовлекаясь в процесс.

6. Создание дохода в онлайне
Куда бы вы ни приехали, везде есть бизнесы, которым нужны IT-решения. А No-code платформы работают по всему миру и применимы для любых проектов. И всё полностью онлайн! Поэтому, если вы переехали в другую страну или только собираетесь, то No-code точно поможет вам стать востребованным в любой точке мира. 

7. Становление предпринимателем
Безусловно — самый большой доход можно иметь, если работать на себя. А лучший навык для начинающего предпринимателя — это No-code. Ведь вы можете сами создать IT-продукт, запустить его и начать зарабатывать без команды и больших вложний. И после того, как вы проверили жизнеспособность идеи, — можете уже нанимать людей и масштабировать бизнес. Но если вдруг проект не взлетит, то No-code убережёт вас от зря потраченных денег.

➖➖➖➖➖➖➖➖➖➖➖➖➖

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

А если вы хотите уже в этом месяце создать своё первое приложение по трекингу финансов и увеличить количество источников дохода, то приходите к нам на курс по мобильной разработке без кода. Стартуем 14 сентября 🚀

🤑Хочу больше зарабатывать: codebreakers.tech/mobile

Реклама. ИП Радзиевская М.В. ИНН 263402002977. Erid: 2RanymRmJUY.

💼 Вакансия "Ведение ТГ канал - тематика Zerocode разработка"

📄 Описание: Нужен исполнитель, который сможет оживить и в дальнейшем вести тг канал на тематику Low- / No-Code разработка, чат-боты для мессенджеров, разработка чат-ботов, разработка и автоматизация бизнес процессов.
Необходимо делать по одному посту в день - 5 постов в неделю (пн-пт).
Посты должны быть красивыми, продающими, с фото.
Рассматриваю долгосрочное сотрудничество.
Пожалуйста пишите, имеете ли опыт в данной тематике.
Ссылка на канал для предварительного просмотра и получения понимания: https://t.me/lownocodev

🤓 Требуемый опыт: нет данных
🛠 Технический стек: —
👔 Тип занятости: нет данных
💶 Размер оплаты: от 1500 до 4500 ₽

#вакансия #kwork

🤚 Откликнуться на вакансию

💻 Мануал Bubble для ноукодера: настройка адаптивности

Мы продолжаем рассказывать об одном из самых мощных No-code инструментов — Bubble. Если вы вдруг пропустили наши предыдущие посты на эту тему, то их можно прочитать по тегу #code_breakers_мануал_bubble. А сегодня мы расскажем про настройку адаптивности.

Настройка адаптивности
Responsive Engine — движок для настройки адаптивности. Он помогает No-code разработчикам легче прорабатывать правила адаптивности IT-проектов для разных девайсов и размеров экранов.

Responsive Engine позволяет настраивать минимальные и максимальные размеры элементов по умолчанию и относительно размеров экрана, поля и отступы, выравнивание, положение элементов. Настройка происходит через редактор свойств во вкладке Layout.

Давайте разберём, как это работает.

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

💭 Поля и отступы
Также отдельно для каждого контейнера задаются поля и отступы — margins и paddings, в дизайнерской среде прижились англицизмы марджины и паддинги. Они настраиваются в пикселях. Вы можете отдельно настраивать верхние и нижние, правые и левые поля и отступы. Правилам настройки отступов подчинятся все элементы в одном контейнере.

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

➖➖➖➖➖➖➖➖➖➖➖➖➖

Если вы хотите освоить один из самых востребованных инструментов в сфере No-code разработки и быстро начать зарабатывать на новом навыке, — приходите к нам на курс «Разработка веб-приложений на Bubble». Стартуем уже завтра, 13 сентября!

💻 Хочу на курс по Bubble: codebreakers.tech/bubble

Реклама. ИП Радзиевская М.В. ИНН 263402002977. Erid: 2Ranyo1K3Ck.