Дизайн для сайта

Сайт — информационный портал, личный блог врача/нескольких врачей

Целевая аудитория — родители детей от 0 до 18 лет (мужчины, женщины,

возраст 20-40 лет). По возможности, должно быть понятно, что сайт — про

детей.

Тема сайта — светлая, цвета спокойные, не очень яркие (лично мне

нравится бело-голубая-синяя гамма, но не настаиваю), с плавными

переходами. Визуально глаз должен цепляться за логотип и слоган (для

главной страницы), либо за фотографию врача, имя врача, и заголовок

страницы (для внутренней страницы).

Без завитушек, игр со специально подгружаемыми шрифтами и прочих

красивостей. Текстовую информацию подавать по возможности текстом.

Формы блоков – закруглённые, плавные.

Для главной страницы и страниц разделов нужен логотип сайта, в котором

обыгрывается тема помощи детям; примеры тех, что мне нравятся,

приложены.

Высота шапки – 15% от высоты экрана или меньше.

Сайт кроссбраузерный, более-менее одинаково выглядит в Edge, Firefox, Chrome.

Дизайн адаптивный, под десктопы (под разрешение 1920), планшеты,

смартфоны (минимальное, соответственно, 320 – можно с потерей части

функционала).

Постараться, чтобы верстку можно было максимально реализовать средствами

HTML5 и CSS, с минимальным количеством используемых скриптов.

Главная страница:

Сверху – шапка, в шапке логотип и слоган сайта, где-нибудь в углу –

заметное окно поиска, рядом с ним – ссылки на страницы соцсетей и

иконка-ссылка на карту сайта.

Посередине — текст на 3-5к знаков (формата «о сайте»).

Также на главной странице должен быть список всех разделов сайта, их

список заранее дать не могу, и скорее всего в процессе он будет

расширяться. Названия могут быть довольно длинными («Акушерство и

гинекология», например). Здесь нужен ваш совет — как и куда их лучше

поместить.

Футер — стандартный.

Также хорошо бы было разместить на ней последнюю опубликованную (или несколько последних) статей.

Страница раздела

Шапка – та же, что и на главной странице

Посередине – список статьями раздела, каждая статья представлена первым

абзацем, картинкой, технической информацией (дата публикации, автор, за

сколько можно прочитать) и кнопкой «Читать дальше!»

Внизу – пагинация

Футер – стандартный.

Внутренняя страница

Сверху — шапка, в шапке находится фотография врача, ФИО врача

(гиперссылка), специальность врача и кнопка или текстовая надпись

перехода на личную страницу врача. Шапку нужно реализовать так, чтобы

фотографию можно было менять (и подгружаться она будет отдельным

jpg-файлом). Фотографии будут на белом/светлом фоне.

Там же в шапке должны быть иконки соцсетей (вконтакте, инстаграм)

Там же в шапке (или просто сверху) должно быть окно поиска.

Ниже — путь к статье на сайте типа Главная — Раздел — Категория – Статья

Середина — текст статьи.

Структура статьи:

Заголовок

Под заголовком — дата и время публикации, автор, предполагаемое время чтения

Оглавление

Текст (в котором могут быть картинки, списки). После первого абзаца —

отдельный блок «смотрите также». Каждый раздел — со своим заголовком.

После каждого раздела — кнопка «вернуться к оглавлению»

Кнопки «поделиться статьёй с другом»

Раскрывающийся список использованной литературы

Блок «похожие статьи»

Футер — стандартный.

Также где-нибудь нужен список разделов сайта (сбоку? сверху?).

Также желательно, чтобы на макете было отрисовано (для верстальщика):

- Картинки: по центру, справа, слева

- Маркированные и немаркированные списки

- Гиперссылки — до и после перехода по ним

- Список литературы (спойлер в открытом и закрытом виде)

- Внутритекстовые блоки (выделение текста по типу цитаты)

- Левое поле — используется как кнопка «вверх» (как Вконтакте)