Кейс: дизайн для образовательного сайта
С чего все началось
Клиент
На этот раз нашим клиентом стала молодая IT-компания, которая занимается разработкой софта. Они решили запустить экспериментальный проект в новом для себя направлении — онлайн-образовании. Так появился проект образовательного сайта Super Mentor.
Super Mentor — это учебная платформа с видеокурсами на разную тематику. Оплачивая подписку, пользователь получает доступ к образовательным роликам, с помощью которых может научиться новой профессии или просто освоить полезный навык. Для начала Super Mentor планируют обучать профессиям кальянщика, барбера, повара, флориста и блогера. В будущем количество специальностей расширят.
Задача
К нам Super Mentor пришли с задачей разработать логотип и дизайн для их образовательного сайта. Причем, важно было учитывать несколько пожеланий клиента. Во-первых, у заказчика были четкие пожелания по дизайну: и по образу для логотипа, и по цветовой гамме. Во-вторых, уже была определена структура сайта, количество и формат страниц — от этих данных важно было отталкиваться.
В-третьих, заказчик попросил особое внимание уделить маркетинговой составляющей дизайн, чтобы страница каждого курса была продающей и стимулировала интерес пользователей к контенту. Все это нам предстояло реализовать в дизайне.
Решение
Чтобы решить все поставленные задачи, мы составили подробное техническое задание, в котором зафиксировали все пожелания клиента по дизайну образовательного сайта, а также прописали порядок нашей работы.
После того, как клиент согласовал ТЗ, мы приступили к разработке.
Дизайн
Работу над дизайном образовательного сайта мы разделили на два этапа.
1. Разработка логотипа Super Mentor
Начали с разработки логотипа как ключевого элемента, задающего настроение и стилистику для всего дизайна. За основу логотипа взяли специально придуманного персонажа-маскота — Суперментора. Это герой, который помогает пользователям получать новые знания. Референсом тут нам послужил персонаж фильмов и комиксов Супермен.
Мы разработали три варианта логотипа, заказчик выбрал понравившийся, и уже его мы доработали до финального вида. Лого получился веселым, в нарочито детской стилистике — он вызывает доверие и увлекает новыми знаниями. Из цветов преобладают красный и синий с серым фоном.
2. Дизайн образовательного сайта Super Mentor
Взяв за основу логотип, мы приступили к разработке дизайна для самого портала. Выполнили его в схожей цветовой гамме, но в стилистике сделали его более минималистичным. Расставили в дизайне акценты на ключевые элементы страниц, чтобы направлять туда внимание пользователей.
Адаптивность
Дизайн образовательного портала адаптируется под ширину экрана устройства. Мы предусмотрели три формата дизайна:
- Мобильная версия. Ширина дизайна 375 пикселей, область контента 320 пикселей.
- Планшетная версия. Большая часть элементов будет сделана такой же как в мобильной версии, но с позиционированием контента в 2 колонки. Ширина планшетной версии от 640 до 768 с зоной контента 620 пикселей.
- Десктопная версия. Дизайн шириной 1440 пикселей, контентная область 1160 пикселей.
Кому и как будет полезен этот кейс
Этот кейс будет полезен образовательным компаниям, которые оказывают услуги онлайн и хотят получить сайт с качественным дизайном с упором на маркетинговые составляющие. И для тех, кто думает над созданием айдентики — логотипа и фирменного стиля — для своего образовательного проекта.
