Algunos recursos para front-end
Tags: design, webdev, frontend
Published: 2022-01-14 23:07:57

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](https://64.media.tumblr.com/62c0a162da32658dbcb95d10f78c072f/tumblr_pp7ivfdXNV1tkezr8o4_540.gifv)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u6dv4843q0u76owpkm7j.png)

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](https://color.adobe.com/es/create/color-wheel)

### Código de colores HTML
![inicio de color html, sitio web](https://htmlcolorcodes.com/assets/images/html-color-codes-picker-charts-names-tutorials-resources.jpg)

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](https://htmlcolorcodes.com/es/selector-de-color/)

---

# Fuentes (tipo grafía)
![Es un anime en el cual se ve una hoja y alguien escribiendo en ella](https://i.pinimg.com/originals/73/2c/93/732c9365b62e5a832d2b2f9fba760c85.gif)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3m2tghmsue7532bdv7w4.png)

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](https://www.fontpair.co/)

### Google Fonts

![Página inicial de google fonts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/09y18k9m7o07xwv3eswn.png)

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](https://fonts.google.com/)

---

# Imágenes
![paisaje pixelart](https://i.pinimg.com/originals/b4/6c/d0/b46cd069a1837a0a881fe9b45bae456f.gif)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gw1b5id4fw0d1oe7x9wn.png)

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](https://www.pexels.com/es-es/)

### Unsplash

![inicio en la página de unsplash](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/32085183utz38869ott7.png)

**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](https://unsplash.com/)

---

# Iconos, Ilustraciones
![Anime femenino sonriendo](https://64.media.tumblr.com/2bd781e50eaf72e83cec59d371ae2070/tumblr_orpgyystZC1r2pvg2o1_540.gifv)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/etfj1os2ft7awpyf19zs.png)

**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](https://twitter.com/ninaLimpi)

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

Estas ilustraciones son bastante populares y con buen motivo.
=> [unDraw](https://undraw.co/)

## DrawKit
![Imagen descripción](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/841pigub3mntpm1d9k0e.png)

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](https://drawkit.com/)

---

**Espero que les haya gustado, si conocen algunas más interesantes no duden en comentarlas y no duden en seguirme en mis redes**.
* [Twitter](https://twitter.com/juan_ariasd)
* [Linkedin](https://www.linkedin.com/in/jpariasduque/)
* [Linktr](https://linktr.ee/Boudgnosis)
![todo bien](https://c.tenor.com/uDviGvD1FKAAAAAM/nyochio-d4dj.gif)