Eine kleine Auswahl von Tools und Tutorials
Design Richtlinien von Google
https://material.google.com/
Schriften – Typografie – Fonts
Google Fonts Schriftarten finden https://www.google.com/fonts https://fonts.google.com/knowledge DSGVO kompatible Alternative https://fonts.bunny.net/ Vergleich Google Fonts Typo-Kombinationen (Pairings) https://www.pagecloud.com/blog/best-google-fonts-pairings https://fontpair.co/ https://www.reliablepsd.com/ultimate-google-font-pairings/ Google Fonts sind oftmals in Themes und Plugins enthalten, wenn nicht https://www.webtimiser.de/google-fonts-in-wordpress-einbinden/ https://www.webtimiser.de/webfonts-lokal-in-wordpress/ Tutorial um mit CSS eigene Schriften einzubinden https://wphelp.de/fonts-schriften-einbinden oder mit einem WordPress Plugin: https://de.wordpress.org/plugins/use-any-font/
Generatoren Hintergrund/ Pattern / CSS-Verläufe
https://galactic.ink/bg/ http://bg.siteorigin.com/ http://www.colorzilla.com/gradient-editor/ https://webkul.github.io/coolhue/ https://uigradients.com/#Ash https://cssgradient.io/
Farben – Farbharmonien finden
Alles über Farben - Farbtools https://www.w3schools.com/colors/default.asp https://liveweave.com/colors/index.html Farbpaletten / Farbharmonien https://color.adobe.com/ https://mycolor.space/ https://colourco.de/ https://coolors.co/ https://www.materialpalette.com/ http://colorsupplyyy.com/app/ http://paletton.com Tipp! Unten rechts auf Examples klicken (Edit: Leider klappt die Vorschau jetzt seit längerem nicht mehr)
Logo / Banner
https://www.freelogoservices.com/de/home-return https://www.designevo.com/apps/logo/ https://de.freelogodesign.org/ Bei allen kann man die kleine Logo-Vorschau mit der rechten Maustaste als Bild herunterladen. Kostenpflichtig wird es für hochauflösende Bilder
Banner mit Text in verschiedenen Größen (Seite nicht mehr erreichbar)http://www.bannerfans.com/banner_maker.php
Icons
Icons Tutorial W3C https://www.w3schools.com/icons/default.asp Icon-Sets oftmals in Plugins & Themes enthalten genericons.com/ icomoon.io/app/#/select developer.wordpress.org/resource/dashicons/#buddicons-buddypress-logo fontawesome.com/icons?d=gallery&m=free fontawesome.com/how-to-use/on-the-web/styling/sizing-icons Kostenlose Icons (Download PNG, JPG, EPS) fonts.google.com/icons Eva Icons Feather Icons heroicons App – CSS Icons flaticon.com/ icons8.com/ app.streamlinehq.com/icons iconarchive.com/ iconsdb.com/
Screendesign – Mockup Tools
Wireframes online erstellen (gibt es auch in Pro mit mehr Funktionen) https://wireframe.cc/ Vector Graphics Editor (online) https://liveweave.com/designer/index.html
Kostenlose Bilderquellen
Kleine Auswahl an Webseiten mit kostenlosen Fotos & Bildern https://unsplash.com/ Mein Tipp! https://www.pexels.com/ Mein Tipp! Hier auch Videos!!! https://wordpress.org/openverse/ (Ehemals 'Creative Common Search', nun von WordPress betriebene Datenbank für Creative-Commons oder Public-Domain Bilder) https://isometric.online/ (png, eps freie Lizenz) https://mixkit.co/free-stock-art/ (Hier gibt es auch Video, Audio) https://pixabay.com/de/ (Lizenz beachten, siehe Tagesordner) https://stocksnap.io/ https://picography.co/ https://freephotos.cc/de https://burst.shopify.com/ https://de.freepik.com/ Vektor-Bilder (eps, ai svg) https://de.vecteezy.com/ (inkl online Vektor-Editor) https://vectorportal.com/ https://www.vecteezy.com/
Portale
Portal mit aktueller Linksammlung zu Design und Webseiten-Tools http://designresources.party/