Recursos para Diseñadores, Desarrolladores y Creadores de la Web

Cuando tengo el propósito de diseñar y desarrollar algún sitio web. siempre tengo preparados algunos sitios web, herramientas, recursos y demás, que me pueden ser de utilidad para terminar con un mejor trabajo o que me puede ayudar a terminarlo en el menor tiempo posible.

Así que en esta publicación te voy a compartir un listado de todos estos recursos que puedo llegar a utilizar, además de artículos que te pueden ayudar si estas empezando.

Recuerda que estos son tan solo algunos, así que si tu tienes tus propios recursos, siéntete libre de compartirlos y los agregaré a este listado.

Sin Más que decir. Empecemos.

Introducción al Diseño Web

• Cursos de Diseño en Forma de Artículos: https://hackdesign.org/lessons
• Aprende más del Diseño Flat: https://www.webdesignerdepot.com/2013/12/infographic-flat-design-vs-skeuomorphism/

Tipografía

• Google Fonts, Google Fonts es el sitio más popular para los desarrolladores que buscan fuentes gratuitas y optimizadas.
• FontSquirrel: http://www.fontsquirrel.com
• Lista de Mejores Fuentes para Diseñadores: http://www.creativebloq.com/graphic-design-tips/best-free-fonts-for-designers-1233380
• Combinaciones de Fuentes: http://fontpair.co
• Aprende Tipografía en 10 minutos: https://practicaltypography.com/typography-in-ten-minutes.html
• Aprende Más de Tipografía: http://www.typogui.de
• Inpiración: http://femmebot.github.io/google-type/
• 1001Fonts

Colores

• Flatuicolors: http://flatuicolors.com
• getUiColors: http://getuicolors.com
• Variaciones de Colores: http://www.0to255.com
• Adobe Color CC: https://color.adobe.com/create/color-wheel/
• Paletton: http://paletton.com
• Uigradients: https://uigradients.com
• Introducción a Teoría de Color para Diseñadores Web: https://webdesign.tutsplus.com/articles/an-introduction-to-color-theory-for-web-designers--webdesign-1437

• MaterialCSS: http://materializecss.com/color.html
• Coolors.co: https://coolors.co/app
• ColorHexa: https://www.colorhexa.com
• SchemeColor. Sitio Web para obtener combinación de colores

Para aprender más de Teorías de colores.

• Understanding Color Theory

Gradientes

• ColorSpace: https://mycolor.space/
• CSSGradients: https://cssgradient.io/

Imágenes

• Pexels, Pexels es un sitio web para encontrar imágenes en alta definición de manera gratuita.
• pikwizard: https://pikwizard.com/
• theStocks: http://thestocks.im
• Unsplash: https://unsplash.com
• Foodiesfeed: https://www.foodiesfeed.com
• Imcreator Free: http://www.imcreator.com/free
• The patter Library: http://thepatternlibrary.com
• Subttle Pattern: https://www.toptal.com/designers/subtlepatterns/

Un consejo adicional respecto a las imágenes, es que si descargas una imagen en alta definición de estos sitios, te recomiendo reducirle el peso, ya que tu sitio web tendrá que descargar la imagen cada vez que un usuario visite la pagina, haciéndola lenta.

Vídeos

A menudo cuando quiero crear un proyecto audiovisual, o contenido basado en vídeo, suelo buscar clips de vídeos en los sitios web que te listo a continuación. Recuerda tratar de ver siempre las licencias de los clips, ya que algunos tienden a requerir atribución, es decir, el autor quiere que coloques su nombre de algún modo en los créditos de tu contenido, mientras que otros te permiten descargarlo y utilizarlo sin más en cualquier tipo de proyecto, tanto si es comercial, como no lucrativo. 

• Pikwizad: https://pikwizard.com/video
• Mazwai: http://mazwai.com
• Pexels video: https://videos.pexels.com

• Videvo: https://www.videvo.net/
• Clip Canvas - Free Clips: https://www.clipcanvas.com/free-footage
• Vidsplay: https://www.vidsplay.com
• Videzzy: https://www.videezy.com/
• Free HD Footage: http://www.free-hd-footage.com

Iconos

• Entypo: http://entypo.com
• ionicons: http://ionicons.com
• font awesome: https://fontawesome.com
• icon monstr: https://iconmonstr.com
• icon-works: http://icon-works.com

• Twitter Emojis: http://twemoji.maxcdn.com
• Flaticon.com: https://www.flaticon.com
• Icons 8: https://iconos8.es/

SVG

• https://worldvectorlogo.com/

UX

• Curso Rápido UX en 31 Días: http://thehipperelement.com/post/75476711614/ux-crash-course-31-fundamentals
• Trucos de UI: http://www.goodui.org
• Más de 100 recursos sobre Diseño de UI: https://github.com/tipoqueno/awesome-ui

Inspiración

• Site Inspire: https://www.siteinspire.com
• Dribble: https://dribbble.com
• behance: https://www.behance.net
• One Page Love: https://onepagelove.com
• Admire the web: http://www.admiretheweb.com
• Flatdsgn: http://flatdsgn.com
• Colección de elementos de Diseño: http://calltoidea.com
• Más recursos de desarrolladores frontEnd: https://github.com/dypsilon/frontend-dev-bookmarks
• oozled: http://oozled.com
• Awwwards: https://www.awwwards.com

HTML

• W3School: http://www.w3schools.com/html
• Mozilla Developer Network: https://developer.mozilla.org/es/docs/Web/HTML
• W3C validator: https://validator.w3.org
• Caracteres especiales en HTML: https://css-tricks.com/snippets/html/glyphs/

CSS

• Snippets: https://tympanus.net/codrops/css_reference/
• Selectores de CSS que debes memorizar: https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
• Animaciones: https://daneden.github.io/animate.css/
• Patronres: https://freebiesupply.com/blog/css-background-patterns/

Desarrollo

• Caracterisiticas de Google Chrome que no estas usando: https://www.labnol.org/software/chrome-dev-tools-tutorial/28131/
• El proceso de Diseño web: http://www.newdesigngroup.ca/blog/web-design-process-infographic/
• Usuario Aleatorio: https://randomuser.me

Optimizando Nuestro Sitio Web

• Minimize Image: http://optimizilla.com
• Compress CSS: http://www.minifycss.com/css-compressor/
• Compress Javascript: http://www.minifyjavascript.com
• Vista previa en multiples dispositivos: http://www.responsinator.com
• Google Analytics: https://www.google.com/analytics/

Iconos

• IconFinder, IconFinder es un sitio web para encontrar iconos para nuestros sitios y aplicaciones, tanto gratuitos como de pago.

Favicon

• Real Favicon Generator: https://realfavicongenerator.net
• Favicon Generator: https://www.favicon-generator.org

SEO

• Guia de Optimizacion de Google
• WooRank: https://www.woorank.com
• SEO: http://webdesign.tutsplus.com/articles/a-web-designers-seo-checklist-including-portable-formats--webdesign-

Templates

• Graphberry: https://www.graphberry.com/category/free-html-web-templates

Diagramas

• Draw.io: https://www.draw.io/

Y estos son algunos de los recursos que más utilizo. Si tu también tienes los tuyos siéntete libre de compartirlos, de eso modo los puedo agregar a esta lista, y oras personas también pueden tener más recursos. ¡Happy Coding!

Muy Pronto Publicaré un Vídeo explicando acerca de estos recurso en el canal de Youtube: