Red Collar: 14 свіжих інструментів для веб-дизайнерів

1. Figma і дизайн-системи Figma опублікувала статтю з розбором свого API для створення «живої» дизайн-системи....
2. Прототипування: Framer, Atomic, Phase
3. Блог Serif і дизайн-патерни

Figma і дизайн-системи

Figma опублікувала статтю з розбором свого API для створення «живої» дизайн-системи. Тема активно обговорюється в суспільстві, Medium переповнений статтями по темі. Юрій Вєтров, арт-директор Mail.Ru Group, зібрав колекцію тематичних книг, а також детально розповів про створення дизайн-системи в Mail.Ru. Рекомендуємо:

Тим часом UXPin, який також змінив вектор на створення дизайн-систем, випустив додаток для macOS і Windows. UXPin допомагає в створенні безпосередньо дизайн-системи, її документування та генерації специфікації для розробників.

UI-кит і корисні плагіни для Sketch

Переходимо до Sketch. ловіть UI-кит з повною кастомізації: всі компоненти описані символами і текстовими стилями і побудовані на атомарної структурі з використанням констант, що дозволяє легко адаптувати компоненти для різних екранів. Розробники обіцяють незабаром зверстати всі ці компоненти і зв'язати через плагін.

FontBuddy дозволяє встановлювати шрифти в систему прямо з програми. Головна фішка - підтримка Google Fonts.

Sketch Split Shape - плагін, який вміє розбивати прямокутник на рівні частини із заданими margin і gutter. Дуже зручно, коли потрібно вписати нову сітку в уже готову.

Sketch Smart Style Switcher вміє застосовувати текстовий стиль для шару, якщо його параметри збігаються з уже створеними. Допомагає уникнути дублів і рутини через довго пошуку потрібного стилю.

Sketch Symbols Manager дозволяє перейменувати символи через зручний інтерфейс: перетаскуєте компонент в потрібну папку - і він змінює ім'я на льоту. Плагін також знаходить і видаляє невикористані символи. Так можна легко створювати потрібну структуру організації символів.

Формат сторіз також дістався Sketch. Plot дозволяє ділитися роботою з колегами, пости автоматично зникають через 24 години. Доступно з інтернету або додатки для macOS.

Прототипування: Framer, Atomic, Phase

Modular - безкоштовний Android UI-кит з величезною кількістю елементів з Material Design для швидкої збірки прототипів в Framer. Копіюйте, вставляйте Туглій, клавіатури або слайдери. Всі компоненти налаштовуються під ваші потреби і адаптуються під різні розміри екранів.

Phase дозволяє створювати не тільки прототипи, а й готові сайти і додатки. Судячи по заявлених фічам, на базі Phase можна збирати переіспользуемие компоненти і поширювати так звані дизайн-токени. У базовому наборі програми: робота з реальними даними, коментування, версійність. Чекаємо літа, а поки познайомтеся з Phase ближче можна в їх блозі .

Atomic опублікував статтю про створення різних навігаційних патернів всередині продукту. Всі приклади в вільному доступі, детально описані сценарії їх використання - залишилося тільки взяти роботу. Ці рішення дозволять прискорити процес прототипирования і спрощують вибір навігації для вашого інтерфейсу.

Блог Serif і дизайн-патерни

Serif - автори Affinity Designer і Photo (Продуктів, які позиціонуються як досить успішна альтернатива флагманським Photoshop і Illustrator) - запустили блог . Там хлопці діляться історіями створення дизайну, уроками по фотографії і джерелами натхнення різних ілюстраторів.

Саша Окунєв, популярний дизайн-блогер, доповнив свій блог розділом про дизайн-патернах . В одному з останніх постів він розібрав, як правильно спроектувати введення даних банківської карти і описав типові помилки процесу розробки форми.

Ще більше корисних інструментів для веб-дизайну: частина перша , частина друга

Є тема, в якій ви профі, і хочете випускати на Cossa власний дайджест? Пишіть, обговоримо: [email protected]