design-resources.md

💅 Design resources

Hi, here is a list of design and non-design tools that I use 😀. Most of the tools are free.

All sections

• Favorites
• Inspiration
• CSS
• UX
• Generators
• Illustrations
• Patterns
• Fonts
• Free icons
• Free Mockups
• Photobanks
• PNG assets
• Textures
• Optimalization
• Converters
• Compression
• Validation and compatibility
• Checkers
• Editors
• Documentation
• Accessibility
• Snippet tools
• Colors and design
• Figma
• Responsive tools
• Wireframes
• SEO
• Speed tests
• Articles
• Cheatsheets
• Checklists
• Nice websites
• Others

Favorites

• 🔥 Free screenshot mockup generator - https://shots.so/
• 🔥 Recraft AI - https://app.recraft.ai
• 🔥 Vectorize anything - https://vectorizer.ai/
• 🔥 Fast compression for images - https://tinypng.com/
• 🔥 Mobbin - screens of real apps - https://mobbin.com/
• 🔥 UX archive - http://www.uxarchive.com
• 🔥 CSS less absolute position POST - https://ishadeed.com/article/less-absolute-positioning-modern-css/
• 🔥 UI verse - lot of HTML & CSS only assets for UI - https://uiverse.io/
• Color combinations with advanced tools - https://pigment.shapefactory.co/
• Design tips a tricks from czech designer - https://www.designui.cz/lekce
• Lorem Ipsum pro obrázky - https://picsum.photos/
• Stackoverflow in app - https://usedevbook.com/

Inspiration

• UI kits shop, dobrý na inspiraci - https://uiplace.com/
• Free UI kits - https://dopeui.co
• Free UI Kits - https://www.uistore.design/
• Dribbble - https://dribbble.com/
• UI Garage - https://uigarage.net/
• Land Book - https://land-book.com/
• Awwwards - https://www.awwwards.com
• Codrops - https://tympanus.net/codrops/
• Httpster - https://httpster.net
• Behance - https://www.behance.net/
• Webframe - https://webframe.xyz/
• Inspirace na footery - https://i.imgur.com/vtJN0bc.png
• Krásné designy - https://around.createx.studio
• Screenshoty appek - https://scrnshts.club/
• Site inspire (extraordinary layouty) - https://www.siteinspire.com/
• Mobbin (screenshoty appek) - https://mobbin.design/
• Rowlab (screenshoty appek) - https://rowlab.xyz/mobile-patterns
• Saas Pages (Landing pages with a focus on copywriting and design) - https://saaspages.xyz/
• Design inspiration - https://designvault.io/
• SiteInspire - https://www.siteinspire.com/
• UX screens - https://www.theappfuel.com/
• Component Gallery - https://component.gallery/
• Pollen (foundation of your next design system) - https://www.pollen.style/
• Onboarding screeny - https://app.onboardingshuffle.space/
• Interface elementrs inspiration - https://interface-index.com/
• Landing pages inspiration - https://www.upshift.supply/
• Godlike web design inspiration - https://godly.website/
• Nice web designs - https://itmeo.com/
• Instagram, Twitter, Facebook templaty a další - https://baseline.is/templates/
• Httpster - https://httpster.net
• Logo Book inspiration - http://www.logobook.com
• Bento moderní gridy - https://bentogrids.com/

CSS

• SVG Oddělovače sekcí Shape divider - https://www.shapedivider.app/
• SVG Oddělovače sekcí Get waves - https://getwaves.io/
• SVG Waves - https://svgwave.in/
• SVG waves backgrounds - https://wickedbackgrounds.com
• SVG dividery sekcí (většina premium, ale dá se zkopčit z devtools) - https://shapedividers.com/
• SVG (dividery, dekorace) - https://www.snoweb-svg.com
• SVG doodles (particles a assety) - https://svgdoodles.com/
• Css library - celkem art věci - https://css-doodle.com
• Pure SVG preloadery - https://codepen.io/nikhil8krishnan/pen/rVoXJa
• CSS loadery - https://whirl.netlify.app/
• Animated Canvas Backgrounds - https://www.vantajs.com
• CSS Buttons - https://cssbuttons.io/
• Clamp font size generator - https://maximeroudier.com/typeScaleClampGenerator/
• Transition CSS (kolekce super transitionů) - https://www.transition.style
• Particles - sparkles and confetti - https://party.js.org/
• Hezké černobílé clean layouty - https://uisual.com/
• Box shadows - https://getcssscan.com/css-box-shadow-examples
• Box shadows examply - https://box-shadow.art/
• Buttony - https://getcssscan.com/css-buttons-examples
• Single Div CSS věci - https://a.singlediv.com/
• generátory, dokumentace CSS a další - https://www.cssportal.com
• CSS ikony - https://css.gg/app

UX

• UX archiv boardy (jak jsou již řešené určité věci screen po screenu) - http://www.uxarchive.com
• Friendly UX Hlášky pro uživatele - https://www.speakhuman.today/
• Microcopy - short text for your website - https://www.microcopy.me/
• Flomo - UX screeny - https://www.flomo.design

Generators

• Text Content Generator - http://www.lipsum.com

• Favicon Generator - http://tools.dynamicdrive.com/favicon

• Data Generator - https://mockaroo.com/

• Placeholder images - https://lorem.space/

• Mobile Mockup Generator - https://mockuphone.com

• Smart Mockups - https://smartmockups.com/cs

• Logo Generator - https://www.logaster.com

• Logo generator - https://brandmark.io/

• UUID Generator - https://www.uuidgenerator.net/

• Hash Generator - https://passwordsgenerator.net/sha256-hash-generator/

• Ultimate Code Generator - https://webcode.tools/

• Css Layout - spousta nejpoužívanějších komponent v čistém CSS - https://csslayout.io/patterns

• Css grid layout generator - https://layout.bradwoods.io/

• Animace generátor - https://animista.net

• Glassmorphism generator - https://glassmorphism.com/

• Glassmorphism generator - https://ui.glass/generator/

• Advanced gradient editor - https://gra.dient.art/

• Cubic Bezier generator - https://cubic-bezier.com

• Smooth Shadow generator (super) - https://shadows.brumm.af/

• Smooth shadows - https://www.joshwcomeau.com/shadow-palette/

• Box shadow generator - https://box-shadow.dev/

• Mesh gradient generator (top) - https://meshy.uxie.io

• 3D Transformer - https://www.3dtransformer.com/

• Compare two images - https://compareto.dev/

• Avatar generator (awesome) - https://avatars.dicebear.com/

• Avatar generator - https://personas.draftbit.com/

• Logo ipsum (placeholdery pro loga) - https://logoipsum.com/

• SVG ikony - https://glyphter.com/

• SVG geometrical shapes - https://tool.graphics/shapes

• Pure CSS ikony - https://css.gg/

• Blob generator - https://squircley.app/

• Blob generator - https://www.softr.io/tools/svg-shape-generator

• Advanced blob generator - https://www.blobbb.fun/

• Animated blob generator - https://blobs.xom9ik.com/

• Ticket generator - https://coupon.codelabo.cn/

• SVG background patterns - epickýýýý - https://tabbied.com/

• SVG background pattern generator - ultra epic - https://patternpad.com/editor.html

• SVG background pattern generator - skvělý -https://bgjar.com/

• SVG background pattern generator - https://www.outpan.com/app/9aaaf27303/svg-gradient-wave-generator

• Customizable SVG patterns - https://pattern.monster/

• SVG polygon generator (code) - https://codepen.io/winkerVSbecks/full/wrZQQm/

• SVG různý tvary (code) - https://www.globs.design/

• SVG Chart (grafy) generator - https://chartgen.frederickallen.co/

• Flow lines - SVG linky - https://msurguy.github.io/flow-lines/

• Unique SVG shape, background, and pattern generator - https://app.haikei.app/

• Stock photo generator - diy stock photo - https://icons8.com/creator

• Filter + Blend generator - přelínání obrázků - https://ilyashubin.github.io/FilterBlend/

• AI Larger images - https://letsenhance.io

• AI 4x larger images - https://www.upscale.media/

• AI Image upscaler - https://zyro.com/tools/image-upscaler

• Remove Background - https://www.remove.bg/

• Remove Background - https://baseline.is/tools/background-remover/

• Remove Background - https://www.erase.bg/

• Remove Background (need login) - https://picwish.com/

• Art converter - https://deepart.io/hire/

Illustrations

• Lorem ipsum na ilustrace - https://doodleipsum.com/

• Gradient ilustrace ManyPixels - https://www.manypixels.co/gallery/

• Gradient ilustrace Ira design - https://iradesign.io/illustrations

• UnDraw - https://undraw.co/

• Stories Freepik - https://stories.freepik.com/

• Free Icons, Illustrations & Photos - https://www.reshot.com/

• Ilustrace, mockupy - https://interfacer.xyz/

• 3D objekty Spline - https://spline.design

• 3D objekty (moc pěkné) - https://3dicons.co/

• 3D Ilustrace - https://3d.khagwal.co/

• 100 free user pics - https://userpics.craftwork.design/

• Sketchy Illustrace - https://www.opendoodles.com/

• 20 free ilustrací - https://onfire.craftwork.design/

• Abstract ilustrace (je třeba se přihlásit) - https://designstripe.com

• Sketchvalley - https://sketchvalley.com/

• Icons8, věština ilustrací je placených, ale jsou tam i free - https://icons8.com/illustrations

• DrawKit - https://www.drawkit.io/

• Retro vektory - http://retrovectors.com/

• Autodraw - https://www.autodraw.com/

• Covid ilustrace - https://www.pixeltrue.com/frontliner-heroes

• 404 Ilustrace - https://error404.fun

• Clipart illustrations and vectors - https://publicdomainvectors.org/

• Open source emojis - https://openmoji.org/

• Placené i freebie ilustrace - https://iconscout.com

• Free Illustrations - https://freeillustrations.xyz/

Patterns

• Pattern generator - https://patternico.com/
• Pattern generator - https://doodad.dev/pattern-generator/
• SVG Code patterny - https://patterns.helloyes.dev
• Patterny, ale celkem retro a complicated - https://tartanify.com/
• The Pattern library - http://thepatternlibrary.com
• Paaaterns - https://products.ls.graphics/paaatterns/
• Patternico - vlastní patterny z ikon - https://patternico.com/

Animations

• Animista - https://animista.net/
• Animotion Visual css animation editor - https://animotion.dev/
• Animate - https://animate.style/
• Magic effects - https://www.minimamente.com/project/magic/
• Hover css - https://ianlunn.github.io/Hover/
• Keyframes app (animace jednoduše) - https://keyframes.app/
• Wait Animate (epic epic) - https://waitanimate.wstone.uk/
• Cattocss - https://www.cattocss.com

Fonts

• Unblast (for personal use) - https://unblast.com/fonts/
• Open Foundry - https://open-foundry.com/
• Velvetyne - http://velvetyne.fr/
• Lost Type - http://losttype.com/
• Uncut (moderní fonty) - https://uncut.wtf/
• Open source fonts - https://beautifulwebtype.com/
• Font pairing - https://www.colorsandfonts.com/font-pairing
• Font previewer - https://wordmark.it/
• Use & Modify - https://usemodify.com/
• Fontesk - https://fontesk.com/

Free icons

• Remixicon - http://remixicon.com/
• Hromada freebie věcí, ikony, ilustrace patterny, atd.. - https://ui8.net
• Iconly 2 - https://ui8.net/piqodesign/products/iconly-essential-icons
• Dripicons - https://ui8.net/products/dripicons
• Ionicons - https://ionic.io/ionicons

Free Mockups

• Ls graphics - https://www.ls.graphics/free-mockups

• Supr mockupy - https://interfacer.xyz/

• Mockup world - https://www.mockupworld.co/

• Graphic burger - https://graphicburger.com/

• Unblast - https://unblast.com/

• Psd Mockups - https://www.psdmockups.com/

• Hands mockups - https://nappy.co/all-hands-psd

• Alien Valley - https://alienvalley.com/freebies/

• Stunning mockupy (je třeba se registrovat) - https://www.glorify.com/

Photobanks

• Free Stock Images - https://www.pexels.com
• Free Stock Images With Great API - https://unsplash.com/
• Not so stocky photos - https://kaboompics.com/
• Free- Vectors, mockups - https://www.freepik.com
• Dummy Image Placeholders - https://source.unsplash.com/
• Dummy Image Placeholders - https://placeholder.com
• Free Icons - https://www.iconfinder.com
• Profi fotky - https://burst.shopify.com
• Pixabay - https://pixabay.com
• Visualhunt - https://visualhunt.com
• Foodies Feed - https://www.foodiesfeed.com/
• Icons 8 photos - https://icons8.com/photos
• Reshot - https://www.reshot.com/
• Skuawk - https://skuawk.com
• Raw Pixel - https://www.rawpixel.com

PNG assets

• PNG Tab - https://pngtab.com/
• PNG Img - http://pngimg.com/
• Clean png - https://www.cleanpng.com
• Fav PNG - https://favpng.com/
• Stick PNG - http://stickpng.com
• Clean PNG - https://www.cleanpng.com
• Pure PNG - https://purepng.com

Textures

• Texture Fabric - https://texturefabrik.com/tag/texture-fabric/
• Transparent textury - https://www.transparenttextures.com/

Optimalization

• Minify JS & CSS - http://minifier.org
• Code Optimization Tools - https://codebeautify.org
• Code Diff Checker - https://www.diffchecker.com

Converters

• ES6+ & JSX Compiler - https://babeljs.io/repl
• Sass Converter - https://www.sassmeister.com/
• Less Converter & More - http://www.webtoolkitonline.com
• Markdown Editor - https://stackedit.io
• Jade Converter - http://www.html2jade.org/
• Frontend Toolkit - https://www.fetoolkit.io/

Compression

• Compress All Images - https://compressor.io/compress
• Compress JPG - http://jpeg-optimizer.com/
• Compress PNG - https://tinypng.com/

Validation and compatibility

• Validate HTML - https://validator.w3.org
• Validate CSS - https://jigsaw.w3.org/css-validator
• Check Browser Compatibility - https://caniuse.com/
• ES6+ Compatibility Table - https://kangax.github.io/compat-table/es6/
• Screen sizes - https://screensiz.es

Checkers

• Domain name checker for perfectionist - https://www.namemesh.com
• Htaccess checker - https://htaccess.madewithlove.be
• Zjistí kdo mi chodí na webovky - https://clearbit.com
• Jak reagují uživatelé na webu (heatmapy a další) - https://attentioninsight.com/

Editors

• Client Side Code - https://codepen.io
• Client Side Code - https://jsfiddle.net
• Client Side Code - http://liveweave.com
• Server Side Code - https://repl.it
• VS Code - https://vscode.dev/
• Tiny drawing editor - https://www.tldraw.com/
• TOP editor na bannery a další - https://pixelied.com/editor
• Pixl - podobný jako photoshop - https://pixlr.com/cz/e/
• Photopea - také podobná photoshopu -https://www.photopea.com/
• Visual Sitemap editor - https://octopus.do/
• Pixelied - many image editing tools - https://pixelied.com/editor

Documentation

• Krátké kódy - taková dokumentace všeho - https://shortcode.dev

• Offline dokumentace všeho - https://devdocs.io/

• Javascript single line věci - https://1loc.dev/

• Dokumentace hned po ruce - "stackoverflow v appce" - https://usedevbook.com/

• Spousta snipetů - https://www.snipt.dev/

• Web Code Tools, generátory a ukázky na CSS, HTML, metatagy... - https://webcode.tools/

Accessibility

• Návody a tipy na přístupnost na webu - https://www.accessguide.io/

Snippet tools:

• Snippet Manager - https://gist.github.com
• Snippet Manager - https://pastebin.com

Colors and design:

• Supr color picker - https://htmlcolorcodes.com/color-picker/

• Rychlé generování barev - https://coolors.co

• Create Color Schemes - https://color.hailpixel.com

• Huey rapid color palettes - https://huey.design/

• Palitra - google your color palette - https://palitra.app/

• Color palettes generator and apply to everything - https://colorspectrum.design/generator.html

• Color palette apply to design - https://huemint.com

• Get Color Schemes of Websites - http://stylifyme.com

• Realtime colors - https://realtimecolors.com

• Create Gradients - https://uigradients.com

• Gradients - https://webkul.github.io/coolhue/

• Gradient Hunt - https://gradienthunt.com/

• Design gradients - https://www.designgradients.com/

• Magic Gradients - https://www.gradientmagic.com

• Tailwind gradients - https://hypercolor.dev/#gradients

• Gradient maker - https://gradient-png.netlify.app/

• Gradient maker (pěkný) - https://mybrandnewlogo.com/color-gradient-generator

• Grads V2 (meshy gradients) - https://www.charco.design/grads-v2

• Mesh Gradients - https://www.meshgradients.design/

• Mesh gradients - https://hypercolor.dev/mesh

• Mesh gradients - https://meshedup.dev/

• Mesh gradients - https://meshgradient.com

• Grainy gradients - https://hypercolor.dev/grainy

• Najít obrázky dle barvy - https://labs.tineye.com/multicolr/

• Barevné palety - rychlé obarvení ui komponent - http://colormind.io/bootstrap/

• CSS Button Generator - http://css3buttongenerator.com

• HTML Entity Lookup - http://entity-lookup.leftlogic.com/

• Fancy Border Radius Generator - https://9elements.github.io/fancy-border-radius/

• Picular - podle nějakého názvu vyhledá odpovídající barvy - https://picular.co/

• Tints and shadows, vytvoří různé odstíny dle barev - https://maketintsandshades.com

• Color tint generator - https://noeldelgado.github.io/shadowlord

• Inspirace palet z obrázků - https://colorpalettes.earth/

• Make gradient from image - https://gradient-king.vercel.app/generate

• Contrast finder and modifier - https://contrast-finder.tanaguru.com/

Figma

• Token Master (design token management) - https://www.figma.com/community/plugin/1048365292339473455/Token-Master
• 3D Builder plugin - https://www.figma.com/community/plugin/1044419856113171023/Drawkit-3D-%26-Illustration-Library

Responsive tools

• Device Testing - http://www.responsinator.com
• What's My Browser Size - https://www.webpagefx.com/tools/whats-my-browser-size/
• Am i responsive - http://ami.responsivedesign.is/
• Responsive design checker - https://www.responsivedesignchecker.com/
• Responsinator - http://www.responsinator.com
• Google check - https://developers.google.com/speed/pagespeed/insights/?hl=cs
• Pagelocity - https://pagelocity.com

Wireframes

• In Browser Wireframing - https://app.moqups.com
• Very Basic In Browser Wireframing - https://wireframe.cc

SEO

• GT Metrix - https://gtmetrix.com/
• Seo Check - https://freetools.seobility.net/en/seocheck/
• Seo Analyzer - https://seoanalyzer.me
• Keyword Tool https://keywordtool.io
• Google Search Console - https://search.google.com/search-console/
• Site Checker Pro - https://sitechecker.pro/app
• Backlink checker (hodně dobrý) - https://ahrefs.com/backlink-checker
• Broken link checker - https://ahrefs.com/broken-link-checker
• Keyword generator - https://ahrefs.com/keyword-generator
• Keyword rank checker - https://ahrefs.com/keyword-rank-checker
• Keyword difficulty checker - https://ahrefs.com/keyword-difficulty
• Website authority checker - https://ahrefs.com/website-authority-checker
• SERP Checker - https://ahrefs.com/serp-checker

Speed tests:

• Speed & Performance Testing - https://tools.keycdn.com/speed
• Pingdom Speed Test - https://tools.pingdom.com/

Articles:

• CSS tips - https://markodenic.com/css-tips/
• VS Code tricks - https://www.crio.do/blog/vs-code-shortcuts/
• Jak správně používat css animace - https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9
• Designui - super web od českého tvůrce s tutoriály ohledně UI - https://www.designui.cz/
• Designui - Jak vyšperkovat UI designy - FAKT PECKA - https://www.designui.cz/lekce/sperkujte-sve-ui-designy
• Frontend Garden - český web se články ohledně frontendu a css - https://frontend.garden/
• UX Collective - magazin v angličtině ohledně UX, UI - https://uxdesign.cc/
• SVG masking - https://tympanus.net/codrops/2019/09/03/how-to-dynamically-change-the-colors-of-product-images-using-css-blend-mode-and-svg/
• How to animate without JS - https://www.screenfeed.fr/blog/css3-animation-on-click-without-js-0828/
• Epickej SVG týpeček, supr tutoriály a články - https://georgefrancis.dev/
• Jak méně používat position absolute a spoustu dalšího - https://ishadeed.com/article/less-absolute-positioning-modern-css/
• Clickable areas - https://ishadeed.com/article/clickable-area/
• Futuristic Web3 look - https://dev.to/trishathecookie/css-tricks-to-create-that-dark-futuristic-web3-look-53bm
• How to make portfolio web - https://trishalim.hashnode.dev/how-to-make-a-web-developer-portfolio-in-2022
• How to animate on web - https://tilda.education/en/courses/webanimation/animation-theory/

Cheatsheets

• Designing interfaces (tlačítka, objekty, obrazovky, touch zóny) - https://designingui.com/designing_interfaces_12_x.pdf
• Bright ideas for UX designers - https://www.userfocus.co.uk/pdf/Bright_Ideas_for_UX_Designers.pdf
• Javascript Cheatsheet - https://dev.to/j471n/javascript-cheat-sheet-you-needed-2id
• Social Sizes for Media - https://socialsizes.io/

Checklists

• Checklist pro webovky - https://frontendchecklist.io/
• Design system checklist - https://www.designsystemchecklist.com/
• FE design checklist - https://github.com/thedaviddias/Front-End-Design-Checklist
• FE Performance checklist - https://github.com/thedaviddias/Front-End-Performance-Checklist
• Launch checklist - https://github.com/amilajack/project-checklist
• Marketing checklist - https://draft.dev/learn/marketing-checklist
• Personal security checklist - https://github.com/Lissy93/personal-security-checklist

Nice websites

• Marquee demo - https://tympanus.net/Development/CSSMarqueeMenu/
• Hype4 - https://hype4.com/projects
• LookBack - https://lookback.io/
• Vercel - https://vercel.com/
• Zensite - https://zensite.co/
• Frontend developer portfolio - https://olaolu.dev/
• Frontend dev portfolio - https://www.jemimaabu.com/
• Frontend dev portfolio - https://michaelpumo.com/
• Milej týpeček se článkama - https://www.joshwcomeau.com/
• CSS blázen - https://lynnandtonic.com/
• Sey Dev - https://seyi.dev/
• Product design - https://fastasf.netlify.app/
• Egg Head - kurzy - https://egghead.io/
• Tube Up - česká firma - https://www.tubeup.cz
• Adam Troják - https://adamtrojak.com/
• Stripe - https://stripe.com
• Pitch - https://pitch.com/
• SnipCart - https://snipcart.com/
• Proto.io - https://proto.io/
• DesignModo - https://designmodo.com/slides/
• Graphite Space - https://graphite.space/
• Third Web - hezké blobs v kodu - https://thirdweb.com
• Portfolio - https://olaolu.dev/
• Becherovka unfiltered - https://becherovka.com/cs/unfiltered/
• Juraj Weszter - https://www.jurajweszter.com/
• Steezy Studio - https://www.steezy.studio
• Signal Supply - https://www.signalsupply.co/
• Signal Icon - https://signalicon.com/about
• Flower order - https://www.behance.net/gallery/128146955/UGAN-UI-Design
• WDF - https://www.wdf.cz
• Brutalism - https://www.lamannabakery.com/
• Brutalism - https://omsom.com/
• Diagram (dark ui) - https://diagram.com

Others:

• Button Design and advices article - https://www.justinmind.com/blog/button-design-websites-mobile-apps/
• Public API Resources - https://github.com/toddmotto/public-apis?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more
• Spousta resources do grafickeho designu - https://www.lapa.ninja/learn/
• Web archive - https://web.archive.org
• Organized Docs for all Popular Web Technologies - https://devdocs.io
• Premium HTML templaty, podobne webflow - https://cruip.com/
• Balíček Dev resources - https://webgems.io/
• Hromada resources - https://www.designresourc.es/
• Grid examply - https://gridbyexample.com
• To-do appka v prohlížeči - https://verticals.xom9ik.com/
• Open Design systems on Figma - https://www.designsystems.com/open-design-systems/
• Lowdefy - build websites with YAML - https://lowdefy.com
• UI Tips - https://www.uidesign.tips
• Hey Design Systems - všechnymožné články - https://heydesign.systems/
• Workspaces a setups for developers - https://setups.co/
• Tailwind components - https://www.hyperui.dev/