Comunicate de Afaceri

Resurse noi pentru web designeri și dezvoltatori (mai 2022)

Dezvoltarea site-ului web nu este întotdeauna despre codificare . De asemenea, veți avea nevoie de un bun simț al designului pentru a face site-ul utilizabil, accesibil și, de fapt, să arate bine pentru utilizatori.

Deci, în această rundă a seriei, vom explora mai multe despre unele dintre aceste resurse în jurul categoriei de design. Veți găsi instrumente pentru compunerea animației în browser, machete de înaltă calitate, bibliotecă de pictograme animate, câteva biblioteci CSS și multe altele.

Fără alte prelungiri, haideți să accesăm lista completă.

Lexical

inițiativă Facebook open-source , Lexical este o bibliotecă JavaScript pentru a construi un editor de text îmbogățit cu accent pe performanță, accesibilitate și extensibilitate. Acestea permit dezvoltatorilor să adauge noi funcționalități nevoilor lor.

La momentul scrierii acestui articolLexical este în dezvoltare activă și oferă legături React.js.

Rachetă

Un boilerplate complet pentru a construi un site web static modern cu JavaScript . Vine cu instrumentele esențiale pentru a crea un site web funcțional, cum ar fi împărțirea automată a codului, rutarea și componentele cu toate preconfigurate, astfel încât să vă puteți concentra pe a fi productiv.

Ls Graphics

O colecție de machete de înaltă calitate pentru o gamă largă de prezentare a produselor . Acestea includ căni ceramice, cărți poștale, mac studio, macbook pro, iPhone, varietate de pachete și multe altele.

Toate aceste machete sunt gratuite și pot fi folosite în proiecte personale sau comerciale . Sunt disponibile și în Photoshop, Sketch, XD și Figma.

Urzeală

O aplicație Terminal construită de la zero cu Rust . Este rapid și plin de funcții pe care nu le-ați găsi într-un terminal tradițional, cum ar fi abilitatea de a folosi mai multe cursore și completare automată și sugestii similare cu un editor de text și care îl face să pară modern.

Componente AI

O colecție de instrumente web, generatoare și editori pentru HTML, CSS și SVG. Veți găsi un instrument pentru a genera teme de culoare, gradienți, grafică SVG în 2D sau 3D și încă câteva. Aceste instrumente pot fi utile pentru a crește productivitatea, o interfață de utilizator plăcută.

SpruceCSS

Un cadru CSS construit cu Sass . Oferă variabile, mixuri, funcții , precum și stilurile de bază pentru elemente comune, cum ar fi toate elementele tipografice, butoanele, formularele și tabelele.

De asemenea, ține cont de accesibilitatea culorilor , precum și de internaționalizare prin sprijinirea stilurilor RTL din cutie.

Este un cadru care oferă o bază solidă pentru site-ul dvs

Instrumente de mișcare

O extensie Chrome DevTools care vă permite să inspectați, să înregistrați și să redați animație CSS chiar în browser . Un instrument la îndemână pentru a depana animația CSS și care vă poate ajuta să creați o animație mai convingătoare.

Ladle

Ladle este conceput ca o alternativă la Storybook , cu accent pe performanță și ușurință în utilizare . Este un instrument de dezvoltare și testare a componentelor. E rapid; se încarcă sau reîncarcă modificările instantaneu indiferent de câte componente sunt redate.

Modele

O carte electronică gratuită de Addy Osmani și Lydia Hallie, care acoperă modelele de proiectare privind construirea de aplicații web cu JavaScript . Aici veți găsi câteva sfaturi și trucuri pentru a vă arhitectura mai bine aplicațiile, ceea ce va duce la un cod mai bun.

Scule

O altă colecție la îndemână de instrumente pentru dezvoltatorii web. Include un instrument pentru a genera coduri QR, hash, diferențe de text și unele convertoare de date , cum ar fi JSON în TypeScript, HTML în Markdown, JSON în Rust și altele. Este instrumentul pe care ar trebui să îl aveți în marcaj.

Deschis prin design

Open by Design oferă o listă organizată de design UI pentru aplicație și site web . Fiecare design este disponibil în format Figma și îl puteți utiliza atât pentru uz personal, cât și pentru uz comercial.

Nu ești inspirat pentru următoarea ta aplicație sau web design? Nu mai căuta. Ar trebui să-l aveți în marcaj.

UnDraw

unDraw oferă o colecție de ilustrații de înaltă calitate. Puteți personaliza culoarea de bază pentru a se potrivi cu designul dvs., puteți selecta una dintre ilustrații și puteți descărca în format SVG sau PNG.

Nu ești în stare să proiectezi? Nici o problema. Undraw poate face site-ul dvs. să arate instantaneu profesional și plăcut din punct de vedere estetic .

Screely

Un instrument la îndemână care vă permite să creați rapid o machetă de browser . Pur și simplu aruncați imaginea pe pagina web și va afișa câteva opțiuni în care puteți selecta stilurile de cadre ale browserului, culorile de fundal, spațierea și o opțiune pentru a o descărca ca imagine PNG.

Utilizați animații

O colecție de pictograme animate construite pentru cadrul Lottie . Include o serie de pictograme, cum ar fi pictogramele de încărcare pe diferite stiluri, pictograme de rețele sociale, pictograme de navigare și multe altele. Aceste pictograme vor garanta ca site-ul dvs. să fie mai captivant.

Twind

Twind este un fel de implementare CSS-in-JS pentru TailwindCSS . Oferă funcțiile utilitare pentru a scoate numele clasei Tailwind și va reda stilurile.

Twind este cadru agnositc, ceea ce vă permite să utilizați într-un HTML simplu și orice cadru, inclusiv React.js, Vue.js și Lit Element.

TailBlocks

colecție de peste 60 de blocuri de aspect construite cu TailwindCSS . Puteți găsi câteva aspecte comune pentru conținut, blog, formular, comerț electronic, CTA și multe altele. Dacă veți folosi TailwindCSS, folosirea acestor blocuri este un început bun pentru a vă crește productivitatea.

Practică front-end

Oferă o colecție de proiecte la care puteți lucra pentru a vă evalua abilitățile de față . Proiectele sunt grupate pe 3 niveluri – la nivelul 1, veți ajunge să dezvoltați un aspect simplu de o pagină, în timp ce la nivelul 3 veți fi provocat cu un aspect mai complex, care constă în mai multe elemente.

Aspect de bază

O bibliotecă React.js care oferă componente utilitare care facilitează aranjarea conținutului cu modele de aspect obișnuite . De exemplu, puteți utiliza MasonryGrido componentă pentru a afișa conținutul în grila Masonry . Sau, Framecare vă permite să decupați mediile într-un raport specific.

Puteți instala această bibliotecă prin NPM și puteți analiza câteva exemple de cazuri reale pe care le oferă pe site-ul web pentru a vă pune în funcțiune imediat.

AdonisJS

Un cadru JavaScript complet pentru a construi un site web modern . AdonisJS evidențiază câteva caracteristici pe care le puteți găsi de obicei într-un cadru MVC, cum ar fi motorul de rutare , controler , middleware, validare și șabloane. Dacă ați folosit Laravel sau Ruby on Rail, vă veți simți imediat ca acasă.

Sampler

Sampler este un utilitar Shell sau Terminal care poate vizualiza procesele sau activitățile care se întâmplă în computerul dvs. (la fel ca ceea ce vedem într-un film științifico-fantastic), cum ar fi traficul de rețea, utilizarea RAM și CPU și statisticile containerului Docker, pentru a numi câteva. Dacă doriți să vă impresionați familia sau prietenii, acesta este cel pe care trebuie să îl instalați în computer.

AllmaDesign vă oferă servicii profesionale de web design la prețuri avantajoase, creare site-uri prezentare pentru companii mici și mijlocii, creare magazine online și cataloage de produse, precum și alte servicii conexe: întreținere și administrare site-uri weboptimizare SEO și promovare onlinedesign grafic și identitate companiegăzduire web și înregistrare nume de domenii.

Social Media
Vezi toate articolele autorului: AllmaDesign

Comentarii

Cauta

Categorii populare