3 заметки с тегом

перевёрстка

Дизайн сайтов «Сдам ГИА». Новости

Российские школьники готовятся к экзаменам на сайтах системы «Сдам ГИА». Посещаемость системы за день — 228 тысяч человек. Если интересно: подробная статистика.

Я помогал «Сдам ГИА» с дизайном и разработкой. О том, что сделал, рассказываю в своём блоге.


Часть левой колонки сайта:

Я решил её освежить.

Для начала вынес профиль в меню и оформил поисковое поле проще:

Даты мешали и путали. Новость 18 мая о ЕГЭ, но экзамен был 2 июня:

Подчёркивание ссылки перенёс на всю новость:

Как у обычной ссылки, при наведении меняется цвет текста и линии:

О редактуре. Текст, который стоит под ссылкой, должен сообщать, куда ведёт гиперссылка. Текст не должен терять смысл при распечатке, если урл сломался или по ссылке открылась ошибка. Поэтому под ссылкой нельзя писать «здесь» и «тут», «документ» и «файл», «ссылка» и «сайт». Примеры:

Предложил ввести эти правила в редакционную политику по составлению новостей. Не «Изменения в ЕГЭ 2018 года. Посмотреть», а «Изменения в ЕГЭ 2018 года».

Кнопка «Подписаться» имела маленькое разрешение и не оправдывала ожидания пользователя: после нажатия на кнопку человек не подписывался на группу Вконтакте.

В новостях приходилось тянуть ссылки на мобильные приложения:

Я так разрешил эти два вопроса:

Убрал ссылку «Все новости». Теперь её роль играет заголовок:

Важное выделяли красненьким или писали: «СРОЧНО!». Мне показалось это непрофессиональным методом привлечения внимания.

Более графически чистый способ — ставить флажок:

Можно выделять маркером:

Для самой важной новости — самое яркое обозначение:

Я переверстал новостной блок. Информацию о ворах пока не добавил, об этом позже.

Новостной блок лежит на плашке. Чтобы он сочетался с поиском, положил поисковое поле тоже на плашку:

Владелец сайта не захотел отказываться от дат. Тогда я предложил оформить их лучше. Написал дату по-человечески: не 18.05.17, а 18 мая. Год убрал, потому что новости всегда новые.

Набрал дату капителью:

При наведении вся новость красится в оранжевый, потому что так гармоничнее:

Я предположил, что в новости чаще всего будет одна ссылка. В этом случае весь текст — ссылка:

Когда в одной новости две ссылки, текст чёрный, ссылки синие. Без точки в конце.

Обратная связь для каждой ссылки:

Теперь о ворах. Как я понимаю, полезное действие этого блока — опозорить тех, кто крадёт задачи у «Сдам ГИА», и предупредить других, что за воровство их тоже опозорят.

Переверстал:


Было:

Стало:

Спонсор поста

Сегодня не купили рекламу, поэтому прорекламирую рекламу в своём блоге и канале. Она публикуется после пятничного поста, когда самый большой трафик. Состоит из текста и ссылки. Стоит пока 499 ₽.

Пишите в телеграме.

2019   дизайн Сдам ГИА   новости   перевёрстка

Дизайн сайтов «Сдам ГИА». Кнопки

Российские школьники готовятся к экзаменам на сайтах системы «Сдам ГИА». Посещаемость системы за день — 228 тысяч человек. Если интересно: подробная статистика.

Я помогал «Сдам ГИА» с дизайном и разработкой. О том, что сделал, рассказываю в своём блоге.


Раньше на сайте кнопки выглядели так:

При наведении на них была неправильная обратная связь: как будто кнопка нажималась.

Я добавил состояние при наведении и увеличил отступы для красоты и удобства:

2019   дизайн Сдам ГИА   кнопки   образование   перевёрстка

Дизайн сайтов «Сдам ГИА». Каталог заданий

Российские школьники готовятся к экзаменам на сайтах системы «Сдам ГИА». Посещаемость системы за день — 228 тысяч человек. Если интересно: подробная статистика.

Я помогал «Сдам ГИА» с дизайном и разработкой. О том, что сделал, рассказываю в своём блоге.


На сайте есть раздел «Каталог заданий». В нём задание выглядело так:

Я убрал избыточное слово «Показать» в недоссылке «Показать решение»:

Посчитал грубым обозначение числа комментариев с помощью скобок:

Предложил два варианта замены. Выбрали первый.

В каталоге задания были прижаты друг к другу:

«1 комментарий» находился ближе не к своему, а к следующему заданию. Поэтому казалось, что он относится к чужому:

Я добавил отступ между заданиями. Стало лучше, но всё равно остались вещи, которые сеяли беспорядок и неудобства.

Внутри заданий были дыры:

Ссылки обозначались пиктограммами, а они менее понятны, чем обычный текст.

Тому пример — вопрос в службу поддержки сайта:

Чтобы не возникало подобных вопросов, лучше написать текстом: «Обсудить Вконтакте» и «Сообщить об ошибке». И если пользователь нажмёт на «Обсудить Вконтакте» — отправлять его не страницу группы, а сразу в обсуждение по соответствующему предмету.

Было:

Стало:

2019   дизайн Сдам ГИА   образование   перевёрстка