Back

Resources for Web Design

General Web Design

• 7 Rules for Creating Gorgeous UI (Part 1): Part 1 of a two-part series made for anyone with a burning desire to design good-looking UI in a pinch! Created by Erik D. Kennedy, a developer-turned-UX Designer, he is chock full of experience and his down-to-earth personality brings a sense of liveliness and humour to what he teaches.

• 7 Rules for Creating Gorgeous UI (Part 2): Part 2 of a two-part series.

• Can I use…: Browser support tables for modern web technologies.

• Can I Email: Based on Can I Use but for Email support.

• DesignAcademy.io: Laura Elizabeth made this fantastic, easy-to-understand design fundamentals course for developers to learn within 6 weeks, after spending years struggling to grasp and implement design principles. She offers both a paid course as well as free resources in the form of blog posts and snippets of her course.

• devdocs: DevDocs combines multiple API documentations for a fast, organized and searchable interface for developers.

• Frontend Mentor: A platform where you can practice your web design skills using HTML, CSS & JS and design modern websites.

• Inside Design: Invision, one of the most prolific and wildly successful design company in the world – whose products/workflow are used by companies like Airbnb, Amazon, HBO, Netflix, Slack, Starbucks and Uber – offers free design resources and perspectives in their blog, Inside Design. They are also hiring for those interested.

• Learn UI Design Blog: An interesting blog with Erik Kennedy’s down-to-earth personality and years of experience help the reader really understand what makes good UI/UX from a practical perspective.

• Material Design: A collection of guidelines, resources, and tools for web design, all available for free. Created by Google.

• Sean Halpin: A professional web designer/developer’s award winning portfolio website.

• Tailwind CSS: Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

• Tailblocks: Ready-to-use Tailwind CSS blocks. This project provides multiple templates built using Tailwind CSS that you can use in your own projects.

• Atomic Design book: You can order or read the book online. …creating and maintaining robust design systems, higher quality, more consistent UIs. This book introduces a methodology for thinking of our UIs as thoughtful hierarchies, discusses the qualities of effective pattern libraries, and showcases techniques to transform your team’s design and development workflow.

• FontPair: Font Pair is a typography website with a variety of font pairing suggestions.

• Devchallenges: A platform where you can practice your web design skills using HTML, CSS & Javascript as an individual or as a team, submitting your solutions and give feedback.

• Web Design for Web Developers: Build Beautiful Websites!: A free course on web design by Jonas Schmedtmann

• WAVE Web Accessibility Evaluation Tool: WAVE® is a suite of evaluation tools that helps authors make their web content more accessible to individuals with disabilities. WAVE can identify many accessibility and Web Content Accessibility Guideline errors, but also facilitates human evaluation of web content.

• Funkify: Funkify is an extension for Chrome that helps you experience the web and interfaces through the eyes of extreme users with different abilities and disabilities.

• TshirtDesigns: An apparel and tshirt design mockup generator plus a marketplace of t-shirt designs.

Images & Video

• Coverr: Free stock videos to add to your websites.

• Gratisography: Another source of free stock photos.

• Pexels: A source of free stock photos and videos.

• Pixabay: Free stock videos.

• PlaceIMG: Gives you a URL that generates a new random placeholder image every time.

• Public Domain Vectors: Free vector images in the public domain, searchable by category or keyword, includes svg generator

• StickPNG: An excellent source for PNG images if you need something that is re-sizable and can be set to transparent.

• TinyPNG: An online tool that can compress PNGs and JPGs to reduce filesize. Also available as Photoshop and Wordpress Plugin.

• unDraw: Free vector illustrations that can be downloaded in SVG or PNG format.

• Unsplash: Free stock photos, all in JPEG format.

• Videvo: Free stock videos.

• Image Colorizer: Picture Colorizer that adds color to your black and white pictures.

• NASA Image and Video Library: Nasa released a huge free library of their high-resolution photos, videos and sounds.

• Pxfuel: Royalty free stock photos free & unlimited download

• Stocksy: Relentlessly Creative Stock Photos and Videos.

• Openphoto: Curated Open source photos.

• Rawpixel: Free Stock Images, Vectors & PSD Mockups.

• Stocksnap.io: Beautiful free stock photos.

• Isorepublic: Thousands of Free High-Resolution CC0 Photos and Videos.

• Librestock: Thousands of Free High-Resolution CC0 Photos and Videos.

• Visualhunt: Free high quality stock photos.

• Reshot:

  Uniquely Free Photos - Find tons of handpicked, non-stocky images.

• Negativespace:

  Beautiful, High-Resolution Free Stock Photos

• Altphotos:

  Beautiful high quality free photos to visually empower their projects.

• Freephotos:

  Free beautiful stock photos with Creative Commons (CC) licensing

• Stockio:

  Free Photos, Vectors, Icons, Fonts and Videos for personal and commercial use

• Imageonline.com:

  Free circular crop tool at link. Must use JPEG files for image editing, plus many more free tools!

• Optimizeimages: Optimize images online with this free tool, compress & convert images in PNG, JPEG, SVG, AVIF, WebP and GIF formats, and even get picture HTML tags for correct implementation.

Color Palettes

• Adobe Color Wheel: A color wheel to help you generate and save color schemes.

• Color Hunt: A color schemes website that allows you to search the themes including its HEX code.

• Color Tool: A tool associated with Google’s Material Design (see above) for creating a color palette.

• Colormind: A color scheme generator that uses deep learning. It can learn color styles from photographs, movies, and popular art.

• ColorZilla CSS Gradient Generator: A CSS Gradient Editor that creates a cross-browser CSS3 gradients.

• Coolors.co: An excellent resource for working out a simple matching color palette for web pages. The site generates matching color schemes along with their hex and RGB values.

• CSS Color Names: A simple chart that lists all of the color names that can be used in CSS.

• Flat UI Colors: A simple website that allows you to choose from different color palettes.

• Paletton: A color palette generator that allows for much more fine-tuning than most other generators.

• Picular: A Pinterest-style website that allows you to search for any color either through text or HEX color value. It’s like, “Google, but for colors.”

• Bootstrap Colors Ever wanted the exact hex codes for Bootstrap’s “primary”, “warning”, “danger”, etc. classes? Here they are!

• ColorSpace: A color palette generator. Enter a color code and generate a variety of color palettes and gradients.

• CSS Gradient: A free tool that lets you create a gradient background for websites.

• ColorHub: A color palette finder with lots of unique features.

• pppalette: A friendly color palette generator.

Icons & Graphics

• CONVERTICO: A free online PNG to ICO file converter.

• CSS3 Patterns Gallery: a gallery of background patterns and their CSS code.

• Flaticon: A database of free icons available in PNG, SVG, EPS, PSD and BASE 64 formats.

• Font Awesome: A large set of both free and not-free icons. You can either download the code or use their CDN links.

• Font Mfizz: Font Mfizz provides scalable vector icons representing programming languages, operating systems, software engineering, and technology. It was designed as an extension to Font Awesome, it is an iconic font designed for technology and software geeks.

• Iconfinder: A listing of free and not-free web icons.

• Icongram: A fantastic meta-repository allowing anybody to get “6836 icons on the fly”, pooling from other well-known logo platforms like Font Awesome, Material Design, Clarity, Octicons and much more.

• Ionic: A collection of simple web icons. There is a free set of 223 icons as well as a larger set you can pay for.

• Linea: A collection of simple, free icons.

• Material Icons: Google’s open source icon collection.

• Octicons: GitHub’s free set of icons.

• Particles.js: An app for creating dynamic JS backgrounds.

• tsParticles: A JavaScript library for creating dynamic background with particles, fireworks, confetti, and other effects…

• Note that as of the most recent version of Bootstrap, they no longer support their own glyphicons.

• World Vector Logo: A large collection of free SVG logos for a variety of brands.

• Blobmaker: A free generative design tool to help you quickly create random, unique, organic-looking SVG shapes.

• GetWaves: Create SVG waves to use in your websites.

• Favicon Generator: Generate multiple favicons for multiple platforms.

• Avataars: Mix and Match avatar illustrations.

• CoolBackgrounds: Cool Backgrounds is a collection of tools to create compelling, colorful images for blogs, social media, and websites.

• CSS Matic: The ultimate CSS tools for web designers. Tools to create gradient generator, border radius, noise texture, and box shadow.

• Trianglify.io: Tool for generating low poly triangle patterns that can be used as wallpapers and website assets.

• Icons8: Free icons, photos, and other. Ideal for finding icons with consistent and editable style.

• 3dicons: A collection of over 5000 3D icons and characters with 4k resolution, each icon delivered in 5 color palettes, front and perspective views.

• iconshock: 2 Million+ professional icons library. Over 400+ icon sets in more than 30 styles, including Flat, Material, iOS, Glyph, Colorful, Window 10, Revamped Office, 3D Realistic, Isometric, & more! Most of the icons are vector and pixel perfect conveniently grouped in sets by industries, and our customs designs are even better :)

• Favicon InBrowser.App: A modern pure-frontend favicon generator. Support SVG, maskable and dark mode. Optimize PNG and SVG outputs.

Page and Button Effects, Hover effects

• Frosted Glass Effect: How to make the frosted glass effect on web pages using CSS.

• Shiny glass button hover effects (and YouTube link): Two links to show how to make a nice glass button hover effect. The second link is a video.

• Shiny Button Hover Effects: A different Shiny glass looking hover effect for buttons instructional video.

• Button hover diagonal shine effect: This video shows you how to create a diagonal glass shimmer effect on buttons when hovering.

Illustrations

• Stories By Freepik: Get Customised illustrations.

• Freepik: Free vectors and stock images.

• Ouch: Illustrations by Icons8 Community.

• Open Doddles: A library of sketchy illustrations of people free for personal and commercial use.

• Humaaans: Mix-&-match illustrations of people with a design library.

• UX Design: A really nice blog that provides curated stories on UX, Visual & Product Design.

• Illlustrations: Awesome free illustrations made by vijayverma on a 100 day challenge.

• SuperDevResources: 16 Free 3D Illustration Sets for Web and App Design.

• Illustrations-figma: Figma plugin with 5000 vector illustrations for figma, in more than 70 design styles.

• Vector Illustrations: Search over 5000 vector illustrations and more than 70 design styles, with an integrated editor to adjust the design at you wish.