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!

“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!

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!

¡Tesoros escondidos!

Screen Shot 2018-03-21 at 2.46.19 PM

Tan pronto inicias Adobe XD te encuentras con una ventana de bienvenida que te muestra, en la parte superior, plantillas o “Templates” de los tamaños más comunes hoy día si vas a diseñar para iPhone, iPad o página web. Adicional a eso puedes encontrar un ícono para crear tamaños libre o “custom“. Hoy día muchos programas de Adobe traen una pequeña sección la cual te enseña cómo usar la aplicación. Adobe XD contiene en su ventana de bienvenida, en la parte inferior izquierda, una sección en la cual cuando seleccionas, se abre un proyecto, con instrucciones detalladas básicas de cómo usar la aplicación.

Screen Shot 2018-03-21 at 2.53.55 PM

Una vez realizas lo que te pide hacer cada paso, al final tienes un entendimiento básico del programa. Es en este momento que haces el siguiente comentario: Ahhhhhhhhhh!, Ohhhhhhhh! que gufia’o!

Luego en la parte central inferior de la ventana de bienvenida o el “welcome screen“, encuentras vínculos o “links” que te llevan a una página web en Adobe.com donde puedes bajar, gratis!, a tu computadora, todos los elementos que se usan hoy día en las interfaces para el usuario o mejor conocido como UI (User interface).

Screen Shot 2018-03-21 at 3.01.10 PM

Si ves tu celular, sea Androide, sea Apple, sea lo que sea vas a notar iconos de wifi, señal, volumen, bocinas, botones, etc etc. Pues todos esos iconos los puedes usar en tus maquetas, pero mucho ojo, recuerda que puedes usar estos iconos de guía para tus maquetas pero siempre, siempre, siempre debes de crear tus propios iconos, no te quieras encontrar con una sorpresa al final del camino; que no te aprueben la aplicación y tengas que regresar a la mesa de dibujo. Siempre lee las letras chiquitas!

Screen Shot 2018-03-21 at 3.28.34 PM

Justo al lado de los “UI Kits” puedes encontrar una sección que te brinda más información de ayuda, como por ejemplo: ¿Qué hay de nuevo en la más reciente versión de Adobe XD?, Tutoriales directos desde Adobe.com, etc etc.

Screen Shot 2018-03-21 at 3.40.48 PM

Un ejemplo de algo nuevo que trae esta versión de Adobe XD es que si te gusta diseñar en Photoshop y tus modelos ya están creados como .PSD; con Adobe XD ahora puedes abrir tus documentos de Photoshop y continuar trabajando en XD.

Screen Shot 2018-03-21 at 3.42.21 PM

Abre documentos de Photoshop y Sketch directamente en Adobe XD.

Finalmente la ventana de bienvenida en la parte derecha te muestra un listado de los documentos más recientes con los que has trabajado. “Notaste todos los tesoros escondidos que trae una simple ventana al comienzo de una aplicación“. La próxima vez que abras una aplicación, detente y observa que cosas te ofrece, antes de comenzar a trabajar en ella. En el próximo “post” hablarmos de los “artboard“.

¡Pendientes!

Brainstorming | Maqueta | Prototipo | Programador

Te gustaría aprender a crear prototipos de aplicaciones móviles o de páginas web, antes de que tu diseño caiga en manos de un “developer“? Entonces Adobe XD CC es el primer paso a seguir. Voy a estar escribiendo en este blog lo aprendido en el tema y me gustaría ir paso a paso contigo para que aprendas también a usar Adobe XD CC y quizás compartamos ideas y prototipos.

iStock-826047464

Cuando te encomiendan la creación de una aplicación o una página web; antes de tirar cualquier línea; antes de darle color a lo que sea, debes de hacer un “brainstorming” con el cliente o tu grupo de diseño. Esto consiste en tirar ideas en papel, colocar ideas en pizarras, colocar cuadritos o símbolos usando “stickynotes“, en fin una primera reunión en donde se discuta la idea, el propósito y la meta deseada al final del camino. Durante el proceso de creación vas a ir y venir, ir y venir, ir y venir muchas veces de la maqueta al prototipo y no pasarás de un punto del camino hasta que estés listo para entregar el trabajo a un programador. En la siguiente gráfica te muestro el camino a recorrer. También durante el proceso vas a regresar a la mesa de reunión para seguir rompiéndote la cabeza con tus clientes y con tu grupo de diseño.

Workflow

Brainstorming | Maqueta | Prototipo | Programador

Voy a  tratar de ser corto en esta serie de “posts“. Por eso vamos a dejarlo por ahora hasta aquí y en el próximo “post” comenzaremos hablar directamente sobre la aplicación de Adobe XD CC la cual es la aplicación a ser utilizada en este tipo de encomienda. Seas un diseñador en general, o un “web designer“, o un diseñador de experiencia de usuario – UX (User Experience Designer), o un diseñador de interface – (UI); Adobe XD te ofrece las herramientas que necesitas para obtener el resultado que deseas.

XD

¡Nos veremos en el próximo post!