31 gratis resources om jouw webdesign proces te verbeteren

Door Jurrien Meyrahn
Bijgewerkt op 31 oktober 2024
0

Als ervaren ontwerper bouw je een flinke lijst met bladwijzers op aan links van gratis designresources op. Met deze lijst laat ik een greep uit deze lijst zien, zodat jij ook kunt profiteren van deze bronnen. Of je nou een ervaren ontwerper bent of aan marketing en communicatie doet, ik weet zeker dat er iets nuttigs voor je bij zit!

Artikelen

1. NN Group

Onze favoriete bron voor UX design onderzoek en inzichten is de NN group website. De Nielsen Norman group is het hoogst aangeschreven onderzoeksconcern op het gebied van mens-computer interactie. Op de website worden veel inzichten gratis gepubliceerd. Daarnaast is de NN group vaak zeer vooruitstrevend en zijn de inzichten gebaseerd op echt onderzoek.

https://www.nngroup.com/

2. Adobe XD Ideas

Adobe heeft een UI design blog gestart wegens hun web design software genaamd ‘Adobe XD’. Op dit blog kun je veel waardevolle informatie vinden over UI en UX design.

https://xd.adobe.com/ideas/

3. Smashing magazine

Dit online magazine is al lang actief. Naast dat er technische web development onderwerpen worden besproken, zijn er ook veel artikelen over web design te vinden. Omdat de focus ook op de techniek ligt, is dit een zeer interessante resource voor front-end developers en designers met een technische aanleg.

https://www.smashingmagazine.com/

4. UX mastery

De UX gemeenschap UX Mastery heeft veel artikelen geplaatst. Zo te zien is het sinds februari 2024 niet meer geupdate, maar de informatie die je er kunt vinden is nog wel heel erg relevant. De artikelen zijn diepgaand en vaak wat meer overkoepelend dan gedetailleerd, wat voor ervaren ontwerpers heel interessant is.

https://uxmastery.com/archives/

5. Justinmind blog

Justinmind is een web prototyping tool, maar de ontwikkelaars hebben ook een blog over design onderwerpen. De artikelen op dit blog zijn makkelijk te lezen en gaan meer over de basis van UX design.

https://www.justinmind.com/blog/

(Stock)fotografie

6. Unsplash

Unsplash is de grootste aanbieder van gratis stockfotografie op het internet. De afbeeldingen die je hier kunt vinden zijn zeer divers en professioneel gemaakt. Let wel op dat er ook premium foto’s tussen staan - je kunt dus niet alles gratis downloaden. Je kunt de afbeeldingen gebruiken voor commerciële doeleinden.

https://unsplash.com/

7. Pexels

Een alternatief voor Unsplash is Pexels, een andere grote aanbieder van gratis stockfotografie. Ook deze afbeeldingen kun je commercieel gebruiken. Het aanbod is wat kleiner, maar de kwaliteit even hoog.

https://www.pexels.com/nl-nl/

8. Wikimedia commons

Wikimedia commons is onderdeel van de overkoepelende organisatie Wikimedia, die ook Wikipedia aanbieden. Op deze site kun je gigantisch veel afbeeldingen, illustraties, audio en video vinden. Veel van deze media is te gebruiken voor commercieel gebruik. Om te controleren wat je wel of niet kunt gebruiken is het belangrijk dat je de licentie van het mediaitem controleerd.

https://commons.wikimedia.org/wiki/Main_Page

9. Humaans

Een leuke bibliotheek aan illustraties van mensen is Humaans, gemaakt door Pablo Stanley. De illustraties hebben een eigenaardige corporate stijl die voor sommige designprojecten en huisstijlen relevant kan zijn. Je kunt de afbeeldingen toepassen en aanpassen, ook voor commercieel gebruik.

https://www.humaaans.com/

10.Illustraties van Lukasz Adam

Een andere bron van illustraties is de site van Lukasz Adam. Hij maakt gratis illustraties die je voor commercieel gebruik kan toepassen. Net zoals de Humaans kan dit mogelijk passen voor je designpoject.

https://lukaszadam.com/illustrations

11. Iconmonstr

Op deze site vind je en bibliotheek van iconen die je commercieel mag toepassen. De iconen zijn simpel en stijlvol.

https://iconmonstr.com/

Lettertypes en iconen

12. Google Fonts/Bunny Fonts

Een prachtige resource voor nuttige lettertypes is Google Fonts. Deze lettertypes kun je gebruiken in je design, waarna developers het gratis kunnen insluiten in hun website. Let wel op dat er mogelijk cookie trackers bij komen. Bunny fonts biedt dezelfde fonts aan die gebruikers niet tracked, wat voor gebruikers in de EU voordelig is. De zoekmachine van Google Fonts is wel uitgebreider. Dus ik raad je aan om via Google Fonts ze uit te kizen, en online aan te bieden via Bunny Fonts.

https://fonts.google.com/

https://fonts.bunny.net/

13. Befonts

Befonts biedt gratis letterypes aan, ook voor commercieel gebruik. De mooie voorbeelden laten je gemakkelijk het juiste lettertype kiezen.

https://befonts.com/

14. Open Foundry

Een prachtige resource voor fonts is de Open Foundry, maakt gebruik van Google Fonts om de lettertypes prachtig te presenteren en je te laten inspireren. Ik heb vaker hier lettertypes van gekozen omdat het perfect bij de design brief hoorde!

https://open-foundry.com/

15. Dafont

Dafont is een oude bekende onder de designers die al langer actief zijn. Op deze site staan zeer veel diverse decoratieve lettertypes die perfect zijn voor koppen, titels en logo’s. Controleer voor je een lettertype gebruikt altijd de licentie of je deze commercieel mag gebruiken. Je kunt op deze site ook gemakkelijk filteren op licentie, waardoor je snel mooie gratis lettertypes kunt vinden.

https://www.dafont.com/

16. Font Awesome

Iedereen die heeft geprobeerd een iconenset te illustreren weet hoe moeilijk dit is en hoeveel tijd het kost. Font Awesome biedt een gratis bibliotheek van iconen aan die je als lettertype kunt gebruiken. Je kunt bijvoorbeeld ‘envelope’ typen, waarna de tekst veranderd in een envelopje. Ongelofelijk handig dus! De iconen zijn prachtig geillustreerd en werken ook heel goed in kleine formaten. Er is een gratis en een premium variant. Wij vinden dat de premium variant het zeer waard is, het aantal iconen die inbegrepen zijn is gigantisch.

https://fontawesome.com/

Mockups

17. Mckups

Hier vind je gratis mockups voor geprinte producten, waar je je designs op kunt zetten.

https://mckups.com/

18. Alienvalley

Een alternatief voor mckups is alienvalley. Allienvalley biedt zowel gratis als premium mockups aan.

https://alienvalley.com/freebies/

19. fockups

Deze site is gemaakt door de Nederlandse Wytze Hoogslag. Met deze mockups kun je controleren hoe je design er uit ziet in alledaagse situaties, omdat de wereld niet perfect is.

https://fockups.com/

20. Smart mockups

Voor digitale mockups kun je bij Smart mockups terecht. Enkele mockups zijn gratis en voor commercieel gebruik, maar de meeste zijn premium.

https://smartmockups.com

Audiovisueel

21. Mixkit

Op Mixkit kun je stock video’s en audio vinden die je in je commerciele projecten kunt gebruiken. Het aanbod is gigantisch!

https://mixkit.co/

22. Freesound

Op Freesound je kun je gratis geluiden vinden voor je video of podcast productie. Het kwaliteit van de audio loopt veel uit een, maar ik heb altijd veel succes gehad met deze audiobibliotheek. Controleer de licentie van het gekozen audiobestand voordat je het in je project toepast.

https://freesound.org/

23. Free music archive

Op de free music archive kun je gratis muziek vinden voor je creatieve project. Veel van de muziek is ook vrij voor commercieel gebruik, maar controleer altijd de licentie van het gekozen muziekbestand.

https://freemusicarchive.org/home

Toegankelijkheid

24. This is WCAG

Een makkelijkere, meer leesbare versie van de WCAG toegankelijkheidsspecificatie. Ideaal om nog beter deze richtlijnen toe te passen!

https://thisiswcag.com/

25. Who can Use

Een hele handige tool waarmee je contrast van elementen kunt controleren. De tool helpt je ook om te herkennen waarom je tekst wel of niet leesbaar is.

https://www.whocanuse.com/

26. Accessible color palette builder

Deze tool helpt je om een kleurenpalet te maken die toegankelijk is. Je kunt makkelijk zien welke kleur tekst je kunt gebruiken op welke kleur achtergrond.

https://toolness.github.io/accessible-color-matrix/

27. Coblis

Met de color blindness simulator kun je je design bekijken door de ogen van iemand die een vorm van kleurenblindheid heeft. Zo kun je controleren of je webdesign toegankelijk is voor mensen die kleurenblind zijn!

https://www.color-blindness.com/coblis-color-blindness-simulator/

Overig

28. Template.net

Op template.net vind je veel verschillende templates. Er zijn templates voor brieven, CV’s, fylers, posters en nog veel meer. Zo kun je snel starten met je creatieve idee!

https://www.template.net/

29. Freebeesbug

Dit is een verzameling van allemaal verschillende freebies voor digitale projecten. Jek unt hier altijd kijken voor inspiratie, mockups, figma templats, photoshop bestanden en gratis lettertypes.

https://freebiesbug.com/

30. Unblast

Een alternatief voor freebeesbug: deze site bevat honderden gratis templates en mockups.

https://unblast.com/

31. Rawpixel

Rawpixel is net zoals freebeesbug en unblast een verzameling van verschillende creatieve resources. Rawpixel biedt zowel premium als gratis bestanden aan.

https://www.rawpixel.com/free-images

Ik hoop dat je één of meerdere bronnen hebt gevonden die je nog niet tussen je bladwijzers had staan. Hopelijk kun je zo je (web)design project nog beter en sneller uitvoeren!

Hulp nodig met jouw webdesign?

De designers van Emble staan klaar om je te assisteren bij het ontwerpen van jouw perfecte website. Laat je e-mailadres achter en we mailen je terug!

Deel dit artikel

Meer inzichten over UX / webdesign