Web design
Web Design¶
Design Systems¶
- Material Design
- https://spectrum.adobe.com/
Material design¶
Bootstrap Magic 4.0¶
Tools¶
- https://github.com/thedaviddias/Front-End-Design-Checklist
- https://www.remove.bg/ Remove backgrounds from images (faces)
- QR Code Generator
Assets¶
- https://www.openpeeps.com
- https://unblast.com
- https://mixkit.co/
- https://unsplash.com/
- https://artvee.com/ (Public domain hi-res art)
- Blush, Illustrations for Everyone
- Public Domain Pictures
- https://wickedbackgrounds.com/backgrounds.html
- https://animatedbackgrounds.me/
Videos¶
Pattern Library Tools¶
Fav Icon¶
Image optimization¶
- ImageOptim/gifski GIF encoder
- gifsicle lossy GIF compressor
- mozilla/mozjpeg JPEG encoder
- kenutils/PNGOUT PNG compression
- google/zopfli PNG compression
- pngquant PNG compression
- squoosh IDE for mozjpeg, ect.
Formats¶
Sprite Generation¶
SVG¶
- SVG Gradient Map Filter
- Make a wave
- Scroll Trigger (GSAP) Animations using vue
- https://app.haikei.app/
- Custom Shape Dividers
- https://csshero.org/mesher/
- create beautiful mesh gradients in CSS for great backgrounds
- https://excalidraw.com/
- SVG Editor
- SVG Path Visualizer
- Warp SVG
- SVG generator for wavy mesh-like gradients
- SVG generator for blurry background shapes
- SVG line pattern generator
- SVG generator for gradient scale patterns
- draw SVG pixel art maker
- 10 Print-inspired SVG grid pattern generator
- SVG grid pattern generator
- a collection of hand-drawn SVG scribbles and doodles
- SVG generator for fluid blurred gradient backgrounds
- SVG generator for subtle or not-so-subtle noise textures
- Unovis A modular data visualization framework for React, Angular, Svelte, and vanilla TypeScript or JavaScript
- SVG Hub
Tools¶
- Optimizer
- Filmstrip Animation for the modern web
- https://doodad.dev/dither-me-this/
- https://avif.io/
- Convert images to AVIF for free
- My Text Converter
Patterns¶
- http://www.heropatterns.com/
- https://philiprogers.com/svgpatterns/
- http://btmills.github.io/geopattern/
- http://thepatternlibrary.com/
- https://codier.io/challenge/S1TPAriI7
- https://bansal.io/pattern-css
- CSS Background Patterns
- https://doodad.dev/pattern-generator/
- SVG background texture generator
- https://doodad.dev/pattern-generator/
- https://patternico.com/
- https://www.vantajs.com/
- https://msurguy.github.io/flow-lines/?dt=0.111
Icon Sets¶
- lucide
- Simple Icons
- Linearicons
- vivid
- Hero Icons
- Evil Icons
- Feather
- Remix Icon
- SVG Pron High-quality SVG logos
- Teeny Icons
- Phosphor
- https://iconduck.com/
- Font Awesome
- Material Icons
- Ionic Icons
- Material Design Icons
- Eva Icons
- Themify Icons
- Line Awesome Icons Swap Font Awesome for modern line icons in one line of code
- Bootstrap Icons
- CSS GG
Illustrations¶
- unDraw
- Open Peeps
- open source illustration kit
- https://www.opendoodles.com/
- http://openlogos.org/
- https://2.flexiple.com/scale/all-illustrations
- https://weareskribbl.com/
- Ava Maker
- Avatar Maker
Color Scheme Generators¶
- color supplyy
- Sass Color Contrast Tools
- Trendy Palettes
- https://mycolor.space/
- https://fffuel.co/pppalette
- https://www.joshwcomeau.com/gradient-generator/
- https://www.happyhues.co/
- https://color.hailpixel.com/#DABB90,6840BF,42A136,EAE0F5
- https://webkul.github.io/coolhue/
- https://huetone.ardov.me/
- https://colormixer.web.app/02332971ff623007ff9bc9284d4403018181285555610300/Sunset
- https://enes.in/sorted-colors/
- https://randoma11y.com/
- https://huemint.com/brand-intersection/
- your friendly color palette generator
Gradient Generators¶
- joshwcomeau Gradient Generator
- https://www.joshwcomeau.com/gradient-generator/
- https://www.conic.style/
- https://doodad.dev/gradient-generator/
Box Shadow Generator¶
Typography¶
- https://maximeroudier.com/typeScaleClampGenerator/
- https://modern-fluid-typography.vercel.app/
- https://utopia.fyi/space/calculator/
- https://type-scale.com/
- https://v-fonts.com/
Ipsum / Copy¶
lorem ipsum generator - http://veggieipsum.com/ - http://www.catipsum.com/index.php - http://www.cheeseipsum.co.uk/index.php - http://saganipsum.com/?p=1 - http://www.cipsum.com/ - Bob Ross lipsum
Animation¶
Layout Libraries¶
- lucasgruwez/waffle-grid
- bulma
- Susy
- rwdgrid
- git
- flexboxgrid
- RAGrid
- https://www.bonsaicss.com/
- https://grid.layoutit.com/
Atomic Design¶
The reality is that the web is a fluid, interactive, interdependent medium. As soon as we come to terms with this fact, the notion of the page quickly erodes as a useful means to scope and create web experiences.
Design Patterns / Techniques¶
- Menu Styles
- Motion Paths – Past, Present and Future
- Link Effects - Distorted
- Link Effects - Menu
- Scroll Effects
- Header Effect