Skip to content

Latest commit

 

History

History
127 lines (64 loc) · 8.22 KB

WebDesignResources.md

File metadata and controls

127 lines (64 loc) · 8.22 KB
Raw

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.

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

Images & Video

  • AllTheFreeStock: A central place to search for free stock photos and videos.

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

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

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!

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, Devicon, 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 CSS backgrounds.

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

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.