Mi colega y yo acabamos de completar el diseño de una interfaz web muy compleja. Sin embargo, tenemos que pasar a diseñar la interfaz de la tableta. ¿Hay alguna manera de reducir los diseños para que se ajusten a la tableta o debemos comenzar a rediseñar toda la interfaz nuevamente según el tamaño de la tableta?
¡Por favor ayuda!
Lo que está tratando de lograr se conoce como Diseño web receptivo. Por lo general, el desarrollador que contratará para crear la aplicación sabrá cómo reducir el diseño para tamaños de pantalla más pequeños.
No reduzca la escala de todo el diseño (esto también reducirá los tamaños de fuente). Primero cree una nueva mesa de trabajo con el mismo tamaño de la pantalla a la que se dirigirá. Luego trabaje con cada módulo (trozos/cajas). Si ha trabajado con una cuadrícula simple de 12/16 columnas en el diseño original, esto debería ser muy fácil de hacer. Debe tener una cuadrícula similar para la nueva mesa de trabajo y reducir la escala de cada módulo para que se ajuste a los nuevos tamaños de cuadrícula.
Por el bien del ejemplo. Digamos que el diseño original es una cuadrícula de 12 columnas. Y tiene un módulo de características que tiene 3 columnas de ancho. Y tienes 4 de esas características. Por lo tanto, ocupa una fila completa (3x4) Ahora, para la mesa de trabajo del tamaño de su mesa, cambie el tamaño del módulo para que se ajuste a 4 columnas. Ajuste el tamaño de fuente y el relleno en este módulo en caso de que el texto no se ajuste correctamente. (Asegúrese de que si está cambiando el tamaño de la fuente para algo como un estilo de encabezado, entonces debe replicarlo en toda la mesa de trabajo). ¿El módulo parece demasiado pequeño para el espacio? Luego hazlo de 6 columnas de ancho y ocupa dos filas (6x2 cada una)
Así es como funciona el proceso de toma de decisiones para el diseño receptivo. No es exactamente rediseñar todo porque es posible que algunas partes de su diseño no necesiten ser reelaboradas por completo, solo necesita disminuir, digamos, el fondo. También debe buscar cambiar el tamaño de los componentes si es necesario, como el relleno de los botones, el margen debajo de los párrafos. Entonces, si el valor del relleno alrededor del texto en un botón es de 30 px para pantallas de escritorio, para tabletas puede reducirlo a 20-24 px.
No es exactamente posible explicar todo el proceso. Hay un montón de recursos en línea que le darán consejos y puntos de vista. Hay un video relacionado aquí en Lynda.com. Puede buscar videos similares en YouTube. La mejor de las suertes.