Splash/Bienvenida/Repeat Grid

Cuando abrimos una aplicación en nuestro celulares, notamos que antes de comenzar a interactuar con ella vemos lo que se conoce como el “splash” o sea esa primera página que se carga y muestra el logo de la aplicación yo compañia. Si seleccionamos el nombre de la página “Password” y presionamos la tecla de “Option” y arrastramos hacia la izquierda la página o a tu preferencia; estamos duplicando todo el contenido y creando una copia. Esta copia cambiale el nombre de la misma forma que ya sabes hacer. Llamemosla “Splash“.

Screen Shot 2018-04-12 at 12.53.54 PM

Vamos a eliminarle el teclado iOS, los símbolos y el recuadro difuminado y hasta la foto de fondo. Luego usa la herramienta de rectángulo y dibuja uno en toda la primera página. Dale el color de tu preferencia. Si tienes Adobe Illustrator o Adobe Photoshop y tienes tu logo en vectores; guárdalo en formato .svg o en .png y colócalo en el centro de la página. Listo!, diseñaste la página de “spalsh” de tu maqueta.

Screen Shot 2018-04-12 at 1.13.34 PM

Acto seguido, usualmente luego de unos tres o cinco segundos, se muestra lo que sería el “Home” de la aplicación. ¿Estas listo? Ahora diseña, con lo que sabes hasta ahora, la primera página de tu aplicación. ¿Qué deseas que se vea en ella?

Screen Shot 2018-04-12 at 1.24.45 PM

Muy bien! Vamos a ver si hiciste lo mismo que yo! Duplicaste la página “Splash” y borraste el cuadrado azul de fondo. Seleccionaste la foto de la página de “Password” la copiaste y la pegaste en la nueva página “Home“. Diseñaste un botón y lo agrupaste con la palabra “Welcome” y lo colocaste en la parte inferior de la página. Como resultado tienes hasta ahora tres páginas que corren de izquierda a derecha; primero el “Splash“; luego el “Home” y cuando se presione el botón de “Welcome” pasamos a la página de “Password“. ¡Hasta ahora to va de show! Recuerda que el tanto el estilo del texto como el logo y el botón de bienvenida, los puedes guardar en el panel de símbolos para poder usarlos en páginas adicionales y así tu diseño mantiene un mismo estilo a lo largo de toda la maqueta.

Screen Shot 2018-04-12 at 2.31.04 PM

¡Ahora es que viene lo bueno! Vamos a crear una página la cual mostremos los servicios que tiene la compañía JRVstudio. Vamos a crear una página de “Servicios” y en ella vamos a usar la herramienta más poderosa de Adobe XD; el “Repeat Grid“.

Screen Shot 2018-04-12 at 3.04.28 PMEste botoncito es el que hace la magia de repetir patrones. El “Repeat Grid” se encuentra en el panel de propiedades; se mantiene inactivo hasta que tocas un objeto. La mejor manera de utilizarlo es una vez diseñas un grupo de objetos que vas a repetir más de dos veces en tu diseño. En este caso una vez está listo el grupo, solamente lo seleccionas y presionas el botón. Verás que se forma un rectángulo verde al rededor de tu objeto y el mismo contiene unos manipuladores, tanto a la derecha como a en la parte inferior del objeto. Estas pestañas te permiten tirar del objeto y como por arte de magia se repite la imagen cuantas veces desees.

Screen Shot 2018-04-12 at 3.04.07 PM

Screen Shot 2018-04-12 at 3.04.42 PM

“repeat Grid” activado.

Si arrastras hasta el final de la página obtendrás un patrón de cinco objetos con el diseño deseado. En mi caso diseñe un grupo con una esfera; un título grande y un subtítulo más pequeño.

Screen Shot 2018-04-12 at 3.05.27 PM

Ahora; busca 5 imágenes que se relacionen con las secciones diseñadas en el “Repeat Grid“. Para que el truco funcione debes de enumerar del 1 al 5 para que mantengan un orden al momento de ser colocadas dentro del “Repeat Grid“. Mantén abierta ambas ventanas; la del “finder” y al lado la de Adobe XD; selecciona todas las imágenes y arrástralas hasta la primera esfera. Cuando la esfera se torne de color azul, puedes soltar las imágenes y notarás que todas las demás esferas se rellenan con cada foto seleccionada.

Screen Shot 2018-04-12 at 3.03.46 PM

Imágenes enumeradas.

Screen Shot 2018-04-12 at 3.29.43 PM

¡Nítido!

Screen Shot 2018-04-12 at 3.29.37 PM

Cuando comencemos a cambiar el título de cada sección, nos vamos a encontrar con problemas debido a lo largo de los títulos. ¡No problem! Puedes cambiar lo que dice cada sección, pero al momento que cambias el estilo de letra; la fuente o familia; todos los demás cambian simultáneamente. Selecciona el título más largo y cambiarle el tamaño de la fuente.

Screen Shot 2018-04-12 at 3.39.36 PM

Si recuerdas bien, teníamos guardadas cinco imágenes y arrastraste cinco, pero en la página hay 4; ¿Dónde está la quinta? Para finalizar selecciona la página en la palabra “Services” al tope de ella y cuando aparezcan los tiradores en sus cuatro esquinas y medio, arrastra para alargar la página. Notarás un nuevo elemento en tu página…

Screen Shot 2018-04-12 at 3.56.23 PM

… este elemento  o pestaña azul indica el final de la página en tu celular y todo lo que se encuentre hacia de babajo de ella lo podrás acceder deslizando tu dedo en el celular para subir la página. Ahora desliza el restante del “Repeat Grid” y encontrarás la quinta foto.

Screen Shot 2018-04-12 at 3.59.26 PM

¿Qué te pareció el taller de hoy? Si te agrada lo que lees a diario, déjamelo saber en un comentario y comparte lo aprendido con tus amistades y tus diseños. Por hoy dejemos hasta aquí lo aprendido. Continúa tu práctica en el Diseño de Interfaces de Usuarios “UI Design“. En el próximo post, le daremos cariño a esta página con elementos iOS.

Screen Shot 2018-04-12 at 4.08.44 PM

¡Hasta el próximo post!

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