Detalles del Diseño

Screen Shot 2018-04-19 at 10.00.18 AM

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.

Screen Shot 2018-04-19 at 10.00.36 AM

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).

Screen Shot 2018-04-19 at 11.37.00 AM ¡Usen las medidas de pixeles!; es más fácil.

Regresando a los parámetros del diseño…

Screen Shot 2018-04-19 at 10.02.41 AM

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”.

Screen Shot 2018-04-19 at 10.02.03 AM

En el próximo “post” hablaremos de cómo entregarle al programador toda esta información.

¡Buen provecho!

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s