Редизайн сайта образовательного курса
Я создала учебный редизайн страницы программы «Психологическое и психотерапевтическое консультирование в работе с психической травмой».
Моя цель: лендинг, который отражает проект и выглядит современно, гармонично и практично. Чтобы улучшить пользовательский опыт, я использую знания того, как люди воспринимают визуальную информацию и мир через чувства.
Главной бизнес-задачей сайта я считаю сбор и трансляцию информации для привлечения слушателей. То есть страница должна вызывать интерес и доверие пользователей. Главным показателем успеха здесь будет являться заполнение анкеты на поступление.
Институт «Гармония» основан 1988 году. Это ведущий в Санкт-Петербурге центр профессиональной переподготовки и повышения квалификации для психологов, супервизоров и всех, кто хочет развиваться в области практической психологии.
Одна из программ института — «Психологическое и психотерапевтическое консультирование в работе с психической травмой» — у которой есть отдельная страница на сайте для привлечения новых слушателей.
Одна из программ института — «Психологическое и психотерапевтическое консультирование в работе с психической травмой» — у которой есть отдельная страница на сайте для привлечения новых слушателей.
Мне хотелось передать не только серьезность и глубину данного проекта, но и дружелюбность с открытостью. И сделать это с помощью дизайна, который сформирует нужную эмоциональную связь. Ведь задача всего института — помочь человеку проявить свою уникальность, научиться жить в гармонии с собой, другими людьми и миром.
Я провела анализ страницы проекта, а также сайтов коллег — учебные программы вузов и курсы психологических центров. Также собрала референсы сайтов из других областей, которые отличались интересной для этой задачи версткой и дизайн-элементами.
Далее выделила основные особенности страницы, которые стремилась изменить в своем редизайне. Такие задачи я ставила перед собой:
1) Отразить аутентичность образовательного проекта
2) Улучшить читаемость и облегчить восприятие материала
3) Создать актуальный дизайн с учетом современных трендов
1) Отразить аутентичность образовательного проекта
2) Улучшить читаемость и облегчить восприятие материала
3) Создать актуальный дизайн с учетом современных трендов
Что для этого сделала:
1) Переработала структуру сайта: изменила порядок изложения, объединила текстовые элементы по смыслу, минимально отредактировала текст.
2) Создала визуальную концепцию: блочная структура в виде карточек с указанием категорий.
3) Проработала:
· текст (составила иерархию в тексте, поработала с типографикой и ее размерной сеткой);
· цвет (использовала фирменный синий цвет для контрастности и выделения акцентов);
· форму (создала пропорциональные скругленные прямоугольные блоки, плашки и кнопки);
· верстку (собрала симметричную композицию со своим ритмом, разработала систему отступов).
4) Сверстала сайт на Тильде и создала адаптивную версию для телефона. Интерактивные кнопки и меню, плавный скролл, адаптив на мобильные устройства и намеренное отсутствие анимации, чтобы не отвлекать от большого объема информации.
1) Переработала структуру сайта: изменила порядок изложения, объединила текстовые элементы по смыслу, минимально отредактировала текст.
2) Создала визуальную концепцию: блочная структура в виде карточек с указанием категорий.
3) Проработала:
· текст (составила иерархию в тексте, поработала с типографикой и ее размерной сеткой);
· цвет (использовала фирменный синий цвет для контрастности и выделения акцентов);
· форму (создала пропорциональные скругленные прямоугольные блоки, плашки и кнопки);
· верстку (собрала симметричную композицию со своим ритмом, разработала систему отступов).
4) Сверстала сайт на Тильде и создала адаптивную версию для телефона. Интерактивные кнопки и меню, плавный скролл, адаптив на мобильные устройства и намеренное отсутствие анимации, чтобы не отвлекать от большого объема информации.
Результаты:
1) Улучшила восприятие контента.
Баланс элементов позволяет снизить когнитивную нагрузку, а значит убрать препятствия для освоения информации. Однотипные блоки формируют целостную, по-хорошему предсказуемую картину и создают ритм в композиции. Их повторяемость упрощает восприятие информации, делая интерфейс интуитивным.
Система отступов в этом контексте является не просто эстетическим выбором, но и инструментом, способствующим сохранить единообразие для комфортного восприятия. В целом, пространство организовано последовательно, что помогает быстрее адаптироваться на сайте и обработать информацию.
2) Заложила с помощью дизайна чувства, которые отражают сам проект.
Скругленные края прямоугольных блоков сейчас особенно популярны в дизайне. Сама форма ассоциируется одновременно и с надежностью, устойчивостью, профессионализмом и с доступностью, дружелюбностью. Пропорциональные отступы, сбалансированные блоки информации, и симметричное распределение визуальных элементов создают ощущение гармонии, порядка и основательности.
Геометричные формы придают чистоту интерфейсу, делая его менее шумным и более сосредоточенным. Внедрила чистые и минималистичные решения, созвучные современному стилю в веб-дизайне. Все вместе это работает на повышение комфорта и доверия пользователей.
3) Сформировала наглядную структуру материала.
Программа рассчитана для специалистов, которые серьезно подходят к выбору обучающих программ. Для основательного решения нужен вдумчивый подход — важно изучить всю информацию подробно. Чтобы пользователь мог легко найти и прочитать то, что ему нужно, я придумала наглядные блоки и сделала плотную верстку с достаточным количеством «воздуха». Выделила доминанты на экране, чтобы управлять вниманием пользователя.
1) Улучшила восприятие контента.
Баланс элементов позволяет снизить когнитивную нагрузку, а значит убрать препятствия для освоения информации. Однотипные блоки формируют целостную, по-хорошему предсказуемую картину и создают ритм в композиции. Их повторяемость упрощает восприятие информации, делая интерфейс интуитивным.
Система отступов в этом контексте является не просто эстетическим выбором, но и инструментом, способствующим сохранить единообразие для комфортного восприятия. В целом, пространство организовано последовательно, что помогает быстрее адаптироваться на сайте и обработать информацию.
2) Заложила с помощью дизайна чувства, которые отражают сам проект.
Скругленные края прямоугольных блоков сейчас особенно популярны в дизайне. Сама форма ассоциируется одновременно и с надежностью, устойчивостью, профессионализмом и с доступностью, дружелюбностью. Пропорциональные отступы, сбалансированные блоки информации, и симметричное распределение визуальных элементов создают ощущение гармонии, порядка и основательности.
Геометричные формы придают чистоту интерфейсу, делая его менее шумным и более сосредоточенным. Внедрила чистые и минималистичные решения, созвучные современному стилю в веб-дизайне. Все вместе это работает на повышение комфорта и доверия пользователей.
3) Сформировала наглядную структуру материала.
Программа рассчитана для специалистов, которые серьезно подходят к выбору обучающих программ. Для основательного решения нужен вдумчивый подход — важно изучить всю информацию подробно. Чтобы пользователь мог легко найти и прочитать то, что ему нужно, я придумала наглядные блоки и сделала плотную верстку с достаточным количеством «воздуха». Выделила доминанты на экране, чтобы управлять вниманием пользователя.
Обратная связь от пользователей:
«Стало ощущаться более структурно. Сразу понятно, что это за продукт и в чем его ценность. Гораздо более современный визуал повышает доверие и создает ощущение „живого и прогрессивного“ сообщества. Грамотные акценты помогают не утонуть в большом объёме текста. Чувствуется погруженность в материал и забота о пользователе».
«До редизайна сайт выглядел очень строго. Мне тяжело было считать всю информацию. После выглядит чётко, ярко, вся информация отсортирована, выделена самая главная. Очень свежо, интересно и в стиле новых технологий. Ещё обратила внимание на интерактивные кнопки — можно перейти сразу на расписание — это очень подкупает. Выглядит стильно, дорого».
Подробнее о логике каждого блока:
Для первого блока собрала карточку курса, в которой сразу отметила основные характеристики и общие вводные. Здесь же на первом экране добавила 2 кнопки «Заполнить анкету» и «Посмотреть расписание» для быстрого взаимодействия пользователя с информацией.
Далее следует блок об авторе программы, поскольку личность ведущего является одним из решающих факторов в принятии решении об участии. Этот раздел формирует доверие к самому курсу.
В блоке «Цель программы» наглядно отразила задачи курса, но в форме результатов для участников. Так пользователь сайта сможет оценить, какую выгоду он получит от программы — в данному случае это знания, практические навыки и диплом.
В отдельном разделе я выделила, что программа рассчитана только для тех слушателей, кто уже имеет подходящую квалификацию.
Далее пересобрала блок, объединив категории в единый раздел «Формат обучения». На отдельных плашках с контрастным фоном я собрала главные технические особенности, чтобы пользователь легко прочитал текст и смог оценить для себя объемы программы.
В следующем разделе перешла к подробному описанию учебного плана, включая все дисциплины, расписание и формы обучения. Старалась сделать наглядным большой массив текста, поскольку он включает ценную информацию о самом важном — о темах, которые будут изучать слушатели.
И после того, как посетитель сайта увидел весь объем и системный подход программы, а значит, составил мнение о глубине и профессионализме, идет блок «Стоимость и условия». Здесь я дублирую главную кнопку с CTA «Заполнить анкету», чтобы подвести потенциальных клиентов к действию.
Завершаю страницу контактами института с различными способами связаться с организаторами и задать дополнительные вопросы.
Далее следует блок об авторе программы, поскольку личность ведущего является одним из решающих факторов в принятии решении об участии. Этот раздел формирует доверие к самому курсу.
В блоке «Цель программы» наглядно отразила задачи курса, но в форме результатов для участников. Так пользователь сайта сможет оценить, какую выгоду он получит от программы — в данному случае это знания, практические навыки и диплом.
В отдельном разделе я выделила, что программа рассчитана только для тех слушателей, кто уже имеет подходящую квалификацию.
Далее пересобрала блок, объединив категории в единый раздел «Формат обучения». На отдельных плашках с контрастным фоном я собрала главные технические особенности, чтобы пользователь легко прочитал текст и смог оценить для себя объемы программы.
В следующем разделе перешла к подробному описанию учебного плана, включая все дисциплины, расписание и формы обучения. Старалась сделать наглядным большой массив текста, поскольку он включает ценную информацию о самом важном — о темах, которые будут изучать слушатели.
И после того, как посетитель сайта увидел весь объем и системный подход программы, а значит, составил мнение о глубине и профессионализме, идет блок «Стоимость и условия». Здесь я дублирую главную кнопку с CTA «Заполнить анкету», чтобы подвести потенциальных клиентов к действию.
Завершаю страницу контактами института с различными способами связаться с организаторами и задать дополнительные вопросы.
PS: немного личного. Это учебный кейс, который я собрала на основе программы института «Гармония», который я особенно ценю. В этом году я начну свое обучение в нем на программе подготовки консультантов экстренной психологической помощи❤️
