Xcode & Swift de Apple

Siempre me ha interesado el poder aprender a crear una aplicación para iPhone. Comienzo a leer sobre el tema y a estudiarlo y me desvio del tema por x o y razón. No sé cuántas veces comenzaré y cuántas veces me desviaré del tema; así que ahora que tengo una idea para un App, un norte a seguir, quiero volver a entrar de lleno. Así que vamos a ver como me vá esta vez.

Como diria C3PO; “Here we go again”. 😇

Dición!

Preguntas y respuestas

Screen Shot 2018-05-17 at 8.48.01 AM

En mi canal de YouTube JRVstudio hay un “playlist“; donde para junio de 2017 coloqué una clase completa de varios videos en donde les explicaba como crear maquetas usando Adobe XD.

Screen Shot 2018-05-17 at 9.15.52 AM

Playlist de 21 capítulos.

A veces uno se pregunta: ¿habrá gente que vea mis videos y les agrade?… al parecer si! Una visita no solo vio los videos si no que me hizo una pregunta la cual deseo compartir con ustedes. El usuario Jose Angel Herrera hizo la siguiente pregunta:

Screen Shot 2018-05-17 at 8.51.42 AM

Para empezar, Gracias por ver los videos Jose y e aqui tu respuesta. Adobe XD es una plataforma que constantemente Adobe está evolucionando y creando actualizaciones constantemente. Si visitas la página web de Adobe: https://www.adobe.com/products/xd/features.html verás que Adobe coloca una descripción de los updates realizados a Adobe XD. He aquí los más recientes.

Screen Shot 2018-05-17 at 8.30.51 AM

Actualizaciones recientes.

Pues bien, para cuando realice el video que viste; Adobe incluía dentro del programa de Adobe XD, los UI kits de Apple y de otros como Android y Windows. Pero ya para el 2018 cuando el programa está más robusto mejor actualizado, Adobe también le elimina cosas que ya no necesitan que se encuentren en el. Por eso antes para utilizar los UI Kits de Apple, solo acudías al menú de File/Open UI Kits/Apple iOS. Ahora para el 2018, esos paquetes o “kits” los tienes que bajar desde la página de los creadores originales.

Screen Shot 2018-05-17 at 8.37.55 AM

En este caso ahora el menú es: File/Get UI Kits/Apple iOS y así según lo que desees bajar. Una ves selecciones ese comando se abre una página web de Apple donde te muestra los vínculos para descargar los paquetes UI.

Screen Shot 2018-05-17 at 8.38.16 AM

Una vez descargados verás unos archivos como los siguientes:

Screen Shot 2018-05-17 at 8.40.29 AM

Estos archivos debes de guardarlos en algún lugar de tu computadora para poder accesarlos cuando los necesites. Si yo abro el primero verás lo siguiente:

Screen Shot 2018-05-17 at 8.40.55 AM

Toda una gama de letras, botones, símbolos, estilos los cuales puedes usar en tus maquetas. Así que no es que tienes dañado tu programa, ni nada parecido; simplemente es que Adobe actualiza constantemente sus programas y con cada actualización puede que te cambien o te muevan algo de sitio; solo debes de visitar regularmente la página de Adobe para ver que cosas han cambiado o utiliza el vínculo que se encuentra al comienzo del programa: What’s new?; el mismo te lleva directo a lo nuevo.

Screen Shot 2018-05-17 at 9.11.44 AM

Espero haberte contestado tu pregunta!

Bonito día!

 

Entrega de archivos

Ayer te explique por qué tienes que exportar cada página bien ordenada e identificada; debido a lo que estas viendo en la imagen inferior. Imagina buscar dentro de este directorio; que contiene 253 documentos; la gráfica del “Username” a 3x!; y no deseas tener a un programador enfogonado contigo; jejejejej.

Screen Shot 2018-04-20 at 12.59.37 PM

Ahora vamos a exportar cada página.

Dentro de Adobe XD seleccionas la primera página y seleccionas File/Export/Selected… o “Command + e“. En este primer ejemplo verás que ya exporté a cada página el formato .PNG. Cada página la identifiqué en Folders enumerados desde 00- hasta 11- + el nombre de la página. Observa la siguiente imagen. Cada página; dependiendo de lo que contenga en su interior; graba archivos desde 1x a 3x de cada uno. Por eso es bueno tener un PDF impreso de cada página para visualizar cada imagen exportada.

Screen Shot 2018-04-20 at 1.08.05 PM

Cuando deseas exportar a PNG te recomiendo usar estos parámetros…

Screen Shot 2018-04-20 at 1.11.11 PM

Cuando desees exportar a JPG te recomiendo usar estos parámetros… y

Screen Shot 2018-04-20 at 1.10.38 PM

Cuando desees exportar a SVG te recomiendo usar estos parámetros… (Recuerda que los archivos SVG los puedes abrir también en Adobe Illustrator.)

Screen Shot 2018-04-20 at 1.10.09 PM

Ahora te preguntarás: ¿Para qué es el Export Batch; el cual está desactivado?

Screen Shot 2018-04-20 at 1.23.22 PM

¿Recuerdas el panel de Layers? ¿Recuerdas el icono que aparece cada vez que el “mouse” hace un “roll over” sobre cada layer? Ese icono de “share” sirve para cuando un día recibes la llamada del programador y te dice: —Vale, perdí o dañé la imagen del botón de la página de Home; el botón de solicitar servicio y el botón de Regresar de la página de Gracias”; ¿Me los puedes enviar otra vez?

Screen Shot 2018-04-20 at 1.25.24 PM

¡No problem!

Rápidamente abres el panel de “layers“; buscas en tu maqueta los objetos que te solicitó el programador; y cada vez que seleccionas uno; en los “layers” se va a sombrear el objeto seleccionado. Ahora con el “mouse” de tu computadora activas ese botón de “Batch Export” para cada objeto, y si deseas cambiarle el nombre el objeto o “Layer” lo puedes hacer también en estos momentos.

Una vez estes listo para exportar los botones solicitados, solo debes de presionar “Export Batch” o “Shift + Command + e“; creas un folder nuevo y luego el formato adecuado o solicitado: PNG; SVG o JPG.

Screen Shot 2018-04-20 at 1.52.00 PM

En este caso cree un folder con el nombre de “solicitados” y dentro del mismo guardé la exportación.

Screen Shot 2018-04-20 at 1.55.00 PM

Como podrás ver cada botón fue exportado en sus distintos tamaños.

Al final del camino comprimes todos los archivos en un archivo .ZIP; buscas un disco externo y entregas tu maqueta al programador.

Screen Shot 2018-04-20 at 1.59.44 PM

Screen Shot 2018-04-20 at 2.02.57 PM

Archivo .ZIP; tamaño 139 MB.

Ahora bien ¿cuál es el próximo paso? I have no idea! jejejejejejej eso deseo saber yo! Me gustaría que algún programador me dijera o me ayude a ver la luz al final del camino. A mi entender un programador usa el programa que mejor le sirva para programar y crear aplicaciones para iOS o Android OS. Los que programan para iOS suelen usar el programa llamado “Xcode 9“; con el lenguaje “Swift 4“. En este link encontrarás más información de ese mundo: https://developer.apple.com. Para ser un “Developer” debes de tener una licencia a mi entender, en fin ese mundo es todo un tema distinto. Así que si eres Programador y deseas mostrarnos cómo llevas un prototipo a una aplicación final para aprobación y distribución estoy a tu disposición para compartir ese conocimiento y requisitos.

Espero te haya gustado esta serie de escritos relacionados a la creación de una maqueta y prototipo usando Adobe XD. Juega con XD; tiene muchas probabilidades de diseño con herramientas sencillas y deja tu comentario en los escritos para ayudarte con cualquier pregunta que tengas al respecto.

Eso fue todo por el momento; visita nuevamente el link del prototipo y compártelo con un programador que conozcas para ver si logramos pasar juntos a la siguiente faceta.

https://xd.adobe.com/view/7f784932-20f1-4fed-a748-15c7a4b86882

Embed Code:

https://xd.adobe.com/embed/7f784932-20f1-4fed-a748-15c7a4b86882

¡Buen fin de semana!

PD: a ver que nos inventamos ahora!…

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!

¿Algún comentario?

Cuando compartimos nuestros prototipos en la internet, toda persona que tenga el link; tenga o no tenga un “Adobe ID” pueden abrir el “link” en cualquier navegador de internet, entrar con sus credenciales, sea de Adobe o como un visitante y hacer comentarios sobre cada página del prototipo. Si notas bien en la imagen inferior, debajo del área donde escribes los comentarios, hay un ícono de un “pin” o tachuela y con ella puedes colocarle un número a tu comentario y colocar ese número en el lugar de el cual estes escribiendo un comentario. De esta forma el creador del prototipo puede seleccionar el número y ver qué persona le hizo el comentario y poder responderle.

screen-shot-2018-04-18-at-6-44-35-pm.png

Te preguntarás, ¿Cómo el diseñador sabe que alguien le dejó un comentario? El diseñador va a recibir un e-mail de Adobe, dejándole saber que hay comentarios en su prototipo; adicional recibirá una alerta en su “Creative Cloud” y cuando abrá las alertas podrá ver los comentarios realizados.

Screen Shot 2018-04-18 at 6.54.08 PM

Screen Shot 2018-04-18 at 6.55.14 PM

Bueno; términamos con la sección de probar, compartir y comentar; ahora en los próximos “post” hablaremos sobre cómo preparar tu maqueta para entregarla al programador o “Developer” para que haga su parte del proceso; la más importánte!; sin programador, no hay programa!

¡Buenas noches!

“Device Preview”

Otra forma de la que podemos ver y probar nuestro prototipo es conectando un celular (iPhone o Android) con su cable USB a la computadora en donde estemos diseñando nuestra maqueta. Pero antes debemos de instalar en nuestros dispositivos; sea iPad o iPhone la aplicación Adobe XD. Encontrarás más información desde este link en Adobe.com; https://www.adobe.com/products/xd.html#mobile.

Screen Shot 2018-04-17 at 8.19.21 PM

Luego de que la aplicación esté instalada, presionarás el botón en forma de ícono de celular que se encuentra en la parte superior derecha en tu computadora.

Screen Shot 2018-04-17 at 8.19.46 PM

Si no tienes tu celular conectado a tu computadora te mostrará un mensaje como el anterior y te indicará también en dónde puedes bajar la aplicación de Adobe XD para tu dispositivo. Adobe XD tiene la habilidad de que puedes ver tu maqueta en diferentes dispositivos simultáneamente. Digamos tienes una maqueta con diseños para iPhone y iPad; pues una vez todos los dispositivos estén conectados; en esta ventana los verás a todos y listos para probar tu prototipo.

IMG_6199

Luego de instalar la aplicación en tu dispositivo; debes de “loguearte” en ella con el usuario y la clave de acceso de tu Adobe Creative Cloud; también puedes usar Facebook o Google, de no tener cuenta con Adobe; pero mi consejo es siempre tenerla.

Al activar la aplicación de Adobe XD, verás el “Splash Screen” de Adobe; luego una carga en porciento de tu prototipo y finalmente aparece la página que seleccionastes como el “Splash Screen” de tu prototipo. En el video que te mostré al tope de este escrito me verás jugando con la aplicación. Recuerda que mientras tengas el celular conectado a tu computadora; podrás mover y editar tu maqueta y los cambios se reflejan en el celular en vivo; no tienes que salvar el archivo; ni cerrar ni volver a abrir la aplicación.

Oto modo de ver y compartir tu prototipo es salvandolo en el espacio que te dá Adobe en la nube para guardar y sincronizar tus trabajos. Todo usuario con la licencia del Creative Cloud de Adobe tiene 100GB de espacio en la nube.

Screen Shot 2018-04-17 at 9.02.24 PM

Cuando Adobe se sincroniza con tu computadora; crea un “foulder” o “atajo” en tu ventana del “Finder” para acceso inmediato. Guarda tu maqueta en ese foulder y tendrás acceso a todos tus trabajos desde todas tus aplicaciones móbiles de Adobe y computadoras.

Screen Shot 2018-04-17 at 9.06.54 PM

Regresando a Adobe XD en tu computadora; otro modo de ver tus prototipos en tu celular es usando el botón de “Share” donde puedes publicar y compartir un vínculo directo desde tu espacio en el Creative Cloud en Adobe.

Screen Shot 2018-04-17 at 8.55.02 PM

Con el prototipo guardado en la nube; puedes abrir el mismo con la aplicación del celular de Adobe XD sin tener que estar conectado a tu computadora con el cable USB. La aplicación en el celular puedes ver los “art boards” por separado; puedes compartir un vínculo en las redes sociales, copiar y enviar solo una pantalla y hasta pedirle a la aplicación que te ayude a identificar los “hotspots” para fácil navegación del prototipo. Este detalle se activa cada vez que presionas erroneamente en la pantalla de tu celular; Adobe XD te indica dónde seleccionar correctamente marcando los lugares correctos en color azul tenue intermitente.

Por hoy dejemoslo hasta aquí!; mañana hablaremos un poco más de compartir el vínculo  de tu prototipo con amistades y clientes.

¡Buenas noches!

Uniendo cables en Adobe XD

Screen Shot 2018-04-17 at 8.41.24 AM

Cuando comenzamos a darle vida al prototipo; utilizaremos unos cables o “wires” que le dicen al programa de dónde a dónde corre la navegación entre las páginas diseñadas.

Screen Shot 2018-04-17 at 8.39.24 AM

Cuando seleccionamos la primera página vamos a ver una pestaña azul con una flecha blanca. Al seleccionar esta flecha blanca y arrastramos el ratón de la computadora vamos a notar que arrastramos un cable azul, el cual podemos conectar en cualquier otra página u objeto.

Screen Shot 2018-04-17 at 8.40.00 AM

Cuando el cable está conectado al próximo punto vamos a ver una ventana flotante en la cual básicamente podemos programar el destino; la transición; el movimiento; y la duración de la transición. Más adelante durante el proceso de programación, si deseas volver a una página a re programar algo que no te agradó; puedes seleccionar el destino o la salida del cable y cambiar estos parámetros de igual forma en que los programaste en un principio.

Screen Shot 2018-04-17 at 8.40.13 AM

Notarás también que aunque tus páginas se compongan de objetos agrupados puedes utilizar la tecla de “Command” o seleccionar más de una vez con el ratón de la computadora hasta entrar al objeto deseado. En mi opinión es más fácil usar la tecla “Command” + “click“.

Screen Shot 2018-04-17 at 8.55.24 AM

En la siguiente imagen acomodé la primera página un poco hacia abajo para que puedan apreciar el cable que también sale desde el logo JRVstudio y el destino de ambos cables es la siguiente página llamada “Home“. Si deseamos eliminar o cortar un cable para que no se ejecute; sencillamente lo seleccionamos y lo sacamos hacia afuera; como si desenchufaras un cable de la electricidad de la pared de tu casa.

Screen Shot 2018-04-17 at 8.59.22 AM

Ahora lo que debes de realizar es jugar con interconectar el prototipo y analizar los movimientos y tiempos entre cada ventana. Como notarás, en mi diseño tuve que duplicar la página de “Password” por que para que salga el teclado debo primero seleccionar el lugar donde voy a escribir. Por tal motivo conecté un cable desde el botón de “Welcome” a una página sin teclado y luego al tocar el espacio para escribir el “Username” y “Password“; aparece por disolvencia la página de el teclado; dándonos la sensación de que solo apareció el teclado. Recuerda jugar con los parámetros del tiempo.

 Screen Shot 2018-04-17 at 9.10.57 AM

Si notas el menú de los segundos contiene unos parámetros pero con el teclado puedes escribir los segundos que le convenga más al movimiento. en este caso le escribí (punto-dos.2 segundos. También recuerda que desde la primera vez que programas estos parámetros, ellos se quedan igual para los próximos y si deseas tener distintos parámetros debes de cambiarlos con cada página a programar.

Screen Shot 2018-04-17 at 9.14.28 AM

Una vez programada la maqueta, presiona “Command” + “enter” para comenzar a probar el prototipo en la ventana del “Desktop Preview“. Aquí te muestro la grabación de este primer modelo. El círculo blanco transparente que notas en el video es el ratón de la computadora, comportándose como si tocaras la pantalla de tu celular con tu dedo.

En el video notarás los movimientos programados para el prototipo. Unos fueron movimientos disolventes y otros fueron movimientos de derecha o izquierda. También notarás que al momento que llegamos al final de las páginas diseñadas no tenemos un icono de retorno o no nos movemos a otras páginas debido a que no hemos continuado con el diseño de la maqueta. Nos hemos concentrado en estas primeras páginas. Una maqueta puede tener un sin número de páginas. Por el momento les deseo mostrar cómo funciona esta primera experiencia entrelazando páginas y cables. Jueguen con la programación, añadan más páginas a sus diseños y nos veremos en el próximo post donde probaremos nuestra maqueta en un iPhone.

¡Hasta luego!

 

 

Prevista de escritorio con Adobe XD

Screen Shot 2018-04-16 at 3.42.39 PM

En la parte superior derecha de XD existen cuatro botones importantes:

Screen Shot 2018-04-16 at 3.47.08 PM

  1. Zoom
  2. Device Preview
  3. Desktop Preview
  4. Share

Por el momento hablemos del tercer botón; el “Desktop Preview“. Cuando activamos este botón se abre una ventana flotante la cual nos muestra la maqueta de tal forma, como si estuviéramos usando el celular para interactuar con nuestra aplicación. También puedes activar esta ventana con los atajos de tu teclado “Command” + “return” o “enter“. Esta ventana tiene la habilidad de mantenerse abierta aún mientras trabajas en arreglos o cambios en la maqueta. Cada vez que tocas un “artboard“; la ventana de Preview en el escritorio nos muestra o se actualiza con la imagen de la ventana en uso y todo arreglo se actualiza al instante. La misma tiene la habilidad de grabar un video de la interactividad de la maqueta. Digamos que ya tienes tu maqueta vinculada con todos los botones enlazados y deseas grabar un video para enviarlo al cliente o amistades para que puedan apreciar cómo se comportaría la maqueta una vez un programador le da vida.

Screen Shot 2018-04-16 at 4.04.49 PM

Con la ventana de vista previa “Preview” puedes grabar las acciones de la maqueta.

Si presionas el botón superior que se encuentra al lado de los segundos 00:00; la ventana comenzará a grabar todo lo que tocas y mueves con el teclado o ratón de tu computadora. Te preguntarás; ¿Con el teclado?; Si no tienes la maqueta vinculada aún, puedes usar las teclas de flechas en tu teclado para navegar de izquierda a derecha en ambas direcciones, por toda la maqueta. En el siguiente video pueden ver como logro navegar por la maqueta usando solamente el teclado de la computadora.

 

Este video luego puede ser parte de una presentación final al momento de venderle la idea de la aplicación al cliente. Esta ventana muestra, a mi entender, muchas probabilidades de uso. Si regresamos un poco al principio de este escrito te preguntarás y que hace la sección de Zoom; Device Preview y Share? Con el botón de zoom puedes acercarte y alejarte mientras trabajas con la maqueta; y hasta puedes entrar los valores con tu teclado.

Screen Shot 2018-04-16 at 4.14.07 PM

Zoom.

Con el botón de “Device Preview” puedes ver tu maqueta usando tu celular  e interactuar con la misma como ti la misma estuviera ya programada por un “Developer” o “Programador“; siempre y cuando tengas instalado en tu celular la aplicación de Adobe XD que encuentras en Adobe.com.

Screen Shot 2018-04-16 at 4.16.12 PM

Device Preview.

Nota: Recuerda instalar esta aplicación en tu celular para los próximos escritos.

Screen Shot 2018-04-16 at 4.22.47 PM

Adobe XD para iPhone.

Con el botón de “Share” puedes enviarle una copia a tus amigos o colegas con los que estas trabajando la aplicación para que naveguen y vean tu maqueta y recibas un “Feedback” o sugerencias de ellos. Este botón usa tu espacio en la nube de Adobe.com; te suministra un “link” o vínculo para que distribuyas. Recuerda que todo aquel que obtenga el vínculo puede ver tu trabajo secreto! jejejejeje, mucho cuidado a quién lo repartes.

Screen Shot 2018-04-16 at 4.17.03 PM

Share.

¡Mañana comenzaremos a vincular nuestra maqueta!

¡Buenas noches!

ícono

Al principio de esta serie de “post” sobre Adobe XD les mencioné que XD tiene una virtud poderosa, y es que trabaja con vectores como Adobe Illustrator. Este don es muy bueno debido a que no importa cuanto achiques o agrandes un vector, el mismo se verá bien debido a que los vectores son meramente cálculos matemáticos y no son pixeles; forma en la que trabaja por ejemplo Adobe Photoshop.

Screen Shot 2018-04-13 at 1.16.34 PM

Como recordarán nos quedamos diseñando la barra inferior de nuestra maqueta, e importamos de las maquetas para iOS una barra para colocar iconos. Eeeee… Mirándola bien, no la voy a usar!; vamos a usar y crear nuestros propios iconos. Hoy día usando servicios como: Adobe Stock, Getty Images, iStock, Pond5 y muchos otros servicios que existen en la internet, para comprar fotografías y contenido; podemos encontrar iconos ya creados para ahorrarnos muchos dolores de cabeza o adelantar camino. Ejemplo: digamos que estos iconos los quiero usar pero necesito simplificarlos para que sean propios de la maqueta creada. Si los iconos están creados en vectores, podemos usar dos programas para alterarlos: Adobe XD o Illustrator. Vamos a usar XD!

Screen Shot 2018-04-13 at 1.21.47 PM

Para la sección de Diseño gráfico voy a usar solamente la pluma. Utilizando nuestra herramienta de selección, la cual accedemos a ella presionando la tecla “v” y realizando un “double click” en el vector, podemos seleccionar los vectores que deseamos eliminar.

Screen Shot 2018-04-13 at 1.41.51 PM

Notarás que a casi todos los iconos les eliminé detalles en sus vectores para simplificarlos un poco más; pero el icono de la foto lo cambié por completo. El mismo lo eliminé y usando Adobe XD utilicé un rectángulo grande y muchos pequeños sobrepuestos. Luego los agrupé todos y utilizando las herramientas del “Pathfinder” que se encuentran al lado del botón del “Repeat Grid” pude crear un nuevo icono representativo de un negativo de video. Luego los colocamos juntos, los alineamos y el resultado lo vemos en la siguiente imagen.

Screen Shot 2018-04-13 at 1.46.32 PM

¡Eso es todo por hoy! Sigan diseñado sus páginas. Recuerden utilizar el esquema inicial de aquel “brainstorming” que crearon al principio de esta serie; o hagan como yo, que estoy creando las páginas según llega la musa y según les voy escribiendo estos “post“, jejejejejejejeje! ¡Salven sus trabajos! “Command + s“…

Screen Shot 2018-04-13 at 2.10.30 PM

La semana que viene comenzaremos a trabajar con el prototipo. No se lo pierdan!

¡Buen fin de semana!

Cariño

Screen Shot 2018-04-13 at 9.34.12 AM

Ayer les dejé una encomienda y era darle cariño a la página de servicios del estudio JRV. ¿Cómo les fue? A mi de maravilla! jejejejejejej. Aquí les dejo el diseño!

Screen Shot 2018-04-13 at 9.50.43 AM

Como pueden ver le apliqué una sombra a las esferas de cada servicio. Este resultado lo puedes lograr con solo visitar el panel de propiedades y cuando selecciones la primera esfera puedes activar el checkmark para Shadow y ajustas los parámetros para x; y; b (blur o difuminado). Rápidamente notarás que las demás esferas adquieren la misma propiedad.

Screen Shot 2018-04-13 at 9.54.26 AM

Nota que también le añadí un botón que dice Cotizar; ese botón se encuentra agrupado dentro del grupo principal y el mismo se repitió  en los demás elementos. ¿Cómo altero un grupo que ya es parte del “Repeat Grid“?

Sencillo

  1. Primero diseñas el botón con la herramienta de recuadro. Le cambias la apariencia a tu gusto; bordes redondeados; color y nada de bordes.
  2. Con la herramienta de texto escribes la palabra que desees y la colocas sobre el recuadro. Recuerda que en el panel de estilos tienes guardados par de estilos de páginas anteriores los cuales puedes volver a usar y aplicadle un color.
  3. Agrupa el recuadro y el texto. Selecciona el botón y dale “Copy” y luego “Cut
  4. Selecciona con un “click doble” la esfera de el primer grupo en el “Repeat Grid“. Notarás dos cosas: un recuadro verde en el exterior y uno azul; el azul indica el área que compone el primer grupo y el verde indica el área de todo el “Repeat Grid
  5. Ahora cuando selecciones “Paste” el botón se colocará dentro del área azul y como por arte de magia verás que se repite en las demás secciones.
  6. Ahora puedes seleccionar cada elemento y acomodarlo a tu gusto. Recuerda que tienes un elemento seleccionado si al mismo le rodea un borde azul. Pero si lo que seleccionas es un grupo dentro de otro grupo lo que le va a rodear es un borde verde. Es un poco complicado, pero estas señales debes de tenerlas en mente para que sepas qué es lo que estas seleccionando.

Ahora busca en las maquetas de los iconos para iOS, elementos que necesites para adornar tu maqueta, como la barra de “Wifi” para la parte superior y la parte inferior de la pantalla.

Screen Shot 2018-04-13 at 9.28.19 AM

Solamente seleccionas el grupo que compone la barra “Wifi, hora y porciento de batería“. Utilizas el comando “Copy” y luego “Paste” en tu diseño. Para mi gusto y diseño utilicé la de color blanco. Lo mismo hice con una barra inferior para crear un pequeño menú de navegación.

Screen Shot 2018-04-13 at 9.32.49 AM

Me voy a entretener creando este menú de navegación y para el próximo post te mostraré mis resultados. Déjame un comentario de cómo te vá y te espero en la próxima.

¡C-Ya!