Web Design: Useful Tools for Beginners and Students

Web Design: Useful Tools for Beginners and Students

Edited: Jan 25, 2023
Fixed typos, new tools added

Web design has been a passion of mine since a young age, and I have always enjoyed using/exercising it as a way to express my ideas and creativity.

As a scientist and a fourth-year PhD student at the CoEd@UMassAmherst, I am involved in conducting research related to the field of learning sciences, such as designing and carrying out NSF-funded STEM studies, analyzing data, writing up results for publication in academic journals, and assisting principal investigators in supervising undergraduate and graduate students. In addition to this, I am occasionally asked to create websites for global scientific alliances, research labs, principal investigators, and other science-related projects. As I am always faced with budgeting constraints, I rely on free and open-source tools on the internet to accomplish my website development tasks. Here, I share some tools and resources that I find helpful in putting websites together, such as icon sets, fonts, stock media, colors and gradient mixers, and asset management apps. Most of these are free and open-source, however, there are a few paid resources with a label indication.

If you are a web designer, you may likely be using some of the tools mentioned in this article already. In case you are new to web designing, I hope you find this article helpful.


🎨 Color Tools

  • CSSGradient.io

    Allows you to quickly find perfect gradient backgrounds (linear and radial), and copy CSS - so you can apply your colors to any web element. You can add as many gradient steps as you like.
    Free; Web; No user account needed.

  • Gradient Buttons
    As the name suggests, this tool allows you to apply various gradient effects to buttons on your web projects. Quickly select a button you desire, and copy its CSS for your usage.
    Free; Web; No user account needed.

    Cool Backgrounds

  • Cool Backgrounds
    Does so much more than just instantly generating cool backgrounds. Lets you download photo negatives.
    Free; Web; No user account needed; My fav ❤️.


ℹ️ Icon Sets

  • IconBrew
    Free and open-source icon packs for all your needs. With 280+ icons and new ones being added weekly.
    Free; Web; May need a user account to download.

  • Letters from Sweden
    They make some of my favorite fonts.
    Paid; Web; May need a user account to download.

  • Pangram Pangram Foundry
    PPF fonts are amazing. But I feel their fees are a bit too demanding when compared to other font foundries
    Paid; Web; May need a user account to download.

  • Emoji.gg
    Platform for sharing and exploring thousands of user-submitted emojis for use on Discord, Slack, Twitch and more.
    Free; Web; No user account needed.


🌠 Illustrations

  • Haikei - Blob Maker
    Generate top-quality SVGs for websites, social media, blog posts, desktop and mobile wallpapers, posters, and more.
    Free; Web; No user account needed; My fav ❤️.

  • Dorik Illustrations
    Over 200 royalty-free illustrations for the creators of Dorik website builder.
    Free; Web; No user account needed; My fav ❤️.


🔠 Fonts

  • Fontesk
    A curated font library of the best high-quality free fonts to download for commercial and personal use.
    Free; Web; No user account needed; My fav ❤️.

  • Fontshare
    Truly an amazing font service that is accessible, and 100% free for personal and commercial use.
    Free; Web; No user account needed; My fav ❤️.

  • Google Fonts
    From the designers of the evergreen Roboto font, a web fonts service hosted by Google.
    Free; Web; No user account needed.

  • Glyphy
    Copy & paste fancy fonts + cool symbols ☞✺✐™
    Free; Web; No user account needed.


🌆 Stock Media (free stock photos, video and audio)

  • Unsplash
    Photos for everyone. Beautiful, free images and photos that you can download and use for any project.
    Free; Web; No user account needed; My fav ❤️.

  • Pixabay
    I call this Unsplash 2.0.
    Free images + videos + vectors + sound effects.
    Free; Web; No user account needed; My fav ❤️.

  • Pexels
    Another free stock repository with amazing finds.
    Free; Web; No user account needed; My fav ❤️.

  • Audio Library
    Tons of royalty-free audio for your projects.
    Free; Web; No user account needed.

  • Unminus
    Another source for curated and free audio.
    Free; Web; No user account needed.

  • Freesound
    Large database of Creative Commons Licensed sound repository. Includes everyday sound effects, percussions, synth, and more.
    Free; Web; May need a user account to download; My fav ❤️.

  • Mixkit
    Tons of free stock videos for any purpose. Most clips are available in 4k 60fps.
    Free; Web; No user account needed.

  • StockAI
    Free AI-generated stock photos. This is stunning and gaining momentum real fast. They will likely monetize the platform soon.
    Free; Web; May need a user account to download.


💻 Standalone Apps

Eagle Cool

  • Eagle.cool
    A better way to collect, search and organize your design files in a logical way and all in one place. Eagle Cool is indeed a weird name, I know. But it remains my most used app for organizing site assets.
    Paid, one-time 30 USD; Apple Silicon and Windows; User account needed for sync; My fav ❤️.

  • Affinity Photo
    Award-winning photo editing software. Replaced Adobe CC; costs a fraction of the cost. Often on sale.
    Paid, one-time 70 USD; Apple Silicon and Windows; User account needed for sync; My fav ❤️.

  • Codepoint
    Helps you to find the exact characters you need and supports you in discovering new glyphs. Can't believe this piece of software is free.
    Free; Apple Silicon + Apple Intel only; No user account needed; My fav ❤️.

    Color Picker

  • Color Picker
    A handy tool to find hex, hsl and other values of colors.
    Free; Apple Silicon + Apple Intel only; No user account needed; My fav ❤️.


⚜️ Design Inspiration

  • Savee
    Browse and save curated inspiration from designers all around the world. A tagline of the platform says "Made by immigrants in America".
    Freemium; Web; Needs user account.

  • Pinspiry
    Place for creative ideas and inspiration in graphics and web design.
    Free; Web; No user account needed.


ℹ️ Others

  • Accessibility Statement Generator
    Allows you to quickly and easily create an accessibility statement for your website. An accessibility statement ensures that your website is compliant with the latest accessibility standards and regulations, thus making it more accessible for all users. See WCAG 2.1 for more.
    Free; Web; No user account needed.

Did you find this article valuable?

Support Sanskriti Blog by becoming a sponsor. Any amount is appreciated!