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

вёрстка

Игра для интерфейсных дизайнеров

Сantunsee.space — в целом отлична игра для интерфейсных дизайнеров. Но есть спорные места. Ниже два примера.

Тут вопрос не в том, как красивее обрезана картинка, как по какому изображению проще выбрать товар: по полному, но мелкому или крупному, но обрезанному. И тут нет одного верного ответа, потому что если продаются микроны, то обрезать картинку, наверное, не страшно. А если какое-нибудь специфичное оборудование, то лучше показать целиком. Можно сказать, что если нужно обязательно показывать фотографии целиком, то фиксировать высоту карточки не стоит. И в общем случае это так. Но ситуации бывают разные. Что если 90% каталога какое-нибудь специфичное оборудование снята под нужный формат? а остальные разномастные. Разве можно в этом случае считать фиксированные карточки плохими или кропить фотографии?

А тут правильным считаю вариант с разделителем, который на самом деле — объединитель. Возможно, со средней точкой выглядит и лучше, но авторы явно не понимают сути. Илья Бирман 2014-го в помощь.

3 апреля   вёрстка   игра   интерфейс

Выравнивание подписей с длинами сторон прямоугольника

Заметка о вёрстке специфичного блока в вебе. Большинству такое не пригодится. Пишу, потому что надеюсь показать пользу от применения свойств по назначению.

Верстали блочок с габаритами основания. Будь текст статичен, хватило бы СВГ. Но в английской версии мы помним об американцах и дублируем размеры в футах (и отбиваем дробную часть точкой):

В СВГ всё задаётся строго по координатам, хорошо масштабируется, но не умеет «адаптироваться» под содержание. Поэтому c СВГ не обойтись без двух шаблонов и надежды, что они выдержат подписи любой длины. Можно усилить СВГ скриптом, но для меня это выглядело суперлишним. Казалось, что справятся ХТМЛ с ЦССом.

Исходный ХТМЛ простейший:

<div>
    <span>22 м</span>
    <div></div>
    <span>14 м</span>
</div>

Первое, что решал: как выравнивать подписи по центру стороны. Понятно, что для верхней подписи нужен «text-align: center», но как ограничить длину подписи, чтобы она равнялась длине прямоугольника, а не всего родительского дива? Можно дублировать width для прямоугольника и подписи, но это не DRY и неудобно в поддержке. Выручило свойство box-sizing, которое говорит, как считать ширину и высоту элемента. Добавил родительскому диву «box-sizing: content-box» — указанные размеры элементы не будут включать падинги и обводки.

.rectangle {
    position: relative;
    box-sizing: content-box;
    padding-top: отступ, подходящий под высоту подписи; 
}

Теперь можно наследовать длину родителя и позиционировать подписи вне его:

.rectangle-width, .rectangle-height {
    display: inline-block;
    position: absolute;
    white-space: nowrap;
}

.rectangle-width {
    width: inherit;
    top: 0;
    text-align: center;
}

Если текст длиннее отведённой длины, то он начинается от левого края и благодаря «white-space: nowrap» не переносится.

.rectangle-height {
    left: calc(100% + отступ от фигуры);
    top: 60%;
    transform: translateY(-40%);
}

Transform и top и выравнивают подпись и фигуру по горизонтали. Если родитель без падинга, сработает «top: 50%; transform: translateY(-50%)». В моём случае разницу в 20% нашёл на глаз.

В конце разбираюсь с прямоугольником. Ширину и высоту он наследует у родителя, а ровно поместиться в отведённые границы помогает свойство «box-sizing: border-box», которое, наоборот, включает падинги и обводку.

.rectangle-figure {
    display: inline-block;
    box-sizing: border-box;
    width: inherit;
    height: inherit;
    border: 1px solid цвет;
}

Итоговый ХТМЛ английской версии (без оформления футов):

<div class="rectangle" style="width: длина; height: высота">
    <span class="rectangle-width">22 m 72.2 ft</span>
    <div class="rectangle-figure"></div>
    <span class="rectangle-height">14 m<br>45.9 ft</span>
</div>

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

2018   вёрстка   СВГ   ХТМЛ   ЦСС

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

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

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

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

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

2018   вёрстка   пиктограмма   часы работы

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

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

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

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

2018   вёрстка   интерфейс   типографика

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

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

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

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

Содержание:

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

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

Пояснения:

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

2018   вёрстка   иллюстрация   книга   растения
Ранее Ctrl + ↓