Как стать автором
Обновить
3
0
Евгения Потемкина @twileug

Пользователь

Отправить сообщение
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 для этого достаточно задать свою горячую клавишу.

Информация

В рейтинге
Не участвует
Откуда
Москва, Москва и Московская обл., Россия
Дата рождения
Зарегистрирована
Активность