Аналітика
Статті, записки, справи
Папір і лаванда. Спершу номери статей, дати й джерела. Рожевий з’являється лише тоді, коли треба винести число в плакатному розмірі.
Підхід
Як проєктувати будь-що для Марти: кому служить робота, які принципи стоять за кожною сторінкою і які візуальні правила роблять макет її.
Кому служить робота
Шість типів читачів — від кабінету в парламенті до телефона в нічному автобусі. Проєктуйте для того, хто перед вами, а система втримає в тон усіх інших. Переверніть картку, щоб побачити, що потрібно кожному.
Політики та їхні команди
Читають між зустрічами. Потребують чіткого запиту, правової підстави й посилання, яке можна вставити.
Дайте їм
- Головне — одразу, на одному екрані.
- Правову підставу зі статтею та датою.
- Посилання, що копіюється одним дотиком.
Дизайнерські ходи
- Регістр «Аналітика»: папір і лаванда.
- Коротке резюме, потім повний текст.
- Джерела стоять поруч із твердженням, а не в кінці.
Журналісти
Працюють на дедлайні, часто нідерландською чи французькою. Потребують перевірених фактів, чіткої цитати й контексту.
Дайте їм
- Датовані факти, які можна перевірити.
- Влучні фрази її власними словами.
- Ракурс в одному реченні.
Дизайнерські ходи
- Цитати в стилі її голосу, з джерелом під ними.
- Ключові числа розміром із заголовок.
- Портрет і коротку біографію легко завантажити.
ГО та юристи
Працюють справа за справою. Потребують процедур, шаблонів і аргументів, які можна використати знову.
Дайте їм
- Кроки в правильному порядку.
- Шаблони й листи для повторного використання.
- Те, що спрацювало в реальних справах.
Дизайнерські ходи
- Нумеровані кроки лише там, де важливий порядок.
- Файл для завантаження в кінці кожного інструмента.
- Хронології — як одна нитка з вузлами.
Українці в Європі
Здебільшого з телефона, часто українською, часто стривожені. Їм треба знати, що стосується саме їх і що робити далі.
Дайте їм
- Прості слова, українська — передусім.
- Чіткий наступний крок.
- Приватність: ніщо не залишає телефона.
Дизайнерські ходи
- Спершу дизайн на 360 px, з великими зонами дотику.
- Спокійні екрани: одне питання за раз.
- Без акаунта, без реєстрації, без стеження.
Жінки в публічному житті
Хочуть, щоб їх бачили на повний зріст, — і не перепрошувати за це.
Дайте їм
- Сміливість — на прикладах.
- Практику, яку можна спробувати сьогодні.
- Щось, що залишиться з ними.
Дизайнерські ходи
- Регістр «Плакат»: гучні поля, великий шрифт.
- Спершу питання, потім відповідь: вибір, а тоді висновок.
- Наприкінці — картка чи речення, яким можна поділитися.
Організатори й видавці
За лічені хвилини вирішують, чи запросити її, чи забронювати, чи опублікувати.
Дайте їм
- Докази: посади, сцени, публікації.
- Її теми з першого погляду.
- Один зрозумілий спосіб зв’язатися з нею.
Дизайнерські ходи
- Регістр «Сцена» для матеріалів подій.
- Теми — короткими чипами, а не абзацами.
- Одна кнопка контакту, однакова на кожній сторінці.
Вісім принципів
Кожна сторінка, допис та інструмент мусять їм відповідати. Переверніть картку, щоб дізнатися, як це перевірити.
Головне вміщається на перший екран.
Питання як заголовок, твердження — до сорока слів, запит і скільки часу це забере.
Перевірка: незнайомець за п’ять секунд може назвати головну думку.
Дія — протягом хвилини.
Перший вибір, повзунок чи питання — на першому екрані. Проста версія для читання завжди за один дотик.
Перевірка: щоб почати, не треба гортати.
Кожне твердження показує свій тип і своє джерело.
Факт, інтерпретація чи гіпотеза — з позначкою. Кожне число з посиланням, кожна правова норма з датою.
Перевірка: ніщо без джерела не виходить у світ.
Кожен візит завершується чимось, що можна забрати.
Посилання, яке можна скопіювати, лист, який можна надіслати, картка чи PDF для завантаження.
Перевірка: на останньому екрані є що забрати із собою.
Сила й відкритість в одному кадрі.
Жодного поділу на «серйозний» і «м’який» розділи. Складний зміст стоїть на жіночному кольорі, у плакатному розмірі.
Перевірка: приберіть колір — і аргумент усе одно стоїть; приберіть аргумент — і кольору нема чого сказати.
Українська й англійська — передусім, і пишуть їх для читачів.
Нідерландська й французька — там, де живе справа. Ніколи не публікуйте переклад слово в слово чи неперевірений машинний текст.
Перевірка: кожну мовну версію читає носій мови — до публікації або невдовзі після неї.
Приватно й спокійно за замовчуванням.
Без акаунта, відповіді лишаються в браузері, жодних стін коментарів, жодних трекерів.
Перевірка: після завантаження інструмент повністю працює офлайн.
Легко, доступно, спершу для телефона.
Створено для телефона середнього класу на повільному з’єднанні, WCAG 2.2 AA, версія зі зменшеним рухом для кожної анімації.
Перевірка: лише клавіатура, потім телефон на 360 px.
Візуальний підхід
Дванадцять правил, накреслених як схеми. Переверніть картку, щоб дізнатися, як це робити і чого уникати. Фільтруйте, щоб бачити одну ідею за раз.
- Плакатний шрифт
Шрифт — це зображення
Коли меседж один, слова і є картинкою. Без фото, без іконки, без прикрас.
Шрифт — це зображення
- Fixel Display Black, від двох до п’яти слів, щільний набір.
- Заповніть полотно від краю до краю; рядок може змінити колір, щоб передати поворот.
- Позаду — одне кольорове поле. Сливовий текст або папір на мадженті.
Уникайте: фото чи іконки, доданих «для допомоги».
- Плакатний шрифт
Стовпчик, потім обріз
Ставте слова по одному в рядок, і хай останній рядок виходить за край. Обріз каже: ідея більша за рамку.
Стовпчик, потім обріз
- Одне слово чи фраза на рядок.
- Обрізайте лише останній рядок і лише доти, доки його ще можна прочитати.
- Вертикальний набір — для корінців, країв і сценічних банерів. Найкраще працює на обкладинках, банерах і перших екранах.
Уникайте: обрізання імені чи першого рядка.
- Гучні поля
Два поля, один контрколір
Поділіть полотно на два пласкі кольорові поля. Заголовок перетинає межу й на ній змінює колір.
Два поля, один контрколір
- Пари: цукерковий і червоний нитки, лавандовий і сливовий, папір і маджента.
- Поділ лежить низько (приблизно 55/45), ніколи не посередині.
- На межі більше нічого: хай її перетинає шрифт.
Уникайте: третього кольору чи поділу 50/50.
- Гучні поля
Колір заповнює поле
Використовуйте колір як цілу поверхню, а не як відтінок на білому. Спокій тримається на пропорції: багато паперу, сильний сливовий, кілька гучних нот.
Колір заповнює поле
- Приблизно: папір 46, сливовий 18, цукерковий 14, лавандовий 10, маджента 6, золотий 3, червоний 2, кислотний 1.
- Спершу оберіть регістр (нижче), потім поле.
- Кислотний жовтий — це наліпка, ніколи не тло.
Уникайте: блідих відтінків на білому.
- Дані як мистецтво
Одне число, одне речення
Факт отримує розмір заголовка. Одне число, одне просте речення про те, чому воно важливе, і джерело під ним.
Одне число, одне речення
- Fixel Display Black для числа; Fixel Text для речення.
- Без десяткових знаків, якщо тільки саме в них не вся суть.
- На екрані число один раз «набігає», коли з’являється в полі зору.
Уникайте: таблиці чи графіка там, де вистачить одного числа.
- Дані як мистецтво
Пігулки, а не стовпці
Смуги — це пігулки, що ростуть, як стрічки тканини. Значення стоїть усередині пігулки, в її кінці, тож читачеві не доводиться шукати вісь.
Пігулки, а не стовпці
- До п’яти смуг; сортуйте їх за значенням.
- Значення стоїть усередині пігулки, в її кінці.
- Кольори чергуються: лавандовий, цукерковий, орхідея, фіолетовий, маджента.
Уникайте: осей, ліній сітки і 3D.
- Дані як мистецтво
Бульбашки для часток
Коли частини цілого важать більше за точні значення, задавайте розмір кіл за площею і з’єднуйте їх, як клітини. Найбільша частка — посередині.
Бульбашки для часток
- Значення передає площа, а не діаметр.
- Підпишіть три найбільші; решту перелічіть нижче.
- Один колір для бульбашок, сірий для з’єднань.
Уникайте: кругових діаграм.
- М’які, гострі форми
У кожної форми одне завдання
Форми м’які по краю й гострі за змістом. Кожна служить лише чомусь одному, тож люди вчаться їх читати.
У кожної форми одне завдання
- Арка обрамлює людину: портрети та ілюстрацію.
- Розетка позначає новину чи дату, одна на макет.
- Поділ закриває розділ, як край сукні. Пігулка тримає дії та дані.
Уникайте: форми, що виконує чуже завдання.
- Растр
Крапки навколо сильного образу
Растрові крапки дають друкарську фактуру й пульс. Ставте їх позаду чи поверх образу з характером: портрета, сукні, заголовка із зубами.
Крапки навколо сильного образу
- Крапки кольору маджента, що згасають до країв.
- Ніколи — під основним текстом; зони для читання лишайте чистими.
- Дрібні крапки — для портретів і екранів; великі — для плакатів, які бачать здалеку.
Уникайте: крапок на обличчі чи на тексті, який людям треба прочитати.
- Лінія поверх шрифту
Нитка перетинає заголовок
Одна червона лінія проходить крізь головні слова або під ними, з вільним кінцем. Там, де вона зав’язує вузол, — рішення або поворот в історії.
Нитка перетинає заголовок
- Одна нитка на кадр, червоного кольору нитки (#D0021B), із заокругленими кінцями.
- Вона заходить із краю й виходить вільно; ніколи нічого не бере в рамку.
- На екрані вона малює себе, щойно читач до неї доходить.
Уникайте: другої нитки чи нитки як звичайного підкреслення.
- Лінія поверх шрифту
Червоний курсив — її голос
Курсив кольору червоної нитки означає одне: говорить Марта. Він перетворює сторінку на розмову з нею.
Червоний курсив — її голос
- Лише цілі речення чи їхні частини, ніколи одне слово для наголосу.
- Лише її точні слова, з рядком джерела під ними.
- Щонайбільше один рядок її голосу на екран.
Уникайте: червоного курсиву для будь-кого іншого чи для наголосу.
- Гучні поля
Одна гостра нота
Кислотний жовтий — єдиний гострий акцент у пастельній системі. Як наліпка на плакаті, він каже «нове» чи «зараз» — і більше нічого.
Одна гостра нота
- Одна наліпка на макет, нахилена на кілька градусів.
- Два-три слова, сливовим на кислотному.
- Ніколи не тло, ніколи не основний текст.
Уникайте: двох наліпок чи кислотного кольору як поля.
Тихо за задумом
Роботу Марти варто знайти — тож ніщо тут ні за ким не женеться. Люди приходять по зміст і йдуть із тим, що створили. Переверніть картку, щоб дізнатися чому.
Нічого не треба приймати.
Жодної аналітики, рекламних пікселів, трекерів соцмереж, шрифтів чи скриптів інших компаній. Тож і банера про cookie, який довелося б проєктувати, немає.
Перевірка: сторінка завантажується лише з martabarandiy.com.
Відповіді лишаються з людиною.
Тести, вправи й картки працюють у браузері. Зберігати чи ні — вирішує читач, і в кожному інструменті є кнопка «забути».
Перевірка: скажіть про це одним тихим рядком там, де люди вводять щось особисте.
Без «стежте», без «підпишіться», без спливних вікон.
Канали перелічено, а не нав’язано. Жодних зворотних відліків, жодних «не пропустіть», жодних стін реєстрації, жодних спливних вікон на виході. Якщо людям подобається робота, вони знають, де її знайти.
Перевірка: жоден рядок на сторінці не просить того, чого зміст не заслужив.
Повідомлення — це повідомлення, а не лід.
Форми надсилають лист і нічого не зберігають: жодного списку, жодної бази даних, жодних кампаній услід. Форма каже про це, перш ніж людина натисне «надіслати».
Перевірка: відповідь — єдиний лист, який хтось отримає.
Спершу регістр, потім колір
Рожевий тут ніколи не прикраса. Регістр іде за змістом, тож та сама система говорить і з кабінетом у парламенті, і зі сценою.
Плакат
Особисте, Unbound, новини
Поля цукеркового рожевого й мадженти, плакатний шрифт, золота сукня. Гучно — навмисно.
Сцена
Виступи й події
Глибокий сливовий із рожевим і золотим. Для екранів у темних залах.
Україна
Українські теми
Теплий папір із масляно-жовтим і блакитним — ощадно й зі змістом.
Перш ніж щось вийде у світ
Шість питань. Якщо хоч одна відповідь «ні», це ще не готово.
- Чи є рівно одна червона нитка, і чи вона щось означає?
- Чи все набрано шрифтом Fixel — і нічим іншим?
- Чи кожне число й кожна цитата мають джерело?
- Чи достатній контраст (4,5:1 для тексту, 3:1 для великого шрифту)?
- Чи читається це на телефоні з шириною 360 px?
- Чи сказала б Марта ці слова сама?