Comments 3
>>>> Например, будет галерея из шести фотографий с текстовыми описаниями, два крупных графика и три абзаца текста. Тогда число колонок должно быть кратно 2, 3 и 6. Подойдет число 12.
Идейно понял, но позвольте слегка попридираться:
— 3 абзаца текста — это не три колонки, это одна колонка текста
— галерея из 6 фотографий — это не обязательно 6 колонок. Это может быть и два ряда по 3, например. Да и сами прикиньте — ширина колонки при 12 колонках — 64px согласно вашему расчету. В таком раскладе на фото придется 128px, это очень мало.
В целом конктретно этот раздел правильный по задумке. Но в нем отчаянно не хватает мокапов результата. Особенно в последнем абзаце про рекламу:
>>>> Если же отталкиваться от задачи построить сетку под баннерную рекламу, то нужно найти оптимальную ширину отступа и колонки, исходя из деления ширины баннера в 300 и 240 px. Из всех вариантов деления подходящими (совпадающими) размерами будут 10, 12, 15, 20. Баннерная реклама, как таковая, проходит через большинство сайтов, почти как полоса общественного транспорта, и мы мало можем влиять на нее. Но можно рассчитать колонки иначе и допустить незначительный выход баннера за пределы одной колонки по правому краю, но тогда сама сетка будет строиться на других модулях (например, на карточках товаров или видео-роликов). В этом случае следует на этапе дизайна лейаута продумать где на странице будет фиксированное положение баннеров, и какие элементы должны сопровождать эти баннеры, чтобы вместе создавать модуль, подчиняющийся сетке.
Про «хорошую крепкую сетку» написано хорошо, но почему-то пример дается не сайта, а некой дизайнерской вещи из реального мира. Как метафора хорошо, но практического значения практически не имеет, уж простите за плоский каламбур.
И еще сильно резануло глаз:
>>> Вы можете не только приложить к основному джипегу дополнительный джипег с сеткой, но прописать на нем основные размеры — например шаг, отступ, ширину колонки, размеры шрифтов.
А «пэсэдэшник» с гайдами уже не котируется?.. Особенно сейчас, когда большинство элементов создается стилями, которые более-менее можно перенести в css.
Идейно понял, но позвольте слегка попридираться:
— 3 абзаца текста — это не три колонки, это одна колонка текста
— галерея из 6 фотографий — это не обязательно 6 колонок. Это может быть и два ряда по 3, например. Да и сами прикиньте — ширина колонки при 12 колонках — 64px согласно вашему расчету. В таком раскладе на фото придется 128px, это очень мало.
В целом конктретно этот раздел правильный по задумке. Но в нем отчаянно не хватает мокапов результата. Особенно в последнем абзаце про рекламу:
>>>> Если же отталкиваться от задачи построить сетку под баннерную рекламу, то нужно найти оптимальную ширину отступа и колонки, исходя из деления ширины баннера в 300 и 240 px. Из всех вариантов деления подходящими (совпадающими) размерами будут 10, 12, 15, 20. Баннерная реклама, как таковая, проходит через большинство сайтов, почти как полоса общественного транспорта, и мы мало можем влиять на нее. Но можно рассчитать колонки иначе и допустить незначительный выход баннера за пределы одной колонки по правому краю, но тогда сама сетка будет строиться на других модулях (например, на карточках товаров или видео-роликов). В этом случае следует на этапе дизайна лейаута продумать где на странице будет фиксированное положение баннеров, и какие элементы должны сопровождать эти баннеры, чтобы вместе создавать модуль, подчиняющийся сетке.
Про «хорошую крепкую сетку» написано хорошо, но почему-то пример дается не сайта, а некой дизайнерской вещи из реального мира. Как метафора хорошо, но практического значения практически не имеет, уж простите за плоский каламбур.
И еще сильно резануло глаз:
>>> Вы можете не только приложить к основному джипегу дополнительный джипег с сеткой, но прописать на нем основные размеры — например шаг, отступ, ширину колонки, размеры шрифтов.
А «пэсэдэшник» с гайдами уже не котируется?.. Особенно сейчас, когда большинство элементов создается стилями, которые более-менее можно перенести в css.
6 фотографий и 3 абзаца текста в данном случае — это модули, которые должны поместиться в одном ряду. Не в столбце. Здесь важно выбрать самый маленький модуль, средний и самый крупный, сколько их будет в одном ряду и, соответственно, какое число колонок подойдет для такого размещения. По моим расчетам минимальный модуль имеет ширину в 144 px (2 колонки по 64 + один отступ между ними в 16 px). Я думаю, это вполне могут быть 6 фотографий в новостном блоке.
Блумберг на своей главной странице в блоке «3 hours ago» размещает 6 изображений по 128 px, и на контрасте с крупными изображениями последних новостей это смотрится хорошо. Правда этот контраст еще удачно поддерживается крупными заголовками с короткими английскими словами. Для русско-язычного сайта атомарной частицей станет минимально возможная длинна строки самого мелкого шрифта (допустимо-читабельного) и поэтому текстовый абзац в 128 px уже действительно не поместится, а вот 144 еще вполне ничего.
Вот пример «крепкой сетки» в дизайне Блумберга. Лейаут строится с помощью базового прямоугольного модуля. Все области и фигуры пропорционально встраиваются в этот прямоугольник и ровно держатся на сетке. Лейаут может быть набран из каких угодно форм и величин, но все они подчиняются фиксированной пропорции. Здесь для разрешения 1024 используется сетка в 16 колонок с отступом в 20 и шириной в 40 px.
Если у девелопера нет фотошопа, ему пригодится превью макета с сеткой, разметкой, всеми состояниями элементов и описанием поведения. В моей практике скрытые слои с овер-стейтами и notes-комментарии внутри psd-файла были менее эффективны, чем комментарии на jpg-макетах. Комментарии на jpg не теряются, реже игнорируются, а наглядное описание поведения элементов лучше воспринимается коллегами, чем тоже самое описание, сказанное устно или переданное письменно «где-то в переписке». Если макет сопровождается такими дополнительными джипегами, в этом проявляется порядок и завершенность.
Sketch позволяет копировать CSS атрибуты. В Sketch удобная структура хранения — можно держать все разрешения макета, все состояния элементов и описание поведения на одной странице — все сразу видно, ничего не теряется, легко найти, легко закинуть картинкой в почту или даже в Slack. Хранение макетов в psd в этом смысле может утомлять — очень много отдельных перелинкованых файлов и пока еще слабо развиты артборды. Для каждого артборда в Ps сетку нужно настраивать с нуля. В Sketch можно копипастить. Зависит от процесса. Уверена, что Ps по-прежнему котируется высоко, особенно в игровой разработке. Сетками можно пользоваться в и том и в другом. Себе для фотошопе я создавала специальный экшн по включению/выключению паттерн-слоя с сеткой. В Sketch для этого достаточно задать свою горячую клавишу.
Блумберг на своей главной странице в блоке «3 hours ago» размещает 6 изображений по 128 px, и на контрасте с крупными изображениями последних новостей это смотрится хорошо. Правда этот контраст еще удачно поддерживается крупными заголовками с короткими английскими словами. Для русско-язычного сайта атомарной частицей станет минимально возможная длинна строки самого мелкого шрифта (допустимо-читабельного) и поэтому текстовый абзац в 128 px уже действительно не поместится, а вот 144 еще вполне ничего.
Вот пример «крепкой сетки» в дизайне Блумберга. Лейаут строится с помощью базового прямоугольного модуля. Все области и фигуры пропорционально встраиваются в этот прямоугольник и ровно держатся на сетке. Лейаут может быть набран из каких угодно форм и величин, но все они подчиняются фиксированной пропорции. Здесь для разрешения 1024 используется сетка в 16 колонок с отступом в 20 и шириной в 40 px.
Если у девелопера нет фотошопа, ему пригодится превью макета с сеткой, разметкой, всеми состояниями элементов и описанием поведения. В моей практике скрытые слои с овер-стейтами и notes-комментарии внутри psd-файла были менее эффективны, чем комментарии на jpg-макетах. Комментарии на jpg не теряются, реже игнорируются, а наглядное описание поведения элементов лучше воспринимается коллегами, чем тоже самое описание, сказанное устно или переданное письменно «где-то в переписке». Если макет сопровождается такими дополнительными джипегами, в этом проявляется порядок и завершенность.
Sketch позволяет копировать CSS атрибуты. В Sketch удобная структура хранения — можно держать все разрешения макета, все состояния элементов и описание поведения на одной странице — все сразу видно, ничего не теряется, легко найти, легко закинуть картинкой в почту или даже в Slack. Хранение макетов в psd в этом смысле может утомлять — очень много отдельных перелинкованых файлов и пока еще слабо развиты артборды. Для каждого артборда в Ps сетку нужно настраивать с нуля. В Sketch можно копипастить. Зависит от процесса. Уверена, что Ps по-прежнему котируется высоко, особенно в игровой разработке. Сетками можно пользоваться в и том и в другом. Себе для фотошопе я создавала специальный экшн по включению/выключению паттерн-слоя с сеткой. В Sketch для этого достаточно задать свою горячую клавишу.
Sign up to leave a comment.
Сетки для адаптивного дизайна