
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.
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.
- 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
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
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:
tu blog cada vez es mas profesional, 10 / 10 bro!!!
ResponderBorrarGracias Jassiel. Voy mejorandolo de poco a poco. Pero allí voy haha. Un saludo :)
BorrarExcelente muchas gracias por compartir.
ResponderBorrarGracias Baja Webmaster. Un gusto que te sea de utilidad. Un Saludo :)
BorrarMejor imposible! Excelente información. Gracias! :D
ResponderBorrarGracias Lonel. Un gusto que te sea útil. ¡Un Saludo!
BorrarGracias por compartir la información Bro :)
ResponderBorrarNo es Nada Jhon. Un Saludo :)
BorrarEsta de pelos!!!
ResponderBorrar¡Gracias! Un gusto que te sirva
Borrargracias por tantos recuersos excelentes
ResponderBorrarNo es nada Edgar. Un saludo :D
BorrarExcelente tutorial. Gracias por compartirlo.
ResponderBorrarGracias Heli. Un Cordial Saludo :)
BorrarHola revisa este generador de colores, es muy util
ResponderBorrarhttps://coolors.co/app
Gracias Cesar ya lo he agregado a la lista. :)
BorrarIncreible contenido y diseño, uno de mis profesores favoritos ✌🏽
ResponderBorrarGracisa Jorge. Un gusto que te sirva el contenido :)
BorrarEsta buenísimo este artículo.... te puedo recomendar otras páginas?.
ResponderBorrarPara color una que yo uso muy seguido es Color Hexa ... no solo te brinda info de un color sino también todas sus combinaciones y gamas posibles... Es genial :D
Para inspiración siempre veo las paginas de Awwwards.... es una pagina que tiene un montón de proyectos subidos y evaluados según su usabilidad, creatividad, diseño y contenido.
Excelentes recomendaciones Malen, Ya las he agregado. Gracias por tu Aporte, Un Saludo :)
BorrarHola muchas gracias por tu aporte, y excelente la manera como explicas el contenido. Todo muy organizado y ordenado. lo que me alegra más es que eres Peruano!!
ResponderBorraraquí mi aporte:
https://www.graphberry.com/category/free-html-web-templates
Saludos
Hola Magaly, muchas Gracias por tu aporte, lo acabo de agregar al articulo. se que ha todos nos va a servir. Un Saludo :)
BorrarGracias por la información, de lujo tu aporte amigo.
ResponderBorrarEs un gusto que te sea útil Ignacio. Un saludo :)
BorrarBuena información es de gran utilidad.
ResponderBorrargenial
ResponderBorrarFAZT! seguí tus videos de como usar MERN y me funcionaron a la perfección, de hecho mi web va creciendo enormentmente con la base de tu video, pero estoy atorado, no se como subir imagenes y guardar el path en mongodb, puedes ayudarme? basandome en tus metodos de add task, fetch, routes, api etc.. Saludos!
ResponderBorrarMe encanta todos tus aportes
ResponderBorrarExcelente, muchas gracias, sigue así.
ResponderBorrarExcelente. Me sirvió bastante para resolver dudas y tener una buena presentación a la hora de hacer un buen trabajo ya sea en la universidad o laboral. 👨🏽💻
ResponderBorrarEres lo maximo amigo, eres mi ejemplo a seguir xd;V
ResponderBorrarmuy buen contenido, de calidad, buen flujo de trabajo Fazt!!
ResponderBorrarGracias por la info
ResponderBorrarExcelente contenido, gracias
ResponderBorrarMuy buen contenido, me gustaría leer más de este tipo. Un abrazo grande! Genial trabajo!!
ResponderBorrarTe felicito por tu trabajo.
ResponderBorrarHola FAZT, queria agradecer por este gran aporte y preguntar por una libreria de caracteres y objetos animados (que también hacen falta a veces)... Saludos
ResponderBorrarSaludos, cómo puedo interactuar con una página web y mostrar el resultado en mi sitio web si usar api?
ResponderBorrarAquí dejo un aporte de colores: https://colorhunt.co/
ResponderBorrarExcelente contenido!! Sin duda resulta muy relevante, saludos desde la Ciudad de México!
ResponderBorrarHola soy Fazt, primero antes que todo. Gracias por esos buenos tutoriales que me están ayudando mucho. Y pues segundo tengo una consulta. Que me recomendas, tengo un proyecto personal y es crear una plataforma web educativa. Información y control de estudiantes. Y pues quisiera saber que me recomendas usar. Muchas gracias nuevamente.
ResponderBorrarHola Fatz,
ResponderBorrarTe vendría bien estas paginas para iconos diseñadores y programadores, espero que las puedas agregar.
- Feather Icons: https://feathericons.com
- Noun Icons: https://thenounproject.com
- Icon Finder: https://iconfinder.com
- Icons8: https:// icons8.com
- Icons Monsterhttps://iconmonstr.com
- Icons Material Design: https://material.io/resources/icons/
- Icons Awesome: https://fontawesome.com
Excelente Fazt eres un genio.. adquiriendo conocimiento de este nutrido blog
ResponderBorrarMuy bueno tu contenido.
ResponderBorrarEste comentario ha sido eliminado por el autor.
ResponderBorrarexelentisimo articulo queremos muchos mas articulos como este muchisimas gracias por compartirlo con la comunidad 1000 gracias eres muy aplicado y bueno en lo que haces y muestras y ayudas etc... sin palabras superior todo larga vida compañero.
ResponderBorrargracias fazt, sigo aprendiendo contigo
ResponderBorrarSe agradece, excelente guia con recursos.
ResponderBorrar