Narrow Labs Transparent Logo

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.

Jump to a Section

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.
  • ChatLLM
    AI assistant for you or your team with access to all the state-of-the-art LLMs, web search and image generation.
  • 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.
  • Julius AI
    Julius uses computational AI to analyze data. Chat with your files and get expert-level insights in seconds. You can link a data source on the Files page or directly in their chat interface.
  • 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.
  • Perplexity AI
    Perplexity is a free AI-powered answer engine that provides accurate, trusted, and real-time answers to any question.
  • QuillBot
    QuillBot works alongside you to help you craft clear, polished, and professional writing — in a fraction of the time it usually takes. The app uses AI to strengthen writing and boost productivity—without sacrificing authenticity.
  • 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

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

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!
  • Compressjpeg
    The simple compression tool from Compressjpeg is free, easy to use, and doesn’t require you to download any software. There are no watermarks, no registration is required, and you can use the tool as much as you like.
  • 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.
  • Pixeden
    Pixeden is your home for inspired design resources for creatives. Since its creation in 2010, Pixeden Pixeden has offered exclusive, not to be found anywhere else, high-quality Web & Design Assets.
  • 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.
  • Kaboompics
    Kaboompics offers authentic and always consistent free stock photos - curated with creatives and professionals in mind. Behind every photo, you'll find an entire photoshoot, so you can choose what works best for you.
  • 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.