Online Tools – Typo, Bilder, Farben, Icons

Eine kleine Auswahl von Tools und Tutorials

Print Friendly, PDF & Email

Online Tools - Typo, Bilder, Farben, Icons

 

Design Richtlinien von Google

https://material.google.com/

 

Fonts

Google Fonts Schriftarten finden
https://www.google.com/fonts

Vergleich Google Fonts Typo-Kombinationen (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/

Kostenlose Schriftarten
https://www.1001fonts.com/ (Individuelle Lizenz im Schriftenordner beachten!)
https://www.typotheque.com/
https://www.fonts.com/de
https://www.myfonts.com/
https://www.fontsquirrel.com/

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

Farbpaletten / Farbharmonien
https://color.adobe.com/
https://colourco.de/ 
https://coolors.co/ 
https://www.materialpalette.com/
http://colorsupplyyy.com/app/
http://paletton.com Tipp! Unten rechts auf Examples klicken ;-)
https://www.ionos.de/digitalguide/websites/webdesign/web-app-der-woche-paletton/ (Tutorial zu Paletton)

 

Logo / Banner

https://meinfreelogo.de/logo/erstellen
https://www.designevo.com/apps/logo/
https://de.freelogodesign.org/
Banner mit Text in verschiedenen Größen
http://www.bannerfans.com/banner_maker.php

Icons

Icons Tutorial W3C
https://www.w3schools.com/icons/default.asp

Font Awesome 4
Beliebte, kostenlose Icon-Sammlung die oftmals 
in Themes oder Plugins enthalten oder zum selbst einbinden.
https://fontawesome.com/icons?d=gallery&m=free
https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons 
Font Awesome 3
https://fontawesome.com/v3.2.1/icons/
https://fontawesome.com/v3.2.1/examples/

Kostenlose Icons zum Download als PNG 
http://www.flaticon.com/ (Tipp)
https://icons8.com/ (Tipp)
http://www.iconarchive.com/
https://www.iconsdb.com/

 

Screendesign – Mockup Tools

Wireframes online erstellen (gibt es auch in Pro mit mehr Funktionen)
https://wireframe.cc/

Kostenlose Bilderquellen

Kleine Auswahl an Webseiten mit kostenlosen Fotos & Bildern
https://unsplash.com/ Mein Tipp! 
https://www.pexels.com/ Mein Tipp! 
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/
https://www.vecteezy.com/  (Auch Vector-Dateien .eps)

 

Portale

Portal um kostenlose Webseiten mit Foto, Video, Texturen, Farben zu finden
https://www.stockjo.com/ 
Portal mit aktueller Linksammlung zu Design Webseiten/Tools 
http://designresources.party/