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

Добірка безкоштовних українських шрифтів від українських дизайнерів

Varhal — Wed, 18 Jan 2023 09:02:17 +0000

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

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

Шрифт Nyght Serif

NYGHT SERIF абсолютно БЕЗКОШТОВНИЙ для особистого та комерційного використання. Він також має ліцензію відкритого шрифту (OFL). NYGHT SERIF буде публікуватися в процесі. І буде багато оновлень.

NYGHT SERIF також знає розширену латиницю. Він також знає кирилицю. Але тільки український алфавіт.

Автор Maksym Kobuzan.
Сторінка шрифта на behance.net.
Завантажити безкошновно з instagram.

Шрифт Zvin Serif

Zvin — це шрифт зі змінними засічками, натхненний типографікою 1850-1960 років. Настрій шрифту та загальна динаміка засновані на грецьких формах, змішані з сучасними декоративними формами. Шрифт Zvin складається з безлічі гострих кутів і засічок. Витончений і помітний шрифт для підтримки справжнього характеру у дизайні.

Підтримка алфавіту: Латиниця та Кирилиця.
Вага: звичайний, середній, напівжирний, жирний.

Автор Іван Цанко-Хлібович.
Сторінка шрифта на tsankotype.com.
Завантажити безкошновно з tsankotype.com.

Шрифт Work Sans + Work Grotesk

Work Sans — це універсальний шрифт без засічок із базовим набором латиниці та кирилиці, створений спеціально для веба.

Автор Іван Цанко-Хлібович.
Сторінка шрифта на tsankotype.com.
Завантажити безкошновно з tsankotype.com.

Шрифт Nastup Basic

Наступ - це безкоштовний модульний трафарет без засічок. Назва походить від українського слова "Наступ". Натхненний трафаретними технічними знаками на стінах, а також різними будівельними деталями.  При таких мінімальних інтервалах це дає більш вузький набір (особливо гарний при мінімальному лідінгу). Проте його можна урізноманітнити альтернативними широкими або більш відкритими символами.  Nastup знає розширену латиницю, базову кирилицю та грецьку. І розмовляє багатьма мовами. Крім того, він має альтернативний набір символів для українського алфавіту.

Автор Maksym Kobuzan.
Сторінка шрифта на behance.net.
Завантажити безкошновно з zakznak.com.

Шрифт Kyiv Region

Оригінальний вільний шрифт, створений спеціально для територіального брендингу Київської області. Розробкою цієї візуальної айдентики займалася студія дизайну White Studio Design. Kyiv Region Type поєднує в собі давню історію та авангардні експерименти. Форми півуставу та скорописів, характерні для часів Київської Русі та українського бароко, поєднуються з конструктивізмом ХХ століття, який через сто років знову стає модним. В результаті вийшов сучасний геометричний шрифт без засічок зі штрихами, альтернативами, лігатурами та історичними формами, яку можна використовувати для оформлення тематичних покажчиків, реклами, упаковки, сувенірної продукції і навіть історичних текстів церковнослов'янською мовою.

Автор Dmytro Rastvortsev.
Сторінка шрифта на behance.net.
Завантажити безкошновно з drive.google.com.

Шрифт Irpin Type

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

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

Автор Aleksey Popovtsev.
Сторінка шрифта на fonts.com.
Завантажити безкошновно Regular та Bold з fonts.com.

Шрифт Fixel

У MacPaw вірять, що технології роблять наше життя простішим і веселішим. Вони дбають про людей і вважають, що люди та технології найкраще виглядають разом. MacPaw розробили два внутрішніх шрифти, щоб підкреслити цю подвійність: гротескний Fixel та акцентований Hoover. Назви шрифтів обрані не випадково.

Fixel і Hoover - це імена двох котів, які прожили з MacPaw більше десяти років і стали невід'ємною частиною нашої родини. Їхні яскраві характери стали основою для унікальних образів нових шрифтів. Fixel - найбільш універсальний і технологічний з них.

Fixel — це гарнітура з 2 стилями — текстом і відображенням — і 9 варіантами щільності — від тонкого до чорного. Відмінною рисою типу є те, що в ньому поєднуються елементи геометричного та гуманістичного гротеску: відкриті форми букв, чіткість, широкість, низька контрастність. Індивідуальність гарнітури поєднує в собі чіткість, стриманість і функціональність, а також дружелюбність, динамічність і грайливість.

Автор MacPaw.
Сторінка шрифта на MacPaw
Завантажити безкошновно н MacPaw

Шрифт lutsk

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

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

Автор Кирило Ткачов.
Сторінка шрифта на rentafont.com.ua
Завантажити безкошновно з rentafont.com.ua

Шрифт Ermilov

Говорити про Україну зараз треба українським шрифтом. Спеціально для бренду Ukraine now був створений Ermilov.

Це сучасний масивний геометричний гротеск з особливими скосами у кутах лiтер. На його створення автора надихнули роботи українського художника-конструктивіста Василя Єрмілова.

Автор Kyrylo Tkachov
Сторінка шрифта на banda.agency
Завантажити безкошновно з dropbox.com

Шрифт Namu

Шрифт був створений Дмитром Ростовцевим у 2018 для Національного художнього музея України, після дослідження музейного фонду та накреслень стародавніх літер. Має декілька креслень, які відповідають різним епохам.

Автор Дмитро Ростовцев
Сторінка шрифта на behance.net
Завантажити безкошновно з drive.google.com

Шрифт Kharkiv Tone

Шрифт Kharkiv Tone від Катерини Дрозд натхненний графіті, технічними та рукописними написанми зі стін міста. Це голос Харкова, де поєднується непоєднуване.

Автор Катерина Дрозд
Сторінка шрифта на behance.net
Завантажити безкошновно з drive.google.com

Шрифт Arsenal

Сучасний український безкоштовний діловий шрифт Андрія Шевченко, розроблений у 2012 року та доданий до бібліотеки Google Fonts.

Автор Андрій Шевченко
Сторінка шрифта на behance.net
Завантажити безкошновно з fonts.google.com

Шрифт Mariupol

Шрифт Mariupol розробив дизайнер Андрій Шевченко cпеціально для брендингу Маріуполя. Це геометричний гротеск, натхнений плакатною графікою та сучасними універсальними гарнітурами.

Автор Андрій Шевченко
Сторінка шрифта на tyktor.media
Завантажити безкошновно з dropbox.com

Найкращі статті 2022 року про дизайн українською

Varhal — Sat, 31 Dec 2022 09:33:22 +0000

Привіт! Прийшов час підвести підсумки 2022 року.

Напад росії на Україну зламав багато планів українців, але ми вистояли та дали відсіч загарбникам, наразі ЗСУ продовжує деокуповувати території, а ми допомогати армії. Слава ЗСУ!

Я хочу подякувати авторам комьюніті, які, попри складні умови, продовжували готувати матеріали для чітачів та підтримували спільноту. Разом ми сила!

Окремо хочу відзначити та подякувати декільком авторам за кропітку працю та суперські публікації, більша частина яких, потрапили до топу:

Yaroslav Zhmykhov за серію статей по UX Дизайн процессу, який складається із 17 частин
Євген Олексюк за шеринг досвіду з UX, доследженнь та прийняття рішень
Oksana Nosenko за цікави статті про аналітику та розвиток компетенцій
shelest за технічні статті та новини індустрії

@olex_world, @sofiyanakon, @zhmikhov, @andriizhdan, @oksana_nosenko, @anastasiia_koval, @annakaliaieva, @__1e27b, @shelest, @azhoroth, @vadim_kalinin_34e420c896a

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

Laws of UX. Закони, які допомогають покращити користувацький досвід та збільшити цінність продукту

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

Від Євгена Олексюка

Більше 30 ресурсів, де можна знайти натхнення для дизайнерів

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

Від Софії Наконечної

Підготовче та вторинне дослідження (кабінетне дослідження)

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

Від Yaroslav Zhmykhov

Все про етап «Дослідження»

Якісні дослідження — Це ті дослідження, які здатні дати відповідь на питання «Що?», «Як?» і «Чому?» розгорнуто і з різноманітними деталями. Якісні дослідження допомагають нам вивчити поведінку, погляди, схильності потенційних користувачів продукту, предметну область, способи застосування вже існуючих продуктів.

Від Софії Наконечної

Як спростити роботу з таблицями у Figma

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

Від Andrii Zhdan

Метод • Причина • Ціна. Підхід, який дозволяє зробити ваше дизайн-рішення більш свідомим та зменшити ризики

Сьогодні хочу трошки розповісти про мій улюблений підхід, який особисто я використовую в роботі щодня. Я назвав це Method • Reason • Price підхід. Не можу сказати що авторство належить мені, але поки що я не знайшов опису цього методу деінде 😊

Від Євген Олексюк

Дизайнерські терміни, які повинен знати кожен

Сьогодні я поділюся термінами, котрі на мою думку повинен знати кожен дизайнер, оскільки це є фундамент. Я не претендую на істинну в останній інстанції, я лише ділюся своїм досвідом, який я отримав, працюючи дизайнером протягом 8-ми років.

Від Yaroslav Zhmykhov

Коли та як проводити аналіз конкурентів в User Experience

Кілька місяців тому на одному з івентів я запитав у знайомого дизайнера, які активності він робить, коли отримує новий проект. Серед активностей він назвав аналіз конкурентів і, коли я попросив розповісти про це більш детально, то зрозумів, що не всі знають що це таке, коли треба робити аналіз і головне — ЯКИЙ ПРОФІТ ВІН ДАЄ.

Від Євген Олексюк

Нові цікаві інструменти для дизайнерів, червень 2022 року

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

Від Dinozavrix

Data-driven підхід у продуктовому дизайні

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

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

Від Oksana Nosenko

Мої улюблені плагіни для Figma

Добірка улюблених плагіні для Figma від @annakaliaieva.

Карта подорожі покупця

Це один з найпотужніших і найгнучкіших інструментів мапінгу (journey), який візуалізує всі точки дотику (контакту) покупця/клієнта (customer/client) з компанією, послугою (сервісом) чи продуктом. Даний артефакт ілюструє подорож покупця. Інструмент Human-centered design (HCD).

Від Yaroslav Zhmykhov

У що одягнути свої кейси? - 10 сайтів з безкоштовними мокапами

Мокап - важливий інструмент демонстрації своїх робіт замовнику або для презентації себе компанії.

В цій статті не буде посилань на World Mockup, ls.graphics та Pixeden.

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

Від Anastasiia Koval 🦄

Корисні плагіни для Figma #1

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

Від Anna

Консистентність та стандарти дизайну

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

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

Від Vadim Kalinin

🦢 Антикрихкість для дизайнера

Ми живемо в дуже турбулентний час, де за два роки сталася низка неприємних подій, які тривають і досі, а саме: пандемія (COVID19) та карантин, війна, блекаути… чого чекати далі навіть не знаю🙈. І від усього цього дуже страждає бізнес в різних сферах.

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

Від Дмитра Свєнтуховського

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

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

Від Xperience

Як безпечно оновити технічно застарілі компоненти у Figma

Спочатку розглянемо способи оновлення існуючого компонента, щоб почати використовувати Властивості (Properties). Якщо ви не знайомі з тим, як працюють Властивості та як їх використовувати, для початку перегляньте цей чудовий посібник від команди Figma.

Потім поговоримо про те, як випустити оновлений компонент з Властивостями (або навіть без них), аби не створити проблем для ваших дизайн команд.

У статті розберемо блок оповіщення (alert-block), розроблений командою дизайн системи Klarna.

Від shelest

🇺🇦 Аудит компонентів вашої бібліотеки

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

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

Від Stanislav Stefaniuk

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

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

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

Від Xperience

Большое руководство по проектированию темной темы для Android-приложений

Varhal — Wed, 17 Aug 2022 09:46:42 +0000

Статья 2019 года но все еще актуальна!

В этой статье я объясню пошаговый процесс создания темной темы (Dark Theme / Dark Mode) для вашего приложения на основе Руководства Material Design от Google

Приятного чтения!

Когда в 2019 году на конференции Google I/O, компания Google объявила о повальной эпидемии темных тем, я был очень взволнован. Те из вас, кто следит за мной в социальных сетях, должны знать, что я фанат темной темы. Я просто обожаю ее!

С выходом Android Q в 3-м квартале 2019 года я понял, что важно добавить тёмную тему в свои приложения.

Компания Google выпустила руководство Material Guidelines для применения темной темы в своих приложениях. Это отличное руководство в отличие от Human Interface Guidelines от Apple (Apple, почему? Почему?). Вы безусловно можете потратить время на его прочтение, но я планирую сделать вашу жизнь намного проще, описав в этой статье пошаговый процесс создания темной темы.

Я также опубликовал в Instagram 5 видео, которые помогут быстро освоить основы темной темы.

Еще один момент. Я буду освещать только аспект проектирования, но не аспект разработки. Вы можете посмотреть это видео от Google, которое объясняет разработку темной темы.

А еще можете посмотреть мое полноценное видео-руководство на YouTube !

Хорошо, если у вас есть готовая дизайн-система с цветами, шрифтами, компонентами и т.д., давайте начнем!

Расположение в пространстве

Каждое приложение состоит из множества компонентов. Nav drawer, панель приложений, кнопки и т.д. Каждый компонент имеет определенное значение размера тени, поскольку это является одной из основ Material Design.

В светлой теме имеет смысл добавить к компоненту тень в зависимости от расположения в пространстве. Но это не работает с темной темой, поскольку черная тень на темном фоне визуально не заметна. И поэтому Google пришла в голову идея делать компонент светлее по мере увеличения тени. Но обратите внимание, что в темной теме компоненты будут по-прежнему иметь те же настройки тени, что и в светлой теме.

Руководство Google обеспечивает 12 уровней возвышения для компонентов

В качестве основы всегда используется темно-серый цвет со значением #121212. Apple вечно любит отличаться, поэтому они предлагают использовать чистый черный цвет #000000.

Все значения тени и возвышения были предоставлены Google в их UI Kit (Sticker Sheet).

Компоненты становятся светлее по мере увеличения возвышения

Проектирование приложения

Каждый компонент в темной теме построен с использованием 2 слоев. Он создается путем размещения полупрозрачного оверлея на поверхности с цветом #121212. Это может быть, как белый, так и цветной оверлей. Я объясню оба случая использования.

Эта концепция зависит от того, какой инструмент проектирования вы используете. Это быстрее сделать в Figma и Sketch, а в Adobe XD требуется дополнительный шаг. Ну, а пока я покажу вам проектирование приложения в Figma.

Давайте в качестве примера возьмем навбар.

Как видите, панель приложения состоит из 2 слоев. Базовый всегда имеет цвет #121212. Поверх базового слоя нанесен белый полупрозрачный оверлей. Непрозрачность этого оверлея была установлена на уровне 9%. Это значение варьируется в зависимости от возвышения. В этом случае панель приложения имеет возвышение 4dp. Чем больше возвышение, тем больше непрозрачность оверлея. Значения возвышения и оверлея доступны в UI Kit, предоставленном Google.

Если вы используете такой инструмент, как Adobe XD, процесс будет немного отличаться. Вам нужно будет дублировать базовый слой (#121212), а затем изменить цвет на белый. Потом установите непрозрачность продублированного слоя на 9%. В Adobe XD вы не можете добавить 2 цветных слоя к одному элементу.

Передача разработчикам

Есть 2 способа передать проект разработчику.

Вы не передаете проект разработчику 😂. Попросите разработчика использовать компоненты кода, предоставленные Google. Эти компоненты кода будут автоматически применять возвышение и цвет.
Если вы используете кастомный компонент, укажите истинное значение цвета. В нашем случае это #272727, который представляет собой смесь цветов #121212 и #FFFFFF (9%).

Фон и поверхности с фирменным цветом

Некоторые бренды любят везде использовать свой фирменный цвет (цвет бренда). Поэтому есть еще один способ добавить немного стиля вашей темной теме.

В этом примере мы выберем синий цвет в качестве основного (#4BB2F9).

Создание кастомного цвета фона на основе цвета бренда.

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

Все ли компоненты должны иметь беграунд темного цвета? На самом деле, нет. Возьмём в качестве примера FAB (плавающая кнопка целевого действия). Такие компоненты, как кнопки и FAB, могут иметь оттенок основного цвета.

Маленькие компоненты, такие как FAB, не будут иметь темного фона

Я расскажу об этом подробнее в следующем разделе.

Цветовая палитра

Далее идет красочная часть. Первое, что вам нужно сделать, это взять основной и дополнительный цвета и создать цветовую палитру. Для создания цветовой палитры вы можете перейти в раздел, посвященный цветам, на сайте Material.io и ввести свои цвета. Затем он сгенерирует для вас цветовую палитру. Обязательно прокрутите вниз до раздела «Tools for picking colors section».

Цветовая палитра, сгенерированная для оранжевого цвета

Давайте разберемся с компонентами цветовой палитры.

Тональные значения: каждому оттенку цветовой палитры присваивается номер в диапазоне от 50 до 900. Это число является тональным значением. Они используются только для определения определенного оттенка цветовой палитры.
Основной цвет: когда вы вводите значение основного цвета, генератор цветовой палитры назначит тональное значение вашему основному цвету. Оно основано на насыщенности основного цвета. В приведенном выше примере тональное значение основного цвета составляет 600. Однако это основной цвет для светлой темы. Но для темной темы основной цвет смещается в ненасыщенный цветовой оттенок. (Пояснение ниже). Google рекомендует использовать цвет с тональным значением 200 в качестве основного цвета для темной темы.
Основной вариант: любой оттенок основного цвета называется основным вариантом (Primary Variant). Таким образом, в нашем случае, любой цветовой оттенок, кроме тонального значения 600, может рассматриваться в качестве основного варианта для светлой темы. А любой цветовой оттенок, кроме тонального значения 200, может рассматриваться, как основной вариант для темной темы.

Зачем нам нужна полноцветная палитра?

Потому, что темная тема хорошо работает с ненасыщенными цветами. Оттенки с тональными значениями от 50 до 400 являются наиболее подходящими цветами для темной темы.

Тональное значение 900 — наиболее насыщенное. Тональное значение 50 — наименее насыщенное

Убедитесь, что у вас есть сгенерированная цветовая палитра для акцентных и дополнительных цветов.

Еще одна вещь, прежде чем мы завершим раздел о цвете. Речь идет о цвете для таких компонентов, как FAB и кнопок, которые я показал вам в предыдущем разделе.

На изображении выше, FAB на верхнем экране имеет основной цвет темной темы, который имеет тональное значение 200. Но рекомендации позволяют нам использовать для таких компонентов более насыщенный цвет. В нашем случае это будет основной цвет для светлой темы с тональным значением 500.

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

С этого момента, где бы я ни использовал словосочетание «основной цвет», я имею в виду «основной цвет темной темы» (тональное значение 200).

Цвета «On»

Гайдлайны предоставляют набор правил для таких элементов, как текст и иконки, которые должны соблюдаться для темной темы. Он называется «Палитра основы темной темы» (Dark Theme Baseline Palette), которая выглядит примерно так.

Палитра основы темной темы

Цвета на правой стороне называются «On». Они применяются к тексту, иконкам и обводкам, которые располагаются «поверх» поверхностей, использующих основной, вторичный цвета, цвет поверхности, фона или цвет ошибки.

На изображении выше у нас есть расширенный FAB, имеющий основной цвет. Цвет текста черный. Не белый. Это соответствует «Палитре основы темной темы».

Это в значительной степени все, что вам нужно знать о цвете.

Доступность и контраст

Теперь начинается интересная часть. На каждой поверхности есть 3 типа элементов — иконки, текст и обводки. Они могут иметь либо белый цвет, либо оттенок фирменного цвета.

Давайте возьмем пример, в котором цвет текста и иконок будет белым.

Различные уровни непрозрачности для различного выделения текста

На изображении выше, есть 3 различных уровня непрозрачности для текста белого цвета. Согласно руководства Material Design:

Высокое выделение текста должно иметь непрозрачность 87%.
Текст с низким акцентом должен иметь непрозрачность 60%.
Отключенный текст, должен иметь непрозрачность 38%.

Безусловно, эти значения можно изменить по своему вкусу. Поэтому в нашем случае непрозрачность заголовка вкладки (Activity) составляет 100%, а непрозрачность другого заголовка — 87%, а непрозрачность подзаголовков — 60%.

Теперь давайте возьмем пример, где цвет текста не белый, а является оттенком цвета бренда.

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

Как видите, я использовал не насыщенный оранжевый цвет для вкладок, заголовка вкладки и кнопки. Этот не насыщенный оранжевый цвет имеет тональное значение 200, как рекомендовано руководством Material Design.

Так, какую роль в этом играют доступность и контраст? На самом деле все очень просто.

Все цвета, используемые в темной теме, должны отображать элементы с достаточной контрастностью, соответствующей стандартам доступности WCAG для текста.

Эти рекомендации предоставляют нам 2 коэффициента контрастности, которые должны быть соблюдены для достижения достаточного контраста. Вот 3 инструмента, которые вы можете использовать для быстрой проверки цветового контраста. Пишите в комментариях, если используете другие инструменты.

Исходя из всего вышесказанного, вот 4 возможных результата для вашего интерфейса. Вы можете выбрать любой из них. Найдите минутку, чтобы медленно рассмотреть, чем они отличаются.

4 возможных результата

Хорошо, теперь давайте поговорим о цифрах. Как я уже говорил, есть 2 коэффициента контрастности, которые должны быть удовлетворены. И вот элементы, которые играют роль в контрастности.

4.5:1

Поверхность с основным цветом (темная тема). (Результаты 3 и 4)
Текст с белым или не белым цветом. (Все 4 результата)

15.8:1

Поверхность с основным цветом (темная тема) или черным цветом по умолчанию. (Все 4 результата)
100% белый цвет текста. (Результат 1 и 3)

Знаю, что это очень трудно понять, если вы никогда раньше не работали с коэффициентами контрастности. Но не волнуйтесь, так как я здесь, чтобы помочь вам.

Шаг 1

Решите, собираетесь ли вы использовать фон с цветом по умолчанию или основным цветом.

Шаг 2

При тестировании ваших цветов убедитесь, что вы тестируете их на самом высоком уровне возвышения 24dp. Согласно руководству Google, модальное диалоговое окно имеет возвышение 24dp. Но на изображении выше я взял в качестве примера панель навигации, имеющую возвышение 16dp. Разница в цвете незначительна между возвышением 16dp и 24dp.

Шаг 3

Если вы выберете фон с темным цветом по умолчанию, вам нужно только проверить контрастность 4,5: 1. И, если для цвета текста выбран чистый белый цвет, в этом случае вам не нужно применять какой-либо коэффициент контрастности.

Но, если текст имеет цвет вашего бренда, тогда проверьте коэффициент контрастности 4,5: 1. Давайте посмотрим, как это работает.

Соответствие коэффициенту контрастности 4.5:1

Как вы можете видеть здесь, цвета соответствуют коэффициенту контрастности 4,5: 1, что нам и нужно.

Шаг 4

Если вы решите использовать фон с основным цветом, вам нужно проверить только соответствие коэффициенту контрастности 15,8: 1. В этом случае вам нужно проверить соотношение независимо от цвета текста.

Следует отметить, что, если цвет текста белый, то проверьте коэффициент контрастности 15,8: 1. Если для текста выбран фирменный цвет, проверьте коэффициент контрастности 4,5: 1.

Давайте посмотрим, как это работает.

Соответствие коэффициенту контрастности 15,8: 1

На изображении выше мы тестируем коэффициент 15,8: 1, так как цвет текста белый. При непрозрачности 11% цвет фона становится достаточно темным, чтобы соответствовать коэффициенту контрастности 15,8: 1.

Соответствие коэффициенту контрастности 4,5: 1

На изображении выше мы не собираемся тестировать коэффициент контрастности 15,8: 1, поскольку цвет текста не белый. Вместо этого проверьте коэффициент 4,5: 1. Коэффициент контрастности 15,8: 1 необходимо проверять только тогда, когда цвет текста белый.

Еще одна вещь, на которую следует обратить внимание при тестировании коэффициентов контрастности, это проверить их на фоне состояний ошибок.

Соответствие коэффициенту контрастности 4,5: 1

Рекомендации определяют точный цвет, который будет использоваться для состояний ошибки. В нашем случае это ярко-красный с полупрозрачным оверлеем с непрозрачностью 40%. В результате мы получаем цвет #CF6679. Непрозрачность 40% обеспечивает соответствие коэффициенту контрастности. Красный цвет (#B00020) — это цвет ошибки по умолчанию для светлой темы.

Текст здесь черный, а не белый. Это из-за «Палитры основ темной темы», которую мы рассмотрели ранее.

Но, если вы решите использовать другой цвет для состояний ошибки, просто убедитесь, что он соответствует коэффициенту контрастности 4,5: 1.

Состояния

Проектирование темной темы для разных состояний компонента просто и понятно. Все настройки тени, наложения и обводки доступны в UI Kit. Я собираюсь показать вам пример с состоянием перетаскивания компонента.

Есть 2 типа компонентов. Тот, который использует темный цвет по умолчанию (#121212) и тот, который использует основной цвет. На изображении ниже я покажу вам схему дизайна, когда компонент имеет темный цвет по умолчанию.

Полупрозрачный белый оверлей для разных состояний

На изображении выше состояние перетаскивания имеет тень 8dp и полупрозрачный оверлей белого цвета. Значение 8% является фиксированным значением, рекомендованным гайдлайнами. Поэтому лучше не редактировать это значение.

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

Когда текст использует основной цвет, цвет оверлея совпадает с цветом текста. В этом случае цвет текста будет #F796AE, поэтому оверлей использует тот же цвет.

В большинстве случаев такие компоненты, как кнопки и FAB, всегда используют фирменные цвета. Поэтому всегда используйте белый оверлей для разных состояний. Для состояния перетаскивания непрозрачность составляет 8%, как мы видели в предыдущих примерах.

Для отключенных состояний есть только 2 варианта.

2 варианта для кнопок.

Изображение выше показывает только 2 варианта для отключенных состояний. Это может быть либо обводка, либо заливка. В обоих случаях текст белый с непрозрачностью 38%.

Иллюстрации

Погодите… что? Типа иллюстрации графического дизайна?

Ха-ха-ха. Да 😂

Иллюстрации также должны быть адаптированы под темную тему. К сожалению, в руководствах ничего не сказано об иллюстрациях. Единственное доступное руководство — выступление на конференции Google I / O.

Итак, давайте разберемся с этим вопросом. Иллюстрации, которые я буду использовать, взяты с сайта Undraw.com.

Настройка иллюстраций для темной темы довольно проста. Все, что вам нужно, это разбить иллюстрацию на 2 части, а именно: предмет и фон.

Элемент фона необходимо сделать серым. Но при этом вы должны следовать простому правилу. Самый светлый оттенок в светлой теме становится самым темным оттенком в темной теме и наоборот. Иногда вам может понадобиться поиграть с черным и белым цветами, чтобы они выглядели идеально. Вы не должны всегда следовать этому правилу.
Для предметов необходимо использовать ненасыщенные цвета. Таким образом, ваш диапазон — оттенки с тональным значением 400–50.

Ненасыщенные цвета для иллюстраций темной темы

В светлой теме на иллюстрации использовался насыщенный зеленый цвет с тональным значением 800. Но для темной темы используйте менее насыщенный цвет из той же цветовой палитры. В нашем случае я использовал тональное значение 200. Но вы можете использовать тональные значения 400 или 300.

Другие части иллюстрации, такие как брюки и рубашка, уже имеют ненасыщенный цвет, поэтому менять его не нужно.

Вот и все!

Итак, это почти все, что вам нужно знать о проектировании темной темы для вашего Android-приложения. Не стесняйтесь обращаться ко мне в любое время, если вам нужны разъяснения или, если вы где-нибудь застряли. Вы можете отправить мне сообщение на любой социальной платформе. Я буду рад вам помочь 😁.

Ресурсы

Перевод статьи prototypr.io

Делимся музыкой 👨‍🎤. Какую музыку вы слушаете во время работы?

Varhal — Wed, 25 May 2022 12:35:10 +0000

Всем привет! Очень часто при работе над дизайном залипаю в музыку и не замечаю времени, музыка помогает войти в состояние потока. В основном, слушаю музыку без слов 🤐, что-то типо 🥷 Japanese Trap или Japanese Bass Beat, редко регги старое. До этого не любил музыку при работе, пока не нашел эти стили.

Решил сделать пост где можно делиться музыкой, которую дизайнеры слушают 🎧 при работе. Я поспрашивал коллег и выяснил, что люди слушают совсем разную музыку, от рока до классики. Интересно послушать что-то новое!

Еще интересно, слушаете ли вы музыку когда работаете или это отвлекает вас? Какая музыка вдохновляет именно вас?

Музыка, которую слушаю я:

Кстати, можно использовать тег для встраивания музыки плейлистов:

{% embed https://soundcloud.com... %}
{% embed https://spotify.com... %}
{% embed https://youtube.com... %}
{% embed https://some-link.com... %}

Подборка новых, необычных и стильных мобильных iOS приложений

Varhal — Wed, 18 May 2022 08:45:58 +0000

Привет 🖖!

Давно занимаюсь дизайном мобильных приложений, много приходится ресерчить конкурентов и погружаться в глубь интернета. Постоянно нахожусь в поиске нестандартных iOS приложений, необычных паттернов и своеобразных стилей. Сегодня пришла мысль завести рубрику на пабе и раз в неделю публиковать подборку своих находок. Посмотрим как зайдет)

Tuned - a new app for couples

Tuned - это интимное пространство для процветания ваших отношений. В приложении можно делиться настроением, музыкой и вести общий дневник с особыми моментами, говорится в описании приложения на App Store. Приложение от команды Facebook.

App Store

Play—Mobile Design Tool

Play - это первый нативный инструмент дизайна под iOS, созданный для создания мобильных приложений.

В отличие от традиционных инструментов проектирования, которые требуют контекстного переключения и симуляции мобильного опыта в отдельном приложении, Play - это первый инструмент, который делает возможным контекстное проектирование для мобильных устройств. Больше никаких прокси, симуляций или синхронизации с mirror приложениями.

App Store | Сайт

Voices - Host Live Shows

Voices - это платформа живого общения, принадлежащая сообществу, где создатели устанавливают более близкие отношения со своими истинными поклонниками.

App Store | Сайт

TypeLoop Text on Photos Editor

TypeLoop - самый простой способ добавить текст к фотографиям и видеороликам.

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

App Store

Veil

Veil - это волшебное приложение для фильтрации видео с участием людей, созданное с учетом принципов дизайна iOS. Записывайте видео, цензурируя людей в режиме реального времени.

App Store

Если подборка наберет 50+ ❤️ - сделаю продолжение! Свои находки закидывайте в комментарии.

Новий розділ - подкасти 🎙. Як стежити за новими епізодами та додавати подкасти

Varhal — Tue, 19 Apr 2022 13:49:53 +0000

Друзі! Раді представити вам новий розділ на сайті - Подкасти.

Подкаст - це тематичний аудіоблог з одним або кількома ведучими. Його можна слухати онлайн або завантажувати собі на пристрій. Кожен випуск - окрема тема або історія.

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

Як стежити за новими епізодами?

Кожен подкаст складається з епізодів, які можна прослуховувати прямо на сайті. Щоб не пропустити нові випуск епізоду, вам необхідно підписатися на подкаст за допомогою кнопки "Читати". Тепер нові епізоди будуть приходити вам у сповіщення, все просто.

Чи можу я додати подкаст?

Будь-який користувач або автор подкасту може додати подкаст у каталог. Для цього необхідно перейти на сторінку додавання подкасту і заповнити всі поля.

Якщо ви не є автором подкасту, приберіть чекбокс проти напису "Я є власником цього подкасту". Заповніть заголовок, опис, slug, виберіть колір і завантажте обкладинку.

Важливо правильно заповнити поле "Посилання на фід", саме за цим посиланням система буде брати нові епізоди подкасту. Найпростіший спосіб, це використовувати сервіс getrssfeed.com.

Відкриваєте сайт і в поле сервісу вставляєте посилання на подкаст, сервіс підтримує Google podcast, Apple podcast, SoundCloud ітд.

Натискаєте кнопку пошуку і в результаті пошуку копіюєте посилання RSS feed і вставляєте в потрібне поле. Після додавання подкасту та модерації, подкаст стане доступний усім для прослуховування.

Якщо ви автор подкасту, у вас з'явиться аналітика за кількістю передплатників тощо.

Adobe XD, что пошло не так?

Varhal — Mon, 28 Mar 2022 08:39:50 +0000

Здравствуйте, меня зовут Грег, в прошлом я был фанатом XD. С первых дней бета-тестирования в 2016 году я был очарован этим инструментом прототипирования. До этого я создавал сайты в Photoshop. Я знал о Sketch, но у меня был плохой опыт работы с ним, когда мои файлы были повреждены и потеряны. Поэтому, когда я попробовал XD, это было похоже на путешествие в будущее. Простота программы, ее восхитительный интерфейс и реактивность софта были, как глоток свежего воздуха. Моя производительность, должно быть, удвоилась, если не утроилась.

Я был влюблен в этот продукт, я был им одержим, я стал его фанатом. Я мог обсуждать AdobeXD с любым дизайнером или разработчиком, который уделил бы мне время. Я просто не мог поверить, насколько быстро работала команда разработчиков XD выпуская новые функции. Каждый месяц выходила как минимум одна умопомрачительная функция, например, повторяющаяся сетка, режим прототипирования, поддержка SVG-файлов, стили, символы и режим обмена. Я с нетерпением ждал октября, когда проходило ежегодное мероприятие Adobe — AdobeMax.

Greg Lewis

@greg_gld

#AdobeXD October 2018 release notes are insane! It's as if Christmas has come early! Auto-animate 🔥, Drag gestures 🔥, LINKED SYMBOLS 🔥🔥 as well as the release of plugins!!! Thank you UX Santa 🎅 theblog.adobe.com/xd-october-201… #UX #UI #AdobeMAX #Adobe

15:40 PM - 15 Oct 2018

Я видел, что они слышат мои запросы. На форумах UserVoice пользователи могли создавать темы или голосовать за улучшения, которые они хотели бы видеть. Вы найдете комментарии от команды разработчиков XD с постоянными обновлениями бэклога. Было здорово видеть, как гибкая команда создает продукт, ориентированный на пользователя.

Но шли годы, релизы становились все реже, а улучшения становились все более постепенными. Теперь это следует ожидать от любого продукта. Но конкуренты XD по-прежнему выпускали отличные новые функции в нужном темпе. Особенно молодой выскочка Figma (на 7 месяцев моложе XD). Конкуренты добавляют очевидные улучшения функций, например, страницы, варианты компонентов и такие фундаментальные основы дизайна, как маркированные и нумерованные списки, которых нет в XD.

Я пытался обойтись без этих важных функций, убеждая себя, что очень скоро они появятся. Но с каждым медленным и разочаровывающим релизом я начал беспокоиться, что стратегия обновлений Adobe XD изменилась. Форумы, которые когда-то были местом, где можно было поговорить с командой разработчиков, замолчали. Вероятно, теперь пользователи кричат в пропасть.

adobexd.uservoice.com

Этот инструмент начинал мешать моему рабочему процессу, у меня начался беспорядок среди артбордов, потому что я был вынужден пытаться втиснуть все страницы в один документ, а компоненты были недостаточно функциональными.

Работая фрилансером на агентства, я использовал другие программы прототипирования, таких как Sketch и Figma. Вплоть до 2020 года я мог уверенно утверждать, что XD был с ними на одном уровне. Но к 2021 году он слишком сильно отстал. Создав дизайн-системы в Sketch, а затем в Figma, я сомневался, что XD сможет догнать их в ближайшее время. Последним гвоздем в крышку гроба XD стал релиз, состоявшийся в июне 2021 года.

Adobe XD

@adobexd

The latest release of Adobe XD is available now with more ways to shape, color, and shade your designs! New in this update:

🔲 Outline Stroke
⚫ Inner Shadow
📐 Angular Gradient

Get all the details here: adobe.ly/3zfbCoS

14:30 PM - 08 Jun 2021

Кому нужны угловые градиенты?! Я уверен, что это хорошее нововведение для нишевой группы, но сейчас, в вопросе составления списков, MicrosoftWord превосходит XD!

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

Меня зовут Грег, и я бывший фанат XD.

Перевод статьи bootcamp.uxdesign.cc

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

Varhal — Sat, 19 Mar 2022 17:51:57 +0000

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

Сьогодні мова піде про особисті блоги.

Що я можу публікувати на сайті?

До публікації допускаються матеріали дизайн тематики або побічно пов'язані з тематикою. Приблизний список допустимих варіантів контенту:

Статті на тему дизайну, креативу, фронтенд розробки, продукт менеджменту і тд.
Можна ставити запитання щодо дизайну, процесу, софту
Публікувати свої дизайн-проекти, щоб отримати зворотний зв'язок
Новини креативної індустрії
Робити добірки плагінів, сайтів, іконок і тд.
Розповідати про власний досвід і тд.

Усі статті проходять пост-модерацію. Модератор може поміняти заголовок, теги та інший контент з повідомленням вас про причини.

Як створити особистий блог?

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

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

Як закріпити запис у профілі?

Відкриваємо статтю, яку хочемо закріпити -> натискаємо на посилання "Manage" -> на сторінці, що відкрилася, натискаємо кнопку "Закріпити в профілі". Тепер стаття закріплена у вашому профілі. Щоб відкріпити - флоу такий самий.

Другий варіант - це перейти на сторінку дашборда і натиснути "Управляти", потім "Закріпити в профілі".

У мене вже є свій блог, чи можу я публікувати статті тут із посиланням на свій блог?

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

Тут вам потрібно ввести посилання на RSS стрічку вашого блогу і зберегти зміни. Якщо ви повністю переносите блог на нашу платформу, виберіть чекбокс "Замінювати ваші посилання новими UXPUB посиланнями".

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

Якщо ж ви просто хочете ділиться статтями свого блогу з читачами UXPUB, виберіть "Відзначити джерело RSS як канонічний URL за замовчуванням".

Відзначити джерело RSS як канонічний URL за замовчуванням
Якщо ви встановите цей прапорець, пост автоматично позначатиме джерело фіда як канонічний URL.

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

Якщо у мене кілька статей на одну тему, чи можу я їх пов'язати?

Для таких статей у нас передбачено налаштування - серії. Щоб її використовувати вам необхідно, під час публікації статті, задати одне ім'я серії для кількох статей.

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

UI и UX микро-советы: часть 1

Редакція ・ Квіт 22 '21

#ui #ux

Де я можу побачити аналітику за своїми статтями?

Для всіх авторів доступний розділ із загальною аналітикою за вашим профілем і окремо аналітика для кожної статті.

Загальну аналітику можна знайти тут

Щоб подивитися аналітику за певною статтею, можна додати наприкінці url статті /stats або в дашборді клікнути на три крапки в блоці зі статтею і вибрати "Статистика"

Якщо є питання - велкам у коментарі!

Обращение Белорусского айтишника, который оказался в Киеве под Российскими обстрелами

Varhal — Thu, 03 Mar 2022 14:53:02 +0000

Обращение к айтишникам от Лекс АйТиБорода.

Пока многие мои коллеги по цеху молчат, расскажу вам о том, что сейчас важно для меня. Речь пойдет о Войне, которая если не сегодня, то уже завтра коснется всех нас. Очень прошу посмотреть это видео до конца и сделать правильные выводы

Новий сайт - нові можливості 🚀. Реєстрація відкрита

Varhal — Tue, 22 Feb 2022 09:51:04 +0000

Усім привіт!

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

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

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

Сьогодні, ми раді представити оновлений UXPUB 🎉!

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

Для користувачів:

Можливість публікувати статті на велику цільову аудиторію;
Підписуватися на авторів і компанії, стежити за публікаціями;
Піднімати дискусії на теми, що вас цікавлять;
Бачити повну аналітику за своїми статтями;
Можливість повністю перенести свій блог на UXPUB c Medium; або іншого майданчика в напівавтоматичному режимі;
Транслювати статті зі свого блогу на UXPUB з посиланням на оригінальну публікацію;
Публікувати вакансії, події, портфоліо і тд (через тиждень)
Розділ із подкастами на тему дизайну та особистої продуктивності
Портфоліо рев'ю

Для компаній

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

Це мала частина того, що дозволяє нова версія сайту.

**Запрошуємо авторів, власників блогів та дизайнерів, які готові ділитися досвідом та разом розвиватися!

ЗИ. Про баги можна повідомляти сюди, на нашу пошту або за допомогою функціоналу "Пожаловаться" (кнопка під кожним постом)

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

15 примеров хорошей типографики в веб-дизайне

Varhal — Mon, 21 Feb 2022 08:47:14 +0000

Широко известно, что сейчас одним из самых популярных трендов веб-дизайна является крупная типографика. Если вы спроектировали эффектный, экстравагантный, привлекающий внимание крупный шрифт с большим весом, ваш сайт, несомненно, привлечет внимание и покорит большинство посетителей.

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

Что такое типографика в веб-дизайне?

Типографика — это структура, внешний вид и стиль шрифта. Это искусство расположения текста таким образом, чтобы он был разборчивым, четким и визуально привлекательным для читателя. Она играет важную роль в веб-дизайне, поскольку может вызывать определенные эмоции и передавать определенные сообщения.

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

15 лучших примеров типографики в веб-дизайне

Чтобы вдохновить вас, ниже представлено 15 лучших примеров крупной типографики в веб-дизайне.

1. Van Holtz Co

Van Holtz Co – это студия, специализирующаяся на усовершенствованных цифровых веб-приложениях с упором на анимированный, адаптивный и интерактивный контент. Домашняя страница сайта имеет прекрасный дизайн , выполненный в оттенках фиолетового, в то время, как массивная, интерактивная, анимированная типографика доминирует на странице. Крупные буквы в правой части экрана перечисляют все проекты, над которыми работала студия, и, если вы наведете курсор на название проекта, буквы потеряют заливку и станут обведенными, что служит отличным примером типографического дизайна.

2. Cambridge International School

Cambridge International School – пример образовательного веб-сайта. Его типографика включает в себя тексты разных размеров, но все они выполняют четкую и простую функцию. На этом сайте посетители могут найти идеальную навигацию. Это пример хорошо спроектированных меню, навигационных систем и кнопок.

3. Child’s own

Child’s own – это сайт, на котором детские рисунки используются для изготовления мягких игрушек. Что касается типографики, то дизайнер использовал два контрастных шрифта, но они хорошо сочетаются друг с другом. Шрифт заголовков контрастирует со шрифтом инструкций. Шрифт заголовка делает дизайн игривым, что соответствует «детской» тематике сайта.

4. The Next Rembrandt

The Next Rembrandt — это напечатанная на 3D-принтере картина, созданная на основе данных о произведениях Рембрандта. Дизайн этого сайта выделяется значительным негативным пространством и набором текста. Общий минималистичный характер этой страницы выделяет центральный текст и фокусируется на теме сайта. Панель навигации также проста и понятна.

5. 1MD

1MD — еще один пример хорошо спроектированного сайта. Дизайнер использовал уникальный шрифт для заголовков, навигации и основного текста. Его уникальные шаблоны и дизайн не будут отвлекать посетителей и заставят их задержаться на странице.

6. Kashoo

Kashoo — это опытная команда разработчиков-новаторов, креативных дизайнеров и опытных консультантов по маркетингу. Этот сайт создан с эффектом анимированной зернистой текстуры, что делает его похожим на фильм. Интересная типографика вдохновляет нас оставаться на сайте и хотеть узнать больше о нем.

7. Innovator. Boris Ignatovich

Boris Ignatovich — мастер русской авангардной фотографии. Хотя, не рекомендуется использовать слишком мелкий шрифт, в данном случае сочетание цветов и вес выбранных шрифтов создают должный контраст. У посетителей может возникнуть ощущение, что им нравится сайт, но они не знают почему.

8. Evolve Wealth

Evolvewealth – это компания, которая предлагает своим клиентам индивидуальные независимые финансовые консультации, начиная от налогового планирования и заканчивая накоплением капитала, его сохранением и планированием дальнейшей жизни. Дизайн страницы использует в заголовке огромный белый шрифт, чтобы выразить девиз компании, и горизонтальные полосы фрагментов информации.

9. RSQ

Red Square — это агентство, которое занимается идеями, медиа и дизайном. Дизайн домашней страницы их сайта — еще один пример чистого дизайна, в котором используется правильная типографика и цветовая палитра. Текст на странице — главная достопримечательность этого дизайна, поэтому шрифты подобраны очень удачно.

10. Luke Stephenson

Luke Stephenson – это фотопутешествие, посвященное бренду мороженого. Эта страница имеет чистый и элегантный дизайн и является хорошим примером выбора правильной типографики.

11. Pest Stop Boys

Pest Stop Boys — компания по борьбе с вредителями. На этой странице используется много отличных цветов как для фона, так и для текста. Активное использование типографики, большой фоновой графики и анимированных тараканов выделяет предоставляемые услуги и контактную информацию компании.

12. By the Books

By The Books – это виртуальный литературный фестиваль, на котором представлены книги, рекомендованные Аминату Соу и Энн Фридман. Это отличный пример того, как типографика может влиять на дизайн сайта. Заголовки и основной текст используют одинаковую типографику на всей странице, но в разных книгах используются дополнительные шрифты, что делает дизайн слегка контрастным, но согласованным.

13. Marianne Brandt

Люди могут ожидать много разных вещей, когда слышат имя Марианны Брандт, но как его можно отразить в виде сайта? Этот сайт отражает влияние школы дизайна Баухауз с его плоскими цветами и шрифтами Futura. Общая эстетика дизайна минималистична и аккуратна, но при этом не заставит посетителей скучать.

14. Rijksmuseum

Rijksmuseum – это сайт, посвященный последним новостям, эксклюзивному закулисью мира искусства и произведениям искусства мирового уровня. Что касается дизайна страницы, то большие буквы нестандартного шрифта охватывают весь экран и продолжаются за пределами страницы, из-за чего Rijksmuseum кажется больше, чем он есть в реальной жизни. Дизайн основной навигации также может привлечь внимание посетителя; при нажатии он скользит вниз, чтобы пользователи могли выбрать подкатегорию.

15. KOTI Sleepover

Дизайн домашней страницы KOTI очень прост, и это одна из самых аккуратных, но эффективных реализаций тяжелой типографики, которую я когда-либо видел. Минималистичный иллюстративный стиль прекрасно контрастирует с крупным черным фирменным шрифтом.

Лучшие практики типографики в веб-дизайне

Из приведенных выше примеров мы можем понять, что хороший выбор типографики не будет отвлекать людей от чтения и заставит их продолжать скроллить ваш сайт. Хорошая типографика никогда не увеличит когнитивную нагрузку на пользователя. Так как же создать хорошую типографику для своего веб-сайта?

Ограничьте количество шрифтов

Чтобы четко и точно передать ценность вашего бренда, вы должны ограничить количество шрифтов, используемых в дизайне, потому что более трех разных шрифтов сделает сайт неструктурированным и выглядящим непрофессионально. Если вы используете более одного шрифта, убедитесь, что они визуально совместимы, но отличимы друг от друга. Более того, вам необходимо учитывать устройство, с которого пользователи в основном будут заходить на ваш сайт, будь то ноутбуки, планшеты или смартфоны. Это поможет вам выбрать разборчивые шрифты, которые хорошо отображаются на целевых устройствах.

Сопоставьте шрифты и подберите правильные сочетания

Вам доступно множество инструментов дизайна, а системные шрифты в вашем инструменте дизайна — беспроигрышный вариант, поскольку они просты в использовании и не создают сложного макета. Чтобы получить хорошо организованный дизайн, вам нужно умело выбирать шрифты и правильно их смешивать, а такой инструмент дизайна, как Mockplus, сможет вам в этом помочь.

Ограничьте длину строки

Длина вашей строки будет определять легкость, с которой пользователь сможет прочитать и понять сообщение. Пользователям будет трудно читать длинные строки, поэтому вам нужно ограничить строку примерно до 50–60 символов.

Установите межстрочный интервал

Если вы правильно используете пробелы между строками текста, улучшится не только визуальная привлекательность, но и удобочитаемость. Чтобы текст было легче читать, можно установить междустрочный интервал 120–145 % от кегля. Если вы используете такой инструмент дизайна, как Mockplus, вы можете легко установить межстрочный интервал на левой панели.

Используйте цветовой контраст

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

Старайтесь не писать текст только заглавными буквами

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

Не забудьте проверить текст

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

Вывод

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

Перевод статьи uxplanet.org

Ласкаво просимо на UXPUB! Частина 1

Varhal — Sun, 20 Feb 2022 20:49:22 +0000

Вітаємо у ком'юніті!

Залишіть коментар, розкажіть про себе та свій досвід у дизайні! Давайте знайомитись 🖖 👋