Tools
A selection of online website design and build toolsImage Tools:
- Adobe Spark – similar to Canva
- Canva – #1 online graphic design tool
- Canva palette generator
- Canva design size guide
- Canva font combinations
- Canva online photo editor – simple basic program
- Compressor – online image compression
- Crello – #2 online graphic design tool
- PickMonkey – online image editor, my current favourite!
- PIXLR – I find this program very hard to view. Must be designed for young eyes!
- Photopea – edits PSD, Adobe file formats
- Fotor – similar to PicMonkey
- Fotojet – useful and easy to use
- BeFunky – I originally used this program, but now others are more suitable for my purposes
- Remove image background
- Tinypng – great online image compression tool
Image Sources:
- Awesome Stock Resources – very large list
- unDraw – pen Source illustrations
- Freepik – a good starting place
- FreeJPG – a varied collection of stock photos
- Pexels – a new free stock photo site
- Pixabay – a good resource for web quality images
Pngimg – a great selection of cutout images- Subtle Patterns – great collection of subtle backgrounds
- StockSnap io –
good collection of free stock photos - Bossfight – another good display of stock photos
- Awesome- stock resources – huge Github list
- 20 Cool Sites For Free WordPress Header Images
Design Tools:
Colour Tools:
- Adobe Color CC
- Coleure
- Material Design Color Tool
- Material Palette
- Paletton
- RGB palette
- Colour review tool for accessibility
- Theme Options
Typography:
- Google Fonts – see then in action
- Google Font Tester
- Typespiration – font pairings
- Type Scale – a visual calculator
Online Logos:
- Vectr – online logo creator + SVGs
- Logastor
- Logoshi
- Ucraft
- Make Logo Online
- Online Logo Maker
SVG’s:
- How to Add & Animate Your SVG Logo Inside Your Global Header
- Blogmaker app
- What Is an SVG File (And How do You Upload SVGs to WordPress)?
- SVG Sanitizer Test
- How to Safely Enable SVG Support in WordPress (Manually & Via Plugin)
CSS Tools:
- Colorable – colour accessability checking tool
- A large collection of CSS stylesheets
- Aspect Ratio Calculator
- Border Radius Generator
- Colour Shades Generator
- * CSS Matic – good cross browser border radius, box shadow & gradient generators
- CSS Animation Generator
- CSS Box Shadow Generator
- CSS Button Generator
- CSS Text Shadow Generator
- CSS Code Validation Tool
- CSS Stats – reports your websites CSS metrics
- Generate media queries
- Generate vendor prefixes
- Generate breakpoints
- Generate image filters
- Generate font units px/pt/em/%
* my favourites
Dummy Test Tools:
- Lorem Ipsum generator – a cat inspired dummy text generator
- Professional Lorem Ipsum Generator
- Blind Text Generator
Misc Tools:
- Business Name Generator – a tool to assist in finding the perfect business name
- Create a map for your website without Google API
- FontFling – a small online font selection tool
- Why You Should Be Using a Password Manager
- LastPass – the best password management solution
- Proposify – create professional business proposals
- 123apps – online multi-media tools (video cutter)
- Blog post headline analyser – check you headline
- Link Checker – check for 404s
- Favicon Generator
- Favicon Checker