nobelfaik


Блог Игоря Штанга

Доктор, мой макет не дышит!


Previous Entry Поделиться Next Entry
igorshtang.ru
nobelfaik
Теперь у меня есть сайт: igorshtang.ru. На самом деле это не настоящий сайт, а список ссылок на ЖЖ и другие сервисы. Я собрал статьи, переверстки и курсы в отдельные кучки, чтобы они всегда были под рукой.

На главной странице неприлично большой портрет автора в окружении букв и картинок:
Сайт Игоря Штанга

Несколько слов об оформлении:

1. Текст набран одним кеглем, строчки попадают в сетку базовых линий (нажмите на иконку в правом верхнем углу). Мне захотелось проверить, насколько старая добрая приводность применима к экранным макетам. Идеальной реализации не получилось. В вебе, в отличие от Индизайна, нет кнопки «Привязать к базовым линиям», поэтому на некоторых устройствах текст прыгает на пиксель или два. Пока не знаю, как это исправить.

2. Верстка, конечно, адаптивная. Включите сетку и посмотрите, как страницы приспосабливаются к разной ширине.

3. Жесткость макета компенсируется мягким шрифтом и приглушенной цветовой гаммой. Rostin — «механический шрифт с органическим началом». Дополнительно я включил минускульные цифры и буквы с завитушками (в кириллице только у, в латинице J Q f j t y). Контраст слегка понижен: вместо черного на белом — темно-серый на светло-сером.

4. Еще одно «смягчающее обстоятельство» — плавная анимация. Тут есть над чем поработать в следующих версиях.

Сайт сверстал Владимир Кузнецов, за что ему большое спасибо.

Записи из этого журнала по тегу «портфолио»

  • Отвлеченное иллюстрирование

    Практикую отвлеченное иллюстрирование. Картинки на внутренних страницах моего сайта напрямую не связаны с содержанием страниц. В статьях —…

  • Стикерпак с грифоном Арсением

    Фирменный персонаж курса «Типографика и верстка» грифон Арсений комментирует дизайн, дает советы, играет со шрифтами, жжет страницы и…

  • Книга «Волшебный гардероб»

    Последние два месяца делал книгу «Волшебный гардероб» для компании «Харизма и отношения». Проект попался непростой.…


  • 1
По первому пункту есть движение в правильном направлении:
свойство line-height-step для вертикального ритма уже работает за флагом в Хроме — подробнее на странице chromestatus.
Чего ожидать читайте в спеке rhythmic sizing


Edited at 2017-07-15 03:52 (UTC)

На странице переверсток левая часть первых девяти ссылок не кликается. Возможно там как-то картинки их перекрывают, или что-то такое.

  • 1
?

Log in

No account? Create an account