Адовый UX
50.2K subscribers
9.33K photos
632 videos
15 files
630 links
Примеры плохих интерфейсов, юикса и истории про это всё

Присылайте свои примеры автору канала в бота: @uxfromhellbot

По рекламе: @kgreenmedia
В реестре: vk.cc/cKf91b

Автор: @kirillgreen

Оставляя комментарии, вы соглашаетесь на оскорбления в свой адрес
Download Telegram
Forwarded from Адовый UX Pro
Эволюция сеток: от позиции к алгоритму. От чертежа к закону

Сергей Гуров разложил историю сетки на три состояния: у Брокманна сетка — чертёж, собранный задним числом под уже известный материал; у Герстнера — программа, рассчитанная впрок под ещё неизвестное содержание; сегодня — закон, который браузер исполняет в момент открытия страницы. Главное здесь не хронология, а причина: сетка изменилась не потому, что появились новые технологии вёрстки, а потому, что изменился сам формат — у листа есть край, у экрана его нет. Внутри — разбор от Макса Билла до Вайнгарта, перечень восьми принципов и двенадцати законов алгоритмической сетки и живая модель фотогалереи Mapa Grid. Её автор предлагает потянуть за край окна: статичной картинкой алгоритмическая сетка не показывается, её суть в поведении.

Главное из статьи:

— Брокманн строил сетку задним числом: формат обрезан, текст сдан, и сетка подгонялась под уже лежащий на столе материал. Свой метод он описывал как примерку — спроектировать, проверить на реальном материале, да в работу, нет назад к чертежу

— Плакат Vormgevers Вима Кроувела (1968) — предельная точка этой веры: сетка из 57 вертикалей и 41 горизонтали не спрятана под вёрсткой, а напечатана в полный рост, и сами буквы сложены из её клеток

— Герстнер в журнале Capital (1962) первым проектировал не макет, а правило, порождающее макеты: полоса из 58 микроединиц без остатка раскладывается на 2, 3, 4, 5 или 6 колонок. Сетка как «программа для пока ещё неизвестного содержания»

— Исполнителя у этой программы полвека не было: её выполнял верстальщик вручную, выпуск за выпуском выбирая вариант под пришедший в номер материал

— Причина трансформации сетки не в технологиях вёрстки, а в смене характера формата: пока формат был листом, «пространство» звучало метафорой, а экран сделал его буквальным — тянущимся и переменным. Неопределённость стала двойной: неизвестны и материал, и формат

— Покрыть такую неопределённость запасом готовых вариантов уже нельзя, их бесконечно много. Борьба с ней доцифровыми средствами и даёт то однообразие, которое в эпоху ИИ перестаёт создавать дополнительную стоимость

— Контрольные точки — это позиционный подход печати, натянутый на веб: вместо одного чертежа три макета, а между ними пустота, в которой макет ждёт следующего скачка

— Позиция элемента в алгоритмической сетке не назначается, а определяется соседом — автор называет этот принцип сопряжением. Разложить десять ФИО таблицей — метрический подход; поставить фамилию там, где кончилось имя, — алгоритмический, и линия построения у каждого получится своя

— В фотогалерее Mapa Grid весь макет вырос из одного правила «вписать фото в квадратный модуль»: дальше ориентация снимка решает, к какой границе его прижать, подпись едет за левым краем фото, а каждые три строки лента вставляет большой модуль

— Разнокалиберный фотоархив клиента автор не стал приводить к стандарту, а сделал разброс пропорций рабочим: заказчик просил ощущения хаотичности, и она получилась подчинённой закону в коде, а не вкусовым настройкам следующего дизайнера

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

— Меняется само авторство: дизайнер сочиняет не макет, а закон, порождающий макеты. Вместо вопроса «где стоит этот блок» решается вопрос «по какому правилу блоки находят свои места»
💩24🤮13🤡8👍7🖕32🔥1