17 заметок с тегом

вёрстка

Дверь в обувную мастерскую

Ездили на рынок за ягодой. Обратил внимание на дверь обувной мастерской. Снять нормально не получилось, поэтому рядом — накрученная в Фотошопе копия:

Тут абсолютно крутая пиктограмма, которая освобождает от названия и логотипа. У меня это вторая такая находка, первая — парикмахерская:

Часы работы у обувной мастерской тоже выглядят лаконично: один шрифт и кегль, приятный контраст минималистичной пиктограммы и Таймс Нью Романа с засечками. Но я придрался к непоследовательным переносам строк, дефисам в диапазонах, избыточным «Darba laiks» (Часы работы — латышский) и нулям минут. Чинил бы так:

P. S. Собираю оформление рабочих часов в Скрапе.

12 июня   вёрстка   пиктограмма   часы работы

Стиль кнопок и текста

Синхронизирую кнопки с текстовыми стилями. Обычно стилей 4-5, кнопок хватает трёх: размером с основной текст и с подзаголовоки 2-го и 3-го уровней. Или 2-го и 4-го — зависит от задачи. Для массового и броского — 1-го.

Такая синхронизация немного гасит шум и сильно упрощает сбор строк из текста и кнопок. А наличие принципа разгружает голову. При умелой вёрстке упрощает ЦСС и корректировки.

Синхронизирую кегль, интерлиньяж и разрядку, если кнопки не капительные. Начертание чаще сохраняю для жирных и полужирных и «поджирняю» для нормальных и прямых текстовых стилей.

28 мая   вёрстка   интерфейс   типографика

Книга растений

Полина рисует паттерны. Они в основном растительные, поэтому дома появилась книга с кучей иллюстраций растений. Помимо красивых растений, в книги приятная вёрстка. Снял 10 из 544 страниц.

Суперобложка:

Форзацы встречают большими цветами:

Содержание:

Вначале — история книги. Отсканировали старую книгу о саде Виллибальдсбургского замка (Германия), перевели текст, добавили пояснений, и получилась эта книга. Примечательна высокая плотность, маленькие поля и межколонник:

Основной объём страниц такой. Авторы переиздания используют натуральное соответствие, о котором пишет Норман:

Пояснения:

Разворот без иллюстраций:

18 мая   вёрстка   иллюстрация   книги   растения

Подзаголовки, ломающие переключатель

Встретил в магазине такой переключатель:

С первого раза не осилил. Тут вроде нормальная структура: подзаголовок + радиокнопка для каждого элемента. Но выбрать пункт, не читая его подзаголовок, не получится. Выписал проблемы, чтобы понять что мешает.

В тексте:

  • пара «подзаголовок — лейбл к радиокнопке» в разных пунктах согласована по-разному (2-й лейбл вообще выглядит ошибкой, как будто не оттуда скопировали);
  • в 1-м пункте повторяются «Самовывоз» и во 2-м — «Доставка», скорее всего, дубли навязывает структура.

В вёрстке:

  • подзаголовки ближе к предыдущим лейблам;
  • подзаголовок предполагает, что пункты внутри него не связаны с пунктами внутри других подзаголовков, но тут это не соблюдается.

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

После перевёрстки повторы и рассогласованность ушли сами:

Способ получения Стоимость
Бесплатно
Сообщает оператор
300 рублей
11 мая   вёрстка   радиопереключатель   таблица

Линейки сами по себе не отделяют и не объединяют

Линейки работают вместе с отступами. Сейчас покажу на примере.

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

Если просто убрать линейки, блоки собираются и отлично отделяются от соседей:

Если поставить линейки в конце или начале блоков — тоже работает:

2018   вёрстка   линейки
Ранее Ctrl + ↓