Нужно разработать дизайн внутренней страницы сайта – информационной статьи для сайта
для больших, средних и малых экранов.
Часть элементов уже есть и возможно менять их не нужно.
Общая стилистика – академическая, википедия.
Более интерактивные элекменты отсюда:
Страница должна / может содержать один из или все вместе элементы:
0. Хлебные крошки
1. Заголовок Н1
2. Дата публикации
3. Дата обновления
4. поля автор, соавтор, рецензент, проверка фактов – максимально может быть указано 4 позиции. В дизайне нужно предусмотреть, что вместо короткого «автор» может быть указано:
«Медицинская информация проверена»
или
«Опубликовано при содействии страхового эксперта»
То же самое касается имени – вместо фамилии и инициалов может быть указана также должность / статус, например:
«Кандидат медицинских наук Иванов И.И.»
или «Врач первой категории Александрова А.Ю.»
Важно – на примере
видно, что при наведении мыши возникает окно с описанием, фото м ссылкой на редакционную политику – дизайн данного окна также нужно разработать.
5. Ссылка-якорь на видео, если оно есть на странице. Ранее мы ставили иконку видео и рядом писали слово «Видео» и ставили якорь.
6. Ссылка-якорь на блок с рецензиями, если он есть на странице. Предположительно ссылку нужно офрмить также как и ссылку на блок с видео.
7. Кнопки или блок заказа услуги одна, две или три например «Оформить полис долгосрочной визы во Францию» и «Оформить полис для краткосрочной визы во Францию». Приведен пример длинных надписей на кнопках. Они могут быть и короче. Цель конпок / блока – показать пользователю, какие типы страховых полисов можно оформить.
Кнопок может вообще не быть, быть одна, две или три.
8. Раскрывающийся блок «Эта статья относится к серии «Страхование и медицинская помощь во Франции».
Пример блока можно посмотреть на странице:
9. Мини форма калькулятора. Это та форма на которую будет попадать пользователь после нажатия на одну из кнопок в пункте 7. Пример под пунктом 1 здесь:
10. Видео – сейчас вроде встраиваться должно во всю ширину экрана, может быть как-то можно сократить по высотре или настроить раскрытие
11. Блок с рецензиями. Статья будет рецензироваться. У рецензии должны быть: дата, ФИО автора рецензии и его ученая степень (если есть).
Примеры стилей, которые ранее и сейчас применяются на сайте (на всякий случай):
- пример таблицы с описанием страховых рисков
- коллекция кнопок, используемых на сайте
ВАЖНО:
1. Иконки должны использоваться из последней версии Font Awesome (куплена про версия). Рисованные и другие не подойдут.
2. Несмотря на большое кол-во информации в верхней части статьи – наша цель, чтобы она занимала как можно меньше места (по вертикали) чтобы пользователю не пришлось скролить до контента.
3. Дизайн нужно сделать с учетом
В первой итерации мы рассматриваем только шапку с авторами, ссылками на видео и рецензии и кнопками «оформить …» только для мобильной версии.
Другие блоки не нужны. Десктопную версию будет делать после мобильной
Нужна мобильная версия, так как мобильный трафик больше, чем десктопный.
Конечно нужно ориентироваться на средние / маленькие экраны мобильных.
Что важно:
1. Кнопки или блоки должны быть на первом экране мобильного.
2. Пользователю который хочет купить полис – должно быть понятно, что опция такая есть.
3. Пользователю, который хочет почитать статью должно быть понятно, что он попал на исследовательскую статью, со всеми необходимыми атрибутами.
Если шапка будет большой и занимать весь первый экран – пользователю может быть непонятно куда он попал.
Ссылки на блоки с видео и рецензиями предпочтительно оформить в виде ссылок-якорей с соответсвующим подчеркиванием.
Общий комментарий – на главной странице у нас используются «гусики» вверх / вниз и вправо и плашки серые как бы деленные на 2 части цветом – этот наши фирменные элементы, их нужно использовать.
Проблемы:
1. шапка с кнопками «оформить. …», ссылками на видео и рецензии, авторами и рецензентами может не помещаться не первый экран мобильного – этого нужно избежать!
2. пользователи должны понимать, что перед ними в первую очередь исследовательская публикация