
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
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
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!!!
ResponderEliminarGracias Jassiel. Voy mejorandolo de poco a poco. Pero allí voy haha. Un saludo :)
EliminarExcelente muchas gracias por compartir.
ResponderEliminarGracias Baja Webmaster. Un gusto que te sea de utilidad. Un Saludo :)
EliminarMejor imposible! Excelente información. Gracias! :D
ResponderEliminarGracias Lonel. Un gusto que te sea útil. ¡Un Saludo!
EliminarGracias por compartir la información Bro :)
ResponderEliminarNo es Nada Jhon. Un Saludo :)
EliminarEsta de pelos!!!
ResponderEliminar¡Gracias! Un gusto que te sirva
Eliminargracias por tantos recuersos excelentes
ResponderEliminarNo es nada Edgar. Un saludo :D
EliminarExcelente tutorial. Gracias por compartirlo.
ResponderEliminarGracias Heli. Un Cordial Saludo :)
EliminarHola revisa este generador de colores, es muy util
ResponderEliminarhttps://coolors.co/app
Gracias Cesar ya lo he agregado a la lista. :)
EliminarIncreible contenido y diseño, uno de mis profesores favoritos ✌🏽
ResponderEliminarGracisa Jorge. Un gusto que te sirva el contenido :)
EliminarEsta buenísimo este artículo.... te puedo recomendar otras páginas?.
ResponderEliminarPara 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 :)
EliminarHola 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!!
ResponderEliminaraquí 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 :)
EliminarGracias por la información, de lujo tu aporte amigo.
ResponderEliminarEs un gusto que te sea útil Ignacio. Un saludo :)
EliminarBuena información es de gran utilidad.
ResponderEliminargenial
ResponderEliminarFAZT! 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!
ResponderEliminarMe encanta todos tus aportes
ResponderEliminarExcelente, muchas gracias, sigue así.
ResponderEliminarExcelente. 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. 👨🏽💻
ResponderEliminarEres lo maximo amigo, eres mi ejemplo a seguir xd;V
ResponderEliminarmuy buen contenido, de calidad, buen flujo de trabajo Fazt!!
ResponderEliminarGracias por la info
ResponderEliminarExcelente contenido, gracias
ResponderEliminarMuy buen contenido, me gustaría leer más de este tipo. Un abrazo grande! Genial trabajo!!
ResponderEliminarTe felicito por tu trabajo.
ResponderEliminarHola 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
ResponderEliminarSaludos, cómo puedo interactuar con una página web y mostrar el resultado en mi sitio web si usar api?
ResponderEliminarAquí dejo un aporte de colores: https://colorhunt.co/
ResponderEliminarExcelente
ResponderEliminarExcelente contenido!! Sin duda resulta muy relevante, saludos desde la Ciudad de México!
ResponderEliminarHola 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.
ResponderEliminar