Antes de enviarle al programador tu prototipo, tienes la opción de enviarle un «link» en el cual el programador puede ver con exactitud las medidas y espacios que hay entre cada imagen u objeto colocado en tu maqueta; tanto colores como estilos. Toda esta información el programador la usa para programar, digamos en Xcode de Apple, la maqueta diseñada.
Luego de enviarle el «link«, el programador lo abre, digamos en Chrome o Safari, y comienza a ver página por página el diseño. Cuando selecciona cada elemento puede notar que se marcándoselo unas líneas guías rosadas las cuales le muestran el espacio sea en px; dp; o pt.
NOTA: La unidad de medición para iOS es en pt; la unidad de medición para Web es en px; y la unidad de medición para Android es en dp. Para los «artboards» creados costomizables es tambien px.
Estas siglas significan:
- pt = Puntos (1/72 de una pulgada, basado en el tamaño físico de la pantalla).
- px = Pixeles actuales en la pantalla.
- dp = Densidad de un pixel independiente (Unidad abstracta que está basada en la densidad física de la pantalla).
¡Usen las medidas de pixeles!; es más fácil.
Regresando a los parámetros del diseño…
Puedes notar que la columna derecha te muestra información de lo que selecciones a tu izquierda; por ejemplo; seleccioné la palabra Ver del botón para la sección de Diseño Web; notarás unas líneas guías rosas marcando la distancia hasta los márgenes de la pantalla y el tamaño del recuadro que compone la palabra Ver. El recuadro mide 36 px X 29 px; la distancia o ubicación en la pantalla es 294 px en el cuadrante X; y 464 px en el cuadrante Y. Puedes notar el estilo de la fuente; tamaño; alineamiento; color; opacidad; hacia qué apunta al tocar; transición; velocidad y duración. En fin toda una gama de detalles que solamente necesita saber un programador para poder poner a correr tu prototipo. Todo objeto tiene un parámetro distinto y el programador puede copiar esta información para usar en su trabajo como «developer».
En el próximo «post» hablaremos de cómo entregarle al programador toda esta información.
¡Buen provecho!
JRVstudio 