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

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.
  • 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.

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.
  • 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
  • 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.

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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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?