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

el marzo 07, 2018

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, 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/

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

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

Understanding Color Theory

Gradientes

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.

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

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

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: