Web Design & Web Development Resources

Welcome to our comprehensive web design and web development resources page, where innovation meets functionality! Explore a curated collection of invaluable tools, tutorials, and insights crafted to empower both seasoned professionals and aspiring enthusiasts in the dynamic world of web creation. From cutting-edge design trends to robust development frameworks, our carefully selected resources aim to elevate your skills and enhance your web projects. Stay ahead in the digital landscape with our diverse compilation, designed to fuel your creativity and proficiency in web design and development.

AI

• Character.AI
  Design color themes based on color theory with our color palette generator. Use color harmonies on the color wheel to generate beautiful color palettes.
• ChatGTP
  ChatGPT is an artificial intelligence (AI) chatbot that uses natural language processing to create humanlike conversational dialogue. The language model can respond to questions and compose various written content, including articles, social media posts, essays, code and emails.
• Figma AI
  Figma’s AI features remove the blockers in your workflow so that you can focus on the design details that matter. Go from first draft to final product, faster.
• Framer AI
  Elevate your Framer site's impact with powerful AI tools. Harness the capabilities of the best AI website builder, featuring AI Translation for seamless multilingual experiences, Text Rewrite for polished content, and AI Style to precisely define your brand tone.
• Ninja AI Chatbot
  ‍Ninja is an AI-Powered copilot for the web. Focused on writing related tasks, Ninja can learn a difficult topic, draft an email or speed up your content creation process.
• Slater
  ‍At times, adding custom code in Webflow can be a bit of a difficult process, especially to the design-oriented no-code developer. Slater is a code editor that harnesses the power of AI so you can take your projects to the next level.

Color

• Coolors
  Coolors is a super fast color palette generator powered by AI. Create the perfect palette or get inspired by thousands of beautiful premade color schemes.
• HTML Color Picker
  Searching for that perfect color has never been easier. Use the HTML color picker to browse millions of colors and color harmonies.
• Adobe Color
  Design color themes based on color theory with our color palette generator. Use color harmonies on the color wheel to generate beautiful color palettes.
• Grabient
  Helpful library of ready to use gradients provided by the good people at unfold.co.
• Colorsandfonts
  Color & typography tools for web developers & digital designers. Created by Michael Andreuzza.
• Color Picker for Chrome
  With Color Picker you can find the color reading on any point of the browser. Simply copy the code and paste it for your use. It supports most of the elements and offers much more features. This extension is highly rated on the Chrome Web Store.

Fonts

• Commercial Type Vault
  The Commercial Type Vault is a repository for 17 years of unreleased typefaces from GrayBits. Here you'll find works in progress, old custom projects, finished families that still need specimens and marketing materials, and some barely usable sketches.
• Fontfabric
  Founded in 2008 by Svet Simov in Sofia, Bulgaria, Fontfabric has the extraordinary advantage of being able to draw from more than 1,000 years of Glagolitic and Cyrillic heritage. Check out their awesome selection of free fonts!
• Fontshare
  Fontshare is a free fonts service launched by the Indian Type Foundry (ITF). It’s a growing collection of professional grade fonts that are 100% free for personal and commercial use. Their mission is to make high-quality and technically sound fonts accessible to everyone.
• FontSpace
  FontSpace boasts a library of over 130,000+ legally licensed free fonts that are perfect for design projects.
• Font Squirrel
  Font Squirrel is a self-described "free font utopia" full of hand-selected typefaces presented in an easy-to-use format.
• Google Fonts
  A robust catalog of open-source fonts and icons, that makes it easy to integrate expressive type and icons seamlessly—no matter where you are in the world.
• Pizza Typefaces
  PizzaTypefaces is a French type design studio run by Adrien Midzic and Luc Borho. PizzaTypefaces offers customs and retails typefaces, web typography solutions and consulting. The studio works with a network of satellite member friends around the world, especially when it comes to different culture or intercultural project.
• WhatFont
  The easiest way to identify fonts on web pages. With WhatFont, discovering the fonts used on websites becomes as effortless as hovering over text. Want more details? A simple click on any element reveals the styles applied, making it easier than ever to uncover the secrets behind beautiful typography.
• Wordmark
  Stop struggling with dropdown menus and discover. Wordmark is an efficient and enjoyable way to choose fonts. This helpful site displays your text with all your fonts, helping you to select, compare, and finally choose the best one for your needs.

Graphics

• MagicPattern
  Extensive toolbox of tools that allow users to create pro graphics with no effort and no prior design knowledge. This resource features a mesh gradient generator, pattern generator, SVG chart creator, and more!
• CSS Gradient
  CSS Gradient is a designstripe project that lets you create free gradient backgrounds for your website. Besides being a css gradient generator, the site is also chock-full of colorful content about gradients from technical articles to real life gradient examples like Stripe and Instagram.
• Angrytools Online Gradient Generator
  Create gradient code in RGBA, HEX, Canvas, SVG, SwiftUI and Android XML in radial, linear, elliptical and conical format. You can download gradient image as well.
• Angrytools Blob Generator
  Create unlimited random animated blob shape objects for background effect for web pages.
• Micro Digital Tools
  Impressive list of web based digital tools that work inside your browser.

Icons

• Flaticon
  Download Free Icons and Stickers for your projects. Images made by and for designers in PNG, SVG, EPS, PSD and CSS formats
• Streamline Icons
  Unlock your creative potential with 4,000 Free Open Source Icons crafted for interface design, boasting four unique styles.
• Feather
  Simply beautiful open source icons with a great set of helpful filters that make searching the library of available resources a breeze.
• Iconoir
  A high-quality selection of free icons. Your new alternative to Noun Project, Flaticon, and all Figma resources. Available in SVG, Font, React, React Native, Flutter, Figma and Framer.
• The Noun Project
  Icons are some of the most universal communication tools available, crossing language and cultural boundaries. The Noun Project's community of designers from 120+ countries is building the most diverse and extensive collection of iconography ever created.
• Iconfinder
  Helping to make beautiful designs, faster. Iconfinder features millions of graphics for your design projects. The icons are all created by independent designers.

Illustration

• Blush
  Easily create and customize stunning illustrations with collections made by artists across the globe.
• DrawKit
  Hand-drawn 2D & 3D illustrations, icons and animations. Perfect for your next project. All in one place.
• Humaaans
  Mix-&-match illustrations of people with a design library. This site allows the user to create their own remix, changing the hairdos, tops, pants and more!
• Miroodles
  An illustration pack inspired by Miró, Dalí, and Haring. You can mix and match pieces to create a ton of combinations. There are color and monochromatic versions available. Compatible with Sketch, Figma, and Adobe XD.
• Open Doodles
  Set of open-source illustrations from designer Pablo Stanley. Completely free for commercial and personal use. No need to credit, license, or anything. Great stuff here from a very talented artist.
• Open Peeps
  Another unbelievable resource from Pablo Stanley. The library works like building blocks made of vector arms, legs, and emotions. You can mix these elements to create different Peeps. You can use Open Peeps in product illustration, marketing imagery, comics, product states, user flows, personas, storyboarding, invitations for your quinceañera...or anything else not on this list.
• unDraw
  UnDraw provides a massive library of illustrations for use in any project, commercial or personal without attribution or any costs. A truly open license! Just don’t try to replicate unDraw, re-distribute the illustrations or create integrations for it.

Image Compression

• Squoosh
  Smaller images mean faster load times. Squoosh can reduce file size and maintain high quality. Open your image, inspect the differences, then save instantly. Worried about privacy? Images never leave your device since Squoosh does all the work locally.
• Kraken.io
  Kraken.io is a bulk image optimizer that works with JPEG, PNG and animated GIF files. With Kraken.io, you’ll always get the smallest file size version of the image you input. The service also allows you to export files to Dropbox or import files from Box, Dropbox or Google drive.
• Compressor.io
  Compressor.io ensures that image quality remains intact while achieving significant compression levels. This exceptional tool is renowned for its versatility in optimizing various file formats such as JPEG, PNG, GIF, and SVG with ease. With Compressor.io, users can reduce file sizes by up to 90% or even more!
• Tinify
  The online compressor empowers you to easily optimize your images. Seamlessly convert to WebP or efficiently compress extensive batches to minimize file sizes, all with ease.
• Optimizilla
  This online image optimizer uses a smart combination of the best optimization and lossy compression algorithms to shrink JPEG, GIF and PNG images to the minimum possible size while keeping the required level of quality. Upload up to 20 images. Wait for the compression to finish. Click thumbnails in the queue for quality setting. Use the slider to control the compression level and mouse/gestures to compare images.

Mockup Generators

• Clay Mockups 3D
  Figma plugin that creates mockups with 3D clay-style device models. Customize the color, camera angle, and device model for your mockups. Includes models for the iPhone, Pixel, and Macbook Pro.
• Shots.so
  Customize your backgrounds, image angle, shadows, scale, and more on this free web-based tool that makes generating pixel perfect browser mockups a breeze.
• Supply Family
  Present your design on the highest quality mockup templates available anywhere. Explore mockups in a wide variety of categories like tech, print, outdoor & more.
• Mockuptree
  Large library of totally free mockups ranging from laptops to apparel and everything in between. This excellent resource continues to expand regularly.
• Mockup.Maison
  Put you and your work into the proper spotlight. Explore 1800+ high-quality PSD and video mockups across various categories such as apparel, devices, print, and video.
• MockupBro
  Create product mockups with this free online mockup generator! Just choose a mockup, upload your design and download your image without a watermark.

Stock Images

• Pexels
  Pexels provides high quality and completely free stock photos and videos licensed under the Pexels license. All photos and videos are nicely tagged, searchable and also easy to discover through our discover pages.
• Pixabay
  Pixabay is a vibrant community of creatives, sharing royalty-free images, videos, audio and other media. All content is released by Pixabay under the Content License, which makes it safe to use without asking for permission or giving credit to the artist - even for certain commercial purposes.
• Burst
  Explore stock photography by category, all free for commercial use. Burst offers 20,000+ online images shot by a global community of photographers.
• Adobe Stock
  Unlock your creativity with high quality stock images, stock videos, stock photos, and more from Adobe. The site offers a great mix of free and paid options.
• StoryBlocks
  Bring your creative work to the next level with unlimited videos, templates, images, and audio to help you scale video creation and captivate your audience.
• New Old Stock
  The perfect vintage photo collections. Optimized, cropped, and edited for quick use. Minimum 1000px width, most at +1280px. Download is in .zip format containing jpg's. Free updates forever.
• FreeImages
  FreeImages offers a large collection of free pictures, templates, mockups & graphic resources for all of your design projects. The site also offers a great selection of royalty-free photos, premium vectors and premium clipart.

User Experience Research

• Test Plan Builder
  Details how a well-conceived UX research test plan will help streamline your research and foster understanding and engagement from all stakeholders involved.
• Usability Test: How To Prepare And Conduct One?
  Planning, preparing, and conducting a test is a complex process that requires attention. You will only see results if the tests are done properly. This article will show you how to prepare for a usability test and which techniques you can use to avoid any biases.
• From Research Goals to Usability-Testing Scenarios: A 7-Step Method
  This article shows a 7-step method that helps everyone focus on the most important elements to test first, while also prioritizing everything of concern for later research.
• Optibase
  Make data-driven decisions for your Webflow site with Optibase. Say goodbye to guessing and hello to data-driven decisions with Optibase's A/B and split testing app for Webflow. Test everything from copy to design or even entire pages and improve your conversions.
• FlowMapp
  FlowMapp is a visual platform to plan, control, and optimize the development of websites by improving UX, logic, structure, user goals, and conversion flows.
• How To Develop Goals In A Usability Test
  When performing your usability test, your research goals should be the driving force behind each question you ask. What metrics should I test? Should I go for quantitative or qualitative research? How many participants do I need?

Webflow Tutorial Videos

• Perfecting Spacing with the Four Point Grid System
  ‍Embark on a design journey with our Webflow spacing masterclass! Explore the intricacies of the four point grid system, shaping clean, organized layouts. Elevate your Webflow designs with precision and finesse.
• Adding a Scroll to Top Button
  Step-by-step Webflow tutorial on creating an elegant scroll-to-top button. Elevate your user experience and design prowess today!
• Crafting Versatile Sections for Dynamic Websites
  Learn how to effortlessly set up versatile sections—standard or emphasis, and explore customization options for a design that stands out.
• Setting Site Language
  In this deep dive, discover the secrets of ADA compliance in Webflow. From setting language codes to leveraging powerful localization features, learn how to ensure your websites are not just visually stunning but accessible to all.
• Simple, Efficient Style Page
  Discover the key strategies for optimizing your Webflow projects. Learn how to create a signature style while saving time and effort, making your web design journey smoother and more consistent.
• Creating Simple Webflow Popups
  In this Webflow tutorial, unlock the secrets to designing attention-grabbing pop-up windows that engage and convert. Follow this step-by-step guide to elevate your web design skills and captivate your audience. Whether you're a beginner or a seasoned designer, this tutorial has something for everyone.
• Introduction to Webflow Apps
  In this video provided by Webflow, you'll learn different apps available in the new Webflow Marketplace and how they can help you build you build more powerful websites faster.
• Webflow Tutorial: Simple Fade Effect on Scroll
  This Webflow tutorial will guide you through the process of creating elegant and simple fade effects on scroll using Webflow. Whether you're a seasoned Webflow user or just starting out, this tutorial is packed with valuable insights to enhance your web design skills.
• Customizing Webflow Cursor Animations
  Unlock the full potential of your Webflow projects with custom cursor displays! Dive into the art of cursor customization and learn how to captivate users, boost engagement, and create  web designs that truly shine.
• Mastering Preload for Ultra-Fast Button & Link Transitions
  ‍Supercharge your Webflow site's responsiveness (the speed kind). This tutorial uncovers the magic of Webflow's Preload feature. Learn how to harness Prefetch and Prerender for smoother button and link transitions, ensuring a seamless user experience.
• Responsive 3 Column Collection List for Webflow
  This step-by-step Webflow tutorial walks through creating a flawless responsive three-column collection item feed. Elevate your website's aesthetic and responsiveness effortlessly.
• How to Use REM Typography in Webflow
  Helpful video that breaks down the differences in web typography from PX, EM, and REM.
• Enhancing Webflow Layouts and Composition
  This video covers 9 advanced tips of layout and composition to use in your next Webflow project. There are dos and don’ts in web design that if followed will enhance the look and functionality of any site.
• Connect Webflow Form to Mailchimp
  Struggling with integrating MailChimp into your Webflow site? This tutorial will walk you through the step-by-step process to seamlessly sync your Webflow subscription forms with your MailChimp campaigns. Learn how to choose the right audience, customize your forms, extract the essential code, and implement it all into Webflow.
• Aspect Ratio Image Sizing
  Timothy Ricks shares a quick tutorial on applying Webflow's amazing new image aspect ratio setting to your upcoming projects.
• Webflow Variables Overview
  Walkthrough of the new Webflow variables feature. This tutorial will show how to use variables to enhance your next Webflow project.
• Smooth Hover Effect on Webflow Buttons
  Craft subtle and interactive button transitions using Webflow's standard tools. From adjusting button opacity to mastering the art of smooth transitions, this tutorial covers it all. Dive in to enhance your site's user experience, boost interactivity, and leave a lasting impression on your visitors.