5 principios de diseño para desarrolladores

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.