Skip to content

Latest commit

 

History

History
97 lines (49 loc) · 6.78 KB

WebDesignResources.md

File metadata and controls

97 lines (49 loc) · 6.78 KB
Raw

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.

  • CSS diner: A fun in-browser game to help you learn and practice CSS selectors.

  • CSS Zen Garden: A demonstration of what can be accomplished through CSS-based design. Style sheets contributed by graphic designers from around the world are used to change the visual presentation of a single HTML file, producing hundreds of different designs.

  • CSS-Tricks: One of the best sites to learn CSS and responsive design.

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

  • Flexbox Defense: Tower Defense with a twist: all towers must be positioned with CSS flexbox.

  • Flexbox Froggy: A fun in-browser game to help teach the powerful, complex CSS flexbox layout method.

  • Grid Garden: A fun in-browser game to help teach the powerful, complex CSS grid layout method.

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

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.

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

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

Icons & Graphics

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