Сетки_{Структурирование пространства}

Сетки в жизни

↳ Readymag — сетка almanac-rus.readymag.com/grid

↳ Дисциплина сеток, тактика типографики (Дмитрий Карпов)

Аксиома прямоугольника

Прямоугольник это царь формат — он идеален для сеток

Виды сеток

Манускриптная сетка

Внутренние поля побольше, чтобы не зажевало контент.

Нижние поля немного больше верхних для компенсации визуального веса.

Внешние поля можно расширить, если планируются маргиналии.

Ритмы сетки ^Дробим 

наборное поле

Сетку всегда строим  на мастере Колоночная сетка

+

Масштаб для многостранички

Контраст по масштабуНе знаешь какое соотношение масштаба взять?

Бери 1,618 — золотое сечение.

§ Эта пропорция хорошо подходит для многостраничной                                   продукции (брошюры/журналы). Но метод плох для

5                    8   13       21       34       55       89       наружной рекламы (баннеры/плакаты)

⚠ Еще ряды Фибоначчи

6                    10  16  26  42  68  110

4  7  11  18  29  47  76

Построение колонок

Горизонтальный ритм

Построение базовых линий

Вертикальный ритм

                                                       Ростбиф с Аллой Ростбиф с Аллой

Базовые линии

ūƄūũŻƅŷŪŮźųűŮŵŮŶűŮŻŮźŸŹŷŰŵŷůŮŻŶƄŲżųŻƄűž                               ŭŮůŶŷŴƇŪũƈŷŻŷŵżūƄ ŚűŮŸŷūũŵŵƄŮŻūŷŹƄŮ

ƆŴŮŭŵŮŹűŵŮŶŻŮŻŮųŻűŬũŶŻű                                                                  ŰũŻƅűŸŷūźŻűŊŮźųŷŶż ƆŴŮŶűŮűŵŷƂŶƄŲżŭŮŲ-

źŻŷūźŻżŹũūƄźűŶűŮŲźŻ

ŚűŮŸŷūũŵŵƄŮŻūŷŹƄŮƆŴŮŶűŮűŵŷƂŶƄŲżŭŮŲźŻŷū ūűŻŮŴƅűŶűŻŮŹũūŴŮŶŻŮ źŻżŹũūƄźűŶűŮŲźŻūűŻŮŴƅűŶűŻŮŹũūŴŮŶŻŮűźŸŮƀűū űźŸŮƀŷŷŹũŸŹŹ

ŶŮŶŻŶƄŲūŮŹŷūũŻƅźūŷŰŭũŹƈƆŽŽŮųŻűūŶŷŬŷŭŬŷŭũūŶŷźŻūűŻƅŷŬŷŻŷŹƄŮŷƀŮŶŻũŵŮŶűŮŵƄŵŷůŶŷŴƇŻŶŷū

ŶũƈŷƀŮźƅűŶűŮŻūŷŰŭũūŶŷŬŹũƀŶŷźŴŮŶŻƄŶŮŹűŵŮŹ

Приводность верстки

поделенный на два.

Привязать или отвязать текст от базовых линий. Привязывать к базовым линиям лучше всего наборный текст. Остальное на усмотрение.

Дополнительный отступ сверху.       Чтобы линии не исчезли при отдалении Лучше оставлять ноль.

Откуда начнутся базовые линии.

От края страницы или верхнего поля.

Лучше от верхнего поля.

Пробельная строка через wrap

Улучшаем UX

ŜŪŴũŬŷŻƄŵŷůŶŷŸŹũźűžŸŹŷūũŻƅƆŽŽŮųŻƄűźŸŮŹŽŮųŻƄŶŮźųűŮŹũŭŮůŶŷŴƇŪũƈŷŻŷŵżūƄŰũŻƅűŸŷū źŻűŊŮźųŷŶżŵŮŶŻűŊŷŻŷŹƀŮŶŻŷŵżűūũŻƅŶŮźųŷŻũ ūƄūũŻƅŷŪŮźųűŮŵŮŶűŮŻŮźŸŹŷŰŵŷůŮŻŶƄŲżųŻƄűž ƆŴŮŭŵŮŹűŵŮŶŻŮŻŮųŻűŬũŶŻű

ŚűŮŸŷūũŵŵƄŮŻūŷŹƄŮƆŴŮŶűŮűŵŷƂŶƄŲżŭŮŲźŻŷū źŻżŹũūƄźűŶűŮŲźŻūűŻŮŴƅűŶűŻŮŹũūŴŮŶŻŮűźŸŮƀűū ŶŮŶŻŶƄŲūŮŹŷūũŻƅźūŷŰŭũŹƈƆŽŽŮųŻűūŶŷŬŷŭŬŷŭũūŶŷźŻūűŻƅŷŬŷŻŷŹƄŮŷƀŮŶŻũŵŮŶűŮŵƄŵŷůŶŷŴƇŻŶŷū

ŶũƈŷƀŮźƅűŶűŮŻūŷŰŭũūŶŷŬŹũƀŶŷźŴŮŶŻƄŶŮŹűŵŮŹ

⌘ Alt + Ctrl + W

⚠ Window Text Wrap — делаем обертку размером с отступы

                                      ƿǓǑǡǴǞǑǠǔǥǞǑ ƿǓǑǡǴǞǑǠǔǥǞǑ       ƷǑǢΐ©ƶǓǕǒǒǬ ƵǬǓǕǨΏǏ

ǔǞǐΏǢǑǞǡǨǤǑǟǑ ǔǬǓǧǑǞǑǟǑ ǤǏ©ǓǬǤΏǐ©ǔǏǖǏǓǏ (+46,3 %) ǔǏǖǏǓǏ©(17,0 %)ǔǏǖǏǓǏ©(–16,3 %)

                                                 582,5183,1  14%32,9

                                               ǥǬǔ ©ǥǑǤǤǥǬǔ ©ǥǑǤǤ Ǟ©ǔǐǟǣǐǤǥǐǣǢǓǠ©ǓǕǷ

⚠ Включаем window Story — Optical

Margin Alignment

                                      ƿǓǑǡǴǞǑǠǔǥǞǑ ƿǓǑǡǴǞǑǠǔǥǞǑ       ƷǑǢΐ©ƶǓǕǒǒǬ ƵǬǓǕǨΏǏ

ǔǞǐΏǢǑǞǡǨǤǑǟǑ ǔǬǓǧǑǞǑǟǑ ǤǏ©ǓǬǤΏǐ©ǔǏǖǏǓǏ (+46,3 %) ǔǏǖǏǓǏ©(17,0 %)ǔǏǖǏǓǏ©(–16,3 %) 582,5183,1 14%32,9

                                              ǥǬǔ ©ǥǑǤǤǥǬǔ ©ǥǑǤǤ Ǟ©ǔǐǟǣǐǤǥǐǣǢǓǠ©ǓǕǷ

46

Еще кое-что про блоки

В рамках многостранички

48

В многостраничке актуально делать много блоков с разными ритмами

Блоки

Выравнивание — Блоки

Выравнивание — Блоки

Контраст выравнивания

Какие-то изображения специально отличаются от размера других. Нарушается принцип повторяемости.

Выравнивание — Сетки

Выравнивание — Блоки

 Блоки

Выравнивание — Блоки

Модульная сетка

Всё не так, как тебе рассказывали

Виды сеток

Проблема модульной

применение  ♥ применение Профанское          Правильное

Модульное меню

Модульный каталог

Модульный веб-дизайн

⌧

Лучше когда в пересечении средника и пробельной строки получается квадрат

Модульный веб-дизайн Пробельных может и не быть

Редкие сетки

Фрактальная сетка, это как вообще

Виды сеток

Многослойная сетка Карла Герстнера

Виды сеток                                Сетка схода

§ Для 3 уровня пространства

Изометрическая сетка

                                                                                                                                                                                                                 Плиточная сетка                                                    Скошенная

                                                                                                                фрактал

Графидея Хорошая идея показать,

Подсветка сеткиоткуда выходят линии

Достаточно тонкой однотонной линии  

Нурдаулет Ильясов, 6 поток