Верстка лендинга

classter.online_.png

Личный кабинет

lk.classter.online_dashboard.png

large_Frame 513770.png

medium_Frame 513770.png

small_Frame 513770.png

thumbnail_Frame 513770.png

Frame 513770.png

Разработали лендинг и онлайн-платформу для прохождения курсов по подготовке к ЕГЭ 

Класстер - онлайн-школа подготовки к ЕГЭ

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

Просто и со вкусом

police_2_85ce872316.png

15.png

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

Запись на экскурсию

police_3_6483173897.png

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

Новостные статьи

police_4_b74d627f4b.png

police_news_cf478023a0.png

В рамках ТЗ также была разработана интерактивная карта, позволяющая перемещаться между страницами с описаниями разделов экспозиции, кликая по подсвечиваемым областям.

Интерактивная карта

police_interactive_9ffc9b3635.png

Наполнение и функциональность сайтов общественных и культурных организаций регулируется на законодательном уровне. Одним из требований (в целях предотвращения дискриминации людей со слабым зрением) как раз является наличие "Версии для слабовидящих". 

Мы внедрили соответствующий модуль, который позволяет изменять размер шрифтов, менять контраст сайта и выключать изображения.

Версия для слабовидящих

Снимок веб-страницы_2-11-2023_20219_localhost 1.png

В связи с тем что в ТЗ от заказчика было требование об использовании шаблона архитектуры Jamstack, нашей командой было принято решение об использовании следующих решений:
Frontend сайта написан на React с использованием фреймворка Next.js. Использование этой технологии позволило добиться высокой скорости загрузки сайта и более удобной SEO-оптимизации за счет статической генерации страниц.
В качестве CMS для сайта была выбрана популярная Headless система Strapi.

Стек

large_Slide 16_9 - 7.png

medium_Slide 16_9 - 7.png

small_Slide 16_9 - 7.png

thumbnail_Slide 16_9 - 7.png

Slide 16_9 - 7.png

Создали современный и удобный сайт, который позволит пользователям записаться на экскурсию, изучить материалы, связанные с музеем, а также быть в курсе событий, происходящих в нем.

Музей Московской Полиции

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

Дизайн

Slide 16_9 - 1.png

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

На странице со всеми статьями мы сделали удобную фильтрацию по тегам статей, чтобы посетители могли найти то, что их интересует. 

Блог

Slide 16_9 - 2.png

Slide 16_9 - 4.png

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

Портфолио

Slide 16_9 - 3.png

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

Услуги

Slide 16_9 - 5.png

Slide 16_9 - 6.png

Поиск по сайту

Slide 16_9 - 8.png

#INмузей – это медиа-проект компании о внутренней жизни музеев, информацию о которой мы разместили на отдельной странице. Посетители смогут ознакомиться с проектом подробнее и перейти в их социальные сети и даже посмотреть последний видеоролик с YouTube-канала.

#INмузей

Slide 16_9 - 9.png

Компания Нео ЭКСПО-Арт активно расширяет список предлагаемых услуг, поэтому для них было важно обеспечить наличие возможности дальнейшего редактирования этого списка. Для таких случаев мы используем простое и бесплатное решение – CMS Strapi, который делает работу с контентом гораздо удобнее. Сам сайт в свою очередь написан при помощи фреймворка Next.js.

Разработка

large_Frame 513743.png

medium_Frame 513743.png

small_Frame 513743.png

thumbnail_Frame 513743.png

Frame 513743.png

Разработали современный корпоративный сайт для компании создающей музейные экспозиции

Сайт для компании Нео ЭКСПО-Арт 

59.png

60.png

61.png

62.png

64.png

63.png

large_58.png

medium_58.png

small_58.png

thumbnail_58.png

58.png

Сделали сайт с каталогом для крупного производителя отделочной продукции. 

Duelusso – производитель лакокрасочных материалов

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

Брендинг

Главная идея знака, в использовании галочки из буквы «K». Два элемента образуют закрытый знак, символизирующий сохранение и безопасность, а также бережный и индивидуальный подход к каждому человеку.

Логотип

44.png

Slide 16_9 - 17.png

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

Шрифт

46.png

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

Графические элементы

47.png

Сайт

49.png

50.png

53.png

52.png

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

Вакансии

51.png

large_Frame 513764.png

medium_Frame 513764.png

small_Frame 513764.png

thumbnail_Frame 513764.png

Frame 513764.png

Разработали сайт и фирменный стиль для компании IKsec.

Брендинг и сайт IKsec

Мы сделали дизайн виртуальной экскурсии, основываясь на концепции сайта.

Согласованность

tour.policemuseum.ru_ (3).png

tour.policemuseum.ru_.png

tour.policemuseum.ru_ (1).png

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

tour.policemuseum.ru_ (2).png

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

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

Slide 16_9 - 21.png

large_Slide 16_9 - 20.png

medium_Slide 16_9 - 20.png

small_Slide 16_9 - 20.png

thumbnail_Slide 16_9 - 20.png

Slide 16_9 - 20.png

Мы разработали виртуальный тур по Музею Московской Полиции, который дает возможность не только ознакомиться с экспозицией не только потенциальным посетителям, но и маломобильным гражданам в самом музее.

VR-тур по Музею Московской Полиции

Наши дизайнеры сделали привлекательный и продающий лендинг, опираясь на лучшие практики. Так как школа находилась только на стадии зарождения, для нас важно было произвести на потенциальных учеников впечатление авторитетности и вызвать у них доверие через красивый дизайн и удобный интерфейс.

localhost_3000_4_1aikitai_b1f861777d.png

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

Первое впечатление

localhost_3000_ (12) 1aikitai.png

localhost_3000_ (5).png

localhost_3000_ (6)aikitai.png

localhost_3000_ (7)aikitai.png

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

Обязательным элементом в структуре лендингов является F.A.Q., в которых будущие клиенты могут найти ответы на распространенные вопросы, связанные с учебой в онлайн школе.

localhost_3000_ (8)aikitai.png

localhost_3000_ (9)aikitai.png

Мы внедрили в школу АйКитай CRM-систему AlphaCRM, которая очень хорошо подходит для школ и учебных центров. Мы донастроили ее и интегрировали с сайтом, добавив сбор заявок через формы. Также заказчику в CRM нужно было различать заявки в карточках лидов по их типам: запись на конкретный курс, обратный звонок или заявка на проведение бесплатного занятия.

Интеграция с CRM

localhost_3000_ (10) 1aikitai.png

localhost_3000_ (3)aikitai.png

localhost_3000_ (2)aikitai.png

large_aikitai_cover_22a96befc8.png

medium_aikitai_cover_22a96befc8.png

small_aikitai_cover_22a96befc8.png

thumbnail_aikitai_cover_22a96befc8.png

aikitai_cover_22a96befc8.png

Разработали красивый лендинг для онлайн школы, внедрили CRM и в результате привлекли более 40 учеников в первый месяц.

АйКитай – онлайн-школа китайского языка

Для нас было важно реализовать проект в сжатые сроки, так как планировалось представлять его на конкурсе стартапов. Для пользовательского интерфейса решили использовать популярную библиотеку Bootstrap, которая позволяет быстро создавать UI-компоненты.

Быстрота разработки

Создание открыток

Нами был разработан простой конструктор, в котором можно сделать красивую открытку из набора блоков буквально в пару кликов.

Удобный конструктор

bonfetta.com_create_id=b7e1a6a1-53f4-4111-8f83-47c236a867e3.png

bonfetta_com_create_id=b7e1a6a1_53f4_4111_8f83_47c236a867e3_1.png

bonfetta.com_cards_b7e1a6a1-53f4-4111-8f83-47c236a867e3.png

В личном кабинете можно просматривать созданные открытки и открывать их для редактирования.

Frame 513598.png

Пользователи могут делиться своими открытками просто по ссылке или скачав фирменный QR-код.

Делитесь открытками

bonfetta 9.png

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

Ощущение сюрприза

bonfetta 4.png

large_Slide 16_9 - 1.png

medium_Slide 16_9 - 1.png

small_Slide 16_9 - 1.png

thumbnail_Slide 16_9 - 1.png

Разработали сервис, который позволяет создавать открытки при помощи удобного конструктора предустановленного набора блоков.

Bonfetta – сервис цифровых открыток в виде сайтов

large_Frame 513767.png

medium_Frame 513767.png

small_Frame 513767.png

thumbnail_Frame 513767.png

Frame 513767.png

Создали небольшой интернет-магазин уплотнителей для холодильного оборудования.

Редизайн интернет-магазина уплотнителей

large_Slide 16_9 - 23.png

medium_Slide 16_9 - 23.png

small_Slide 16_9 - 23.png

thumbnail_Slide 16_9 - 23.png

Slide 16_9 - 23.png

Создали небольшой сайт для международного дистрибьютора говяжьих книжек, которые являются деликатесом в странах Азии. 

Сайт Rufs Omasum

55.png

56.png

57.png

large_54.png

medium_54.png

small_54.png

thumbnail_54.png

54.png

Небольшой сайт-визитка для компании ПКО ЕСВ.

Кейс