¿Eres #developer, pero te cuesta diseñar?

Hoy en "Diseño para desarrolladores": 10 pequeñas acciones para mejorar tus diseños

🚀 RT para salvar un #programador a la vez

#uidesign #ui #ux #webdesign #diseno #disparades

👇🏽 UN HILO 👇🏽
En tus textos usa al menos 1.5 de alto de línea.

Por ejemplo si el tamaño de fuente es 16, multiplícalo por 1.5 y te da 24 (o sencillamente usa line-height: 1.5 en css).
No deformes tus imágenes, cambia el tamaño sin cambiar el ratio o usa crop, pero nunca las deformes.
NUNCA justifiques tus párrafos, eso funciona en papel, sin embargo, en pantallas hace el texto más difícil de leer.
Haz tus botones (o área de click) de al menos 44px de alto para que sea fácil de tocar con el dedo.
No utilices negro puro (#000000) en texto o fondos porque causa tensión ocular, mejor utiliza un gris muy oscuro, por ejemplo #111111.
Utiliza siempre iconos de la misma familia. Mezclar diferentes iconos o ilustraciones, incluso estilos de fotos hace ver tu diseño poco profesional.
En los campos del formulario no uses placeholders como labels porque el usuario pierde contexto al enfocarse en los campos y además los labels son accesibles por defecto.
Si vas a utilizar sombras tienen que ser "suaves", las sombras muy marcadas no se sienten naturales. Aumenta el blur y disminuye la opacidad.
Trata de no utilizar botones con fondo gris y poco contraste porque el gris es el color casi que universal de que algo está deshabilitado.
No uses texto centrado para párrafos muy largos o peor para todo tu sitio web.
❤️ Si te gustó este contenido

👋🏽 Sígueme para más

🌅 Mi Instagram comparto aún más tips sobre diseño, desarrollo y empleos de tecnología.

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

21 Nov
🌅 Buenos días 🌅

¿Buscando proyectos para practicar o para portafolio?

🧵 Te dejo 3 que me gustan por acá

#frontend #webdev
Desarrollar una pagina de producto para crowfunding y aprende:

1️⃣ Responsive design
2️⃣ Transiciones en hover states
3️⃣ Layouts con #CSS

frontendmentor.io/challenges/cro…
🏠 Room homepage

El layout de este está retador, pero te queda un proyecto interesante para mostrar en tu portafolio.

frontendmentor.io/challenges/roo…
Read 4 tweets
4 Nov
Te explico 4 selectores de #CSS que quizás no conocías o quizás si, no sé, pero igual te los explico.

❤️ RT para que todos aprendamos

🧵 THREAD
Se llaman "Selectores Parciales" te permite seleccionar elementos haciendo match parcial o completo del valor de sus atributos.

Para aplicarlos se usan [] y dentro el nombre del atributo y el valor.
Empecemos con el más común "igual" y se representa con el símbolo = .

Seleccionamos un elemento que tenga el atributo "lang" con el valor igual a "en-US".
Read 7 tweets
19 Oct
Aprende a mejorar el #UX, el #SEO y la #accesibilidad de tu sitio web con estos:

🚀 9 trucos de #HTML

🎁 Regalo al final ;)

❤️ RT para compartir.

THREAD 👇🏽
Enfocar un <input /> cuando tu página carga.

Es una buena practica de #UX si tienes una pagina donde la tarea comienza en un input.

Por ejemplo Google enfoca el campo de búsqueda al cargar.
Agrega el atributo "download" para forzar a el navegador a descargar el archivo del <a>.

Por ejemplo algunos navegadores abren PDF pero quizás necesitas forzar que el usuario lo descargue
Read 11 tweets
24 Sep
🙃 ¿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 18 tweets
23 Aug
🌅 Buenos días 🌅

🌟 Aprender #frontend. El path más perfecto jamás creado (es broma ¿o no?)

1. #HTML y #CSS
2. Proyecto
3. Proyecto
4. Proyecto
5. #JavaScript y proyecto
6. Proyecto
7. #React y proyecto
8. Y más proyec...

Te dejo 4 sitios donde encontrar proyectos (THREAD)
Resuelve los desafíos de #HTML, #CSS y #JavaScript del mundo real mientras trabajas con #diseñosui profesionales.

frontendmentor.io/challenges
Mejora tus conocimientos de #HTML y #CSS practicando con plantillas de diseño reales. Y ofrecen un canal de Slack para preguntas y dudas.

codewell.cc/challenges
Read 6 tweets
2 Aug
5️⃣ Aprende con estos cinco cursos de #Google, gratuitos y cortos. Fortalece tu carrera como #frontend #developer

⭐️ BONUS al final
❤️ RT para ayudar a la comunidad

👇🏽 THREAD Down pointing backhand index

#webdev #code #programmer #html #css #javascript #CodeNewbie
Fundamentals of Graphic Design: Aprenderás los principios fundamentales del diseño gráfico: creación de imágenes, tipografía, composición, color y forma. Principios que puedes aplicar al diseño web.

learndigital.withgoogle.com/digitalgarage/…

#graphicdesign #webdesign #ui #CodeNewbie
Front-End Web UI Frameworks and Tools: Bootstrap 4: Aprenderás sobre grids y diseño responsivo, componentes CSS y JavaScript de #Bootstrap, además sobre los preprocesadores #CSS, #Less y #Sass.

learndigital.withgoogle.com/digitalgarage/…

#responsivedesign #webdesign #boostrap #CodeNewbie
Read 8 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

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

Donate via Paypal

Thank you for your support!

Follow Us on Twitter!

:(