Învățarea abilităților de care aveți nevoie pentru design sau dezvoltare web este primul pas pentru a lucra pe web – dar acest lucru înseamnă, de asemenea, să vă familiarizați cu instrumentele de lucru. Acesta este motivul pentru care am alcătuit această listă de 99 de instrumente gratuite de care veți avea nevoie fie pentru dezvoltare web, fie pentru design web, fie pentru ambele.

Câte o resursă de pe această listă poate fi utilizată gratuit și completează abilitățile pe care le învățăm în cadrul cursurilor noastre Web Design, Web Developer și Front End Developer Blueprints (cursuri conduse de un instructor care vă conduc prin elementele fundamentale ale fiecărui rol).

În timp ce învățați, păstrați această listă la îndemână și gândiți-vă la ea ca la propria dvs. cutie de scule virtuală.

Resurse de design web

Această listă de instrumente de design web include instrumente de design web pentru începători, precum și resurse de design care vă vor servi pe parcursul unei întregi cariere.

(back to top)

Liste de buletine informative

1. Creative Market
Înainte de a face orice altceva, mergeți să vă înscrieți pe lista de newsletter a Creative Market. O dată pe săptămână, veți primi un e-mail plin cu 5 descărcări gratuite, incluzând totul, de la modele și fonturi până la șabloane și teme.

(back to top)

Software + Apps

Aceste programe software și aplicații web oferă o bază solidă pentru web design.

2. CoffeeCup Software
Oferă tot felul de aplicații gratuite pentru designerii web, inclusiv un editor HTML, un constructor de formulare web, un designer de coșuri de cumpărături și multe altele.

3. Aplicația InVision
Unelte puternice de prototipare și colaborare. Puteți obține machete și prototipuri de înaltă fidelitate în doar câteva minute.

4. Pixlr
Editați imagini direct din browser.

5. Canva
Un software de design grafic uimitor de ușor, pe care oricine îl poate folosi. Funcția de căutare și glisare este atât de simplă și utilă!

6. Easel.ly
Formidabile șabloane infografice gratuite.

(back to top)

Fotografii

Fotografiile sunt o parte esențială a designului web. Aceste resurse de fotografii de stoc sunt esențiale atunci când aveți nevoie de fotografia potrivită chiar acum.

7. Unsplash
Câteva dintre cele mai frumoase fotografii de stoc gratuite de pe piață, și cu tone de varietate. Imagini noi sunt adăugate în fiecare zi.

8. PicJumbo
Obțineți fotografii gratuite livrate în căsuța dvs. de e-mail, care sunt complet gratuite pentru uz personal și comercial.

9. Gratisography
Imagini gratuite de înaltă rezoluție pe care le puteți folosi în proiecte personale și comerciale. Au categorii ușor de navigat: animale, natură, obiecte, capricii și multe altele.

10. Compfight
Căutați tone de imagini licențiate pentru uz personal și/sau comercial, majoritatea de pe Flickr.

11. IM Free
Resurse de design web selectate, inclusiv o tonă de fotografii clasificate, plus pictograme și șabloane.

12. Stock Up
Cercetați peste 9.000 de fotografii de pe 26 de site-uri diferite, toate într-un singur loc.

13. Death to the Stock Photo
Înscrieți-vă pe lista lor de e-mail și primiți pachetele lor de fotografii gratuite în căsuța de e-mail o dată pe lună.

14. Little Visuals
Dacă vă înscrieți pe lista lor, veți primi 7 fotografii gratuite de înaltă rezoluție prin e-mail o dată pe săptămână.

15. New Old Stock
Obțineți gratuit fotografii de epocă din arhivele publice.

16. Cupcake
Fotografii gratuite, de înaltă rezoluție de Jonas Nilsson Lee.

17. Pexels
10 noi fotografii de arhivă gratuite în fiecare zi.

18. Magdeleine
1 fotografie gratuită de înaltă rezoluție pe zi.

19. SplitShire
Fotografii de arhivă gratuite, de înaltă calitate, realizate de un fotograf italian.

20. ISO Republic
Fotografii de arhivă de înaltă calitate comercializate pentru creativi.

21. Paul Jarvis
Înscrieți-vă pentru a primi gratuit 20 dintre fotografiile de top ale lui Paul Jarvis.

(back to top)

Simboluri + Icoane

Căutați simboluri sau pictograme pentru a le folosi pe site-ul dvs. web? Nu căutați mai departe.

22. Pixeden
Tone de seturi de pictograme gratuite, inclusiv pictograme meteo, pictograme sociale, pictograme de linie și multe altele.

23. Iconmonstr
Mai mult de 2800 de pictograme grafice îndrăznețe în câteva stiluri diferite.

24. Captain Icon
Peste 350 de pictograme vectoriale gratuite pentru proiecte mobile și web.

25. Linear Icons
Un font de pictograme cu 170 de pictograme diferite din care puteți alege.

26. Font Awesome
Un font de simboluri care vă permite să adăugați simboluri pe site-urile dvs. web.

27. Fontello
Generează pachete de fonturi de pictograme.

28. flaticon
Descărcați pictograme vectoriale sau includeți pictograme ca fonturi web.

29. The Noun Project
Căutați un substantiv, obțineți un simbol sau o pictogramă gratuită.

30. Endless Icons
Bibliotecă gratuită de pictograme.

31. Perfect Icons
Personalizați și optimizați pictogramele social media pentru site-ul dumneavoastră.

32. iconSweets
60 de pictograme vectoriale gratuite în Photoshop.

33. Round Icons
Pachete gratuite de pictograme excentrice și profesionale.

(back to top)

Fontele

Fontele sunt o parte atât de crucială a designului încât pot fi ușor de trecut cu vederea. Uitați-vă aici, în schimb, și găsiți fonturile care să vă ducă designul la nivelul următor.

34. Google Webfonts
Adaugați fonturi pe site-ul dvs. în doar câteva clicuri.

35. typegenius
Generator de perechi de fonturi.

36. Font Squirrel
Sute de fonturi complet gratuite.

37. Beautiful Web Type
Consultați o colecție curatoriată a celor mai frumoase fonturi Google Webfonts.

38. Lost Type
Fonduri minunate pay-what-you-can.

(back to top)

Colors

Ai nevoie de ajutor pentru a forma cele mai bune culori pentru designul tău? Aceste instrumente de culoare vă stau la dispoziție.

39. Material UI
O galerie de culori Material Design și flat design pe care să le folosiți în proiectele dumneavoastră.

40. Paletton
Începeți cu orice culoare și obțineți o paletă (cu 5 nuanțe pentru fiecare culoare) bazată pe câteva modele diferite de scheme de culori: monocromatică, adiacentă, triadă, tetradă sau personalizată.

41. Design Seeds
Tone de palete de culori grozave luate din fotografii. Puteți căuta după cuvinte cheie sau după culori similare.

42. Adobe Color Wheel
Alegeți din diferite tipuri de perechi de culori și salvați-vă paletele de culori.

43. Material Palette
Generați o paletă de culori pe baza a 2 culori.

44. Flat UI Color Picker
Numele spune totul.

45. Flat UI Colors
Identic.

46. Bootflat
Celector de culori plat.

47. Coolors
Generator de palete de culori.

48. Skala Color
Descărcare liberă a selectorului de culori.

49. BrandColors
Verificați culorile exacte pe care le folosesc marile branduri.

50. 0 la 255
Găsește variația de culoare perfectă pe care o cauți.

51. Iubitori de culori
Consultați paletele de culori ale utilizatorilor și adăugați-le pe ale dvs. în comunitate.

52. Palette for Chrome
Generează palete de culori pe baza imaginilor.

(back to top)

Backgrounds + Textures

Fotografiile, fonturile și culorile nu sunt sfârșitul unui design – aveți nevoie și de fundaluri și texturi pentru a le ține pe toate împreună. Găsiți-le pe ale voastre cu aceste instrumente.

53. Pattern8
Tone de modele repetitive funky, îndrăznețe și luminoase din care puteți alege.

54. Repeat-X Repeat-Y
Modeluri repetitive uimitoare din întreaga lume.

55. Texture King
Toate texturile pe care ți le-ai putea dori vreodată: grunge, rugină, tencuială, beton, murdărie și multe altele.

56. Patternico
Creați-vă propriile modele folosind pictograme Font Awesome. Personalizați culoarea de fundal, dimensiunea pânzei și transparența formei.

57. Subtle Patterns
Modele descărcabile gratuit.

58. Lost and Taken
Texturi gratuite într-o tonă de categorii, inclusiv carton, piatră, metal, bule, fără sudură și multe altele.

59. BG Patterns
Creați modele fără cusur cu culori, forme și altele personalizabile.

(back to top)

UI (User Interface) Kits/Guides

Designul web este mai mult decât un simplu aspect vizual. Modul în care se „simte” interfața de utilizator a unui site pentru utilizator este, de asemenea, un factor critic. Aceste instrumente vă vor ajuta să vă asigurați că propriul dvs. design de interfață utilizator este la punct.

60. 55+ Elements Free UI Kit
Un kit UI curat și modern. Nu uitați să căutați pe site-ul Behance pentru tone de resurse excelente de la alți designeri!

61. Oh nu, nu un alt UI Kit
Un kit UI simplu, plat, open source pentru mobil și web, care vine ca fișier PSD.

62. PSD Booster Freebies
Tone de freebies excelente pentru Photoshop, inclusiv kituri UI, teme și multe altele.

63. Material Design Guidelines
Ghidul oficial al standardelor Material Design de la Google.

(back to top)

Web Development Resources

După ce un site web este proiectat, trebuie să fie dezvoltat! Fie că lucrați pe ambele părți ale procesului (proiectarea ȘI construirea unui site), fie că construiți un site pe baza proiectelor altcuiva, aceste instrumente pentru dezvoltatori vă vor ajuta să faceți din acel proiect o realitate virtuală.

(back to top)

Motoare de căutare a numelor de domenii

Numele de domenii se află în centrul unui site web – ele reprezintă adresa directă la care utilizatorii vă pot găsi site-ul online. Dar internetul este un loc aglomerat și poate fi greu să găsești exact numele de domeniu pe care îl dorești. Aceste instrumente vă vor ajuta să aflați dacă un nume pe care îl doriți este disponibil și să creați unul care ESTE dacă prima alegere nu este.

64. Namemesh
Un motor puternic de căutare a numelor de domenii care vă ajută să găsiți domenii care sunt scurte, amuzante, comune, similare și diverși alți calificative.

65. Nameboy
Introduceți un cuvânt cheie sau două și obțineți o listă de domenii disponibile care le încorporează.

66. Panabee
Descrieți ce doriți în două cuvinte și Panabee va genera o listă de nume de domenii potențiale.

67. Impossibility
Generați nume de domenii aleatorii pe baza unui singur cuvânt.

68. LeanDomainSearch
Cercetați un nume de domeniu în funcție de un cuvânt cheie.

(back to top)

Frameworks, Templates, Code Packs, + Themes

Câteodată va trebui să codificați fiecare parte a unui site web de la zero – dar alteori nu veți avea nevoie. Iată o listă de cadre, șabloane, pachete de coduri și teme pe care le puteți folosi pentru a reduce munca grea.

69. WP-Flex
Un boilerplate de temă WordPress goală, receptivă, care respectă cele mai bune practici și cerințe oficiale din WordPress Codex.

70. Foundation
Un cadru responsive avansat care este unul dintre cele mai populare de pe piață.

71. Ionic
Creați aplicații mobile folosind tehnologiile web pe care le cunoașteți și le iubiți.

72. Initializr
Generează rapid un șablon bazat pe HTML5 Boilerplate.

73. Materialize
Un cadru modern, receptiv, bazat pe specificațiile Material Design de la Google.

74. WordPress Plugin Boilerplate
Dacă doriți să creați plugin-uri WordPress, Plugin Boilerplate este un punct de plecare standardizat, orientat pe obiecte.

75. Front-end Boilerplate
Un punct de plecare de bază pentru crearea site-urilor dvs. web, astfel încât să nu trebuiască să recreați totul de la zero de fiecare dată.

76. HTML5 Boilerplate
Primul și cel mai bun. Cod gratuit HTML5 boilerplate.

77. HTML5 UP
Gratuit șablon HTML5 complet responsiv.

78. 1 Line CSS Grid Framework
Un framework pentru CSS care are doar 1 linie!

79. 960 Grid System
Un favorit al Skillcrush.

80. Starkers for WordPress
Un șablon de bază pentru dezvoltarea primei tale teme WordPress.

81. Barebones for WordPress
Un șablon WordPress gratuit pentru dezvoltatori.

82. Underscores
Șablon WordPress pentru dezvoltarea unei teme complet noi.

83. Sage for WordPress
O temă de pornire WordPress bazată pe boilerplate HTML5 și Bootstrap.

84. Whiteboard pentru WordPress
O temă WordPress curată, de bază, pentru dezvoltatori.

85. Bootstrap
Un cadru HTML, CSS și JS receptiv.

86. Bootswatch
Teme gratuite pentru Bootstrap.

(back to top)

Ghiduri de stil de codare

Nu poți începe să codezi fără să înveți abilitățile de bază, dar odată ce ai aceste abilități bătute în cuie, este timpul să înveți cum să codezi artistic. Aceste ghiduri vă vor învăța cele mai bune practici de codare care vă vor ridica munca dincolo de nivelul de bază.

87. Web Field Manual
O colecție de resurse, cele mai bune practici, inspirație și materiale de referință pentru codarea modernă. Există, de asemenea, secțiuni pline de instrumente și resurse suplimentare și informații specifice limbajului.

88. Google Developers Web Fundamentals
O resursă cuprinzătoare pentru cele mai bune practici de dezvoltare web, direct de la Google. Perfectă atât pentru dezvoltatorii noi, cât și pentru cei care vor să-și îmbunătățească proiectele.

89. Deployments Best Practices
Înainte de a implementa un site web sau o aplicație, asigurați-vă că ați verificat aceste bune practici pentru a vă asigura că totul merge bine.

90. GitHub
GitHub are propriul ghid de stil al codului.

91. Google
Google’s code style guide.

92. Mozilla
Un ghid de stil de cod de la profesioniștii de la Mozilla.

(back to top)

Code Validation

Ați terminat cu acel site web? Nu atât de repede. Înainte de a marca acel proiect ca fiind „terminat”, folosiți aceste instrumente pentru a încheia capetele nerezolvate din cod și verificați dacă respectați standardele de accesibilitate, stil și cele mai bune practici din industrie.

93. w3.org

94. Web Design Group HTML Validator

95. Validome

96. Validator.nu

97. Code Beautify

98. JSLint

99. Free Formatter

(back to top)

Pregătit să combini aceste instrumente cu abilitățile de care ai nevoie pentru a face bani în tehnologie? Consultați pagina noastră de programe pentru a găsi cursul Skillcrush Blueprint potrivit pentru dvs. În doar trei luni puteți fi calificat pentru a începe să lucrați pe web.