EN
AR
RU
ZH
FR
ES
8 de marzo de 2025 • Por KWD
Cinco principios de diseño para que los desarrolladores mejoren la eficiencia: usar unidades CSS relativas, basar puntos de ruptura en el contenido en lugar del ancho del dispositivo, priorizar características sobre aspectos visuales, seguir el orden wireframe-diseño-código, y probar la capacidad de respuesta con herramientas apropiadas.
Conclusiones clave
- Usa rem y porcentajes en CSS en lugar de píxeles para estilos fluidos y escalables en todos los dispositivos.
- Establece puntos de ruptura de consultas de medios basados en las necesidades del contenido, no en el ancho del dispositivo, para un mejor rendimiento.
- Lista las características requeridas primero antes de enfocarte en los aspectos de diseño visual del desarrollo.
- Sigue un orden estricto: bosquejos de wireframe, luego diseño con color y tipografía, luego código.
- Prueba la capacidad de respuesta del sitio web utilizando herramientas dedicadas como LT Browser para compatibilidad móvil.
El diseño es la inteligencia hecha visible. - Alina Wheeler, Autora.
El papel principal de los diseñadores es diseñar los componentes visuales del front-end de una aplicación/sitio web. Su trabajo afecta la usabilidad y la experiencia del usuario de la aplicación/sitio web.
Primero resuelve el problema. Luego, escribe el código. - John Johnson
Los desarrolladores, por otro lado, se enfocan en codificar las ideas y conceptos en el desarrollo de funcionalidades de la aplicación/sitio web.
Los diseñadores son una raza diferente a la de los desarrolladores. En empresas pequeñas, sus responsabilidades se superponen y a veces también en empresas más grandes. Hay un par de principios que los desarrolladores podrían tener en mente para poner el producto en producción.
Relatividad en CSS
Utilizar em, rem y porcentajes ayuda a la fluidez de tus estilos CSS en diferentes tamaños de pantalla.
En lugar de usar píxeles como unidades, usa rem. Por ejemplo, section.hero {width: 90%; font-size: 1.5rem;} en lugar de section.hero {width: 900px; font-size: 16px;}
Por ejemplo, si necesitas cambiar un punto de quiebre, tus anchos permanecen consistentes. Y puedes cambiar el tamaño de fuente de cualquier elemento simplemente cambiando el tamaño de fuente del elemento.
Media Queries y Contenido
El contenido determina los puntos de quiebre para cualquier dispositivo y no el ancho del dispositivo.
Si consideraras el ancho del dispositivo, los dispositivos evolucionan a una velocidad exponencial con la que como desarrolladores nunca podríamos mantenernos al día.
Necesitamos encontrar una solución inteligente para este problema y el contenido nos proporciona una oportunidad para resolver este problema.
@zomigi la primera media query es en realidad la ausencia de soporte para media queries. — Bryan Rieger (@bryanrieger) 1 de diciembre de 2011
Si te sientes un poco perdido, usa la Calculadora de Tipografía de Proporción Áurea al decidir las longitudes de línea.
Otro aspecto importante de tener puntos de quiebre de contenido es la mejora del rendimiento porque todo parece funcionar bien sin mucho que depurar.
La brevedad es el alma del ingenio. - Polonio
Manténlo breve, mantenlo simple.
Enumera las Características Primero
Como desarrolladores, comenzamos primero enumerando las características que deben desarrollarse.
La mayoría de las veces, cuando nuestro trabajo se superpone con el de los diseñadores, nos perdemos en los aspectos visuales en lugar de enfocarnos en el trabajo en cuestión, que es enumerar las características primero y luego pasar a los otros aspectos.
Las preguntas que te haces son un indicador del tipo de resultado que producirás.
Digamos que te haces una pregunta: "¿Debería esto estar flotando a la izquierda o a la derecha?" en lugar de "¿Cuáles son las formas en que puedo hacer que el usuario se sienta cómodo usando la aplicación?"
Enumera las características primero, luego diseña.
Wireframes, Diseño, Codificación: En ese Orden
Sea lo que sea que hagas, primero haz un bosquejo aproximado de la idea en papel o un wireframe aproximado.
Luego haz el diseño con esquemas de color, tipografía y elementos visuales.
El último paso es codificar.
El tiempo de producción mejorará si se sigue ese orden.
LT Browser - Prueba de Responsividad
¿Sabías que existe un navegador para probar la responsividad de una aplicación o sitio web? Se llama LT Browser (Navegador Lamda Test).
Es el navegador de próxima generación para crear, probar y depurar sitios web móviles.
https://www.youtube.com/watch?v=RH95O9mOGoc
Conclusión:
En resumen, como desarrolladores estos son los cinco principios de diseño que puedes seguir para poner tu sitio web o aplicación en marcha con eficiencia y pocos dolores de cabeza.
