Web-suunnitteluun tai web-kehitykseen tarvittavien taitojen oppiminen on ensimmäinen askel kohti web-työskentelyä, mutta se tarkoittaa myös, että sinun on tutustuttava alan työkaluihin. Siksi kokosimme tämän luettelon 99 ilmaisesta työkalusta, joita tarvitset joko web-kehitykseen, web-suunnitteluun tai molempiin.

Jokaista tämän luettelon resurssia voi käyttää ilmaiseksi, ja ne täydentävät taitoja, joita opetamme web-suunnittelun, web-kehittäjän ja front end -kehittäjän Blueprint-ohjelmissamme (opettajan johdolla järjestettävät kurssit, joissa käydään läpi kunkin roolin perusteet).

Oppiessasi pidä tätä listaa käsillä ja ajattele sitä omana virtuaalisena työkalupakkina.

Web-suunnittelun resurssit

Tämä web-suunnittelun työkaluluettelo sisältää web-suunnittelutyökaluja aloittelijoille sekä suunnittelun resursseja, jotka palvelevat sinua koko urasi ajan.

(takaisin alkuun)

Uutiskirjelistat

1. Creative Market
Ennen kuin teet mitään muuta, mene Creative Marketin uutiskirjelistan jäseneksi. Kerran viikossa saat sähköpostiviestin, joka on täynnä 5 ilmaista ladattavaa tiedostoa, mukaan lukien kaikenlaista kuvioista ja fonteista malleihin ja teemoihin.

(takaisin alkuun)

Ohjelmistot + sovellukset

Nämä ohjelmistot ja verkkosovellukset tarjoavat vankan perustan verkkosuunnittelulle.

2. CoffeeCup Software
He tarjoavat kaikenlaisia ilmaisia sovelluksia web-suunnittelijoille, mukaan lukien HTML-editori, web-lomakkeiden rakentaja, ostoskorin suunnittelija ja monia muita.

3. InVision-sovellus
Tehokkaat prototyyppi- ja yhteistyövälineet. Saat korkeatasoisia mockuppeja ja prototyyppejä muutamassa minuutissa.

4. Pixlr
Muokkaa kuvia suoraan selaimessasi.

5. Pixlr
Muokkaa kuvia suoraan selaimessasi.

. Canva
Hämmästyttävän helppo graafisen suunnittelun ohjelmisto, jota kuka tahansa voi käyttää. Hae ja vedä -toiminto on niin yksinkertainen ja hyödyllinen!

6. Easel.ly
Mahtavat ilmaiset infografiikkamallit.

(takaisin alkuun)

Kuvat

Kuvat ovat kriittinen osa verkkosuunnittelua. Nämä valokuvaresurssit ovat avainasemassa, kun tarvitset oikeaa kuvaa juuri nyt.

7. Unsplash
Joitakin upeimpia ilmaisia valokuvia ja valtavasti erilaisia. Uusia kuvia lisätään joka päivä.

8. PicJumbo
Saa postilaatikkoosi toimitettuja ilmaisia kuvia, jotka ovat täysin ilmaisia henkilökohtaiseen ja kaupalliseen käyttöön.

9. PicJumbo
. Gratisography
Vapaita korkearesoluutioisia kuvia, joita voit käyttää henkilökohtaisissa ja kaupallisissa projekteissa. Niissä on helposti selattavat kategoriat: eläimet, luonto, esineet, oudot ja paljon muuta.

10. Compfight
Tonneittain kuvia, jotka on lisensoitu henkilökohtaiseen ja/tai kaupalliseen käyttöön, enimmäkseen Flickristä.

11. IM Free
Curated web design resources, including a ton of categorized photos, plus icons and templates.

12. Stock Up
Hae yli 9 000 kuvaa 26 eri verkkosivustolta, kaikki yhdessä paikassa.

13. Death to the Stock Photo
Liity heidän sähköpostilistalleen ja saat heidän ilmaisia kuvapakettejaan postilaatikkoosi kerran kuukaudessa.

14. Little Visuals
Jos liityt heidän listalleen, saat 7 ilmaista korkearesoluutioista valokuvaa sähköpostitse kerran viikossa.

15. New Old Stock
Saa ilmaisia, vintage-kuvia julkisista arkistoista.

16. Cupcake
Vapaita, korkearesoluutioisia kuvia Jonas Nilsson Leeltä.

17. Pexels
10 uutta ilmaista varastokuvaa joka päivä.

18. Magdeleine
1 ilmainen korkearesoluutioinen kuva päivässä.

19. SplitShire
Italialaisen valokuvaajan ilmaiset, korkealaatuiset varastokuvat.

20. ISO Republic
Laadukkaita varastokuvia, joita markkinoidaan luovan työn tekijöille.

21. Paul Jarvis
Tilaa ja saat 20 Paul Jarvisin huippukuvaa ilmaiseksi.

(takaisin alkuun)

Symbolit + kuvakkeet

Etsitkö symboleita tai kuvakkeita verkkosivuillesi? Älä etsi kauempaa.

22. Pixeden
Tonneittain ilmaisia kuvakesarjoja, mukaan lukien sääsymbolit, sosiaaliset kuvakkeet, viivakuvakkeet ja monet muut.

23. Iconmonstr
Yli 2800 rohkeasti graafista kuvaketta muutamassa eri tyylissä.

24. Captain Icon
Yli 350 ilmaista vektorikuvaketta mobiili- ja verkkosuunnitteluun.

25. Linear Icons
Ikonifontti, jossa on 170 erilaista kuvaketta valittavana.

26. Font Awesome
Symbolifontti, jonka avulla voit lisätä symboleja verkkosivustoihisi.

27. Fontello
Generoi kuvakkeellisia fonttipaketteja.

28. Flaticon
Lataa vektorikuvakkeita tai sisällytä kuvakkeet webfonteina.

29. The Noun Project
Hae substantiivi, saat ilmaisen symbolin tai kuvakkeen.

30. Endless Icons
Vapaa kuvakekirjasto.

31. Perfect Icons
Muokkaa ja optimoi sosiaalisen median kuvakkeet sivustollesi.

32. iconSweets
60 ilmaista vektorimuotoista Photoshop-kuvaketta.

33. Round Icons
Vapaat omituiset ja ammattimaiset kuvakepaketit.

(takaisin alkuun)

Fonts

Fontsit ovat niin olennainen osa suunnittelua, että ne voidaan helposti unohtaa. Katso sen sijaan täältä ja löydä fontit, jotka nostavat suunnittelusi seuraavalle tasolle.

34. Google Webfonts
Lisää fontteja verkkosivuillesi muutamalla klikkauksella.

35. Typegenius
Fonttiparigeneraattori.

36. Fonttiorava
Satoja täysin ilmaisia fontteja.

37. Beautiful Web Type
Katso kuratoitu kokoelma kauneimpia Google Webfontteja.

38. Lost Type
Uhanat maksulliset fontit.

(takaisin alkuun)

Värit

Tarvitsetko apua suunnittelusi parhaiden värien valinnassa? Nämä värityökalut ovat palveluksessasi.

39. Material UI
Galleria Material Designin ja flat designin värejä, joita voit käyttää suunnittelussasi.

40. Paletton
Aloita millä tahansa värillä ja saat paletin (jossa on 5 sävyä per väri), joka perustuu muutamaan eri värimaailmamalliin: monokromaattinen, vierekkäinen, kolmio, tetrad tai mukautettu.

41. Design Seeds
Tonneittain upeita valokuvista otettuja väripaletteja. Voit etsiä avainsanalla tai samankaltaisia värejä.

42. Adobe Color Wheel
Valitse erityyppisiä väripareja ja tallenna väripaletit.

43. Materiaalipaletti
Luo väripaletti kahden värin perusteella.

44. Flat UI Color Picker
Nimi kertoo kaiken.

45. Flat UI Colors
Ditto.

46. Bootflat
Litteä värienvalitsin.

47. Coolors
Väripalettigeneraattori.

48. Skala Color
Vapaasti ladattava värivalitsin.

49. BrandColors
Tarkista tarkat värit, joita suuret brändit käyttävät.

50. 0 – 255
Löydä etsimäsi täydellinen värivaihtoehto.

51. Värien ystävät
Selaa käyttäjien väripaletteja ja lisää omat väripalettisi yhteisöön.

52. Palette for Chrome
Generoi väripaletteja kuvien perusteella.

(takaisin alkuun)

Taustat + tekstuurit

Kuvat, fontit ja värit eivät ole suunnittelun loppu – tarvitset myös taustoja ja tekstuureja, jotka pitävät ne kaikki yhdessä. Löydä omasi näiden työkalujen avulla.

53. Pattern8
Tonneittain funkyjä, rohkeita ja kirkkaita toistuvia kuvioita, joista voit valita.

54. Repeat-X Repeat-Y
Hämmästyttäviä toistuvia kuvioita ympäri maailmaa.

55. Texture King
Kaikki haluamasi tekstuurit: grunge, ruoste, rappaus, betoni, lika ja paljon muuta.

56. Patternico
Luo omia kuvioita käyttäen Font Awesome -kuvakkeita. Mukauta taustaväriä, kankaan kokoa ja muodon läpinäkyvyyttä.

57. Subtle Patterns
Vapaasti ladattavat kuviot.

58. Lost and Taken
Vapaat tekstuurit lukuisissa eri kategorioissa, kuten pahvi, kivi, metalli, kuplat, saumaton ja paljon muuta.

59. BG Patterns
Luo saumattomia kuvioita muokattavilla väreillä, muodoilla ja muulla.

(takaisin alkuun)

UI (User Interface) Kits/Guides

Web-suunnittelu on muutakin kuin visuaalista näyttävyyttä. Se, miten sivuston käyttöliittymä ”tuntuu” käyttäjälle, on myös ratkaiseva tekijä. Nämä työkalut auttavat varmistamaan, että oma käyttöliittymäsuunnittelusi on kohdallaan.

60. 55+ Elements Free UI Kit
Puhdas, moderni UI Kit. Muista etsiä Behance-sivustolta, sillä sieltä löydät paljon hienoja resursseja muilta suunnittelijoilta!

61. Voi ei, ei taas yksi UI Kit
Yksinkertainen, litteä, avoimen lähdekoodin mobiili- ja web-käyttöliittymäpaketti, joka tulee PSD-tiedostona.

62. PSD Booster Freebies
Tonneittain loistavia Photoshop-ilmaistuotteita, mukaan lukien UI-kittejä, teemoja ja paljon muuta.

63. Material Design Guidelines
Virallinen opas Googlen Material Design -standardeihin.

(takaisin alkuun)

Web Development Resources

Sivuston suunnittelun jälkeen se pitää kehittää! Riippumatta siitä, työskenteletkö prosessin molemmilla puolilla (suunnittelet JA rakennat sivustoa) vai rakennatko sivustoa jonkun muun suunnittelun pohjalta, nämä kehittäjätyökalut auttavat sinua tekemään suunnittelusta virtuaalista todellisuutta.

(takaisin alkuun)

Domain-nimihakukoneet

Domain-nimet ovat verkkosivujen ytimessä – ne ovat suora osoite, jonka avulla käyttäjät löytävät sivustosi verkossa. Internet on kuitenkin ruuhkainen paikka, ja voi olla vaikeaa löytää juuri haluamaasi verkkotunnusta. Nämä työkalut auttavat sinua selvittämään, onko haluamaasi nimeä saatavilla, ja luomaan sellaisen, jos ensimmäinen vaihtoehtosi ei ole saatavilla.

64. Namemesh
Tehokas verkkotunnushakukone, joka auttaa sinua löytämään verkkotunnuksia, jotka ovat lyhyitä, hauskoja, yleisiä, samankaltaisia ja monia muita määritteitä.

65. Nameboy
Syötä avainsana tai kaksi ja saat luettelon saatavilla olevista verkkotunnuksista, jotka sisältävät ne.

66. Panabee
Kirjoita kahdella sanalla, mitä haluat, ja Panabee luo listan mahdollisista verkkotunnuksista.

67. Impossibility
Generoi satunnaisia verkkotunnuksia yhden sanan perusteella.

68. LeanDomainSearch
Hae verkkotunnusta avainsanan perusteella.

(takaisin alkuun)

Frameworks, Templates, Code Packs, + Themes

Joskus sinun täytyy koodata verkkosivuston jokainen osa tyhjästä – mutta joskus et. Tässä on luettelo kehyksistä, malleista, koodipaketeista ja teemoista, joita voit käyttää raskaiden töiden vähentämiseksi.

69. WP-Flex
Tyhjä, responsiivinen WordPress-teeman boilerplate, joka noudattaa WordPress Codexin virallisia parhaita käytäntöjä ja vaatimuksia.

70. Foundation
Edistynyt responsiivinen kehys, joka on yksi suosituimmista.

71. Ionic
Luo mobiilisovelluksia tutuilla ja rakastamillasi web-tekniikoilla.

72. Initializr
Luo nopeasti HTML5 Boilerplateen perustuvan mallin.

73. Materialize
Moderni, responsiivinen kehys, joka perustuu Googlen Material Design -määrittelyihin.

74. WordPress Plugin Boilerplate
Jos haluat luoda WordPress-liitännäisiä, Plugin Boilerplate on standardoitu, objektisuuntautunut lähtökohta.

75. Front-end Boilerplate
Peruslähtökohta verkkosivujen luomiseen, jotta sinun ei tarvitse luoda kaikkea joka kerta alusta.

76. HTML5 Boilerplate
Ensimmäinen ja paras. Ilmainen HTML5 boilerplate -koodi.

77. HTML5 UP
Vapaa täysin responsiivinen HTML5-malli.

78. 1 Line CSS Grid Framework
CSS-kehys, joka on vain yhden rivin mittainen!

79. 960 Grid System
Skillcrushin suosikki.

80. Starkers for WordPress
Perusmalli ensimmäisen WordPress-teemasi kehittämiseen.

81. Barebones for WordPress
Vapaa WordPress-malli kehittäjille.

82. Underscores
WordPress-malli aivan uuden teeman rakentamiseen.

83. Sage for WordPress
HTML5 boilerplateen ja Bootstrapiin perustuva WordPress-aloitusteema.

84. Whiteboard for WordPress
Kehittäjille suunnattu puhdas, perustason WordPress-teema.

85. Bootstrap
Responsiivinen HTML-, CSS- ja JS-kehys.

86. Bootswatch
Vapaita teemoja Bootstrapille.

(takaisin alkuun)

Koodaustyylioppaat

Et voi aloittaa koodausta oppimatta perustaitoja, mutta kun nämä taidot ovat hallussa, on aika oppia koodaamaan taidokkaasti. Nämä oppaat opettavat sinulle parhaat koodauskäytännöt, jotka nostavat työsi perustasoa korkeammalle.

87. Web Field Manual
Kokoelma resursseja, parhaita käytäntöjä, inspiraatiota ja vertailumateriaalia moderniin koodaukseen. Mukana on myös osioita, jotka ovat täynnä työkaluja ja lisäresursseja sekä kielikohtaista tietoa.

88. Google Developers Web Fundamentals
Kattava resurssi web-kehityksen parhaisiin käytäntöihin suoraan Googlelta. Sopii erinomaisesti sekä uusille kehittäjille että niille, jotka haluavat parantaa projektejaan.

89. Käyttöönottojen parhaat käytännöt
Kun otat verkkosivuston tai sovelluksen käyttöön, tutustu näihin parhaisiin käytäntöihin varmistaaksesi, että kaikki sujuu ongelmitta.

90. GitHub
GitHubin ikioma koodin tyyliopas.

91. Google
Googlen koodin tyyliopas.

92. Mozilla
Koodin tyyliopas Mozillan ammattilaisilta.

(takaisin alkuun)

Koodin validointi

Valmis sivusto? Ei niin nopeasti. Ennen kuin merkitset projektin ”valmiiksi”, käytä näitä työkaluja käärimään koodisi irtopäät ja tarkistamaan, täytätkö saavutettavuutta, tyyliä ja alan parhaita käytäntöjä koskevat standardit.

93. w3.org

94. Web Design Group HTML Validator

95. Validome

96. Validator.nu

97. Code Beautify

98. JSLint

99. Free Formatter

(takaisin alkuun)

Valmis yhdistämään nämä työkalut niihin taitoihin, joita tarvitset tienataksesi rahaa tekniikan alalla? Tutustu ohjelmasivuumme löytääksesi juuri sinulle sopivan Skillcrush Blueprint -kurssin. Vain kolmessa kuukaudessa voit olla pätevä aloittamaan työskentelyn verkossa.