Услуги
Портфолио
Прайс
О студии
Рассчитать стоимость
Обсудить проект
DESIGN.WEBS | Студия веб-дизайна
Сроки реализации: 5 недель
Стоимость: 60 000 рублей
Ссылка: www.design-webs.ru
ФИШКИ ПРОЕКТА
Выберите хэштег, чтобы посмотреть подробнее
#АПСКЕЙЛ
#МАСКОТ
#АНИМАЦИЯ
#ПРОГРАММНЫЙ КОД
#AI
Этапы проекта
Комплексный подход от маркетинга до продвижения
Концепция и фирменный стиль:
  • Маркетинговая стратегия: план продвижения компании в интернете
  • Гайд-лайн: разработан документ по фирменной стилистике бренда, на который ориентироваться при создании любого интернет-/рекламного продукта
  • Яркая и запоминающаяся айдентика: разработан уникальный визуальный стиль с акцентом на желто-зеленую цветовую гамму, что создает ассоциацию с технологиями и диджитал-инструментами
  • Оригинальный маскот: Создан запоминающийся талисман, который добавляет бренду индивидуальности и привлекает внимание
Дизайн и UX:
  • Продуманный дизайн-макет: Спроектирован user-friendly интерфейс с акцентом на удобство навигации и понятность контента
  • Адаптивность: Дизайн адаптирован под различные устройства, обеспечивая безупречный пользовательский опыт на десктопах, планшетах и смартфонах
  • Креативная графика: Использованы современные графические элементы и иллюстрации, подчеркивающие профессионализм и креативный подход
Разработка и SEO:
  • Верстка на Tilda: Сайт реализован на платформе Tilda, что обеспечивает гибкость и скорость разработки
  • Zero-блоки: Кастомные Zero-блоки позволили реализовать уникальные дизайнерские решения и расширить функциональность сайта
  • SEO-оптимизация: Настроены заголовки H1, H2, H3, мета-теги, что способствует естественному продвижению в поисковых системах
  • Оптимизация скорости загрузки: Проведена работа по оптимизации скорости загрузки сайта, что важно для удержания посетителей и улучшения позиций в поисковой выдаче
1
Концепция и фирменный стиль
Планирование образа бренда от А до Я
Ядро бренда
Разработаны название, лого, фирменный стиль, тон оф войс, все ключевые элементы айдентики бренда
Design webs — студия веб-дизайна с акцентом на маркетинг и продвижение

Наше УТП: нейросети на каждом этапе работы.
Искусственный интеллект — ключевой драйвер всех процессов:
  • генерирует уникальный контент,
  • анализирует большие базы данных,
  • помогает быстро находить инсайты в статистике.
Благодаря этому мы делаем проекты в любой нише качественно, быстро и бюджетно
Фирменные цвета
И что они означают с точки зрения маркетинга
  • Темно-серый
    #181918
    Передаёт профессионализм и создаёт ощущение серьёзного подхода. Подчёркивает экспертность и технологичность
  • Светло-серый
    #f7f7f7
    Добавляет чистоту и современность, помогает делать макеты «воздушными». Такой фон делает акценты и дизайн понятными и минималистичными
  • Неоново-зеленый
    #e5ff00
    Ярко выделяет ключевые элементы, показывает креативность и смелость. Ассоциируется с IT-технологиями и ИИ-инструментами, подчёркивая инновационность подхода
Маскот: рыжий кот-айтишник
Фирменный талисман за 0 рублей
Меня зовут Кодди
Я маскот компании Design Webs. Мой хозяин говорит, что просто любит меня. Ох уж эти лицемерные человеки. Я то знаю, что с помощью меня бренд может вызвать симпатию, и закрепить ассоциацию через визуальный образ.
Маскот — это персонаж, который представляет бренд в маркетинговых и рекламных кампаниях

С помощью нейросетей мы разработали и сгенерировали изображение для использования на сайте и в рекламе. Какие нейросети мы используем в работе можно посмотреть тут.
2
Дизайн и UX
Работа с визуалом для сайта
Визуальный контент
Разработаны дизайн-макеты для использования на сайте и других площадках

Адаптивность

Дизайн адаптирован под различные устройства, обеспечивая комфортный пользовательский опыт на десктопах, планшетах и смартфонах

АПСКЕЙЛ
Улучшение качества в 20 раз без снижения времени загрузки
3
Разработка, SEO и продвижение
Сайт от вёрстки до рекламы
  • Платформа — Tilda
  • Zero-блоки для внедрения нужных функций
  • Пошаговая и базовая анимация
  • Уникальный программный код
  • Адаптация под разные устройства

Zero-блоки с программированием

<Программный код для кастомного меню>
<style>
.shape .tn-atom {
  background-color: #000000 !important; /* Исходный цвет */
  transition: background-color 0.3s ease;
}
<style>
.shape .tn-atom {
  background-color: #000000 !important; /* Исходный цвет */
  transition: background-color 0.3s ease;
}

.shape, .text {
  transition: color 0.3s ease;
}

.shape:hover .tn-atom {
  background-color: #FFFFFF !important; /* Новый цвет при наведении */
}

.shape:hover + .text .tn-atom,
.shape:hover ~ .text .tn-atom {
  color: #000000 !important; /* Цвет текста при наведении на .shape */
}
.shape2 .tn-atom {
  background-color: #000000 !important; /* Исходный цвет */
  transition: background-color 0.3s ease;
}

.shape2, .text2 {
  transition: color 0.3s ease;
}

.shape2:hover .tn-atom {
  background-color: #FFFFFF !important; /* Новый цвет при наведении */
}

.shape2:hover + .text2 .tn-atom,
.shape2:hover ~ .text2 .tn-atom {
  color: #000000 !important; /* Цвет текста при наведении на .shape */
}
.shape3 .tn-atom {
  background-color: #000000 !important; /* Исходный цвет */
  transition: background-color 0.3s ease;
}

.shape3, .text3 {
  transition: color 0.3s ease;
}

.shape3:hover .tn-atom {
  background-color: #FFFFFF !important; /* Новый цвет при наведении */
}

.shape3:hover + .text3 .tn-atom,
.shape3:hover ~ .text3 .tn-atom {
  color: #000000 !important; /* Цвет текста при наведении на .shape */
}
.shape4 .tn-atom {
  background-color: #000000 !important; /* Исходный цвет */
  transition: background-color 0.3s ease;
}

.shape4, .text4 {
  transition: color 0.3s ease;
}

.shape4:hover .tn-atom {
  background-color: #FFFFFF !important; /* Новый цвет при наведении */
}

.shape4:hover + .text4 .tn-atom,
.shape4:hover ~ .text4 .tn-atom {
  color: #000000 !important; /* Цвет текста при наведении на .shape */
}
</style>
Его реализация на сайте:
Анимация
Двигающиеся детали цепляют взгляд,
ведут пользователя и превращают
обычный сайт в продающий.

Ваш бренд запомнят — ваш продукт выберут
Базовая анимация⭐
  • Эффекты при скролле — элементы появляются, растворяются, двигаются вверх/вниз.
  • Параллакс — фоны или изображения смещаются при прокрутке.
  • Hover-анимация — кнопки или изображения меняют цвет, масштаб, тень при наведении.
  • Стандартные переходы — плавное появление блоков при загрузке страницы.
Сложная анимация⭐⭐⭐
  • Step-by-Step Animation (Пошаговая анимация) — последовательное появление элементов с заданными задержками.
  • Zero Block Animation — полное ручное управление: движение по X/Y, вращение, масштаб, прозрачность, привязка к скроллу.
  • Sticky-эффекты — элемент «прилипает» к экрану на определённом участке прокрутки.
  • Trigger-based Animation — запуск анимации при достижении триггерной точки (например, при появлении блока в зоне видимости).
SEO-оптимизация
Настроены заголовки H1 H2 H3 и мета-теги
для естественного продвижения в поисковых системах
Оптимизация скорости загрузки
Важно для удержания посетителей и улучшения позиций в поисковой выдаче
Несмотря на большое количество контента, значение загрузки до 200 миллисекунд✅

С помощью специальных программ мы оптимизировали вес изображений,
без потери их качества
Нейросети
  • Генерация текстов
  • Идеи дизайна
  • Визуал и графика
  • Оптимизация загрузки
  • SEO-заголовки
  • Мета-теги
  • Автоматизация рутины
  • Проверка орфографии
  • Структурирование данных