DEV Community

Cover image for Algunos recursos para front-end
Juan Duque 🐉
Juan Duque 🐉

Posted on

Algunos recursos para front-end

Normalmente, cuando estás creando un sitio web o un app sueles necesitar algunos recursos que te facilitan todo y puede que te ahorren tiempo, mi intención es compartir algunos de esos recursos que suelo usar para mis proyectos personales y en lo personal me gustan bastante, entonces comenzamos.


Paleta de colores

Anime haciendo una pintura

Una de las cosas más comunes al desarrollar una web sea como proyecto personal o no es tener que elegir una paleta de colores para tus botones, fondos, títulos etc... así que en esta parte les compartiré 2 de páginas que ayudan mucho en esa tarea.

Adobe color

página inicial de adobe color

Este sitio es uno de mis favoritos porque tiene varias funcionalidades como:

  • Comprobante de contraste
  • Temas para daltónicos
  • Colores Análogos, Monocromáticos, Tonos, etc..

Tiene más funciones de las que menciones y en general está muy completo.
=> Adobe color

Código de colores HTML

inicio de color html, sitio web

Esta fue la primera página web que utilicé para sacar mis paletas de colores y la verdad que tiene cosas muy interesantes.

  • Te permite convertir de RGBA a Hex y viceversa.
  • Tiene una sección con tablas de colores muy útiles.
  • Hay una parte del sitio web que tiene recursos a otras páginas web relacionadas con los colores.

Esta posee otros detalles interesantes así que les recomiendo que le dediquen unos minutos a examinarla.
=> htmlcolorcode


Fuentes (tipo grafía)

Es un anime en el cual se ve una hoja y alguien escribiendo en ella

Las fuentes suelen pasan desapercibidas, pero son de lo más importante porque ayudan a transmitir la esencia de tu web, además de que si eliges una pésima tipo grafía puede que tus textos o títulos sean difíciles de leer para los usuarios o simplemente el título tenga una tipo grafía muy que no encaja con el texto o tu sitio en general, ya si tu logo es un logotipo es otro tema aparte, les voy a compartir dos sitios que te ayudan a elegir de la forma más adecuada posible.

Font Pair

página web relacionada con tipo grafía

Tiene una serie de recursos muy buenos, pero solo mencionaré algunos.

  • Combinaciones de fuentes entre títulos y el texto, con ejemplos.
  • Imágenes para inspirarte
  • Recomendación de fuentes populares

Todas las fuentes se pueden descargar y usar para que lo uses sin problemas, ya que estas son fuentes que vienen de Google fonts.
=> Fontpair

Google Fonts

Página inicial de google fonts

Hay poco que decir de este servicio (creo yo tan conocido), en general es bastante bueno las licencias que tiene es de software libre y tiene incluso iconos.

  • 1357 familias de fuentes.
  • Tiene una sección llamada Knowledge que te explica algunos temas relacionados.
  • Te permite descargar la fuente.

Es un sitio web bastante sencillo, pero útil y hay otros que le sacan provecho como lo hace font pair.
=> Google fonts


Imágenes

paisaje pixelart

Conseguir buenas imágenes para poder usar sin tener que estar pagando por cada una con la posibilidad de que al final no te guste y no la uses jamás suena a estar desperdiciando dinero y por eso voy a compartir dos webs bastante buenas para solventar ese problema.

Pexels

Inicio de página de imágenes

Lo que me gusta de este banco de imágenes es que tiene un gran variedad de fotografías, las imágenes son completamente gratuitas y no es necesario mencionar el autor aunque no estaría mal hacerlo, ya que nos la proporciona sin ningún costo y no sería difícil mencionar a la persona.

  • Tiene videos.
  • Posee un apartado de retos en la cual puedes ganar premios.
  • Variedad de imágenes y fotos.

Dado que las imágenes son de dominio público no hay limitante a lo que se puede hacer con ellas, aun así les recomiendo leer la licencia que tienen Pexels.
=> Pexels

Unsplash

inicio en la página de unsplash

Unsplash tiene más de 2 millones de fotos y suele ser nombrado como uno de los principales sitios web de fotográfica, personalmente es el que uso.

  • Ofrece un explorador muy completo por categorías.
  • Posee diferentes productos.
  • Una comunidad muy amplia de fotógrafos que constante actualizan el banco de imágenes.

El uni, pero que podría tener es que ellos tienen una licencia con su mismo nombre Unsplash que te limita a no poder compilarlas y venta en forma de impresiones, desde mi punto de vista, una licencia bastante lógica, el punto bueno es que si las puedes utilizar con fines comerciales.
=> Unsplash


Iconos, Ilustraciones

Anime femenino sonriendo

De las cosas más comunes y que empleas con más frecuencia son los iconos para dejar claro el funcionamiento de ciertos botones o simplemente utilizar ilustraciones SBG para dejar bonito alguna parte de tu página web, a aquí tendrán dos sitios de donde suele sacar esas ilustraciones e iconos.

Undraw

Página web de ilustraciones svg

unDraw tiene ilustraciones open source y son completamente gratuitas sin necesidad de atribución y es una chica que lo hace bastante bien así que dejo su Twitter Katerina Limpitsouni

  • SVG
  • Aún se actualiza
  • Gran variedad de ilustraciones

Estas ilustraciones son bastante populares y con buen motivo.
=> unDraw

DrawKit

Imagen descripción

Posee ilustraciones gratuitas y de pago, algo interesante es que te permite solicitar un trabajo específico al desarrollador de alguna ilustración.

  • ilustraciones profesionales gratuitas.
  • Posee iconos.
  • Tiene unas votaciones para elegir la próxima ilustración gratuita.

Personalmente tienen algunas me gustan ilustraciones que muchísimo y la recomiendo.
=> DrawKit


Espero que les haya gustado, si conocen algunas más interesantes no duden en comentarlas y no duden en seguirme en mis redes.

Top comments (0)