проектное предложение
Дизайн-система и фреймворк для ПересветЮГ
1
Цель разработки
  • Дизайн-система (UI-kit) — это набор графических элементов, их взаимосвязи между собой и правил использования. Подход к UX/UI дизайну как к системе особенно важен для сложных и постоянно развивающихся интерфейсов. Дизайн-система упрощает процесс разработки, развития проекта, смены подрядчиков, создания дополнительных и смежных сервисов.
  • Фреймворк — также содержат готовые элементы для создания веб-страниц, помогают ускорить процесс создания сайта, выдержать проект в едином стиле. Но если с UI-китом вы сделаете только макет страницы в графических форматах, то фреймворк поможет быстро сверстать готовый для публикации веб-проект. Обычно фреймворк содержит библиотеку CSS и JavaScript-файлов, которые используются в оформлении html-страницы.
Возможности и составляющие функции
2
Модульная система
Страницы имеют гибкую систему блоков. Их можно менять местами, удалять и добавлять новые из библиотеки.
3
Гайдлайны
Прорабатываются единые правила дизайна и верстки для всей системы и фиксируются в гайдлайне. Это позволяет быстро и эффективно верстать любые новые элементы сохраняя стилистику.
Типографика
— Шрифтовые семейства
— Стили заголовков, ссылок, текста, цитат...
— Межстрочные интервалы
Сетки лейаутов
— Проработка сеток для нескольких разрешений (десктоп, планшет, смартфон).
— Проработка сеток внутри блоков.
Вертикальные отступы
— Разработка стандартизированных вертикальных отступов для всей дизайн-системы.
Цветовая палитра
Разработка гибкой цветовой палитры. Основных и акцентных цветов.
Тени
Описание, если это предусмотрено дизайном. стилей для теней подложек и блоков.
Анимация
Описание правил анимации элементов сайта.
Редполитика
Описание редакционной политики - стилистики текстов и заголовков.
4
Элементы и компоненты
  • Кнопки
  • Иконки
  • Табы
  • Таблицы
  • Формы
  • Навигация
  • Ссылки
  • Лайтбоксы
  • Пагинация
5
Сквозные секции-экраны
  • Хэдэр
  • Футэр
  • Новости
  • Отзывы
  • Вопросы и ответы
6
Шаблоны страниц
  • Страницы ошибок
  • Контакты
  • Документация
  • Блог
  • Статья
  • О компании
7
Примеры подобных систем
8
Стек технологий
Проектирование и дизайн
Moqups, Figma, Photoshop
Фронт-энд
HTML5, CSS3, JS.
Gulp, SASS, Git, Webpack
Бэк-энд
NodeJS, Python3, PHP
MongoDB, MySQL, SQLite
Фреймворки
Element, UIkit
React, Vue.js, Angular, Django
Отдельный модуль в дизайн-системе прорабатывается под смарт-каталог Profitbase.
Посмотрите пример структуры
для сайта-портала ПересветЮг
9
Варианты стоимости и сроки
Сайт ЖК
Разработка лендинга для ЖК с несколькими доп. инфо страницами и новостным блогом. Блоки и стили сайта будут использоваться для верстки следующих лендингов, которые будут стоить минимум в 2 раза дешевле (при условии отсутствия дополнительных блоков).

Посмотреть предварительный расчет
198000 ₽
3-4 месяца
Портал застройщика
Полноценная разработка портала застройщика с единой дизайн-системой, бэкэндом, главной страницей, конструктором страниц и админкой.

Посмотреть предварительный расчет
925200 ₽
6-9 месяцев
Сравнение
Сайт ЖК
Портал застройщика
UI-kit компонентов
(дизайн и код)
Шаблоны страниц
Лендинг ЖК с каталогом, список новостей, страница новости, 1-2 простые инфо-страницы
Новости / Блог
В рамках 1 ЖК
Каталог квартир Профитбейс
В рамках 1 ЖК
Интеграция CRM
В рамках 1 ЖК
Единая главная страница всех ЖК Застройщика
Админка CMS с конструктором блоков
Готовые компоненты с дизайном и кодом. Добавляется и редактируется программистом.
Единая архитектура бэкэнда сайта
Копируется под каждый ЖК и существует параллельно / отдельно
Спасибо за внимание.