.jpeg)
Страница-источник на сайте falconspace.ru
«Нам нужен крутой дизайн!» — это первое, что говорят многие заказчики. И нанимают дизайнера за 100-200 тыс. руб, который рисует макеты в Figma, потом верстальщика за ещё 100-150 тыс. руб. Итог — за дизайн отдают 300 тыс. руб, а результат часто оказывается не лучше, чем стандартная тема Bootstrap.
В Falcon Space мы используем Bootstrap 4 — самый популярный CSS-фреймворк в мире. Он даёт современный, адаптивный и аккуратный интерфейс «из коробки». Нам не нужен дизайнер для 90% проектов. Расскажу, почему Bootstrap достаточно и как быстро изменить внешний вид под свой бренд.
Bootstrap — это библиотека готовых компонентов: кнопки, карточки, таблицы, формы, модальные окна, навигация. Все элементы выглядят современно, аккуратно, адаптируются под любой экран (телефон, планшет, ноутбук).
Для бизнес-приложений (CRM, личные кабинеты, маркетплейсы) не нужна «дизайнерская уникальность». Клиентам и сотрудникам важна функциональность, а не причудливые тени и нестандартные шрифты. Bootstrap даёт аккуратный, понятный интерфейс, который не отвлекает от работы.
Примеры компаний, использующих Bootstrap: Twitter (где он родился), LinkedIn, Spotify (админки), а также тысячи стартапов. Это не «колхозный» фреймворк, а индустриальный стандарт.
Все страницы вашего сайта на Falcon Space сверстаны на Bootstrap 4. По умолчанию используется светлая тема с синими акцентами. Но вы можете изменить:
В административном интерфейсе есть раздел «Настройки дизайна», где вы меняете эти параметры без кода. Результат виден сразу, сайт перезагружать не нужно.
Если вам нужен уникальный дизайн (нестандартное расположение элементов, кастомные анимации) — вы можете добавить свой CSS и JS. Но в 80% случаев достаточно базовых настроек.
Клиент — сеть автосервисов «Кар-Сити». Им нужно было привести дизайн CRM в соответствие с корпоративными цветами (красный и чёрный) и логотипом. Мы за 2 часа:
Никакого кода, всё через интерфейс. Клиент остался доволен, не нанимал дизайнера. Экономия — 150-200 тыс. руб.
Зайдите в раздел «Настройки» → «Стили». Там есть форма с полями:
Выбираете цвета в палитре или вводите HEX-код (например, #ff0000 для красного). Нажимаете «Применить» — и весь сайт перекрашивается. Если не понравилось — можно вернуть по умолчанию.
То же самое со скруглением углов: ползунком меняете радиус (0px — квадратные, 8px — скруглённые).
Для подключения своего CSS (если нужно больше кастомизации) — поле «Дополнительный CSS» в том же разделе. Вводите свои стили, например:
h1 { font-family: 'Courier New', monospace; }
.table { border-collapse: separate; }
CSS применяется на все страницы. Не обязательно быть верстальщиком, достаточно базовых знаний.
Bootstrap автоматически делает сайт адаптивным. Меню на телефоне превращается в «гамбургер» (три полоски), таблицы становятся прокручиваемыми по горизонтали, кнопки увеличиваются. Ничего дополнительного настраивать не нужно.
В разделе «Настройки мобильной версии» можно:
Всё без кода.
Мы подготовили 5 готовых тем (светлая, тёмная, минималистичная, корпоративная, медицинская). Вы можете применить любую из них одной кнопкой и затем доработать цвета.
Темы можно посмотреть на странице демо (falconspace.ru/tst-themes).
Bootstrap не подходит, если:
Для 90% бизнес-приложений Bootstrap более чем достаточен. Экономия на дизайне и вёрстке — от 100 до 400 тыс. руб. Наши клиенты подтверждают: интерфейс понятный, привычный, пользователи не жалуются.
Не тратьте деньги на дизайнера, если ваша задача — функциональность. Начните с базовой темы, а если через год решите, что нужно что-то уникальное — тогда и нанимайте дизайнера.