En los últimos meses he estado trabajando bastante en el diseño de prototipos con @figma 

Hoy os quiero enseñar 5 tips muy útiles que he utilizado para diseñar un prototipo de aplicación al completo.

Si necesitas crear una paleta de colores rápida, quédate.

Dentro hilardo 🧵:

Yo no soy diseñador, pero como bien sabes, trabajar en una #startup es sinónimo de adaptarte y aprender para sacar las cosas adelante.

Necesitaba crear algo denominado System Color ( o sistema de colores por si no sabes ingléh) que viene a ser una guía de como usar los colores.

Como soy buena gente, he creado una paleta de colores para que veáis el proceso. Es mu sencillo.

1. Elige un color principal.

Te recomiendo que sea un color fácil de identificar y que no canse la vista.

He elegido este... ¿azul?: hsl(226, 35, 30).

A partir del color principal, vamos a crear toda la paleta.

2. Creamos sombras de colores.

Te recomiendo crear 4 sombras de colores, por lo que sería 4+1 = 5 -> 100/5 = 20.

Tenemos que ampliar 20% de sombra hasta llegar al negro absoluto.

Algo así 👇👇

3. Creamos tonos a blanco.

Para ello hacemos el mismo proceso que en el paso 2 pero con color blanco, en lugar de negro.

Quedaría algo así 👇👇

4. Creamos nuestra paleta final de colores.

Eliminamos el negro y blanco absoluto y creamos nuestra paleta completa de colores con la siguiente numeración y con el color principal en el medio.


5. Demos un sentido y un significado a esos números.

Ahora tenemos claro qué color usar y cuando.

Y listo! Ya tienes una paleta de colores rápida y sencilla, con la cual podrás empezar a crear tus prototipos y fallar cuanto antes!


Espero que todo esto te sirva de ayuda!

Es un proceso muy básico que me ha ayudado en varias ocasiones.

Por supuesto lo aprendí de internet, así que aquí os dejo la fuente original:
https://bootcamp.uxdesign.cc/5-tips-on-colors-in-ui-design-85611bea670f

Si conoces más trucos para generar paletas de colores déjalo en los comentarios! 👇

Hasta luego, Lucah 👋

Puedes leer la versión bonita de este hilo aquí 👇

https://typefully.com/angelgonzaleh/RYRCHQ3

Cómo crear una paleta de colores rápida para tus prototipos

Si estás comenzando en el maravilloso mundo del Desarrollo Web 👨‍💻



Aquí te dejo 6 extensiones de Visual Studio Code más utilizadas que te facilitarán la vida... 
(antes de que instales extensiones a lo loco)



Dentro 🧵 ( siempre quise decir esto 🤗):

1. Prettier: Nos ayuda a escribir código bonito, básicamente, agregando espacios y ajustando el código para que sea más legible. Así aprendes buenas prácticas también✌️
 

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode


2. Color Highlight: Te recuadra el código hexadecimal de tu CSS con el color asociado. Mu bonito la verdad.


https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight


3. Live Server: Actualiza el navegador cada vez que guardemos cambios en nuestro código. Así no tendrás que actualizar la página cada dos por tres, se actualizará sola... TACHAAAN


https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer


4. Path Intellisense: Te ayuda a autocompletar rutas de archivos en tu código. Mu fásil. 


https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense


5. Auto Rename Tag: Te permite modificar las etiquetas de apertura y de cierre en HTML al mismo tiempo. 2x1 niña.


https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag


6. Material Icon Theme: Modifica los iconos del explorador de archivos en VSCode para que puedas diferenciarlos a simple vista. Además queda muy fancy.


https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme


Listo! 🤗

Pronto haré un hilo con extensiones interesantes para trabajo en equipo ✌️

No olvides de comentar y añadir tu extensión favorita en los comentarios! ⬇️⬇️⬇️


Puedes leer la versión bonita de este hilo aquí 👇
 https://typefully.com/angelgonzaleh/1ECo3fN