UXPUB 🇺🇦 Дизайн-спільнота: Xperience

Ілюстрації в дизайні

Xperience — Fri, 25 Oct 2024 13:32:08 +0000

Ілюстрації — це чудовий спосіб додати більше особистості до вашого дизайну. Ви можете використовувати їх замість зображень, навіть візуалізувати дані за допомогою ілюстрацій. Їх також можна використовувати для передачі абстрактних ідей. Щоб побачити, як ілюстрації впроваджуються в дизайн, ви можете завітати на Dribbble, Behance або Ello.

unDraw

Створена Катериною Лімпітсуоні, unDraw — це безкоштовна бібліотека ілюстрацій з якісними зображеннями без необхідності вказувати авторство. unDraw має різноманітні ілюстрації, пристосовані до будь-якої нагоди, і також має плагін для XD.

Avatarz

Avatarz — це 3D-бібліотека різноманітних аватарів, створена Three Dee. Ви можете використовувати їх у різних UI-проєктах з будь-яким інструментом дизайну, таким як Figma, Sketch, Adobe XD та іншими. Ви можете придбати повну бібліотеку, але також є безкоштовний зразок.

Shape.so

Shape.so, створений Design+Code, — це колекція статичних та анімованих іконок та ілюстрацій. З більш ніж 25 600 активів ви можете використовувати Shape через його веб-платформу або плагін для Figma.

Blush

Blush, створений Пабло Стенлі, Джейсоном Доннеттом та Заком Таннером, — це колекція бібліотек ілюстрацій від різних художників з усього світу. Вона має веб-додаток та плагіни для Figma та Sketch.

Coco Material

Coco Material, створений Мариною Лопес, Наташею Менхібар, Естер Морено та Ямілою Морено, — це грайлива бібліотека ілюстрацій, намальованих від руки, з відкритим кодом.

DrawKit

Створений Джеймсом Далі, DrawKit надає векторні ілюстрації безкоштовно. Крім того, вони також мають безкоштовні набори іконок, які ви можете завантажити та використовувати у своїх проєктах. Ілюстрації оновлюються щотижня та повністю настроювані.

Absurd Illustrations

Absurd Illustrations — це колекція надзвичайно креативних та унікальних ілюстрацій. Ви можете отримати їх безкоштовно, хоча будете обмежені лише файлами PNG. З Absurd Illustrations ви маєте можливість стати учасником або придбати окремі розділи. Учасники отримують доступ до багатьох функцій, включаючи можливість завантажувати файли SVG.

Додавання ілюстрацій до вашого дизайну

Відкриймо наш файл Figma. Тут ви помітите, що у нас вже є картка. Мета цього вправи — додати ілюстрацію з Shape.so до нашого дизайну.

Тепер перейдіть до розділу ілюстрацій на shape.so. Ви помітите, що можете змінювати властивості ілюстрації, такі як товщина лінії та кольори. Ми виберемо світло-блакитну та синю кольорові палітри, оскільки ці кольори краще поєднуються з нашою карткою. Потім завантажте ілюстрацію у форматі SVG. ![Ілюстрації в дизайні](https://ux.pub/uploads/articles/gm07kjmsjig7ox2zbd8u.png)

Тепер перетягніть SVG-файл до нашого файлу Figma. Переконайтеся, що він горизонтально вирівняний по центру.

Нарешті, змінимо розмір зображення та вирівняємо його по центру.

Висновок

Ілюстрації є одним із найважливіших візуальних інструментів, які можна використовувати для передачі ідеї. Інструменти, такі як Shape.so або unDraw, дуже корисні для підвищення ефективності вашого робочого процесу.

Переклад designcode.io

Оптимізація зображень

Xperience — Sun, 20 Aug 2023 10:24:38 +0000

Оптимізуйте зображення для підвищення продуктивності.

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

Що таке оптимізація зображень?

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

Використовуйте правильний формат

Перш ніж ми почнемо оптимізацію зображень, найкраще переконатися, що ви вибрали найкращий формат зображення. Зображення у форматі PNG мають вищу якість, але при цьому мають більший розмір файлу. JPEG найкраще підходить для фотографій і більшості зображень, особливо якщо зображення не повинно бути прозорим. GIF - це правильний формат, якщо ви хочете поділитися короткими відео, уникайте завантаження відео у форматі .mp4.

SVG

Масштабована векторна графіка, відома як SVG - це формат векторних зображень на основі XML. SVG-файли мають високу швидкість відгуку, не залежать від роздільної здатності, а також мають менший розмір порівняно з іншими форматами, що робить їх ідеальними для Інтернету. Файли SVG можна редагувати в графічних редакторах і навіть текстових редакторах.

PDF

PDF розшифровується як Portable Document Format і використовується для найкращого відображення документів та графіки. PDF-файли добре працюють незалежно від операційної системи, пристрою або браузера. Більшість інструментів для дизайну дозволяють експортувати файли дизайну у форматі PDF. PDF-файли зазвичай використовуються для друку або коли ви хочете відобразити документ чи графіку в Інтернеті.

Використовуйте правильні розміри

Рекомендується експортувати свої ресурси в тому ж розмірі, який вам знадобиться. Однією з поширених помилок є використання зображення більшого розміру, ніж вам потрібно. Коли ви змінюєте розмір зображення, будь ласка, пам'ятайте про дотримання пропорцій, щоб не спотворити його.

ImageOptim

ImageOptim - це безкоштовний інструмент, який може допомогти вам оптимізувати зображення у форматах JPG та PNG.

Tinypng

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

Squash

Squash - проста, потужна програма для стиснення та перетворення зображень для Інтернету тощо.

JPEGMini Pro

JPEGMini Pro дійсно робить свою роботу, вона може чудово оптимізувати будь-який JPG файл.

Aerate

Aerate робить дійсно хорошу роботу з оптимізації зображень у форматах JPG та PNG.

Як оптимізувати зображення за допомогою Aerate

Оптимізація зображень - це хороша практика. Як ми вже згадували раніше, є багато інструментів, які можуть вам у цьому допомогти. У цьому випадку ми будемо використовувати Aerate, оскільки він чудово справляється з оптимізацією ресурсів JPG і PNG, але ви можете використовувати свій улюблений інструмент. Як ви бачите, для цієї вправи у нас є зображення у форматі JPEG розміром 3,7 МБ.

Після того, як у вас є зображення або зображення, які ви хочете оптимізувати, відкрийте програму Aerate і просто перетягніть їх до області стиснення. Ви навіть можете перетягувати цілі папки із зображеннями. У цьому прикладі ми перетягнемо наше зображення і просто зачекаємо пару секунд, поки воно відрендериться.

Через кілька секунд ви побачите, що розмір зображення значно зменшився. З 3,7 МБ до 635 КБ без шкоди для роздільної здатності зображення.

Якщо вас влаштовує результат, ви можете зберегти нову версію зображення або після збереження цієї нової версії ви можете використати її, щоб спробувати зменшити розмір зображення ще раз. У нашому випадку результат нас влаштовує, тому ми просто збережемо зображення.

Висновок

Ви можете використовувати JPEG практично для будь-якого зображення, за винятком випадків, коли вам потрібно зображення з прозорістю; для таких випадків правильним вибором буде PNG. GIF використовуйте лише тоді, коли потрібно додати невеликі відео. Ви завжди можете скористатися будь-яким із цих додатків для оптимізації, щоб покращити рендеринг ваших ресурсів без шкоди для якості зображення.

Переклад designcode.io

Стокові зображення

Xperience — Sun, 13 Aug 2023 14:00:24 +0000

Знайдіть правильні зображення для вашого інтерфейсу

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

Ліцензування

Хоча багато сайтів дозволяють завантажувати і використовувати зображення, обов'язково ознайомтеся з їхньою політикою щодо цих зображень. Не вказувати авторство фотографа, коли це чітко зазначено, не тільки морально неправильно, але й може спричинити юридичні проблеми. CreativeCommons - найкраще місце, щоб дізнатися більше про ліцензування, і там навіть є бібліотека зображень, які ви можете використовувати під ліцензією CC.

Отримайте зображення з безкоштовних джерел

Існує багато ресурсів, які надають зображення безкоштовно, головне, щоб вони були легальними. Давайте розглянемо деякі з цих ресурсів!

Unsplash

Unsplash містить тисячі зображень високої роздільної здатності, розділених на різні категорії для полегшення навігації. Ще більш вражаючим є те, що Unsplash має плагіни для більшості основних інструментів дизайну, тому додавання зображень до ваших файлів дизайну стало ще простішим.

Pexels

Pexels - ще одна велика безкоштовна бібліотека фотографій та відео; ви будете здивовані фантастичними зображеннями, які там можна знайти.

Brust

Brust - ще один крутий фотобанк, де ви можете знайти безкоштовні фотографії для комерційного використання.

LibreStock

LibreStock - це бібліотека бібліотек. Він індексує різні стокові сайти та шукає зображення між різними сайтами.

StockSnap

StockSnap - це місце, де ви можете знайти зображення високої чіткості у різних категоріях: природа, бізнес, люди тощо.

Pixabay

Pixabay надає доступ до широкого спектру безкоштовних стокових зображень, ілюстрацій, відео та музики.

Gratisography

Порівняно з іншими сайтами, фотографії, знайдені на Gratisography, є вигадливими та більш унікальними. Нові фотографії додаються постійно, і ви можете завантажити стільки зображень, скільки забажаєте.

Refe

Як і Unsplash, Refe також має багато зображень високої роздільної здатності, розділених на категорії, які ви можете завантажити безпосередньо з їхнього сайту. Крім того, якщо ви натиснули кілька класних фотографій, ви можете продати їх тут.

Foodie's Feed

Якщо ви шукаєте зображення їжі у високій роздільній здатності, Foodie's Feed ідеально підходить для вас. Вони мають понад 1600 безкоштовних зображень, які ви можете вибрати та завантажити.

Picography

Picography надає вам доступ до численних зображень високої роздільної здатності, розділених на різні категорії, які ви можете безкоштовно використовувати у своєму додатку.

Як додати кілька аватарок за допомогою плагіна Unsplash

У файлі вправи ви помітите, що у нас є кілька круглих фігур без жодного зображення. І це дуже поширене явище, коли ви створюєте різні інтерфейси користувача. Для цього випадку існують деякі комбінації клавіш, якими ви можете скористатися, щоб зробити вашу роботу більш ефективною.

Перше, що ми зробимо, це встановимо плагін Unsplash. Для цього ми будемо використовувати Figma. Перейдемо до спільноти і в полі пошуку наберемо Unsplash та встановимо плагін.

Далі виберіть усі круглі фігури, які ви хочете заповнити зображеннями, за допомогою плагіна Unsplash.

Перейдіть на панель вкладок, виберіть Плагіни і натисніть на кнопку Видалити. З'явиться спливаюче вікно з різними варіантами.

У спливаючому вікні ви можете вибрати різні типи зображень відповідно до контексту вашого інтерфейсу. У нашому випадку ми хочемо додати кілька аватарів, тому виберемо портрет.

Запустивши плагін, ми побачимо, що наші круглі фігури будуть заповнені обличчями випадкових людей. Цей плагін дійсно рятує життя, і ви можете використовувати його в різних випадках.

Висновок

Зображення є чудовим візуальним доповненням до будь-якого додатку. Переконайтеся, що ви обираєте зображення, які добре вписуються в загальну естетику вашого додатку. Також переконайтеся, що ви не використовуєте занадто великі зображення.

Переклад designcode.io

Звуковий дизайн інтерфейсу

Xperience — Sun, 13 Aug 2023 13:47:05 +0000

Важливість звуку в дизайні інтерфейсу

Звук є важливою частиною інтерфейсу користувача. Звук може означати багато речей і може використовуватися в різних частинах взаємодії.

Чому звук важливий?

Звук можна перетворити на власний фірмовий звук, щоб люди могли впізнавати ваш додаток, навіть не бачачи його, створюючи власний "гачок". Коли звук справляє правильне враження, ви багато виграєте, докладаючи невеликих зусиль. У цьому розділі ми навчимо вас, як знаходити і створювати чудові звуки інтерфейсу користувача і коли їх використовувати для максимальної ефективності.

Позитивні дії

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

Реалістичні дії

Використовуйте реалістичні звуки, коли потрібно, щоб користувач відчував, що він використовує реальну версію цифрового аналога. Наприклад, звук спуску затвора, коли ви фотографуєте на телефон.

Деструктивні дії

Подібним чином руйнівні дії дають підтвердження того, що щось було видалено. За певних обставин люди отримують задоволення від видалення речей, оскільки це дає їм змогу відчути контроль над ситуацією.

Відомо, що компанія Apple витратила багато часу на створення анімації подрібнення паперу, коли ви видаляєте елемент у Passbook. Це були старі добрі часи.

Material Design

Система Material Design пояснює багато типів звуків. До них відносяться звук як зворотній зв'язок, як прикраса, звуки героїв, сповіщення та багато іншого.

Design Files

Design Files має гарну бібліотеку звуків інтерфейсу. Тут ви можете знайти різні типи звуків, такі як click, pop, tadah, woosh, а також звуки помилок.

Appsounds

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

Facebook Soundki

Чудовий і безкоштовний пакет від дизайнерів з Facebook.

Freesound

Freesound має величезну кількість звуків. Він вимагає безкоштовного облікового запису і потребує досить багато пошуку, але ви будете винагороджені маленькими перлинами, які ви не знайдете більше ніде. Не забудьте скористатися функцією розширеного пошуку з тривалістю 0 і 1 секунда.

Як додати до анімації звук інтерфейсу користувача

Відкриваємо наш файл Figma та імпортуємо ресурси до Principle.

Тепер ми готові імпортувати ресурси з Figma до Principle. Для цього перейдемо до Principle і перейдемо на панель вкладок. У розділі "Імпорт" виберіть "Імпортувати з Figma".

Перейдіть на панель інструментів і натисніть на кнопку Створити новий компонент. Переконайтеся, що ви назвали цей новий компонент Bell. Ця перша анімація буде всередині більшої анімації, і вона реагуватиме на інший час.

Всередині першого компонента додамо наш перший тригер. Виберіть головну папку і натисніть на іконку дії.

Тепер виберіть компонент, а потім виберіть опцію Touch Begins.

Далі, спрямуйте взаємодію на той самий ресурс.

Ця дія створить дублікат ресурсу з назвою Bell 2.

У Bell 2 виберіть ресурс дзвін і змініть його кут на -10.

Тепер повторіть той самий процес для Дзвону 2. Натисніть на кнопку дії в Bell 2, виберіть Авто і спрямуйте взаємодію на той самий ресурс.

Це створить третю версію ресурсу. У цій новій версії змініть кут Дзвону на 10

Тепер повторимо останній крок. Це створить четверту версію дзвону, і ми можемо надати йому кут -10.

Для дзвоника 4 додамо нову дію. Виберіть Авто і вкажіть дію на Дзвіночок 1, щоб завершити цикл анімації.

Ви помітите, що в нижній частині інтерфейсу є часова шкала, яка безпосередньо пов'язана зі стрілками, що знаходяться зверху активів. Цей інтерфейс внизу допоможе нам більш детально попрацювати над анімацією.

Далі, перейдіть в нижню частину інтерфейсу і стисніть часовий шар до половини. Таким чином, ми можемо налаштувати час кожної взаємодії до 0.50 (півсекунди) для всіх взаємодій. Переконайтеся, що ви вибрали кнопку "Повернутися до батька".

У головній анімації виберіть компонент. Ви помітите, що поруч з ресурсом є кілька маленьких шестерень, перейменуйте його на Group. Натисніть кнопку дії і виберіть опцію Tap (Натиснути) над тим самим ресурсом, щоб створити його дублікат.

У новому кадрі виберіть Еліпс 2 і поверніть його на 360 градусів.

Тепер давайте додамо звуковий файл до взаємодії. Для цього потрібно просто перетягнути звуковий файл на полотно.

Принцип представлятиме аудіофайл у вигляді сірого квадрата, нам потрібно приховати цей квадрат. Щоб приховати цей квадрат, встановіть непрозорість на 0 і помістіть його в кінець списку шарів.

Створімо нову дію. Вибираємо Авто і вказуємо на першу дошку для малювання. Таким чином ми можемо замкнути цикл.

Тепер, коли цикл завершено, відкрийте монтажний стіл і збільште час ресурсу до двох секунд, щоб він збігався з часом звуку інтерфейсу користувача.

Ви побачите, що цикл повернеться до 0, і таким чином замкнеться.

Висновок

Важливо пам'ятати, що звук, який ви обираєте, відіграватиме велику роль у тому, як ваш додаток буде розпізнаватися. Це буде голос, який представляє ваш продукт, тому скористайтеся цим і створіть найкраще звукове оформлення інтерфейсу для вашого додатку.

Переклад designcode.io

Бібліотеки іконок

Xperience — Sun, 13 Aug 2023 13:33:41 +0000

Організуйте свої іконки в кращий спосіб.

Існує багато корисних бібліотек піктограм та інструментів, які допоможуть вам легко знаходити та впорядковувати ваші піктограми.

SF Symbols

SF Symbols від Apple - одна з найкрасивіших бібліотек іконок. Це набір з понад 2400 символів, з багатоколірними варіантами, які автоматично адаптуються до налаштувань яскравості та доступності. Вона також має локалізовані варіанти символів, що ідеально підходять для різних мов.

Іконки Material

Якщо ви розробляєте дизайн для Android, Material Icons може бути тим, що вам потрібно. Це велика бібліотека іконок, кожна з яких має п'ять різних тем і різну щільність. Якщо ви хочете впорядкувати їх, ви можете скористатися IconJar, інструментом, про який ми поговоримо пізніше.

IconJar

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

Впорядкувати іконки

Крім того, ви можете імпортувати іконки Streamline за допомогою IconJar. Він також має webApp, який може допомогти вам з навігацією по більш ніж 30 000 іконок з його бібліотеки.

IconFinder

IconFinder підтримує IconJar, що дуже корисно, коли ви хочете впорядкувати іконки IconFinder.

Icons8

Icons8 - ще одна популярна бібліотека іконок, яка також має додаток для macOS, а також плагіни для Figma, Photoshop та Illustrator.

SmashIcons

SmashIcons має дуже унікальну та мистецьку бібліотеку іконок. Вона має веб-додаток, який допомагає користувачеві впорядкувати іконки.

Nucleo

Nucleo - це бібліотека іконок і органайзер. Вона містить понад 30 000 іконок і є досить зручною, коли ви хочете організувати свої іконки за папками або проектами.

Як перетворити шрифт іконки на SVG

Для цієї вправи ми будемо використовувати IconJar.

Тепер, коли ми розглянули всі різні символи, які ми можемо використовувати. Перейдемо до IconJar і в Налаштуваннях перейдемо до пункту Імпорт і там обов'язково позначимо галочками пункти OTF, TTF і WEBP. Так ми зможемо імпортувати наш шрифт.

В IconJar натискаємо на іконку плюса "+" і вибираємо New Set..., щоб додати шрифт.

У маленькому модальному вікні виберіть "Новий набір" і виберіть шрифт, який ви хочете імпортувати. Зачекайте пару секунд і ви побачите всі символи шрифту, імпортовані до IconJar.

Тепер ми можемо вибрати будь-який символ. На лівій бічній панелі натисніть на випадаюче меню ImgOptim і виберіть пункт Sketch, щоб експортувати іконку в Sketch.

Вуаля! Ви просто взяли символ зі шрифту і перетворили його в невеликій бібліотеці іконок, перетворили один з символів в SVG і перенесли його в Sketch.

Висновок

Бібліотеки іконок корисні в процесі дизайну. Або коли ви хочете зібрати певні іконки для конкретного проекту, або поділитися групою іконок із зацікавленими сторонами. Ці інструменти для організації іконок можуть заощадити ваш час і допомогти вам більше зосередитися на дизайні.

Переклад designcode.io

Найкращі практики дизайну форм

Xperience — Sun, 13 Aug 2023 11:04:21 +0000

Дізнайтеся, як покращити дизайн цифрових форм

Ці найкращі практики слугують коротким помічником при створенні форм. Переконайтеся, що завжди пам'ятайте про свій контекст, щоб визначити найкращій варіант. Як і в більшості речей у дизайні, часто існують винятки з найкращих практик.

Використовуйте мітки (label)

Мітки є обов'язковими для забезпечення доступності. Програми для зчитування з екрану повідомляють користувачам про кожну мітку. Без належних міток форми будуть недоступні для багатьох людей. Переконайтеся, що кожне поле форми має label, використовуйте відповідну семантику HTML і використовуйте ARIA, коли це необхідно.

Джерело

Уникайте заповнювачів (placeholder) у якості мітки

Використання заповнювача як мітки створює навантаження на короткочасну пам'ять. Мітка зникає, як тільки користувач починає вводити текст, і користувач повинен очистити введений текст, щоб знову відкрити мітку-заповнювач.

Заповнювачі створюють додаткові проблеми, коли вони занадто світлі або темні. Занадто темний заповнювач можна сплутати із заповненим текстом. Якщо він занадто світлий, деякі користувачі можуть не помітити заповнювач.

Джерело

Робіть мітки короткими

Уникайте довгих етикеток, коли це можливо, щоб форми було легко читати та сканувати.

Джерело

Узгодьте довжину та структуру поля з передбачуваним введенням даних

Довжина поля визначає діапазон відповідей. Використовуйте цей параметр для полів із визначеною кількістю символів, як-от номери телефонів, поштові індекси тощо.

Джерело

Поля форми мають виглядати як поля форми

Креативність часто призводить до негативних результатів при розробці форм. Інноваційні на перший погляд ідеї можуть захопити навіть найбільші світові організації та знизити зручність використання для мільйонів, якщо не мільярдів людей. [Google непомітно змінив свій матеріальний дизайн текстових полів у 2017 році (https://medium.com/google-design/the-evolution-of-material-designs-text-fields-603688b3fe03) після того, як виявив, що багато користувачів не знали, що можуть взаємодіяти з даними, які вводяться.

Коли справа доходить до полів введення, дотримуйтеся стандартних конвенцій дизайну. Якщо ви вирішили "винайти велосипед", обов'язково проведіть ретельне юзабіліті-тестування.

Джерело

Відрізняйте поля форми від інших елементів

Поле форми повинно візуально пояснювати свою функцію. Переконайтеся, що воно достатньо відрізняється від інших елементів інтерфейсу, щоб користувачам не потрібно було здогадуватися.

Джерело

Використовуйте відповідний тип вводу та тег

Типи вводу роблять форму більш доступною та покращують взаємодію з користувачем. Наприклад, використання правильного типу введення викликає відповідну клавіатуру на мобільних пристроях (цифри проти літер).

Дизайнери та розробники часто не звертають уваги на такі прості речі, як використання перемикача замість прапорця для запитань з декількома варіантами відповідей, але з однією правильною відповіддю.

Джерело

Форми мають бути в один стовпчик

Форми з однією колонкою зручніше сканувати і вони краще відображаються на мобільних пристроях. Кілька колонок можуть напружувати користувача і змушувати його випадково пропускати поля.

Як і в більшості кращих практик, з цього правила є винятки (наприклад, наступне в цьому списку). Переконайтеся, що ви завжди пам'ятаєте про контекст, який ви розробляєте, щоб визначити найкращу презентацію.

Джерело

Поля, які логічно йдуть одне за одним, повинні бути об'єднані в лінію

Нагромадження пов'язаних полів, таких як імена, адреси та платіжні дані, викликає непотрібне тертя і може порушити потік користувачів.

Джерело

Опустіть непотрібні поля

Опустіть необов'язкові поля і подумайте про інші способи збору даних. Завжди запитуйте себе, чи можна зробити висновок, відкласти або повністю виключити питання.

Джерело

Зробіть кнопки дій специфічними для конкретного завдання

Текст кнопки "Надіслати" повинен чітко і лаконічно описувати дію, яку вона викликає. Користувач не повинен заплутатися в тому, що станеться після натискання.

Джерело

Згрупуйте мітки з їхніми полями введення

Показуйте мітки з відповідними даними, щоб користувачам було зрозуміло, яке поле вони заповнюють. Помилки зазвичай виникають, коли користувач прокручує сторінку вгору і вниз і робить неправильну асоціацію.

Посилання

Уникайте великих літер

Між регістром речення і регістром заголовка є питанням стилю, але всі великі літери ніколи не є гарною ідеєю. Великі літери важко читати, сканувати, і вони просто виглядають неприємно.

Джерело

Розташовуйте прапорці та перемикачі вертикально

Коли прапорці та перемикачі розташовано вертикально, їх легше сканувати. Однак, представлення опцій з відповідною графікою може додати додатковий вимір до дизайну, що зводить нанівець необхідність вертикальної презентації.

Джерело

Показуйте всі варіанти вибору якщо їх менше 6

Розміщення варіантів у випадаючому списку приховує варіанти вибору і вимагає двох кліків для вибору варіанту. Використовуйте випадаючий список, коли є більше 5 варіантів, і включіть пошук у випадаючому списку, коли більше 25 варіантів.

Однак можна використовувати розкривний селектор для менш ніж 6 варіантів, якщо простір обмежений, наприклад, у певних ситуаціях вбудованого редагування.

Посилання

Показуйте помилку біля поля де вона виникла

Намагайтеся запобігати помилкам, наскільки це можливо, будучи чіткими та лаконічними. Якщо користувач припустився помилки, покажіть йому, де вона сталася, поясніть причину і повідомте, як її виправити.

Посилання

Згрупуйте пов'язані поля

Створюйте логічні групи, щоб користувач міг швидше інтерпретувати те, що запитується у формі, і керувати запитами в пакетах.

Джерело

Відрізняйте первинні дії від вторинних

Щоб уникнути помилок, зробіть основну дію форми, наприклад, відправку, більш помітною, ніж другорядні варіанти, щоб уникнути помилок. І завжди запитуйте себе, чи потрібна другорядна дія взагалі.

Джерело

Додайте індикацію прогресу для багатокрокових форм

Багатокрокові форми, так звані майстри форм, повинні показувати прогрес, щоб користувач знав, де він знаходиться і що далі.

Джерело

Протидійте модальностям на модальностях

Взаємодія з декількома модальностями може призвести до помилок користувача. Замість цього розгляньте можливість вбудованого редагування в межах одного модального режиму.

Завжди думайте про доступність

Занадто часто дизайнери не перевіряють реалізацію своїх проектів, щоб переконатися, що вони відповідають критеріям доступності.

Щоб дізнатися більше про те, як семантично реалізувати доступні форми, я наполегливо рекомендую прочитати W3C's guidance on how to create websites that meet WCAG.

Переклад coyleandrew.medium.com

Менеджери шрифтів

Xperience — Fri, 02 Sep 2022 17:18:02 +0000

Що таке менеджери шрифтів?

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

Навіщо використовувати менеджери шрифтів?

Тепер, коли ми знаємо, що таке менеджери шрифтів і деякі з їхніх основних функцій, давайте подивимося, навіщо нам їх використовувати. Окрім полегшення співпраці та організації, ці менеджери також надають вам доступ до безлічі шрифтів, а деякі йдуть далі й надають вам такі речі, як піктограми! Ви також можете попередньо переглянути шрифт перед його використанням, подібно до того, як ви це зробили б на веб-сайті Google Fonts.

Right Font

За допомогою Right Font ви також можете синхронізувати свої шрифти зі своєю командою та додати будь-який шрифт до улюблених. Він автоматично синхронізує шрифти з Google Fonts і Adobe Typekit. Ви також можете отримати доступ до різних значків, які можна використовувати для своїх дизайнів, це справді гарна програма.

Font Base

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

Typeface

Typeface — це менеджер шрифтів для macOS, який дозволяє впорядковувати колекції шрифтів і має мінімальний інтерфейс користувача. Він також має темний режим.

Робота з менеджером шрифтів

Для цієї вправи ми використаємо RightFont і Sketch. Якщо у вас їх немає, ви можете завантажити їх і використовувати пробні версії.

Після встановлення давайте відкриємо RightFont. Перейдіть до лівої бічної панелі та виберіть «Усі шрифти», щоб ви могли швидко переглянути всі шрифти, встановлені на вашій машині.

Зазвичай, коли ви створюєте бренд, вам хочеться побачити, як назва бренду виглядає різними типами шрифтів. За допомогою RightFont ви можете зробити це, ввівши будь-яке слово в поле, розташоване у верхньому правому куті екрана. У моєму випадку я введу «код дизайну». Ви автоматично побачите, що слово буде показано різними типами шрифтів.

Тепер розмістимо обидві програми, Sketch і RightFont, поруч. Додайте текст у Sketch зі словами Design Code. Якщо ви хочете побачити, як ваш шрифт змінюється в Sketch, у RighFont є невеликий ярлик, який дозволяє змінювати текст у Sketch безпосередньо з RightFont. Це робить ваш робочий процес ефективнішим

Висновок

Упорядкування шрифтів є ключовим кроком до ефективності робочого процесу. Цікаво, скільки часу ви можете заощадити, коли можете легко побачити, який тип шрифтів використовується на місці.

Переклад designcode.io

10 найпопулярніших дизайн-систем для UX-дизайнерів у 2022 році

Xperience — Wed, 17 Aug 2022 18:21:40 +0000

Список найкращих дизайн-систем, створених і обслуговуваних компаніями з передовим досвідом у галузі, які ви можете використовувати, щоб вчитися та надихатися для ваших проєктів.

За останні кілька років масштаб і швидкість розробки інтерфейсу значно зросли. Існують мільйони веб і мобільних додатків, і вони можуть мати сотні й тисячі екранів. Нам потрібні дизайн-системи, щоб керувати дизайном у масштабі та оптимізувати процес.

У цій статті я хочу розпочати діалог про дизайн-системи. Оскільки компанії по всьому світу продовжують інвестувати в цифрову трансформацію, вони виявляють, що їм потрібно скоротити час, необхідний для створення нових продуктів. Дизайн-система — це один із таких ресурсів, який допомагає вам ефективно це робити в багатьох точках взаємодії. Тож, не зволікаючи, давайте швидко зануримося в них.

Що таке дизайн-система?

Досліджуючи цю статтю, я шукав точне та зрозуміле визначення, але в Інтернеті витають лише деякі розпливчасті поняття. Здається, це залежить від того, кого ви запитуєте.

Нижче наведено два визначення, які, на мою думку, є найбільш слушними:

«Повний набір стандартів проектування, документації та принципів, разом із набором інструментів (шаблони інтерфейсу користувача та компоненти коду) для досягнення цих стандартів». (джерело: uxpin.com)

«Дизайн-системи — це, по суті, набори правил, обмежені принципами, та реалізовані у дизайні та коді. Ці атрибути виконують різні функції та забезпечують цілісну систематизацію в узгодженому порядку від кнопок до сторінок». (джерело: medium.muz.li)

Таким чином, дизайн-система — це набір стандартів для управління дизайном у масштабі шляхом зменшення надмірності та підтримки узгодженості.

1. Material Design

Це скарбниця для простих, елегантних шаблонів дизайну та стайл-гайдів. Розроблено Google.

https://material.io

2. Fluent Design System

Дизайн-система Fluent, розроблена Microsoft.

https://www.microsoft.com/design/fluent

3. Atlassian

Мова дизайну для створення простого, інтуїтивно зрозумілого і красивого досвіду.

https://www.atlassian.com

4. Polaris

Polaris від Shopify. Об’єднує робочий процес дизайнера та розробника.

https://polaris.shopify.com/

5. Human Interface Guidelines

Отримайте поглиблену інформацію та ресурси інтерфейсу користувача для розробки чудових програм, які легко інтегруються з платформами Apple.

https://developer.apple.com/design/human-interface-guidelines/

6. Carbon Design System

Carbon — це система розробки IBM із відкритим вихідним кодом для продуктів і цифрового досвіду

https://www.carbondesignsystem.com/

7. Mailchimp

Система дизайну Mailchimp грайлива та експресивна

https://ux.mailchimp.com/

8. Audi

Інтерфейс користувача для Audi.

https://www.audi.com/ci/en/guides/user-interface/introduction.html

9. Дизайн-система Airbnb

Розроблено та підтримується Airbnb.

https://airbnb.design/

10. Lightning Design System

Готові до використання елементи інтерфейсу користувача HTML і CSS створені для розробки Salesforce.

https://www.lightningdesignsystem.com/

Які уроки ви можете винести з цього? Припустімо, що ви розробляєте сайт електронної комерції з меню для категорій. Не знаєте, якого розміру має бути стрілка меню чи як далеко від тексту слід розмістити? Ви можете дізнатися, як це зробити, подивившись на новаторську систему покупок, таку як Shopify!

Переклад uxplanet.org

Вибір шрифту для вашого дизайну

Xperience — Wed, 10 Aug 2022 18:38:16 +0000

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

Шрифти від Google (Google Fonts)

За допомогою Google Fonts ви можете безкоштовно завантажувати шрифти та використовувати їх у своїх проєктах, як вважаєте за потрібне. Оскільки єдиний спосіб отримати настроювані гарнітури на iOS — це завантажити та імпортувати файли шрифтів, опція завантаження дуже корисна. Є принаймні два чудових шрифти: Open Sans і Roboto, які за замовчуванням використовуються в сучасних телефонах Android.

Typekit

Typekit є частиною передплати Creative Cloud і має багатий вибір чудових шрифтів. Ідеально для початківців. Чудові шрифти Proxima Nova, Museo, Adelle Sans і Brandon Grotesque.

Fontstand

Чудова перевага Fontstand для Mac полягає в тому, що ви можете спробувати шрифти протягом 1 години, перш ніж їх придбати. Крім того, замість того, щоб купувати шрифти, ви орендуєте їх за незначну ціну на місяць.

Fonts.com

За місячну підписку fonts.com дозволяє використовувати скільки завгодно шрифтів. Тут найбільший вибір на сьогодні. Fonts.com також дозволяє вам самостійно розміщувати файли шрифтів, тобто ви можете завантажити та розмістити їх на своєму сервері.

Good Type Foundry

Good type Foundry надає доступ до ряду шрифтів, які можна використовувати як у цифрових, так і в друкованих виробах. Сюди також входять деякі дивовижні спеціальні шрифти. Перед покупкою у вас є можливість протестувати гарнітури.

Latinotype

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

Пошук шрифтів

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

WhatTheFont

На WhatTheFont ви можете шукати понад 130 000 шрифтів, щоб знайти той, який вам потрібен. Ви можете завантажити це як додаток або перейти на їхній веб-сайт, щоб завантажити зображення, що містить шрифт.

What Font Is

Цей сервіс працює так само. Крім того, вони мають опцію професійного членства, яка дає вам доступ до додаткових функцій.

Основний текст

Оберіть шрифт, який добре виглядає в основному тексті. Якщо сумніваєтеся, оберіть той, який буде чистим і зручним для читання. San Francisco, Helvetica Neue, Open Sans, Roboto, Proxima Nova та Museo Sans – одні з улюблених. Усі вони доступні безкоштовно в Google Fonts і Typekit (з обліковим записом Creative Cloud).

Ресурси

Типографіка — це вид мистецтва, який варто досліджувати. Коли ви досягли рівня, щоб назвати свою майстерність мистецтвом, це найбільше досягнення, яке ви можете отримати.

Typography Guide

Якщо ви хочете дізнатися більше про поєднання шрифтів, апострофів, лапок, тире та дужок, я пропоную зайти на typogui.de.

A five minutes guide to typography

Справжня насолода для читання. Розумно розроблений, щоб дати вам час зупинитися та подумати над кожним моментом. Він також вміло анімований для кращого ефекту.

Як визначити шрифти

Можливо, ви знайшли цікавий шрифт, сфотографували, а потім думали, як додати його до свого дизайну? За допомогою WhatTheFont ви можете знайти назву шрифту або деякі подібні параметри.

Перейдіть до WhatTheFont і давайте завантажимо фотографію. WhatTheFont просканує зображення та спробує розпізнати всі символи на фото.

Після завершення сканування ви побачите зону кадрування. Область, яку ви оберете, допоможе сервісу зрозуміти, які символи ви хочете ідентифікувати. Нарешті натисніть кнопку зі стрілкою, щоб сервіс зміг запропонувати вам деякі варіанти.

Після завершення сканування ви побачите поруч із фотографією список можливих збігів для шрифту та посилання, де можна придбати ці шрифти.

У цьому випадку оберемо Osnova Small Caps Std Bold, оскільки він має схожий Q. Якщо у вас немає шрифту, ви можете придбати його на сайті MyFonts.

Вуаля! Ви змогли змінити шрифт свого дизайну, використовуючи натхнення, яке ви знайшли у своєму оточенні.

Висновок

Хоча існує безліч ресурсів щодо вибору шрифтів. Завжди вибирайте шрифт залежно від того, наскільки вони читабельні. Найкраще поєднати пару шрифтів, ніж мати забагато шрифтів в одному дизайні.

Вибір кольору у дизайні

Xperience — Wed, 03 Aug 2022 19:59:16 +0000

Є інструменти, які допоможуть вибрати палітру кольорів за декілька секунд. Також ви можете перейти на будь-який із ресурсів представлених нижче та знайти натхнення для свого наступного проєкту.

Як вибрати кольори?

Обираючи палітру кольорів для свого дизайну, слід пам’ятати про деякі фактори.

Теорія кольору: найкраще ознайомитися з теорією кольору. Це полегшить процес підбору кольорів.
Контраст: це один із найважливіших аспектів дизайну. Майже всі інструменти дизайну мають плагіни, які допомагають вам перевірити, чи проходить ваш дизайн перевірку кольору. У розділі Закладок багато корисних інструментів для роботи з кольорами
Психологія кольору: Психологія кольору — це галузь науки, яка вивчає кольори та те, як різні відтінки кольорів можуть викликати певні емоції. Є хороша стаття Creativebloq, яка розповідає про те, як кольори асоціюються з емоціями людей.
Надмірне використання кольорів: як новачок, ви можете вибрати основний колір і дотримуватися його, щоб не перевантажуватися вибором кількох кольорів.

Інструменти для роботи з кольорами

Є кілька цікавих програм, за допомогою яких можна генерувати палітри кольорів.

Adobe Colors

Adobe Colors дозволяє створювати колірові теми за допомогою кола кольорів. Це також дає вам можливість створювати набори кольорів та градієнти на основу зображення яке ви можете завантажити. Adobe Colors також має інструменти з цифрової доступності.

Paletton

У Paletton ви спочатку вибираєте потрібну схему: моно (mono), комплементарну (complementary), тріадну (triadic), тетраедричну (tetradic), аналогову (analogous) або акцентовану аналогову (accented analogous). Тоді, коли ви змінюєте один колір у колірному колі, решта змінюються відповідно до нього.

Coolors

Coolors допомагає створювати нові колірні палітри, а також вибирати одну з різноманітних уже наданих.

Sip color app

Sip — це засіб вибору кольорів, який дозволяє впорядковувати кольори та ділитися ними. Ця програма доступна для macOS та iOS.

Натхнення

Надані ресурси дуже корисні, коли справа доходить до пошуку натхнення.

Dribbble

Dribbble має безліч макетів інтерфейсу користувача з різними колірними схемами. Це також дозволяє сортувати дизайни залежно від вибраного кольору.

Muzli Colors

Muzli Colors від InVision — це чудовий інструмент, коли мова йде про натхнення. Крім того, він дозволяє генерувати кольорові cсхеми. Чудово ще те, що він покаже вам інтерфейси користувача, які використовують вибрану палітру кольорів.

Керівні принципи проектування

Apple і Google говорять про кольори у своїх рекомендаціях. Ці вказівки можуть допомогти дизайнерам створити кольорову тему, яка їм найкраще підходить.

iOS guidelines

Apple надає рекомендації для iOS щодо використання кольорів для додатків iOS.

Material Design

Material Design — це система кольорів із відкритим кодом, яка містить багато інформації про те, які кольори вибрати. Вони також надають засіб вибору кольорів, за допомогою якого можна перевірити палітри, а також контраст.

Nix Color

Nix Color — це круте апаратне забезпечення, яке передає фізичні кольори у ваш додаток. Він сканує справжній колір і імпортує його у свій мобільний додаток. Хоча він не є 100% точним, він виконує досить гарну роботу. Отже, якщо ви коли-небудь хотіли взяти певний колір із квітки чи будь-якої поверхні, це інструмент, який зробить цю роботу.

Як вибрати кольори з фото

Є багато захоплюючих варіантів взяти кольори з нашого оточення та використовувати їх у наших дизайнах. За допомогою Adobe Color ви можете використовувати свої фотографії чи зображення, щоб витягти їхні кольори та створити палітру. Давайте перейдемо до Adobe Color і перетягнемо зображення.

Ви помітите, що Adobe Color відсканує фотографію та запропонує колірну палітру.

Якщо вам подобається запропонована палітра кольорів, ви можете зберегти та опублікувати її; в іншому випадку ви можете перемістити палітри кольорів і вибрати колір, який вам подобається. У нашому випадку ми виберемо пару різних кольорів з фотографії.

Тепер, коли ми задоволені нашою палітрою, давайте збережемо її. Потім додайте кілька тегів, перейменуйте його на Purple Lights DN і опублікуйте його в Adobe Color Community, якщо хочете.

Клацніть вкладку «Дослідження». У полі пошуку введіть Purple Lights DN, щоб знайти палітру кольорів.

Далі наведіть курсор на палітру кольорів і завантажте версію палітри кольорів у форматі JPG. Таким чином, ми можемо завантажити JPEG у наш файл Figma, щоб використовувати його як еталон.

Тепер натисніть F, щоб створити нову рамку для Apple Watch 44 мм. Суть полягає в тому, щоб використати деякі кольори з колірної палітри для створення фону.

Потім натисніть O і створіть овал 245x245. Додамо до нього радіальний градієнт.

Змініть кольори на #2D038B. Що стосується другого кольору, давайте змінимо його непрозорість на 10%.

Давайте додамо деякі ефекти. Виберіть коло та додайте розмиття шару за допомогою Blur 93.91.

Продублюйте овал. Для нового овалу змініть колір на інший колір із палітри кольорів. Нижче ми змінивши його на #CA267F.

Далі помістимо обидва кола в рамку Apple Watch, і ви побачите ефект, який ми створили всередині рамки.

Нарешті, розмістимо наш логотип у рамці. Обов’язково відцентруйте його по вертикалі та горизонталі.

Висновок

Коли справа доходить до вибору кольорів для вашої програми, найкраще вибирати кольори, які відображають ваш бренд. Колірна схема може відігравати дуже важливу роль у тому, як користувачі сприймають ваш бренд.

Переклад designcode.io

Локалізація дизайну

Xperience — Sun, 24 Jul 2022 13:31:04 +0000

Підтримка локалізації є важливою частиною процесу проектування. Важливо врахувати це, коли ви починаєте розробляти свою програму. Підтримуючи локалізацію, ви можете підвищити успіх своєї програми в різних країнах.

Що таке локалізація?

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

Переконайтеся, що зображення та ілюстрації відповідають культурі
Одиниці вимірювання такі ж, як і місцевості
Формати дати, часу та валюти точні
Перекладені дані чіткі та зрозумілі

Динамічна ширина і висота

Важливо, щоб ви могли налаштувати свої ресурси в Auto Layout з самого початку, щоб пізніше можна було включити функції локалізації у свій дизайн. Додавання Auto Layout до текстів у вашому інтерфейсі користувача допоможе адаптувати дизайн до іншої мови.

Глобальні шрифти

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

Формати дати та часу

Ці проблеми можуть здатися незначними, але вони можуть змінити все. Візьмемо для прикладу інструменти вибору дати: засоби вибору дати в США використовують формат ММ-ДД-РРРР, а в Європі — формат ДД-ММ-РРРР. Незважаючи на те, що це може здатися нам не дуже очевидним, користувачі звикли до певного формату.

Макет

Більшість мов читаються зліва направо, але це не стосується арабської. Просте додавання перекладеного вмісту тут було б марним. Коли справа доходить до локалізації, вам потрібно буде взяти до уваги макет сторінки.

Місцева культура

Хоча ваша програма та сторінка продукту повинні забезпечувати однакову взаємодію на всіх ринках, інколи важливо покращити певні елементи для культурної відповідності.

Переклад проти локалізації

Незважаючи на те, що це може здатися таким, майте на увазі, що переклад і локалізація НЕ еквівалентні одне одному. Простий переклад вмісту на іншу мову ідеально підходить, коли ви говорите про документацію, оскільки здебільшого вона не вимагає особистого підходу, але локалізація – це набагато більше. Це вимагає пам’ятати про місцеву культуру та додавати вміст, який відповідає місцевості, на яку ви націлені.

Прапори країн світу

Плагін Flags of the World дає вам можливість додати прапор будь-якої країни до вашого дизайн-проекту. Ви можете завантажити його з розділу плагінів у Figma або перейти за цим посиланням.

Локалізуйте

Lokalise — програма для керування перекладами, яка бездоганно працює з Figma, Sketch і Adobe XD. Працювати з ним дуже легко. Ви можете вибрати тексти, які хочете перекласти, зі свого макета, а потім відкрити плагін. Lokalise скопіює тексти та впорядкує їх на своїй платформі, де ви або ваша команда зможете перекласти кожне слово кількома мовами.

Перекладіть вміст інтерфейсу користувача

Для цієї вправи ми будемо використовувати плагін Translator для Figma. Давайте перейдемо до «Community», потім до плагінів, знайдемо плагін « Translator» і встановимо його.

Тепер перейдіть до файлу у Figma. Виберіть заголовок і текст, який ми хочемо перекласти. Для цього прикладу ми перекладемо наш текст з англійської на іспанську. Перейдіть на панель вкладок і клацніть Плагін < Перекладач < Іспанська (Plugin < Translator < Spanish).

Через пару секунд ви побачите, що всі вибрані нами тексти будуть перекладені іспанською мовою. Обов’язково виправте деякі текстові блоки на випадок, якщо в цьому є потреба.

Висновок

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

Переклад designcode.io

Цифрова доступність дизайну

Xperience — Mon, 27 Jun 2022 17:33:07 +0000

Доступність є важливою частиною кожного процесу розробки, вона допомагає демократизувати ваш додаток і може мати величезне значення для людей з обмеженими можливостями або вадами. Такі компанії, як Apple, заохочують розробників і дизайнерів робити свої програми доступними.

Чому дизайни повинні бути доступними?

Дизайн завжди повинен бути доступним, тому що інакше ви не охоплюєте велику частину людей і не надаєте рівний доступ всім користувачам. Крім цієї причини, у багатьох країнах є закони, які забезпечують доступність дизайнів, невиконання яких може призвести до правових наслідків.

Проект A11Y

Проект A11Y справді чудово пояснює всі основи, щоб зробити ваш проект більш доступним. Це зусилля громад, спрямовані на полегшення цифрової доступності. Там можна знайти багато ресурсів. Їх контрольний список – це чудовий спосіб побачити, наскільки доступним є ваш проект.

Інструменти доступності

Існує багато доступних інструментів, щоб полегшити процес створення дизайну більш доступним. Ось деякі з них:

Stark

Stark — це дивовижний інструмент, який безперебійно працює у Figma, Sketch та Adobe Xd. Це допоможе вам перевірити контраст. Він також надає своїм користувачам доступ до симуляції дальтонізму, що дуже корисно. Крім того, Stark рекомендує контрастні дружні кольори, щоб полегшити вашу роботу.

WhoCanUse

WhoCanUse – це інструмент, який може легко повідомити вам, чи має колір, який ви використовуєте, хороший коефіцієнт контрастності, та як це вплине на людей з різними вадами зору.

Color Oracle

Color Oracle — це програма для симулятора дальтонізму. Цей інструмент може дати вам гарне уявлення про те, як ваш дизайн буде виглядати для людей із поширеними порушеннями кольорового зору.

Більше інструментів та ресурсів з доступності ви можете знайти в нашому розділі Доступність у Закладках

Типографіка

Люди з вадами зору, дальтонізмом і труднощами читання, серед іншого, є частиною групи, про яку ми повинні пам’ятати, створюючи дизайн. Найкраще мати текстові елементи, які легко читаються, а це означає, що вам слід уникати спеціальних шрифтів відображення.

Даніель Шварц в одній зі своїх статей про доступність пропонує зосередитися на деяких деталях, як-от:

Вирівнювання: тільки ліворуч або праворуч (не розтягувати по ширині)
Мінімальний розмір шрифту має бути близько 16 пікселів
Міжрядковий інтервал: принаймні 1,5x від розміру шрифту
Інтервал між абзацами: принаймні 1,5x від міжрядкового інтервалу
Ширина абзацу: максимум 80 символів; 40 для символів ієрогліфів

Доступні кольори

Існує багато програм, які можуть допомогти вам перевірити, чи доступні ваші кольори. Цікавим додатком є контраст, який допоможе вам вибрати кольори, які відповідають інструкціям щодо доступності.

Доступні кольорові системи

Якщо ви хочете піти ще далі, ви можете створити цілі кольорові системи. Деріл Куперсміт і Вілсон Майнер з Stripe згадують у своїй статті, що важливо вручну підбирати кольори та перевіряти їх контраст за стандартом. Є ще одна цікава стаття Кеті Райлі, де вона пояснює, як вона створила доступну колірну схему.

Робота зі Stark

У цьому прикладі ми покажемо вам, як перевірити свої кольори на доступність за допомогою плагіна Stark, який доступний для Sketch, Figma і XD. Для цієї вправи ми будемо використовувати Figma. Тож у Figma давайте перейдемо до спільноти, потім до плагінів і шукаємо Stark.

Після встановлення ми виберемо два шари - текст під назвою UI Design for iOS 14 і фоновий шар. Потім перейдіть на панель вкладок, клацніть Плагіни > Stark > Перевірити контраст.

З’явиться нове вікно. Це проаналізує наші елементи та оцінить кольори, які ми використовуємо в нашому дизайні. Якщо всі перевірки пройдуть, буде показано зелені галочки. У нашому випадку кольори, які ми використовуємо в прикладі, виглядають добре і знаходяться в межах дозволеного діапазону для доступності.

Давайте спробуємо функцію моделювання дальтонізму. Перейдіть до панелі вкладок і клацніть на Plugin, потім перейдіть до Stark і виберіть Colorblind Simulation; це дозволить нам бачити наші кольори так само, як люди з вадами зору.

З’явиться нове невелике вікно, щоб ви могли вибрати вкладку Симуляція. У меню Тип дальтонізму виберіть Tritanopia(Тританопія) для цього прикладу. Ви помітите, що колір вашої монтажної області зміниться, наприклад, ви зможете швидко побачити, як ваш дизайн буде виглядати для користувача.

Висновок

Розробляючи дизайн, доступний для всіх, слід пам’ятати про багато речей. Вкладаючи свій час у розробку більш інклюзивних і доступних для користувачів речей, ви дбаєте про всіх своїх користувачів.

Переклад designcode.io

Багато цікавих інструментів та ресурсів з доступності ми зібрали також в нашому розділі Доступність у Закладках