Кейс создания медицинского сайта | Аlеx Z.

Аlеx Z.

ФГБУ «НМИЦ ФПИ»

Сайт медицинского
центра образования

Содержание

01. О проекте

Логотип ФГБУ "НМИЦ ФПИ"

1.1. Клиент

ФГБУ “НМИЦ ФПИ” занимается лечением и исследованиями туберкулёза, ВИЧ-инфекций и инфекционных заболеваний. Является преемником Первого научно-исследовательского института туберкулёза в России, который был основан более 100 лет назад.

1.2. Задача

ФГБУ “НМИЦ ФПИ” обратился на старте открытия Центра образования в Москве. Первую версию сайта нужно сделать за 2 месяца и далее наполнять контентом. Сайт должен удобно представлять информацию и соответствовать требованиям Рособрнадзора.

1.3. Требования

Система управления WordPress;
Интеграция с образовательной платформой Canvas;
Интеграция c Vikon — программой-роботом, которая проверяет сайт на соответствие нормативным требованиям Рособрназдора;
Адаптивность под мобильные устройства;
Версия для слабовидящих;
Англоязычная версия;
Поиск по сайту;
Удобство сайта как для абитуриентов (25-30 лет), так и для преподавателей (45+ лет);
Создание шаблонов страниц для удобного редактирования;
По-академически строгий, но современный дизайн.

02. Проектирование

2.1. Разработка сценариев пользователей

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

2.2. Разработка структуры

Целевая аудитория организации разделена на четыре группы: абитуриенты ординатуры и аспирантуры, преподаватели и врачи. Абитуриентам ФГБУ “НМИЦ ФПИ” предлагает очную аспирантуру и ординатуру, а врачам и преподавателям — дистанционное дополнительное образование. Для удобства пользователей я предусмотрел сегментацию по группам уже на уровне меню.

Отдельное внимание уделил разделу “Сведения об образовательной организации”. Этот раздел должен быть у всех образовательных сайтов по требованию Роспотребназдора, поэтому я заложил эти страницы в структуру.
В каждом разделе можно выбрать интересующую страницу и узнать всю информацию, необходимую для поступления.

2.3. Прототипирование

Я отрисовал более 20 макетов для уникальных страниц и для наглядности собрал их в кликабельный прототип. Чтобы ускорить процесс согласования контента, вносил корректировки в режиме онлайн.

Прототип главной страницы. Все макеты отрисованы в Figma.

03. Дизайн

3.1. Типографика

Клиент хотел, чтобы сайт выглядел академично, строго и при этом современно.
В качестве основного шрифта я взял Roboto, используемый на многих научных сайтах. А в заголовках использовал шрифт с засечками Merriweather, который хорошо смотрится как в крупном, так и мелком размере.
Шрифты merriweather+roboto
На сайте используется несколько способов верстки текста — в 1, 2 и 3 колонки. Это вносит разнообразие в дизайн и помогает размещать длинные тексты в пределах одного экрана.

3.2. Цветовая схема

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

#1E2B5C

Основной

#E6B269

Дополнительный
Цветовой референс. Источник — сайт Высшей школы экономики.

3.3. Главная страница

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

04. Реализация

4.1. Запуск первой версии сайта

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

4.2. ТЗ на фотоконтент

Я против откровенно неестественных стоковых изображений — это выглядит фальшиво и не отражает характер компании. Поэтому составил для клиента ТЗ на фотосессию, а он предоставил “живые” фотографии.

4.3. Учёт требований Рособрназора

Создал и наполнил информацией необходимые страницы в соответствии с государственными требованиями.

4.4. SEO-оптимизация

Заголовки имеют иерархию H1-H6, адреса страниц имеют ЧПУ, тайтлы страниц уникальные и заполняются автоматически.

05. Результат

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

Понравился сайт?
Сделаю ещё круче