Как создавался
сайт по сертификации
Часть 2: проектирование и дизайн клиентской части
Точнее, его отсутствие :)
Проектировал страницы в Balsamiq Mockups (использую его для простых случаев). Получился список шаблонов:
1. Главная.
2. Страница со списком экзаменов.
3. Страница экзамена.
4. Страница вопроса с ответами.
5. Страница с формой обратной связи.
Ведь пользователям нужно дать возможность связаться с тобой как минимум двумя способами в 2020 году: через мессенджеры и форму обратной связи на сайте. Для коммерческих сайтов нужен ещё телефон.
6. Страница с картой сайта HTML.
Это скорее для SEO (перелинковка).
Следующим шагом нужно было создать дизайн. Для тех, у кого крайне ограниченный бюджет, есть два пути: подключить библиотеку Bootstrap, где уже отрисована и свёрстана большая часть элементов, которые могут понадобится, или сделать на вкус верстальщика. Так вы экономите на дизайнере (а это всегда дорого, если качественно делают) и сокращаете срок разработки.
Когда вы пользуетесь такими способами, нужно упрощать схему расположения элементов на странице. Посмотрите
на готовые страницы. Видите, что большая часть элементов текстовые, расположены в одну колонку и с выравниванием по левому краю? Это сильно упрощает вёрстку и ускоряет запуск проекта.
Я выбрал способ верстать самому без библиотеки, чтобы сайт сильнее отличался от конкурентов. Ведь контент у всех одинаковый и нужно выделяться.
Сайтом будут пользоваться в основном с десктопов, поэтому делал акцент на большие экраны: размер шрифта высчитывается в зависимости от ширины экрана и текст даже на очень широких мониторах крупный и хорошо читается. Со всех углов кричат о росте мобильного веба, но для каждого проекта нужно думать об аудитории отдельно и проверять своё предположение вордстатом (поможет вкладка с распределением поисковых запросов по типам устройств).
На самое видное место каждой страницы вынес поисковую строку. Обычно сайты с ответами на вопросы сертификации создаются на шаблонах WordPress, где не учитываются особенности проекта и самое используемое место на сайте оказывается крохотным где-нибудь на боковой панели.
Я пользуюсь принципом максимальной простоты во всём, что делаю. Поэтому сайт содержит только те элементы, которые нужны для конкретной цели.
Например, я видел на аналогичных сайтах блок со свежедобавленными вопросами. Видимо, он шёл по умолчанию в шаблоне и его не стали убирать.
Или блок с копирайтом и годом создания сайта, который не несёт никакой пользы. Или в шаблоне конкурента в списке вопросов был прописан вопрос дважды: со ссылкой и без. Почему не оставить только вариант со ссылкой? Или оставлен рекомендательный блок с вопросами того же экзамена. Зачем он нужен? Ведь нам интересны ответы на конкретные вопросы, вбиваемые в поиск и мы не собираемся бродить по сайту и праздно изучать рандомные вопросы.
В общем, на первой итерации проекта предпочитаю делать сайт для пользователей, а не набивать страницы блоками для перелинковки.