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

Сдала курсач в Школе редакторов: https://readymag.com/u81689693/potato.

У меня по нему сразу куча вопросов:

  • 1. Что не так с отступами, где я нарушила теорию близости и как это исправить?
  • 2. У меня в тексте список из трёх категорий. Чтобы было удобнее читать, сделала его не в строку, а побила на три колонки. Выглядит плохо. Как переверстать?
  • 3. Собрала фотки в блок, как учат в Школе. Цель — показать, что на этикетках картошки редко бывает указан сорт и вообще какая-то полезная информация. Как собрать этот блок лучше?
  • 4. Шрифт скриншота не сочетается с шрифтом моей статьи. Получается бардак. В моём примере мне пришлось скриншот подписать шрифтом основного текста и не использовать стиль caption, чтобы выглядело спокойнее. И всё равно получилось неряшливо. Как быть?
  • 5. Как закончить статью? В конце хочется торжественно подвести итог и задать вопрос для комментаторов. Попробовала это сделать — получилось невыразительно. Как исправить?

Саша, я прокомментирую всю страницу и попутно отвечу на вопросы:

Основная колонка слишком широкая, читать тяжело. Уменьшите ширину колонки или увеличьте кегль

Заголовок страницы, возможно, крупноват. Попробуйте уменьшить и написать в одну строку.

Абзацный отступ слегка великоват

Между числом и знаком процента нужен полупробел

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

Фактоид развалился и привязан непонятно к чему. Поднимите его на уровень первого абзаца и придвиньте подпись к числу

Блок слишком кирпичный. У вас так:



А хочется так:



Подпись занимает слишком много места. Попробуйте добавить больше подписей и разнообразить сетку.

Ещё хорошо бы увеличить отступ между картинками и до текста снизу

Выносы и фактоиды лучше прибивать к верху или низу текстового блока. Иначе непонятно, к чему они относятся

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

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

Текстовая страница предполагает линейное чтение. Поэтому невозможно сходу понять, к чему относится картинка с салатом и другие её подобные.

Попробуйте растянуть её на всю ширину страницы, чтобы отделить от предыдущего блока

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

Задача фактоида — привлечь внимание. Поэтому он должен быть красивым и интересным. У вас скучный, сравните с фактоидами в Главбухе.

Подберите для фактоидов шрифт поинтереснее, чем ПТ Санс

Линейка перед выводом не нужна. Сделайте тут обычный абзацный отступ. Или заголовок второго уровня, чтобы вывод относился ко всей статье, а не к пюре и запеканке

В обращении к читателям или лишние переносы строк, или потерялись абзацные отступы. Фотка неприятно сливается с жёлтым фоном. По правому краю текст выравнивать не надо. Но поставить текст в правый угол — допустимо

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

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

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

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

Поделиться

Комментарии

Егор Стремоусов
23 декабря 2015

Саша!

Не слушайте Михаила и сделайте заголовок еще крупнее. Раза в 3—4. Дайте контраст!

Для улучшения читаемости кроме увеличения кегля или уменьшения ширины основной колонки можно попробовать увеличить межстрочное расстояние. Так текст станет воздушнее и легче.

И длиннее. Возможно, стоит придумать что-то для быстрой навигации по статье.

У вас правый край из-за иллюстраций и фактоидов довольно сложный и неравномерный. При общем центрировании контента относительно окна браузера это немного смущает. Рекомендую прибить контент к левой границе экрана.

Я, конечно, не редактор, но ваш текст пестрит знаками тире. Каждый из них — это лёгкий удар. К концу текста — читатель вымотан. Это — ритм для очень выносливых.

Жёлтую плашку под призывом к читателю растяните на всю ширину. Пусть она вырвется из стакана основного повествования и станет независимым семантическим элементом. И подумайте как подружить имя автора с его же фотографией.

Желаю успеха!

Александр Терехов
23 декабря 2015

Очень интересная статья, аж проникся духом кулинарии и понял, почему салаты никогда не получались.

Из того, что не отметил Михаил — было трудно сравнивать картошку и блюда, когда они всегда перемещаются. Пришлось несколько раз прокрутить страницу, чтобы понять, что у нас сортировка слева направо от «хорошо» к «плохо».

Возможно, будет лучше:
1. Зафиксировать положение картошки в сравнениях.
2. В выводах поставить над/под/ещё как-то возле заголовка уменьшенную фото салата, жареной картошки и пюре.

Михаил Тучин
23 декабря 2015

«Луговской» и «Эффект» — это разные сорта. Возможно стоит изменить порядок сортов в списке, чтобы подобных конфузов не возникало.

Артём Сапегин
23 декабря 2015

Eгор, не надо к левому краю — подумайте о людях с большими экранами.

Евгений Кот
23 декабря 2015

Это отличная статья. Познавательная цель выполнена на все сто. Я не знал, чем различаются сорта картошки и всегда думал, что картошка просто удачная или неудачная.
Иллюстрации, которые на фоне по углам, очень цепляют и привлекают внимание.

Не понравилась табличка с сортами. Почему они не с большой буквы? А если в остальных местах статьи они в кавычках, почему в таблице не так же? Вот Михаил и счёл, что «луговской» и «эффект» — название одного сорта.
С другой стороны, таблица, набитая кавычками, будет выглядеть шумно. Непонятно, что делать в таких случаях.

Фактоиды с цифрами громкие. Внутренний голос читает их голосом базарного торговца или составителя объявлений для дурных баннерных сетей: ЧЕТЫРЕ ТЫСЯЧИ (!!!шок) сортов картофеля _выращивают_в_мире_!
Гораздо лучше выглядит спокойный текст про «Афишу» и «Зе Вилладж».

Фактоид про универсам можно просто переместить в абзац слева, не понимаю, почему его нужно выделять.
Фактоид про блендер приведён просто так, без обоснования. Даже самая далёкая от науки домохозяйка поймёт объяснение, а доверия будет выше. Люди любят обоснованные запреты: в картошке крахмал в виде гранул, это как раз создаёт рассыпчатость. Блендер разбивает эти гранулы и превращает пюре в клейстер.

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

Опечатка «ингридиенты».


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

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

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

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

Cверстал одностраничный плеер. Вторая часть 3




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

Как флексить. Отступить от идеала 2 У меня остаётся ощущение, что я идиот, «рассыпала бобы», но на конкретных ошибках не могу себя поймать 3 Что такое модальность и почему её принято ругать? Вторая часть 4 Как написать заказчику, что я установлю модуль на его сайт после окончательной оплаты, и при этом не обидеть его? 2