Вениамин Рыбников
27 января 2016
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Укажите проблемные стороны макета.


Вениамин, проблем хватает со всех сторон.

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

Во-вторых, это очень скучный сайт: события за редкими исключениями поданы одинаково, нет даже главного события. Современный читатель — избалованное существо. Он не хочет прочитать весь сайт, чтобы найти что-то одно интересное или популярное. Он ждёт, что вы сами расскажете ему, где самое важное, что самое интересное, и куда идут его друзья. Пример — Медуза:

Совет о новостном сайте

Хотя направленность у вашего сайта и Медузы разная, задачи вёрстки одни: заинтересовать читателя, нарисовать картину дня, помочь выбрать интересный материал. В Медузе для этого придуманы десятки форматов: блоки во всю ширину, на половину, треть и четверть, с картиной на фоне, блок с несколькими новостями по одной теме, мегабанер для срочной новости (обычно висит меньше часа, поэтому не попал на скриншот) и так далее.

В-третьих, в макете полно проблем с вёрсткой на более мелком уровне. Разберу один пример:

Проблемы:

  • Правило внутреннего и внешнего — строки заголовка стоят на одинаковом расстоянии друг от друга и от остального текста.
  • Читаемость — заголовок прописными плохо читается. Капитель не запрещена, но лучше её использовать для выделения особых элементов, а не писать каждый заголовок на странице.
  • Информативность — ссылка «Узнать больше» не сообщает ничего нового.
  • Комки — слишком много элементов и стилей. Я насчитал пять слоёв в простом текстовом блоке с иллюстрацией.

Поправим вертикальные расстояния и совместим функции ссылки и заголовка:

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

Вёрстка заголовков

Или, на правах эксперимента, соберём двойной заголовок:

В последних двух вариантах количество элементов сократилось с пяти до трёх: иллюстрация, составной заголовок и текст.

Приглашаю уважаемых советчиков предложить другие улучшения вёрстки и страницы в целом.

P. S. Это был совет по средам о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? Присылайте вопросы.

P. P. S. Дата следующего набора в Школу стажёров пока неизвестна.

 
Мы напишем вам, когда будет открыт набор. Без спама.

Поделиться

Комментарии

Игорь Старков
27 января 2016

1. Все блоки слеплены друг с другом — нарушено правило внутреннего и внешнего.
2. В футере справа дыра, а слева всё собралось в кучу.

Евгений Калмыков
28 января 2016

Вениамин!

Кажется, что шапку можно сделать меньше по высоте: — Сейчас поле поиска очень длинное, зачем такое? — Для чего логотип сдвинут влево относительно направляющей? Аналогично справа сдвинут город. — Дату и день показывает любое устройство, с которого вы смотрите сайт.

Названия главных разделов складываются с названием сайта в одно предложение. Получается нехорошо, т. к. кино, ресторан и театр не являются событиями. Возможно, получится как-то переформулировать меню. Например, «События.ру | события в мире кино, музыки, театрального искусства и кулинарии.»

На банере про агентов АНКЛ бирка «США/Комедия», а для фильма «Антураж» — «Фильм/Комедия».

Почему-то для фильмов указан режиссёр, а для других событий место, фильмы же тоже где-то показывают?

Ссылка «Показать путеводитель», заголовок «События» и ссылки «Места», «События», «День» слиплись в один блок. Я предполагаю, что «Путеводитель» — это отдельный блок, а заголовок и фильтр должны стоять ближе к списку событий, чем к путеводителю (см правило внутреннего и внешнего).

Размазывать фильтр по все ширине страницы — спорное решение. Всё же удобно выбрать все параметры в одном месте, чем рыскать по странице.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Сделали страницу для обучающего сервиса по безопасности. Как навести порядок? Вторая часть 3




Недавно всплыло

Как написать заказчику, что я установлю модуль на его сайт после окончательной оплаты, и при этом не обидеть его? 2

Как же мне сделать систему, удобную и понятную для конечного пользователя?

2
4 Столкнулся с проблемой, когда долго общаешься с клиентом, и потом выясняется, что его не устраивает порядок цен. Часть 1 2