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

Eine Sammlung kostenloser ukrainischer Schriftarten von ukrainischen Designern

Victor Demushkin — Wed, 04 Jun 2025 11:27:55 +0000

Die Kultur der ukrainischen Schriftarten

Die Kultur der ukrainischen Typografie blickt auf eine tiefe und geschichtsträchtige Historie zurück. Seit Jahrhunderten drücken Künstler ihre nationale Identität durch Schriftarten aus, und diese Tradition setzt sich bis heute fort. Die Nachfrage nach ukrainischen Kulturelementen wächst sowohl im Inland als auch international rasant.

Entdecken Sie eine kuratierte Sammlung kostenloser ukrainischer Schriftarten, die von talentierten Designern erstellt wurden. Von kräftigen geometrischen Stilen bis hin zu eleganten Serifenschriften – diese Fonts zelebrieren das reiche kulturelle Erbe und die moderne Kunstfertigkeit der Ukraine. Perfekt für Branding, Webdesign und kreative Projekte, unterstützt jede Schriftart die ukrainische Sprache und bietet einen einzigartigen Charakter, um Ihre Designs aufzuwerten. Laden Sie sie jetzt herunter und verleihen Sie Ihrer Arbeit einen Hauch ukrainischer Identität!

Nyght Serif: Eine kostenlose ukrainische Schriftart mit Open Font License

Nyght Serif ist eine vollständig kostenlose Schriftart für den persönlichen und kommerziellen Gebrauch, die unter der Open Font License (OFL) veröffentlicht wird. Sie wird schrittweise weiterentwickelt, wobei regelmäßige Updates geplant sind, um ihre Funktionen zu erweitern.

Die Schriftart unterstützt erweiterte lateinische sowie kyrillische Zeichen und konzentriert sich ausschließlich auf das ukrainische Alphabet, was sie zu einer ausgezeichneten Wahl für Designs macht, die die ukrainische Identität betonen.

Autor: Maksym Kobuzan
Schriftseite: Behance
Kostenloser Download der Schriftart: Instagram

Zvin Serif: Eine anspruchsvolle Schrift, inspiriert von historischer Typografie

Zvin Serif ist eine einzigartige Schriftart mit variablen Serifen, die ihre Inspiration aus der Typografie der Jahre 1850 bis 1960 schöpft. Ihre Stimmung und Dynamik basieren auf griechischen Buchstabenformen, die mit modernen dekorativen Stilen verschmolzen sind. Mit scharfen Winkeln und markanten Serifen ist Zvin Serif elegant und auffällig – perfekt, um jedem Design einen authentischen Charakter zu verleihen.

Alphabet-Unterstützung: Lateinisch und Kyrillisch
Schriftschnitte: Regular, Medium, Semi-Bold, Bold
Autor: Ivan Tsanko-Khlibovych
Schriftseite: TsankoType
Kostenloser Download der Schriftart: TsankoType

Work Sans + Work Grotesk: Vielseitige serifenlose Schriftarten für das Web

Work Sans ist eine äußerst vielseitige serifenlose Schriftart, die speziell für die Verwendung im Web entwickelt wurde. Sie verfügt über einen Kernsatz lateinischer und kyrillischer Zeichen und ist somit ideal für moderne digitale Projekte, bei denen Klarheit und Lesbarkeit unerlässlich sind.

Zusammen mit Work Grotesk bietet diese Schriftfamilie eine umfassende Lösung für saubere und funktionale Web-Typografie.

Autor: Ivan Tsanko-Khlibovych
Schriftseite: TsankoType
Kostenloser Download der Schriftart: TsankoType

Nastup Basic: Eine kostenlose modulare Schablonenschrift mit technischem Touch

Nastup Basic ist eine kostenlose, modulare serifenlose Schablonenschrift, die von technischen Schablonenbeschriftungen an Wänden und Konstruktionsdetails inspiriert ist. Der Name „Nastup“ bedeutet auf Ukrainisch „Vormarsch“ und spiegelt ihre kühne und industrielle Ästhetik wider.

Mit minimalem Zeichenabstand eignet sie sich außergewöhnlich gut für schmale Layouts, insbesondere bei engem Zeilenabstand. Designer können auch durch die Verwendung alternativer breiter oder offener Zeichen für Abwechslung sorgen. Nastup Basic unterstützt erweitertes Latein, grundlegendes Kyrillisch, griechische Alphabete und verfügt über einen alternativen Zeichensatz, der speziell auf das ukrainische Alphabet zugeschnitten ist.

Autor: Maksym Kobuzan
Schriftseite: Behance
Kostenloser Download der Schriftart: ZakZnak

Kyiv Region Typeface: Eine kostenlose Schrift, die Geschichte und Moderne vereint

Die Kyiv Region Typeface ist eine originelle, kostenlose Schriftart, die speziell für das territoriale Branding der Oblast Kiew entwickelt wurde. Erstellt von White Studio Design, verbindet sie meisterhaft historische Tiefe mit avantgardistischem Experimentieren.

Die Schriftart greift auf Halbunzial- und Kursivformen zurück, die typisch für die Kiewer Rus und die Epoche des ukrainischen Barocks sind, und vermischt sie mit dem geometrischen Konstruktivismus des 20. Jahrhunderts – einem Stil, der eine moderne Wiederbelebung erfährt.

Das Ergebnis ist eine zeitgenössische geometrische serifenlose Schriftart mit Strichen, Alternativzeichen, Ligaturen und historischen Formen. Sie eignet sich perfekt für thematische Beschilderungen, Werbung, Verpackungen, Souvenirs und sogar für kirchenslawische historische Texte.

Autor: Dmytro Rastvortsev
Schriftseite: Behance
Kostenloser Download der Schriftart: Google Drive

Irpin Type: Eine kühne Hommage an die Stadt Irpin

Irpin Type ist eine einzigartige Schriftart, die vom Geist der Stadt Irpin inspiriert ist. Sie ist für den vielseitigen Alltagsgebrauch konzipiert und eignet sich für Bücher, Logos, Corporate Branding, Poster und Präsentationen, bei denen ein mutiger und selbstbewusster Eindruck erforderlich ist.

Diese Schriftart ist perfekt für großformatige Designs, behält aber auch in kleineren Größen eine hervorragende Lesbarkeit. Als moderne Slab-Serif mit geometrischen Formen ist Irpin Type von der ukrainischen Avantgarde-Bewegung des 20. Jahrhunderts beeinflusst, was ihr einen unverwechselbaren und künstlerischen Charakter verleiht.

Autor: Aleksey Popovtsev
Schriftseite: Fonts.com
Kostenloser Download der Schriftart: Fonts.com

Fixel: Eine Schrift, die Technologie und menschliche Note verbindet

Bei MacPaw glaubt man daran, dass Technologie das Leben vereinfacht und Freude bereitet. Sie entwarfen die Schriftarten Fixel und Hoover, um die Synergie zwischen Mensch und Technologie widerzuspiegeln. Die Namen wurden von zwei geliebten Katzen inspiriert, Fixel und Hoover, die über ein Jahrzehnt bei der MacPaw-Familie verbrachten und deren Persönlichkeiten das Design dieser Schriften beeinflussten.

Fixel ist eine vielseitige Schriftart mit zwei Stilen – Text und Display – und neun Schriftschnitten von Thin bis Black. Ihr Design kombiniert auf einzigartige Weise geometrische und humanistische Grotesk-Elemente und zeichnet sich durch offene Buchstabenformen, Klarheit, weite Proportionen und geringen Kontrast aus. Die Persönlichkeit der Schriftart vereint Präzision, Zurückhaltung und Funktionalität mit einer freundlichen, dynamischen und verspielten Essenz, was sie perfekt für verschiedenste Anwendungen macht.

Autor: MacPaw
Schriftseite: Fixel by MacPaw
Kostenloser Download der Schriftart: MacPaw

Lutsk Typeface: Eine charakteristische Schrift für die Stadt Luzk

Die Lutsk Typeface ist die offizielle Schriftart von Luzk, entworfen von Kyrylo Tkachev. Sie ergänzt die wiedererkennbaren Identitätselemente der Stadt mit dem Ziel, ihre Attraktivität für Touristen zu steigern und sie über die Region hinaus zu bewerben.

Diese dekorative Schriftart umfasst zwei Sätze von Großbuchstaben in kyrillischen und lateinischen Alphabeten. Sie eignet sich am besten für kurze Texte (bis zu einem Satz). Ihr Design ist von ukrainischen Buch- und Zeitschriftengrafiken aus der ersten Hälfte des 20. Jahrhunderts inspiriert und spiegelt eine Mischung aus kulturellem Erbe und modernem Design wider.

Autor: Kyrylo Tkachev
Schriftseite: Rentafont
Kostenloser Download der Schriftart: Rentafont

Ermilov Typeface: Eine kühne geometrische Schrift für Ukraine Now

Um über die heutige Ukraine zu sprechen, brauchen wir eine unverkennbar ukrainische Schrift. Ermilov wurde speziell für die Marke Ukraine Now geschaffen.

Diese moderne, kühne geometrische Groteskschrift zeichnet sich durch einzigartige schräge Einschnitte an ihren Buchstabenformen aus. Das Design ist von den Werken von Vasyl Yermilov inspiriert, einem renommierten ukrainischen konstruktivistischen Künstler, und verbindet nahtlos zeitgenössische Ästhetik mit historischer Bedeutung.

Autor: Kyrylo Tkachov
Schriftseite: Banda Agency
Kostenloser Download der Schriftart: Dropbox

Namu Typeface: Eine Schrift, die im ukrainischen Erbe verwurzelt ist

Namu wurde 2018 von Dmytro Rastvortsev für das Nationale Kunstmuseum der Ukraine geschaffen. Ihr Design ist das Ergebnis umfangreicher Recherchen zur Sammlung des Museums und den Formen alter Schriftzüge. Die Schriftart verfügt über mehrere Stile, die jeweils unterschiedliche historische Epochen widerspiegeln, was sie zu einer einzigartigen Darstellung des kulturellen und typografischen Erbes der Ukraine macht.

Autor: Dmytro Rastvortsev
Schriftseite: Behance
Kostenloser Download der Schriftart: Google Drive

Kharkiv Tone: Eine Schrift, inspiriert vom Geist Charkiws

Kharkiv Tone, entworfen von Kateryna Drozd, schöpft Inspiration aus Graffiti, technischen Inschriften und handschriftlichen Notizen, die an den Wänden von Charkiw zu finden sind. Diese Schriftart fängt die Essenz der Stadt ein und verbindet scheinbar unvereinbare Elemente zu einer einheitlichen und ausdrucksstarken „Stimme Charkiws“.

Autor: Kateryna Drozd
Schriftseite: Behance
Kostenloser Download der Schriftart: Google Drive

Arsenal Font: Eine moderne kostenlose ukrainische Schriftart von Andriy Shevchenko

Arsenal ist eine moderne, kostenlose ukrainische Geschäftsschrift, die 2012 von Andriy Shevchenko entworfen wurde. Diese Schriftart bietet eine saubere und professionelle Ästhetik und ist somit ideal für verschiedene Geschäfts- und Designprojekte. Seit ihrer Veröffentlichung wurde Arsenal zur Google Fonts-Bibliothek hinzugefügt, was Designern weltweit einen einfachen Zugang ermöglicht.

Autor: Andriy Shevchenko
Schriftseite: Behance
Kostenloser Download der Schriftart: Google Fonts

Mariupol Typeface: Eine geometrische Groteskschrift für das Stadt-Branding

Die Mariupol Typeface wurde von Andriy Shevchenko speziell für das Branding von Mariupol entworfen. Diese geometrische Groteskschrift ist von Plakatgrafiken und modernen universellen Schriftarten inspiriert und kombiniert eine kühne Ästhetik mit funktionaler Vielseitigkeit. Sie spiegelt den zeitgenössischen und dynamischen Geist der Stadt wider und ehrt gleichzeitig ihre einzigartige Identität.

Autor: Andriy Shevchenko
Schriftseite: Tyktor Media
Kostenloser Download der Schriftart: Dropbox

Kolekcja darmowych ukraińskich fontów od ukraińskich projektantów

Victor Demushkin — Wed, 04 Jun 2025 11:22:27 +0000

Kultura ukraińskich krojów pisma

Kultura ukraińskiej typografii ma głęboką i bogatą historię. Przez wieki artyści wyrażali tożsamość narodową za pomocą krojów pisma, a ta tradycja jest kontynuowana do dziś. Zapotrzebowanie na ukraińskie elementy kulturowe, zarówno w kraju, jak i za granicą, gwałtownie rośnie.

Odkryj starannie wyselekcjonowaną kolekcję darmowych ukraińskich fontów stworzonych przez utalentowanych projektantów. Od odważnych, geometrycznych stylów po eleganckie kroje szeryfowe – te fonty celebrują bogate dziedzictwo kulturowe Ukrainy i jej nowoczesną sztukę. Idealne do brandingu, projektowania stron internetowych i kreatywnych projektów, każdy font wspiera język ukraiński i oferuje unikalny charakter, który wzbogaci Twoje projekty. Pobierz teraz i dodaj odrobinę ukraińskiej tożsamości do swojej pracy!

Nyght Serif: Darmowy ukraiński font na licencji Open Font License

Nyght Serif to całkowicie darmowy font do użytku osobistego i komercyjnego, wydany na licencji Open Font License (OFL). Jest rozwijany progresywnie, a regularne aktualizacje mają na celu ulepszanie jego funkcji.

Font obsługuje rozszerzone znaki łacińskie oraz cyrylicę, skupiając się wyłącznie na alfabecie ukraińskim, co czyni go doskonałym wyborem do projektów podkreślających ukraińską tożsamość.

Autor: Maksym Kobuzan
Strona fontu: Behance
Pobierz darmowy font: Instagram

Zvin Serif: Wyrafinowany font inspirowany historyczną typografią

Zvin Serif to unikalny font ze zmiennymi szeryfami, czerpiący inspirację z typografii z lat 1850-1960. Jego nastrój i dynamika opierają się na greckich formach literowych połączonych z nowoczesnymi stylami dekoracyjnymi. Dzięki ostrym kątom i charakterystycznym szeryfom, Zvin Serif jest elegancki i wyrazisty, idealny do nadawania autentycznego charakteru każdemu projektowi.

Obsługiwane alfabety: łaciński i cyrylica
Wagi: Regular, Medium, Semi-Bold, Bold
Autor: Ivan Tsanko-Khlibovych
Strona fontu: TsankoType
Pobierz darmowy font: TsankoType

Work Sans + Work Grotesk: Wszechstronne fonty bezszeryfowe do internetu

Work Sans to niezwykle wszechstronny font bezszeryfowy zaprojektowany specjalnie do użytku w internecie. Posiada podstawowy zestaw znaków łacińskich i cyrylicy, co czyni go idealnym do nowoczesnych projektów cyfrowych, gdzie kluczowe są klarowność i czytelność.

W połączeniu z Work Grotesk, ta rodzina fontów stanowi kompleksowe rozwiązanie dla czystej i funkcjonalnej typografii internetowej.

Autor: Ivan Tsanko-Khlibovych
Strona fontu: TsankoType
Pobierz darmowy font: TsankoType

Nastup Basic: Darmowy modułowy font szablonowy o technicznym charakterze

Nastup Basic to darmowy, modułowy, bezszeryfowy font szablonowy inspirowany technicznymi oznaczeniami szablonowymi na ścianach i detalach konstrukcyjnych. Nazwa „Nastup” oznacza po ukraińsku „nacieraj”, co odzwierciedla jego odważną i industrialną estetykę.

Dzięki minimalnym odstępom doskonale sprawdza się w wąskich układach, zwłaszcza przy ciasnej interlinii. Projektanci mogą również urozmaicić kompozycję, używając alternatywnych szerokich lub otwartych znaków. Nastup Basic obsługuje rozszerzoną łacinkę, podstawową cyrylicę, alfabety greckie oraz posiada alternatywny zestaw znaków specjalnie dostosowany do alfabetu ukraińskiego.

Autor: Maksym Kobuzan
Strona fontu: Behance
Pobierz darmowy font: ZakZnak

Kyiv Region Typeface: Darmowy font łączący historię z nowoczesnością

Kyiv Region Typeface to oryginalny, darmowy font opracowany specjalnie na potrzeby brandingu terytorialnego obwodu kijowskiego. Stworzony przez White Studio Design, mistrzowsko łączy historyczną głębię z awangardowym eksperymentem.

Krój pisma czerpie z form półuncjały i kursywy typowych dla okresu Rusi Kijowskiej i ukraińskiego baroku, łącząc je z geometrycznym konstruktywizmem XX wieku – stylem, który przeżywa dziś swoje odrodzenie.

Rezultatem jest nowoczesny, geometryczny font bezszeryfowy z ozdobnikami, alternatywnymi znakami, ligaturami i formami historycznymi. Jest idealny do tematycznych oznakowań, reklam, opakowań, pamiątek, a nawet tekstów historycznych w języku cerkiewnosłowiańskim.

Autor: Dmytro Rastvortsev
Strona fontu: Behance
Pobierz darmowy font: Google Drive

Irpin Type: Odważny hołd dla miasta Irpień

Irpin Type to unikalny font inspirowany duchem miasta Irpień. Został zaprojektowany do wszechstronnego, codziennego użytku, dzięki czemu nadaje się do książek, logo, identyfikacji wizualnej firm, plakatów i prezentacji, gdzie potrzebne jest odważne i pewne siebie wrażenie.

Ten font jest idealny do projektów na dużą skalę, ale zachowuje również doskonałą czytelność w mniejszych rozmiarach. Nowoczesny szeryf blokowy (slab serif) o geometrycznych kształtach, Irpin Type jest inspirowany ukraińskim ruchem awangardowym XX wieku, co nadaje mu wyrazisty i artystyczny charakter.

Autor: Aleksey Popovtsev
Strona fontu: Fonts.com
Pobierz darmowy font: Fonts.com

Fixel: Font, który łączy technologię i ludzki dotyk

W MacPaw wierzą, że technologia upraszcza życie i przynosi radość. Zaprojektowali fonty Fixel i Hoover, aby odzwierciedlić synergię między ludźmi a technologią. Nazwy zostały zainspirowane dwoma ukochanymi kotami, Fixelem i Hooverem, które spędziły ponad dekadę z rodziną MacPaw, a ich osobowości wpłynęły na projekt tych fontów.

Fixel to wszechstronny krój pisma z dwoma stylami – Tekstowym (Text) i Nagłówkowym (Display) – oraz dziewięcioma wagami, od Thin do Black. Jego projekt w unikalny sposób łączy geometryczne i humanistyczne elementy groteskowe, charakteryzując się otwartymi formami liter, klarownością, szerokimi proporcjami i niskim kontrastem. Osobowość fontu łączy precyzję, powściągliwość i funkcjonalność z przyjazną, dynamiczną i zabawną esencją, co czyni go idealnym do różnorodnych zastosowań.

Autor: MacPaw
Strona fontu: Fixel by MacPaw
Pobierz darmowy font: MacPaw

Lutsk Typeface: Charakterystyczny font dla miasta Łuck

Lutsk Typeface to oficjalny font miasta Łuck, zaprojektowany przez Kyryło Tkaczowa. Uzupełnia on rozpoznawalne elementy tożsamości miasta, mając na celu zwiększenie jego atrakcyjności turystycznej i promocję poza regionem.

Ten dekoracyjny krój pisma zawiera dwa zestawy wielkich liter w alfabecie cyrylicy i łacińskim. Najlepiej nadaje się do krótkich tekstów (do jednego zdania). Jego projekt czerpie inspirację z ukraińskiej grafiki książkowej i czasopism z pierwszej połowy XX wieku, odzwierciedlając połączenie dziedzictwa kulturowego z nowoczesnym designem.

Autor: Kyrylo Tkachev
Strona fontu: Rentafont
Pobierz darmowy font: Rentafont

Ermilov Typeface: Odważny geometryczny font dla Ukraine Now

Aby mówić o dzisiejszej Ukrainie, potrzebujemy wyraźnie ukraińskiego fontu. Ermilov został stworzony specjalnie dla marki Ukraine Now.

To nowoczesny, odważny geometryczny grotesk z unikalnymi skośnymi cięciami w formach liter. Projekt inspirowany jest pracami Wasyla Jermiłowa, znanego ukraińskiego artysty konstruktywisty, płynnie łącząc współczesną estetykę z historycznym znaczeniem.

Autor: Kyrylo Tkachov
Strona fontu: Banda Agency
Pobierz darmowy font: Dropbox

Namu Typeface: Font zakorzeniony w ukraińskim dziedzictwie

Namu został stworzony przez Dmytro Rastvortseva w 2018 roku dla Narodowego Muzeum Sztuki Ukrainy. Jego projekt jest wynikiem szeroko zakrojonych badań nad kolekcją muzeum i formami dawnego liternictwa. Krój pisma zawiera wiele stylów, z których każdy odzwierciedla różne epoki historyczne, co czyni go unikalną reprezentacją kulturowego i typograficznego dziedzictwa Ukrainy.

Autor: Dmytro Rastvortsev
Strona fontu: Behance
Pobierz darmowy font: Google Drive

Kharkiv Tone: Font inspirowany duchem Charkowa

Kharkiv Tone, zaprojektowany przez Katerynę Drozd, czerpie inspirację z graffiti, napisów technicznych i odręcznych notatek znalezionych na murach Charkowa. Ten krój pisma oddaje esencję miasta, łącząc pozornie niepasujące do siebie elementy w zunifikowany i wyrazisty „głos Charkowa”.

Autor: Kateryna Drozd
Strona fontu: Behance
Pobierz darmowy font: Google Drive

Arsenal Font: Nowoczesny darmowy ukraiński krój pisma autorstwa Andrija Szewczenki

Arsenal to nowoczesny, darmowy ukraiński font biznesowy zaprojektowany przez Andrija Szewczenkę w 2012 roku. Krój ten oferuje czystą i profesjonalną estetykę, co czyni go idealnym do różnych projektów biznesowych i graficznych. Od momentu wydania, Arsenal został dodany do biblioteki Google Fonts, zapewniając łatwy dostęp dla projektantów na całym świecie.

Autor: Andriy Shevchenko
Strona fontu: Behance
Pobierz darmowy font: Google Fonts

Mariupol Typeface: Geometryczny grotesk dla brandingu miasta

Mariupol Typeface został zaprojektowany przez Andrija Szewczenkę specjalnie na potrzeby brandingu Mariupola. Ten geometryczny grotesk inspirowany jest grafiką plakatową i nowoczesnymi, uniwersalnymi krojami pisma, łącząc odważną estetykę z funkcjonalną wszechstronnością. Odzwierciedla on współczesnego i dynamicznego ducha miasta, jednocześnie oddając hołd jego unikalnej tożsamości.

Autor: Andriy Shevchenko
Strona fontu: Tyktor Media
Pobierz darmowy font: Dropbox

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

Victor Demushkin — Fri, 27 Dec 2024 14:58:36 +0000

У 2024 році українське дизайн-ком’юніті вчергове довело свою здатність до адаптації, професійного зростання та об’єднання, попри будь-які виклики. Ми зібрали найцікавіші публікації року, за різними напрямками дизайну: UX/UI, аналітика й гіпотези, доступність та інклюзивність, розвиток кар’єри, тренди та інструменти. Кожен із матеріалів відкриває нові підходи, демонструє свіжі кейси й допомагає краще зрозуміти сучасний дизайн-процес.

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

Anna Velcheva, Yaryna Mezhetska, Olya Didyk, Ольга Тушич, Анастасія Мусієнко, aldr_cwa, Роман Барановський, Hanna Rubashenko, Oksana Nosenko, Нестор, Anna, Dinozavrix, Xperience (uxp), Nikita Chumak, Дмитро Свєнтуховський, Vadym Kalinin, Yan Hladchenko, Марійка Кацан, Stanislav Stefaniuk

Огляд найпопулярніших статей року про дизайн

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

UI та візуал. Про суперечності в стилях розповідає стаття про мінімалізм і ар-нуво, для візуалізації даних стане у пригоді короткий гайд.

Figma, інструменти та кейси. Цікаві добірки пропонують 9 корисних плагінів для Figma, поради про створення компонентів і дизайн-токени, а також variables у Figma для ефективної адаптації макетів; додатково можна дізнатися, як оформити кейси на Behance.

Інклюзивність та доступність. Дізнайтеся про інклюзивні принципи і кольорові гами з урахуванням доступності, а також про мобільні додатки з погляду UX/UI.

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

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

Велика добірка найкращих статей року про дизайн

Експерименти та валідація гіпотез у створенні продуктів (на прикладі цифрового банку)

Anna Velcheva ・ Січ 19

#productdesign #ux #process #cases

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

Як обрати метод для тестування продуктових гіпотез: Практичний гайд

Anna Velcheva ・ Берез 12

#ux #productdesign #hypotheses #testingmethods

Тестування гіпотез допомагає уникати помилок, робити вибір з розумом та генерувати кращі ідеї для продуктів.

Тепер я хочу розглянути наступне важливе питання: як обрати найефективніший метод тестування для конкретної гіпотези продукту?

Як нечіткі вимоги до проєкту впливають на роботу дизайн команди

Yaryna Mezhetska для Quality Geek LLC ・ Черв 4

#lifehacks #design

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

Що ми як дизайн команда робимо аби цього уникнути можна дізнатися у статті

Назва, теги та інші фішки Behance кейсу: як збільшити в три рази лайки та перегляди за два місяці

Olya Didyk для Quality Geek LLC ・ Квіт 10

#behance #ui #cases #lifehacks

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

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

Модель Кано. Практичний посібник з пріоритезації фіч продукту

Ольга Тушич ・ Черв 17

#ux #ua #tutorial

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

Амбівалентність UI-стилів: від мінімалізму до ар-нуво

Ольга Тушич ・ Жовт 10

#ua #ui #trends

Чи траплялись вам ситуації, коли замовник просить запхати на перший екран форму заявки, кнопку зворотнього зв’язку, картинку (бажано дві), соціальні мережі, цитату-відгук та перелік послуг - і водночас наполягає, щоб це був "чистий мінімалізм"?

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

Мобільні додатки очіма UX/UI дизайнера

Анастасія Мусієнко ・ Лип 29

#figma #mobile #app #ios

Цікава стаття про мобільні додатки для UX/UI дизайнера

Технології АІ для UX/UI дизайнера

Анастасія Мусієнко ・ Черв 12

#ux #ui #figma

Корисна інформація про те як технології АІ покращують роботу UX/UI дизайнера

Методи та сервіси тестування дизайн гіпотез

Анастасія Мусієнко ・ Трав 15

#ux #analytics #prototype #ui

Дослідження того, наскільки легко зручно, та інтуїтивно цільова аудиторія може використовувати продукт, систему чи сервіс

Дизайн-токени в роботі UX/UI дизайнера

Анастасія Мусієнко ・ Квіт 18

#ux #ui #figma

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

Як поєднювати мистецтво кольору та принципи доступності?

Olya Didyk для Quality Geek LLC ・ Берез 19

#cases #ux #mobile #accessibility

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

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

Як дизайнеру зробити сайт інклюзивним

Yaryna Mezhetska для Quality Geek LLC ・ Квіт 2

#accessibility #ux

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

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

Створюй компоненти в Figma з розумом

aldr_cwa ・ Лют 7

#productivity #figma

Система дизайну Oxygen doctolibs існує вже понад три роки і стає все більш і більш надійною. Три роки додавання нових компонентів, нових процесів, змін, через нові можливості Figma (як авторозмітка), оновлення або перероблення компонентів, дрейфів (розбіжностей між компонентом дизайну і компонентом розробки)...

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

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

Короткий гайд по різним графікам та рекомендації по їх вибору

Роман Барановський ・ Квіт 18

#ux #ui

Численні дослідження в галузі когнітивної нейронауки показують, що мозок любить візуальний контент більше, ніж простий текст.
Науковці в сфері медицини встановили: якщо в інструкції до ліків знаходиться тільки текст, людина засвоює з неї лише 70% інформації. А якщо в ту ж інструкцію додати малюнки, то цей відсоток (або показник) зросте до 95%.

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

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

Variables в figma - як приміняти?

Hanna Rubashenko ・ Січ 31

#figma #lifehacks #productivity

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

При відкритті панелі local variables ми бачимо можливість створювати окремі колекції = variables. Функціонально вони поділяються на кольоро-значення/ числові-значення/ текстові-значення/ булеан (true/false)значення. Які можливості це дає= ми можемо створювати варіабли кольорів і використовувати їх по всьому проекту. Можемо створювати відступи, розміри, скруглення для елементів та відстані між ними завдяки числовим значенням. Можемо створювати текстові варіабли, якщо нам треба різна локалізація продукту та булеан для значень які актуальні при певних умовах - це якщо розглянути варіабли швиденько та поверхнево.

Мінуси особистого бренду. Негативна сторона медійності

Oksana Nosenko ・ Верес 10

Привіт. Мене звати Оксана, я є керівницею команди аналітики в українській продуктовій компанії Jooble та лекторкою й авторкою освітніх програм.

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

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

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

Чому продуктовому дизайнеру важливо розуміти, звідки прийшов користувач?

Oksana Nosenko ・ Лип 23

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

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

Як залишатися конкурентоспроможним дизайнером в епоху штучного інтелекту

Нестор ・ Трав 13

#ai #career

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

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

Нестор ・ Лип 4

#productivity

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

Безкоштовні та корисні сайти для дизайнерів #1 (копірайтинг)

Anna ・ Лют 12

#collections #copywriting

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

Топ 9 плагінів Figma, які ви не можете пропустити у 2024

Dinozavrix ・ Листоп 1

#figma #plugins

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

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

Кожен із них пропонує щось корисне, від спрощення роботи до обробки рутинних завдань.

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

Xperience ・ Жовт 25

#handbook #illustration

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

UX Speed Dating у Zoom: технічний гайд запуску

Nikita Chumak ・ Серп 8

#ux #tools #cases

Планування досліджень за допомогою ШІ

Vadym Kalinin ・ Жовт 29

#productivity #lifehacks #ux #tutorial

7 порад по покращенню портфоліо для пошуку роботи у Берліні

Марійка Кацан ・ Верес 1

#portfolio #lifehacks #ua

Серія інтервʼю Дмитро Свєнтуховський

Станіслав Говорухін Product Designer у Djinni, ex-Miro

Дмитро Свєнтуховський для Design Your Life | Interviews ・ Січ 22

#interview #ua #cases

Обовʼязки та основні робочі задачі дизайнерів в українських та міжнародних компаніях

Дмитро Свєнтуховський для Design Your Life | Interviews ・ Берез 4

#career #interview #ua

Анна Турос - Senior Product Designer у Каліфорнійському стартапі Shortwave

Дмитро Свєнтуховський для Design Your Life | Interviews ・ Квіт 1

#interview #ua #career

Подкаст Дизайн Джем від Stanislav Stefaniuk

Stanislav Stefaniuk 🇺🇦🇵🇱Підписатися

Product Designer

Подкасти Yan Hladchenko

Інтерфейсний. Стас Говорухін про те, як потрапив у Djinni, пошук дизайнера, досвід в Miro та Growth Design курс

Yan Hladchenko ・ Трав 20

#podcast #interview #career #ux

Гості: Аня Ліщинська, Оля Мелкозерова, Катя Деревецька, Юра Грановський, Катя Лавренова,Аліна Король, Андрій Ференс, Макс Штомпіль

Українська дизайн-спільнота 2024 року демонструє захопливу різноманітність тематик: від класичного UX/UI та тестування гіпотез до інтерв’ю з провідними дизайнерами й обговорення актуальних трендів. Усі згадані статті підтверджують, що бути дизайнером сьогодні — це постійно розвиватися, рефлексувати над новими інструментами та технологіями, зважати на етичні й соціальні аспекти, а також працювати у злагоді з командою.

Слава Україні! Слава героям ЗСУ та всім хто наближає перемогу! Дякуємо, що ви з нами! Пішить та пошируйте статті, залишайте коментарі - це дуже важливо для спільноти! З Різдвом та Новим роком!

A Collection of Free Ukrainian Fonts by Ukrainian Designers

Victor Demushkin — Fri, 20 Dec 2024 12:47:16 +0000

The Culture of Ukrainian Fonts

The culture of Ukrainian typography boasts a deep and storied history. For centuries, artists have expressed national identity through fonts, and this tradition continues today. The demand for Ukrainian cultural elements, both domestically and internationally, is growing rapidly.

Explore a curated collection of free Ukrainian fonts created by talented designers. From bold geometric styles to elegant serif designs, these fonts celebrate Ukraine's rich cultural heritage and modern artistry. Perfect for branding, web design, and creative projects, each font supports the Ukrainian language and offers a unique character to elevate your designs. Download now and add a touch of Ukrainian identity to your work!

Nyght Serif: A Free Ukrainian Font with Open Font License

Nyght Serif is a completely free font for personal and commercial use, released under the Open Font License (OFL). It is being developed progressively, with regular updates planned to enhance its features.

The font supports extended Latin characters as well as Cyrillic, focusing exclusively on the Ukrainian alphabet, making it an excellent choice for designs emphasizing Ukrainian identity.

Author: Maksym Kobuzan
Font page: Behance
Free Font Download: Instagram

Zvin Serif: A Sophisticated Font Inspired by Historical Typography

Zvin Serif is a unique font with variable serifs, drawing inspiration from typography between 1850 and 1960. Its mood and dynamics are based on Greek letterforms blended with modern decorative styles. Featuring sharp angles and distinctive serifs, Zvin Serif is elegant and striking, perfect for adding authentic character to any design.

Alphabet support: Latin and Cyrillic
Weights: Regular, Medium, Semi-Bold, Bold
Author: Ivan Tsanko-Khlibovych
Font page: TsankoType
Free Font Download: TsankoType

Work Sans + Work Grotesk: Versatile Sans-Serif Fonts for the Web

Work Sans is a highly versatile sans-serif font designed specifically for web use. It features a core set of Latin and Cyrillic characters, making it ideal for modern digital projects where clarity and readability are essential.

Paired with Work Grotesk, this font family provides a comprehensive solution for clean and functional web typography.

Author: Ivan Tsanko-Khlibovych
Font page: TsankoType
Free Font Download: TsankoType

Nastup Basic: A Free Modular Stencil Font with a Technical Edge

Nastup Basic is a free modular stencil sans-serif font inspired by technical stencil signage on walls and construction details. The name "Nastup" translates to "advance" in Ukrainian, reflecting its bold and industrial aesthetic.

With minimal spacing, it works exceptionally well in narrow layouts, especially with tight leading. Designers can also add variety by using alternative wide or open characters. Nastup Basic supports extended Latin, basic Cyrillic, Greek alphabets, and features an alternative character set specifically tailored for the Ukrainian alphabet.

Author: Maksym Kobuzan
Font page: Behance
Free Font Download: ZakZnak

Kyiv Region Typeface: A Free Font Merging History and Modernity

The Kyiv Region Typeface is an original free font developed specifically for the territorial branding of Kyiv Oblast. Created by White Studio Design, it masterfully combines historical depth with avant-garde experimentation.

The typeface draws on semi-uncial and cursive forms typical of the Kyivan Rus and Ukrainian Baroque periods, blending them with the geometric constructivism of the 20th century—a style enjoying a modern revival.

The result is a contemporary geometric sans-serif font featuring strokes, alternates, ligatures, and historical forms. It is perfect for thematic signage, advertisements, packaging, souvenirs, and even Church Slavonic historical texts.

Author: Dmytro Rastvortsev
Font page: Behance
Free Font Download: Google Drive

Irpin Type: A Bold Tribute to the City of Irpin

Irpin Type is a unique font inspired by the spirit of the city of Irpin. It is designed for versatile everyday use, making it suitable for books, logos, corporate branding, posters, and presentations where a bold and confident impression is needed.

This font is perfect for large-scale designs but also retains excellent legibility in smaller sizes. A modern slab serif with geometric shapes, Irpin Type is influenced by the Ukrainian avant-garde movement of the 20th century, giving it a distinctive and artistic character.

Author: Aleksey Popovtsev
Font page: Fonts.com
Free Font Download: Fonts.com

Fixel: A Font That Combines Technology and Human Touch

At MacPaw, they believe technology simplifies life and brings joy. They designed the Fixel and Hoover fonts to reflect the synergy between humans and technology. The names were inspired by two beloved cats, Fixel and Hoover, who spent over a decade with the MacPaw family, and whose personalities influenced the design of these fonts.

Fixel is a versatile typeface with two styles—Text and Display—and nine weights ranging from Thin to Black. Its design uniquely combines geometric and humanist grotesque elements, featuring open letterforms, clarity, wide proportions, and low contrast. The font's personality merges precision, restraint, and functionality with a friendly, dynamic, and playful essence, making it perfect for various applications.

Author: MacPaw
Font page: Fixel by MacPaw
Free Font Download: MacPaw

Lutsk Typeface: A Signature Font for the City of Lutsk

The Lutsk Typeface is the official font of Lutsk, designed by Kyrylo Tkachev. It complements the city's recognizable identity elements, aiming to boost its appeal among tourists and promote it beyond the region.

This decorative typeface includes two sets of uppercase letters in Cyrillic and Latin alphabets. It is best suited for short texts (up to one sentence). Its design draws inspiration from Ukrainian book and magazine graphics from the first half of the 20th century, reflecting a blend of cultural heritage and modern design.

Author: Kyrylo Tkachev
Font page: Rentafont
Free Font Download: Rentafont

Ermilov Typeface: A Bold Geometric Font for Ukraine Now

To speak about Ukraine today, we need a distinctly Ukrainian font. Ermilov was created specifically for the Ukraine Now brand.

This modern, bold geometric grotesque features unique angled cuts on its letterforms. The design is inspired by the works of Vasyl Yermilov, a renowned Ukrainian constructivist artist, seamlessly combining contemporary aesthetics with historical significance.

Author: Kyrylo Tkachov
Font page: Banda Agency
Free Font Download: Dropbox

Namu Typeface: A Font Rooted in Ukrainian Heritage

Namu was created by Dmytro Rastvortsev in 2018 for the National Art Museum of Ukraine. Its design is the result of extensive research into the museum's collection and the forms of ancient lettering. The typeface features multiple styles, each reflecting different historical eras, making it a unique representation of Ukraine's cultural and typographic legacy.

Author: Dmytro Rastvortsev
Font page: Behance
Free Font Download: Google Drive

Kharkiv Tone: A Font Inspired by the Spirit of Kharkiv

Kharkiv Tone, designed by Kateryna Drozd, draws inspiration from graffiti, technical inscriptions, and handwritten notes found on the walls of Kharkiv. This typeface captures the essence of the city, blending seemingly incompatible elements into a unified and expressive "voice of Kharkiv."

Author: Kateryna Drozd
Font page: Behance
Free Font Download: Google Drive

Arsenal Font: A Modern Free Ukrainian Typeface by Andriy Shevchenko

Arsenal is a modern, free Ukrainian business font designed by Andriy Shevchenko in 2012. This typeface offers a clean and professional aesthetic, making it ideal for various business and design projects. Since its release, Arsenal has been added to the Google Fonts library, providing easy access for designers worldwide.

Author: Andriy Shevchenko
Font page: Behance
Free Font Download: Google Fonts

Mariupol Typeface: A Geometric Grotesque for City Branding

The Mariupol Typeface was designed by Andriy Shevchenko specifically for the branding of Mariupol. This geometric grotesque font is inspired by poster graphics and modern universal typefaces, combining bold aesthetics with functional versatility. It reflects the city's contemporary and dynamic spirit while honoring its unique identity.

Author: Andriy Shevchenko
Font page: Tyktor Media
Free Font Download: Dropbox

Організації на UXPUB

Victor Demushkin — Tue, 21 Mar 2023 08:32:11 +0000

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

1. Переваги створення організації

Просувайте послуги

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

Обʼєднайте команду

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

Отримайте розширену аналітику

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

Збирайте підписників

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

2. Вимоги до організації

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

3. Створення організації

Для створення організації необхідно перейти на https://ux.pub/settings/organization та заповнити 6 обов'язкових полів:

Повна назва організації
Коротка назва для URL - лише букви, цифри та _
Зображення профілю організації
Адреса сайту вашої організації
Опис послуг та цінності для спільноти
Коротка інформація, як ми можемо підтвердити, що ви є представником організації

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

4. Створення рекламного блоку

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

5. Публікація в профіль організації

Щоб створити пост від імʼя організації, треба обрати її зверху в формі створення або редагування статті.

Для просування статей, не забувайте ділитися посиланням на неї у ваших профілях соціальних мереж

6. Часті запитання та відповіді

Як поміняти персональний профіль з імʼям компанії на профіль організації?
- Поміняйте імʼя та зображення свого профілю на персональне
- Створіть організацію
- Натисніть редагувати статтю, та зверху змініть налаштування поста з персонального на пост від компанії
Я хочу використати імʼя для профілю організації (username в URL), а воно вже зайняте моїм персональним профілем. Як звільнити імʼя? Платформа окрім поточного, зберігає 2 останні зміни імʼя профілю. Щоб звільнити імʼя:
- Змініть свій поточний username (логін) на персональний (напр. з "mycompany" на "myname")
- Додайте 1 до нового імʼя ("myname1")
- Приберіть 1 від імʼя ("myname")
- Старе імʼя (mycompany) буде звільнено і ви зможете використати його для створення організації
Що таке Назва, Username, Ім'я, Логін?
- Ваше повне Імʼя, або повна Назва організації це те іменування яке бачать користувачі на сайті, воно може містити букви, цифри, пробіли та інші символи. Наприклад "John Doe", "Тарас Шевченко", "Музей гетьманства"
- Коротке імʼя Username, Логін, slug це нік який ви використовуєте при логіні, він також відображається в url вашого персонального профілю, або профілю організації. Наприклад "johndoe", "taras_shevchenko", "hetmanshipmuseum"
- Забороняється для повного та короткого імені використовувати загальні або технічні назви, назві торгових марок (дозвіл на використання яких у вас відсутній) та інші імена які можуть ввести в оману або порушити роботу сайту. Наприклад "blog" та інше.
При перенесенні статті в організацію змінилося посилання на неї. Що з цим робити?
- При перенесенні статей в профіль організації посилання міняється на привʼязане до організації, але старе посилання з вашим персональним іменем продовжує працювати та перенаправляє на нове.
Я вже створив персональний профіль з імʼям організації, чи можливо його залишити?
- Ні, всі персональні профілі, які не відповідають правилам мають бути виправлені

Залишились будь-які запитання?
Ставте їх у коментарях, або через наші Контакти.

Швидкий гайд з Preact. Віртуальний DOM

Victor Demushkin — Tue, 09 Aug 2022 20:06:35 +0000

Якщо написаний вами JavaScript став настільки складним, що ним важко керувати – на допомогу може прийти Preact.

Preact надає інструменти, необхідні для створення складних веб-додатків із невеликих шматочків багаторазового використання, які називаються компонентами. Унікальність Preact в тому, що він надає ці інструменти в унікально невеликому пакеті: лише 3 Кб коду JavaScript або приблизно одна сторінка тексту. Саме тому сайти з великим трафіком, такі як IKEA, Bing, Etsy та інші, використовують Preact

Використання без компіляції

Preact упакований для використання безпосередньо у браузері, і не потребує жодної збірки чи інструментів:

<script type="module">
  import { h, Component, render } from 'https://unpkg.com/preact?module';

  // Create your app
  const app = h('h1', null, 'Hello World!');

  render(app, document.body);
</script>

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

Альтернативи JSX

Написання викликів h або createElement може бути виснажливим. Перевага JSX полягає в тому, що він виглядає схожим на HTML, що полегшує його розуміння багатьом розробникам. Однак для JSX потрібен етап збірки, тому ми настійно рекомендуємо альтернативу під назвою HTM.

HTM — це JSX-подібний синтаксис, який працює в стандартному JavaScript. Замість етапу створення він використовує власний синтаксис тегованих шаблонів JavaScript, який було додано в 2015 році та підтримується в усіх сучасних браузерах. Це більш популярний спосіб написання додатків Preact.

<script type="module">
  import { h, Component, render } from 'https://unpkg.com/preact?module';
  import htm from 'https://unpkg.com/htm?module';

  // Initialize htm with Preact
  const html = htm.bind(h);

  function App (props) {
    return html`<h1>Hello ${props.name}!</h1>`;
  }

  render(html`<${App} name="World" />`, document.body);
</script>

Порада: HTM також надає зручну версію Preact для одного імпорту:

import { html, render } from 'https://unpkg.com/htm/preact/index.mjs?module'

Віртуальний DOM

Чим "віртуальний" DOM відрізняється від справжнього DOM, який ми використовуємо під час програмування для браузера?

Віртуальний DOM (Virtual DOM) — це простий опис деревовидної структури за допомогою об’єктів:

let vdom = {
  type: 'p',         // a <p> element
  props: {
    class: 'big',    // with class="big"
    children: [
      'Hello World!' // and the text "Hello World!"
    ]
  }
}

Такі бібліотеки, як Preact, надають спосіб створення цих описів, які потім можна синхронізувати з деревом DOM браузера. З синхронізацією кожної частини дерева DOM-дерево браузера оновлюється відповідно до структури, описаної віртуальним DOM-деревом.

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

У цьому розділі ми дізнаємося, як створювати віртуальні дерева DOM і як наказати Preact оновлювати DOM відповідно до цих дерев.

Створення віртуальних дерев DOM

Існує кілька способів створення віртуальних дерев DOM:

createElement(): функція, надана Preact
JSX : HTML-подібний синтаксис, який можна скомпілювати до JavaScript
HTM : HTML-подібний синтаксис, який можна писати безпосередньо в JavaScript

Корисно почати з найпростішого підходу, яким буде прямий виклик createElement() функції Preact:

import { createElement, render } from 'preact';

let vdom = createElement(
  'p',              // a <p> element
  { class: 'big' }, // with class="big"
  'Hello World!'    // and the text "Hello World!"
);

render(vdom, document.body);

Наведений вище код створює віртуальний DOM "опис" елемента абзацу. Першим аргументом для createElement є ім’я елемента HTML. Другим аргументом є "props" елемента - об'єкт, що містить атрибути (або властивості), які потрібно встановити для елемента. Будь-які додаткові аргументи є дочірніми для елемента, які можуть бути рядками (наприклад, 'Hello World!') або елементами Virtual DOM із додаткових createElement() викликів.

Останній рядок повідомляє Preact створити справжнє дерево DOM, яке відповідає нашому «опису» віртуальний DOM, і вставити це дерево DOM у <body> веб-сторінки.

Тепер ще більше JSX!

Ми можемо переписати попередній приклад за допомогою JSX, не змінюючи його функціональність. JSX дозволяє нам описувати наш елемент абзацу за допомогою HTML-подібного синтаксису, який може допомогти зберегти читабельність, коли ми описуємо складніші дерева. Недоліком JSX є те, що наш код більше не пишеться на JavaScript і має бути скомпільований таким інструментом, як Babel. Компілятори виконують роботу з перетворення наведеного нижче прикладу JSX у точний createElement() код, який ми бачили в попередньому прикладі.

import { createElement, render } from 'preact';

let vdom = <p class="big">Hello World!</p>;

render(vdom, document.body);

Тепер він набагато більше схожий на HTML!

Є ще одна річ, про яку слід пам’ятати про JSX: код всередині елемента JSX (у кутових дужках) є спеціальним синтаксисом, а не JavaScript. Щоб використовувати синтаксис JavaScript, наприклад числа чи змінні, вам спочатку потрібно «вискочити» з JSX за допомогою {expression} - подібно до полів у шаблоні. У наведеному нижче прикладі показано два вирази: один для встановлення class рандомізованого рядка, а інший для обчислення числа.

let maybeBig = Math.random() > .5 ? 'big' : 'small';

let vdom = <p class={maybeBig}>Hello {40 + 2}!</p>;
                 // ^---JS---^       ^--JS--^

Якщо виконати render(vdom, document.body), з'явиться текст "Hello 42!".

А тепер це ж саме але з HTM

HTM є альтернативою JSX, яка використовує стандартні шаблони з тегами JavaScript, усуваючи потребу в компіляторі. Якщо ви не стикалися з шаблонами з тегами, це особливий тип String literal, який може містити ${expression} поля:

let str = `Quantity: ${40 + 2} units`;  // "Quantity: 42 units"

HTM використовує ${expression} замість {expression} синтаксису з JSX, що може зробити зрозумілішим, які частини вашого коду є елементами HTM/JSX, а які — простим JavaScript:

import { html } from 'htm/preact';

let maybeBig = Math.random() > .5 ? 'big' : 'small';

let vdom = html`<p class=${maybeBig}>Hello ${40 + 2}!</p>`;
                        // ^--JS--^       ^-JS-^

Усі ці приклади дають однаковий результат: віртуальне дерево DOM, яке можна надати Preact для створення або оновлення існуючого дерева DOM.

Компоненти

Пізніше ми детальніше розповімо про компоненти, але наразі важливо знати, що такі елементи HTML, як <p> один із двох типів елементів віртуальної DOM. Інший тип — це Component, який є елементом Virtual DOM, де типом є функція, а не рядок, як p.

Компоненти є будівельними блоками додатків Virtual DOM. Наразі ми створимо дуже простий компонент, перемістивши наш JSX у функцію, яка буде відтворена для нас, тому нам більше не потрібно буде писати останній render() рядок:

import { createElement } from 'preact';

export default function App() {
    return (
        <p class="big">Hello World!</p>
    )
}

Спробуйте

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

Щоб перевірити те, чого ви навчилися в цьому розділі, спробуйте додати тексту ще більше шикарності! Зробіть слово World виділеним, обернувши його тегами HTML: <em> і </em>.

Потім зробіть весь текст фіолетовим, додавши властивість стилю. Опис стилю є спеціальним і дозволяє встановити значення об’єкта з однією або кількома властивостями CSS для елемента. Щоб передати об’єкт як значення властивості, вам потрібно буде використати {expression}, наприклад style={{ property: 'value' }}.

Результат

import { createElement } from 'preact';

export default function App() {
  return (
    <p class="big" style={{ color: 'purple' }}>
      Hello <em>World</em>!
    </p>
  )
}