О проекте
«Корпорация мозга» — это онлайн-платформа, которая служит путеводителем в области образования. Она предоставляет преподавателям возможность размещать свои курсы, а учащимся — находить нужные программы и записываться на обучение.
Заказчик обратился к нам с задачей разработать логотип, создать дизайн сайта и выполнить адаптивную верстку, ориентируясь на подход Mobile First.
Разработка логотипа
На начальном этапе мы сосредоточились на разработке логотипа, который должен был отражать философию компании и внушать доверие пользователям. Мы предложили несколько концепций, из которых был выбран финальный вариант, ставший основой визуального стиля всего сайта.
Дизайн веб-страниц
После утверждения логотипа мы приступили к созданию дизайна для ключевых страниц сайта. В процессе работы мы учитывали интересы целевой аудитории и стремились обеспечить интуитивно понятный интерфейс.
Краткий перечень страниц, для которых был разработан дизайн:
- Главная страница: включает выбор города, навигацию для учеников и преподавателей, блок личного кабинета пользователей, поиск, преимущества сервиса, новости портала, актуальные мероприятия, рекомендации преподавателей и последние статьи.
- Календарь мероприятий: содержит список предстоящих мероприятий и интерактивный календарь с возможностью выбора события на определенную дату.
- Преподаватели: раздел с перечнем преподавателей и подробными карточками, включающими фото, научные степени, рейтинг, стаж работы, стоимость услуг, формат взаимодействия, биографию и отзывы.
- Личный кабинет пользователя: включает регистрацию, настройки аккаунта, профили учащихся и преподавателей, подписку на мероприятия и личные сообщения.
- Библиотеки и диссертационные хранилища: список с фотографиями, адресами, графиком работы и контактами, а также информацией о формате хранения материалов.
- Полезная информация: информационная лента с возможностью подробного просмотра статей.
- Страница курса: включает фотографии, детальное описание, даты и место проведения, информацию об организаторе и форму заявки на участие.
- Поиск преподавателя: страница с удобной системой фильтрации для поиска необходимых специалистов по заданным критериям.
Кроме того, мы разработали UI Kit. Важным аспектом было продемонстрировать интерактивность элементов при наведении и клике, что значительно улучшает пользовательский опыт.
Адаптивная верстка (Frontend)
После завершения работы над дизайном мы выполнили адаптивную верстку с акцентом на подход Mobile First. Это означает, что сайт изначально проектировался для мобильных устройств и затем адаптировался под более крупные экраны. Основные аспекты адаптивной верстки:
- Гибкие сетки: использование процентов вместо фиксированных пикселей для ширины элементов позволяет сайту автоматически подстраиваться под размеры экрана.
- Медиа-запросы: применение CSS медиа-запросов для изменения стилей в зависимости от устройства.
- Оптимизация изображений: использование изображений в различных разрешениях для быстрой загрузки на мобильных устройствах.
- Тестирование на разных устройствах: проверка корректности отображения и функциональности сайта на различных мобильных и планшетных устройствах.
После завершения всех этапов адаптивной верстки мы передали готовые файлы заказчику. Дальнейшая разработка сайта была осуществлена силами клиента. Надеемся, что новый логотип и дизайн помогут «Корпорации мозга» успешно привлекать клиентов и развивать свою деятельность в сфере образования.
