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 Articulos: 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: https://www.google.com/fonts
• 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/

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

Imágenes

• pikwizard: https://pikwizard.com/
• theStocks: http://thestocks.im
• Pexels: https://www.pexels.com
• 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/

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

• Real Favicon Generator: https://realfavicongenerator.net
• Favicon Generator: https://www.favicon-generator.org
• 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/

SEO

• 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: