Ahoj všichni! V tomto čísle jsme pro vás vybrali nejlepší odkazy na zdroje, které jsou relevantní pro design a vývoj, přidají inspiraci a zrychlí vaše pracovní postupy. To vše používáme sami a myslíme si, že kolekce bude užitečná.
Tak co pro dnešek : interaktivní tlačítka a widgety, průvodce styly, spousta skvělých informací na mřížce, generátory výzev uživatelského rozhraní a záběry v Dribbble, skvělé balíčky ikon a mnoho dalšího.
Horní část horní části jsme nechali jako poslední – v počtu repostů z kanálu jsou lídři „ Užitečné pro designéra „. Všechny tyto odkazy tam již svítily, pouze vybrali to nejlepší.
13. Získejte písmo
Pravděpodobně jste se setkali s touto situací: líbí se vám písmo na webu, ale nevíte, kde o něm najít informace. Pomůže vám zdroj Font Of Web.
Musíte zadat adresu URL webu, na kterém se vám písmo líbilo, a za pár sekund budete mít všechny potřebné informace: název hlavního písmo, seznam záložních možností pro toto písmo, všechny standardní velikosti odstavce a záhlaví, stejně jako všechny specifikace (velikost, tloušťka, výška řádku a dokonce i odkazy ke stažení).
12. Zvládněte mřížka ve Figmě
Zdroj Tvorba mřížek rozvržení pro vás je interaktivní výukový program, jak nastavit dynamickou mřížku ve Figmě. Naučíte se, jak mřížka funguje na Figmě, naučíte se, jak se liší možnost rozložení od automatického rozložení, a naučíte se, jak pracovat s živými příklady.
Obsah zdroje se skládá ze 6 sekcí:
a) Úvod do sítě: Toto je úvod do anatomie a pokyny k aplikaci ve Figmě.
b) Figma a rozložení: Tato část vám pomůže porozumět pevným a roztažitelným a dozvíte se o omezeních.
c) Baseline Grid: Zde se naučíte pracovat se standardními mřížkami baseline a jak je používat při práci s textem a v designu ikon.
d) Praktická aplikace: V této části se naučíte, jak rovnoměrně distribuovat prvky, měnit měřítko složitých rozvržení a pracovat s automatickým rozvržením.
atd. .
11. Vytvořte snímek Dribbble
ScreenBean je skvělý společník pro vytváření snímků v Dribbble i mimo něj. Odhoďte libovolný snímek obrazovky a systém automaticky vygeneruje šťavnatý snímek!
Co se generuje automaticky: barevná paleta, zaoblené rohy obrázku a několik režimů pozadí – normální, s přechodem, se stíny a takzvané „hravé“ pozadí (s kruhy různých velikostí rozptýlenými po pozadí).
10. Získejte animaci uživatelského rozhraní
Statické weby a aplikace vypadají nudně. Dýchejte život a vylepšete své uživatelské rozhraní pomocí této výkonné kolekce interaktivních tlačítek a widgetů. Zde je shromážděno více než 500 snímků od 213 návrhářů.
Na jedné straně jsou všechny animace v této kolekci vizuálně chytlavé. Na druhou stranu jsou jednoduché a nejsou rušivé, což je v dnešní době také dobrý trend. Tlačítka, jako je stahování, zapnutí/vypnutí, hledání, přidání do košíku, odeslání zprávy, reakce emodži a mnoho dalšího – zde je spousta dobrých nápadů pro animaci uživatelského rozhraní.
9. Stahování ikon
Glyphs Icons je návrhový systém téměř 3000 booleovských ikon vytvořených v programu Figma. Tyto ikony jsou optimalizovány pro práci v prohlížeči.
Ikony z aplikace Figma můžete exportovat pomocí jejího API, buď jako jednoduché soubory SVG, nebo jako webové komponenty.
Autor také vytvořil plugin Figma, aby vylepšil pracovní postup při práci s velkou sadou ikon. Zatím je plugin ve vývoji. Když si ale stáhnete úložiště, můžete ho použít lokálně.
Celý proces vytváření ikon Glyphs, autor popisuje v tomto vlákně na Redditu.
8. A také , stáhněte si!
Phosphor Icons jsou balíček zabijáckých ikon pro jakýkoli projekt, ať už jde o vytváření rozhraní, diagramů nebo prezentací. Tento zdroj představuje více než 3 500 flexibilních ikon pro každou příležitost.
Na webu si vyberete, které ikony potřebujete a v jaké formě: možná obrysové nebo vyplněné nebo dvoubarevné. Můžete upravit tloušťku, vybrat požadovanou velikost pomocí posuvníku, nastavit požadovanou barvu v poli HEX-kódu. Ikony jsou v knihovně Figma k dispozici také jako soubor a jako plugin.
7. Vytvořte mřížku CSS
Layoutit Grid je open source interaktivní generátor mřížek CSS. Umožňuje vám vytvářet značky a vidět probíhající kód. Můžete pracovat s kódem, měnit velikost kontejnerů a prohlížet změny CSS a HTML v reálném čase.
Jakmile dokončíte rozložení, můžete přejít na CodePen a získat kód. Poté můžete přejít k dalšímu projektu. Tento nástroj přináší do popředí kód, který vám pomůže naučit se CSS mřížku tím, že s ním budete přímo pracovat.
6. Zvyšte své dovednosti v uživatelském rozhraní
UI Coach je generátor výzev pro design. Ideální pro ty, kteří potřebují získat design pro organický růst. Je to jednoduché – po kliknutí na tlačítko vám bude vygenerován úkol, abyste pro něco vytvořili design uživatelského rozhraní.
Co je uvedeno: specifikace projektu (například „Vytvořit web, který prodává témata a doplňky WordPress“), paleta barev, kombinace písem a odkaz na bezplatný zdroj (například ilustrace).
Pokud jakákoli samostatná položka vám nevyhovovala, můžete kliknout na tlačítko Aktualizovat a systém vám vygeneruje další položku. Nebo můžete kliknout na Obnovit vše a dostanete zcela nový úkol.
5. Styleguides Designs
Pro mnoho lidí je někdy obtížné navrhnout průvodce styly pro projekty. A pokud se potýkáte se stejným problémem, pak vám tento rozsáhlý náladový panel na Dribbble rozhodně neublíží.
Pouze 98 snímků od 79 návrhářů. Neustále se aktualizuje a skládá se z prvotřídních děl, která stojí za to si prohlédnout.
Tato kolekce se neomezuje pouze na průvodce styly pro sady uživatelského rozhraní a návrhové systémy. Budete mít příležitost porozumět tomu, jak navrhnout průvodce styly loga a vzory, které se používají na webech a v aplikacích. Například: jak stylovat sekci FAQ atd.
4. Seznamte se s populárním nástrojem
Průzkum UX Tools se právem nazývá nejdůležitější každoroční průzkum popularity designérských nástrojů. Je to skvělý zdroj informací, pokud potřebujete statistiky pro analýzu. Nedávno zveřejněná data pro rok 2020.
Průzkum také poskytuje statistiky o nejžhavějších nástrojích, které si respondenti chtějí v příštím roce vyzkoušet, a také o nejlepších 3 z návrhářské sady nástrojů.
Zde je seznam dostupných sekcí:
a) Které země jsou více designéry
b) Kde jsou Brainstorming a generování nápadů?
c) Kde jsou navrženy tok uživatelů a soubory Sitemap;
d) Jaké nástroje pro drátové rámce jsou stále naživu;
e) Jaké nástroje pro návrh uživatelského rozhraní jsou nahoře;
f) Kde jsou teď prototypy;
atd.
Průzkum nástrojů UX poskytuje pohodlné a vizuálně příjemné rozhraní pro porovnávání nástrojů, kde můžete zobrazit velké množství velmi odlišných informací: jaká je míra využití, funguje nástroj offline, podporuje synchronní úpravy a mnohem více
Všechna data jsou k dispozici ke stažení.
3. Vytvořte web v konstruktoru
První tři otevírá webová aplikace Aspectapp. S ním můžete vytvářet návrhy rozhraní a proměnit je ve skutečné weby. Program již má několik připravených šablon. Navzdory skutečnosti, že tuto aplikaci je stále třeba vylepšovat, její potenciál je okamžitě patrný. Webflow rozhodně stojí za to si dělat starosti 😊
Tvůrce Aspectappu v současné době pracuje na integraci React do jejich aplikace, stejně jako na možnosti exportu návrhů přímo ze Skic, Figmy a XD.
S podrobnostmi o tomto projektu se můžete podívat na toto vlákno na Redditu.
Toto je skvělý příklad toho, jak kdokoli může sám vytvořit produkt od nuly. Proč tedy nezkusit vytvořit něco vlastního, pokud máte potřebné dovednosti?
2. Vypočítejte mřížku
Generátor mřížky Kolumna je na druhém místě. S tímto úžasným nástrojem můžete snadno vytvářet mřížky pro vaše projekty. Jedná se o velmi flexibilní a praktický zdroj, kde můžete upravit šířku plátna (pro všechna zařízení), mezery, okraje, sloupce a postranní panely na levé a pravé straně (jejichž šířka je také konfigurovatelná).
< p> Kolumna je skvělé řešení, pokud chcete, aby byl váš obsah efektivnější, rychlejší a vyváženější.
1. Seznamte se s mřížkou (80lvl)
Vedoucím našeho dnešního přehledu je článek Responsive Grid Design: Ultimate Guide (eng). Hodně jsme mluvili o síťování, ale tento materiál je nejrozsáhlejší. Po přečtení tohoto článku získáte úplné porozumění tomu, jak mřížka funguje a jak s ní pracovat jako pokročilý uživatel.
Dozvíte se:
< p> a) Jak funguje anatomie mřížky – základní informace o sloupech, okrajích a okapech;
b) Jak navrhnout rozhraní pomocí responzivní mřížky – jak pracovat s obrázky, textem a dalšími prvky uživatelského rozhraní, které jsou uvnitř viditelných nebo neviditelných nadřazených kontejnerů;
c) Jak funguje struktura sloupců a jak fungují zarážky;
d) Chování mřížky – vše o pevných mřížkách, flexibilních mřížkách a hybridních mřížkách;
atd.
To je vše. Pokud se vám něco hodí! Jakmile budete mít dostatek materiálu, počkejte na nový příspěvek.
Neustále vydáváme zajímavé novinky ze světa designového průmyslu. Proto, abyste měli vždy přehled o všem novém a načerpali inspiraci, přihlaste se k odběru kanálu Užitečné pro designéra a naší Dribbble
