Share this page!

Freddy Montes Profile picture
Twitter logo
Jun 22 • 10 tweets • 5 min read
¿Eres #developer, pero te cuesta diseñar?

Te dejo mi serie: ✨ Diseño para desarrolladores ✨

Donde explico #DisenoUI desde la perspectiva de un #developer.

🧵 HILO
Aprende a crear lo básico que necesitas para cualquier diseño:

1. Colores
2. Fuentes
3. Variantes

Aprende como identificar lo malo del layout de tu #webapp y como arreglarlo.

¿Quieres poner un banner carrusel? ¿Seguro?... piénsalo dos veces.

Mira este estudio de Nielsen para ver la efectividad de este tipo de componentes.

El banner carrusel puede que no sea una buena idea... pero un buen "home hero" o banner principal si puede ayudarte a conseguir la acción del usuario que necesites.

El buen #disenoui se fija en los detalles, en este hilo te dejo 10 acciones para mejorar tus diseños.

El Card es un tipo de componente muy usado, popularizado por Google Material Design, aprende a crear uno con tu propio estilo.

Los formularios bien diseñados convierten más y ayudan al usuario a completarlos fácilmente.

90% de la información de tu página web es texto, te explico como usarlo correctamente en tus diseños.

❤️ Si te gusto este thread dale RT al primer tweet y sígueme para más contenido.

📕 Y tengo un libro gratis de tips de #HTML, #CSS y #JavaScript fmontes.com/99

📸 También hago contenido en instagram.com/fmontes

• • •

Missing some Tweet in this thread? You can try to force a refresh
　

Keep Current with Freddy Montes

Freddy Montes Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @fmontes

Freddy Montes Profile picture
Jun 20
Esta semana solo esperen de mi tweets y fotos de playa y cerveza. La programación habitual regresa la próxima semana
Playa Cocles, el caribe costarricense Image
El short del #Metaverso Image
Read 7 tweets
Freddy Montes Profile picture
Jun 16
💪🏽 ¿Quieres practicar o mejorar tu portafolio y no tienes ideas de proyecto?

😉 I GOT YOU

✨ 3 ideas de #webapps para practicar #frontend (incluye wireframes)

❤️ Ayudame con un RT

🧵 HILO
Un slider de productos responsive usando solo #CSS sin JavaScript.

1. Debe ajustarse a todos los tamaños de pantalla
2. Swap event para hacer el slide
3. Snap al borde de cada item

Hint: "css scroll snap"
#app para monitorear el precio de crypto (sí que hace falta 😢)

1. Un campo para buscar tokens
2. Agregar a la lista
3. Boton para eliminar

- API de precios: coinmarketcap.com/api/
- Backend: localstorage for v1 y un BaaS para v2
Read 5 tweets
Freddy Montes Profile picture
Jun 14
¿No entiendes #CSSGrids?

#CSSGrids es lo mejor para hacer layouts modernos te explico lo básico en pocos tweets.

Hagamos este layout básico.

🧵 [1/13]
El primer paso es crear el #HTML. Es solo un padre con tres hijos. Nada fuera de lo común.

[2/13]
En el #CSS lo primero que hacemos es agregar width y height al 100% al <body> y <html> para que nuestro layout ocupe toda la página. Y bordes a los elementos hijos.

[3/13]
Read 13 tweets
Freddy Montes Profile picture
Jun 11
✅ ¿Quieres practicar #frontend sin quedarte pegado?

✨ Te preparé un ejercicio para hoy ✨

🧵 Thread con tareas y pasos a realizar para completarlo.

❤️ RT please

PD. Estoy probando este formato, si les gusta puedo desarrollar muchos más ¡feedback bienvenido!
La aplicación es un #webapp para crear de facturas que les permite a los usuarios crear facturas agregando y/o eliminando items.

Los items consisten en

- Descripción
- Precio

La aplicación debe calcular el total a medida que se van agregando o items.
Analicemos el diseño.

Es una sola pantalla con dos estados:

🪫 Sin items:
1. Formulario: descripción, precio y botón
2. Mensaje de "no hay ítems"

🔋 Con items:
1. Formulario: descripción, precio y botón
2. Líneas de la factura con botón para eliminar
Read 17 tweets
Freddy Montes Profile picture
Jun 7
🙃 ¿Te quedas pegado cuando intentas hacer un proyecto de #programación?

😉 Te explico un método para salir de esa pega y evitar la frustración.

🧵 THREAD
🧠 Cuando no puedes arrancar es porque estás viendo la aplicación como una sola tarea gigante y tu cerebro está tratando de resolverla, pero en realidad lo que debes hacer es resolver muchas tareas pequeñas.

➡️ Vamos con un ejemplo.
🤑 Desarrollemos un #app para calcular propinas.

Ok, pero ¿Por dónde comienzo?

☝🏽 Lo primero yo recomiendo es hacer un pequeño dibujo de como se va a ver con anotaciones de como va a funcionar.
Read 19 tweets
Freddy Montes Profile picture
Jun 3
😭 Conseguir tu primer empleo en #frontend está difícil, lo sé.

😇 Mejorar tus posibilidades con un portafolio.

Te dejo los recursos que necesitas:

✅ ¿Como hacerlo?
❤️ Plantilla de portafolio GRATIS
💡 Diseños para proyectos

🥳 Ayudame con un RT

👇🏽 HILO
Escribí este post para dar más detalle sobre como y porque necesitas un portafolio.

Está lleno de recursos para crearlo, mantenerlo y publicarlo.

fmontes.com/es/blog/how-to…
Si el diseño no es lo tuyo, te dejo un template que diseño con todo lo necesario para desarrollar tu portfolio.

figma.com/community/file…
Read 5 tweets

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us on Twitter!

:(