Diseño de aplicaciones móviles: herramientas simples para crear rápidamente prototipos de tu idea para una aplicación | Ronnie Peters | Skillshare
Menú
Buscar

Velocidad de reproducción


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Diseño de aplicaciones móviles: herramientas simples para crear rápidamente prototipos de tu idea para una aplicación

teacher avatar Ronnie Peters, Founder and CEO at 360 Design

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Lecciones en esta clase

    • 1.

      ¡Hola!

      1:23

    • 2.

      Proyecto

      1:18

    • 3.

      La gran idea

      0:53

    • 4.

      Móvil como medio

      1:19

    • 5.

      Funcionalidad

      1:39

    • 6.

      Herramientas y pasos

      0:56

    • 7.

      Introducción a Axure

      3:00

    • 8.

      Descubrimiento, definición y diseño

      3:30

    • 9.

      Mapa de sitio

      3:56

    • 10.

      Flujo

      2:37

    • 11.

      Elementos del diseño

      0:48

    • 12.

      Tamaño de pantalla y resolución

      2:42

    • 13.

      Contorno reticular

      4:09

    • 14.

      Repaso de Axure

      1:52

    • 15.

      Conexión a tu mapa de sitio

      0:51

    • 16.

      Vinculación y publicación a HTML

      3:26

    • 17.

      Introducción a Flinto

      2:05

    • 18.

      Transiciones

      5:06

    • 19.

      Exportación a tu teléfono

      0:57

    • 20.

      Aplicación terminada

      2:54

    • 21.

      Cierre

      0:37

  • --
  • Nivel principiante
  • Nivel intermedio
  • Nivel avanzado
  • Todos los niveles

Generado por la comunidad

El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.

1291

Estudiantes

4

Proyectos

Acerca de esta clase

¿Quieres saber cómo dar vida a tu idea para una aplicación móvil, pero no sabes por dónde empezar? Esta clase de 45 minutos te guiará en el proceso de crear un prototipo y, mejor aún, ¡no tienes que saber ningún tipo de código! Ronnie Peters, director general de 360 Design comparte cómo su agencia de diseño y estrategia crea un prototipo funcional para aplicaciones con Photoshop, Axure, Illustrator y Flinto. Al final de la clase contarás con herramientas y conocimientos para diseñar tu propia aplicación móvil que puedes compartir con tus clientes, colegas o amigos. 

Conoce a tu profesor(a)

Teacher Profile Image

Ronnie Peters

Founder and CEO at 360 Design

Profesor(a)

Ronnie Peters is a strategist and digital designer working with a range of clients, from startups to some of the largest brands in the world. He is Founder and CEO of 360 Design, a digital design and innovation company, devoted to the seamless integration of interactive and brand experience. The companies work results in the design of websites, mobile apps, social media and digital strategy solutions for companies such as American Express, Merrill Lynch, Accenture, Time Warner, The New York Times, Office Depot, HP, Turner Broadcasting, SAP, McGraw Hill, Scholastic, and UBS to name a few. The firm collaborates with brands to develop innovative digital solutions that focus on business goals, technology integration, and the spirit of the brand while putting the customer / user at the cente... Ver perfil completo

Valoración de la clase

¿Se cumplieron las expectativas?
    ¡Superadas!
  • 0%
  • 0%
  • Un poco
  • 0%
  • No realmente
  • 0%

¿Por qué unirse a Skillshare?

Mira las galardonadas Skillshare Originals

Cada clase tiene lecciones cortas y proyectos prácticos

Tu membresía apoya a los profesores de Skillshare

Aprende desde cualquier lugar

Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.

Transcripciones

1. ¡Hola!: Hola, me llamo Ronnie Peters de 360 Design. Se trata de Irving, jefe de atención, y hoy, vamos a estar prototipando una aplicación móvil. Lo que quiero hacer es, desarrollar un prototipo antes de ir realmente a la etapa de codificación. Lo importante de eso es que me va a ahorrar mucho tiempo, y me va a ahorrar mucho esfuerzo, y quiero poder conseguirlo en mi teléfono, ese prototipo, y poder compartirlo con mis amigos y compañeros para que podamos ver la idea y prueba de concepto. De igual manera, quiero hablar de las diferentes herramientas que vamos a utilizar. Podrías usar una miríada de herramientas diferentes. Hay mucho por ahí, cosas como Sketch, Illustrator, Photoshop. Incluso podrías estar escribiendo y dibujando en papel si quisieras y haciendo prototipos de papel. En realidad vamos a ir directamente a la pantalla de la computadora y usar un conjunto de herramientas que he seleccionado. Yo soy un creativo. Tuve la suerte de involucrarme con algunos de los primeros sitios web para ciegos, y me hizo pensar en el diseño de la interfaz de usuario y ayudar a la gente a interactuar mucho con los medios digitales y las comunicaciones. Ahora dirijo una firma de diseño llamada 360 Design, y estamos enfocados en la experiencia del usuario y la intersección de la marca. 2. Proyecto: En 360 Design, nos enfocamos en crear experiencias de usuario que sorprendan y deleiten con los problemas de la autocomunicación. Entonces, lo que vamos a hacer como esta clase, es construir una aplicación móvil, un prototipo para una aplicación móvil para un cliente llamado Metrie. Desarrollan puertas y molduras, y vamos a crear una aplicación realmente emocionante para ellos alrededor de las puertas. Lo que estoy haciendo es que estoy pensando en algunas de las cosas que hemos hecho en el pasado, algunas de las experiencias de usuario que hemos tenido que fueron particularmente exitosas y pensando en cómo podríamos aplicarlas realmente para crear una experiencia muy interesante y atractiva y útil para este cliente en particular, y este problema. Entonces, ¿cuál es la gran idea aquí? La gran idea aquí es que queremos que la gente explore y descubra esta gama de productos para este cliente y lo haga en su dispositivo móvil. El grupo objetivo para el que estamos trabajando son arquitectos e interioristas y personas que están haciendo renovaciones en su hogar. Lo que queremos hacer es usar la movilidad y el teléfono móvil como una forma de poder permitir que la gente explore puertas y las muestre en su espacio. 3. La gran idea: Entonces, estoy pensando mucho en el tipo de cosas técnicamente que puedo hacer con esta app, y todas las increíbles características que tiene. Cosas como el nuevo 3D Touch, audio, video, movilidad y todas las cosas que van de la mano con eso. La otra cosa en la que realmente estoy pensando es en cuál es la gran idea para mi app. Piensa en aplicaciones realmente exitosas como Uber, como Seamless, como Yahoo Weather. Hacen una cosa y hacen una cosa muy bien. Entonces, cuando estés pensando y planeando o app, que entraremos en unos minutos, ten pensando en cuál es la gran idea cuál es el gran concepto que realmente quiero tener como experiencia central en mi app. ¿ Cómo voy a deleitar a la gente, sorprender a la gente, y realmente desarrollar y construir algo que es muy claro, muy conciso y hace una cosa bien. 4. Móvil como medio: Antes de empezar con el proceso creativo, solo quiero hablar un poco sobre las apps y la gran idea cuál es el concepto que tenemos. Cuando nos encomendaron diseñar una aplicación móvil, o en realidad una serie de aplicaciones móviles para la serie de libros, lo que realmente nos interesaba hacer es lo que realmente complementaría la serie de libros, no repetirla. Podríamos tomar el contenido de un libro y simplemente podrías ponerlo en una aplicación móvil y crear un turner de página y algo que realmente podrías leer, básicamente el contenido del libro. Pero eso no es tomar ventajas de este medio. Entonces, lo que realmente quiero hacer es mirar lo que las aplicaciones móviles son realmente buenas para hacer. ¿ Qué es la movilidad? ¿ Cuál es la interacción de las personas? El hecho de que estén en cualquier lugar cuando realmente estén usando uno de estos y qué podemos hacer para aprovechar toda la tecnología que sale de aquí que es muy diferente a lo que realmente se obtiene en la experiencia de libro lineal. La ventaja que tenemos con un dispositivo móvil, puedo estar en cualquier lugar, es completamente no lineal y tiene todas las herramientas, audio, cámara, video, touch, etcétera que no tienen en la experiencia de libro. Entonces, ¿cómo vamos a aprovechar al máximo esto? Entonces, esas son algunas de las cosas en las que realmente estoy pensando antes siquiera empezar a construir la aplicación móvil. 5. Funcionalidad: Entonces, estoy pensando en esta app y aquí hay una habitación. Digamos, que en realidad hemos entrado y la app va a ser todo sobre poder visualizar cómo se ve esta sala con una gama diferente de productos de puerta en ella. Estoy pensando en una de las apps que diseñamos Super, Head Esploder X. En esta app, una de las principales características fue que en realidad podrías tomar fotos de tus amigos y capturarlas. Entonces podrías ponerlos en el juego. Toma una foto, usa la foto, y luego básicamente, podría cambiar el tamaño, mover esa foto y luego guardarla y luego usarla en el juego. Entonces, estoy pensando en esa tecnología y lo que quiero hacer es usar ese concepto en esta aplicación en particular. Entonces, lo que quiero poder hacer es abrir la app de la puerta. Entonces, entro a una habitación y puedo ver esta puerta en particular, y lo que quiero poder hacer es traer las puertas de mi cliente por encima de ésta, tomar una fotografía de eso, compartirla con mis clientes, compartirla con mis amigos, compartirlo con cualquier persona involucrada con este proyecto de producto de interior en particular. Entonces quiero saber donde realmente puedo comprar ese producto en particular. Entonces, esa es la gran idea. Va a ser realmente atractivo y ahora vamos a seguir adelante y averiguar cómo realmente vamos a ir y construir esta aplicación prototipo en particular. 6. Herramientas y pasos: Existen muchas herramientas diferentes que podrías usar para crear prototipos de una app. Podríamos empezar en papel, generando wireframes, generando flujos de usuario, y luego prototipando pantallas fuera, podríamos poner esos fuera y poner esos en la pared solo empezar a crear y visualizar la app y lo que hay en el pantallas reales. Podemos utilizar herramientas en línea y en línea tenemos mucha variación y muchas herramientas diferentes que están a nuestra disposición. Voy a usar Axure RP y voy a estar usando una aplicación llamada Flinto. Vamos a estar usando Photoshop y vamos a estar usando Illustrator. No tienes que usar esas herramientas, hay muchas otras herramientas por ahí, pero lo que realmente importa es el proceso que vamos a pasar hoy para pasar de la idea al prototipo terminado. Eso es lo que realmente importa. 7. Introducción a Axure: Echemos un vistazo a las herramientas que vamos a utilizar para concepcionar y crear prototipos de nuestra idea de aplicación. Entonces, tengo Flinto que es la aplicación que vamos a construir realmente el prototipo terminado en. Vamos a poder compartir eso y vamos a usar el correo para compartir eso con otras personas y para ponerlo en mi teléfono. Este RP Axure donde vamos a construir wireframes, sitemaps y muchos de los elementos que realmente vamos a usar en la app Prototype. También vamos a utilizar Illustrator y Photoshop para apoyarnos construcción de iconos y diversos componentes diferentes que vamos a utilizar. Podemos ver esto también en un navegador. Aquí está Axure con la navegación de la izquierda que muestra diversas pantallas diferentes que he diseñado y archivos que he abierto dentro de Axure. Aquí he preparado algunas cosas de antemano, y pasaremos por estas. El primero es que he hecho una pantalla de resumen. El resumen solo me permite hacer un seguimiento de dónde estoy en el proyecto, los pasos que he dado, lo que he hecho. Normalmente pongo una fecha u hora después de estos, solo para que pueda ver eso, y sobre todo si estoy compartiendo este archivo con otros y trabajando en equipo. Podemos ver avances y mantener todo esto actualizado. Tengo un diagrama process-flow el cual les voy a mostrar, que es el proceso por el que vamos a pasar, diversos elementos de diseño diferentes que he acumulado, y luego algunas de las diferentes pantallas que hemos empezado a poner juntos, un flujo de mapa del sitio, y luego las pantallas que realmente vamos a poner en el prototipo. Pero empecemos con proceso. Entonces, hemos hablado un poco de la gran idea, y del concepto, y eso es lo que vamos a empezar en el proceso de descubrimiento. quién es esta app en realidad? Es posible que incluso quieras apuntar a la persona, el tipo de persona a la que realmente estás apuntando con tu app, ¿quién es tu público objetivo para esto? El tamaño del mercado potencial, ¿cuál es el gran problema que estás tratando de resolver? ¿ Cuál es la gran idea de la app? ¿ Qué plataforma está usando realmente el público? ¿ Esto debe ir en un teléfono Android? ¿ Esto debe ir en un iPhone? A lo mejor hacer algún análisis competitivo y ver si alguien más por ahí realmente tiene una app como esta. Entonces lo estamos metiendo en la fase de definición. Vamos a ver algunos de los detalles de lo que hay en la app, cuál es el contenido real. Entonces vamos a pasar a la fase de diseño real misma. El motivo por el que tengo una serie de flechas por aquí es porque vamos a iniciar el proceso de diseño, entonces vamos a entrar en un despliegue de prototipo. Eso vamos a probar. Y luego basándonos en probarlo, vamos a volver atrás y hacer un poco de rediseño. Entonces, se puede ver que este proceso aquí podría dar una serie de pasos o pruebas diferentes antes de que realmente entremos en el proceso de diseño final que luego vamos a entrar en tomar en código, y desplegarlo y luego una vez que hayamos desplegado lo vamos a medirlo y mejorarlo. 8. Descubrimiento, definición y diseño: Para esta App en la fase de descubrimiento, ¿para quién es este? Ya hemos hablado un poco de esto. Nuestro público objetivo aquí son arquitectos, y diseñadores de interiores, y personas que están renovando o construyendo un hogar. Conocemos a esa persona bastante bien, hemos hecho mucho trabajo con este cliente en particular, hacemos mucho trabajo web y mucho branding y promociones para ellos. Entonces, entiendo bastante bien este mercado, y a quién va dirigido este. El tamaño del mercado potencial, creemos que hay suficiente gente por ahí, esta es una aplicación viable que vamos a construir. El problema que estamos tratando de resolver es que realmente queremos involucrar a la gente cuando está en su espacio, están buscando en este espacio y como, “¿Cómo? ¿ Cómo se vería esto con este producto en particular en esta habitación? Entonces, ese es el problema que estamos tratando de resolver, y la gran idea es que vamos a poder abrir nuestra cámara en el teléfono, y vamos a poder deslizarnos en estas puertas, y elegir un montón de puertas diferentes, entonces vamos a poder tomar una foto de esa puerta en mi espacio. Entonces, vamos a poder compartirlo, si lo estoy compartiendo con un arquitecto, si lo estoy compartiendo con un diseñador de interiores, si lo estoy compartiendo con alguien que quiero mirar el espacio de esta sala, o simplemente llévatelo conmigo a un Home Depot o Lowe's para poder realmente comprar ese producto en particular. Entonces, esa es la gran idea aquí, el núcleo de la app que realmente vamos a construir. No estoy seguro de que alguien más haya hecho algo bastante parecido a esto, así que estoy bastante juiced con diseñar esta App en particular, porque esto va a ser bastante único en el mercado para este público objetivo en particular en este particular producto. El siguiente paso es la fase de definición. Entonces, definamos esta App en particular. Echemos un vistazo a las características y funciones particulares que queremos tener aquí y cuál es el contenido. De nuevo, conozco muy bien este contenido. Conozco estos productos de puerta. Sé lo que tenemos en el camino de las imágenes, lo que tenemos en el camino de la copia y el contenido. También sé que hay una función de mapa que tenemos en nuestro Sitio Web donde puedo saber dónde comprar este producto en particular. Voy a pensar en incorporar todas esas cosas a esta App en particular, y esas van a ser el núcleo de las experiencias. Entonces, en primer lugar, se trata de traer nuestras puertas a la página, mostrarlas en mi espacio , en mi cuarto, luego va a estar tomando una foto de eso, luego quiero poder guardar eso, compartir eso, averiguar dónde puedo comprar eso. Ese es realmente el núcleo de la experiencia. Entonces, esa es la fase de definición. Ahora, probablemente quieras escribir todo esto, quizá quieras pizarras esto, quizá quieras poner esto en algún tipo de documento, y compartir esto. Entonces, verás esto en detalle, y haces algunas iteraciones diferentes de versiones de ésta. Pero pensé que éste terminó y ahí es donde estoy con la fase de definición ahora mismo. A continuación, vamos a llegar a la fase de diseño. Entonces, aquí es donde realmente empezamos a entrar en la experiencia del usuario y mapear, wireframe de qué va a ser esta aplicación. Entonces, vamos a entrar en algunos de esos detalles en las páginas, pero hablemos de esos realmente rápidamente. Voy a estar desarrollando lo que se llama mapa del sitio. Entonces, acabo de mapear todas las diferentes páginas que hay ahí. No muy diferente de un mapa del sitio, voy a hacer un diagrama de flujo. Entonces, estoy pensando en la forma en que alguien realmente va a moverse a través de esta App. Entonces, voy a hacer algo de wireframing. Entonces, voy a mirar páginas individuales, y algunos de los elementos o pantallas, y los elementos que realmente van a estar ahí. Entonces, comenzaremos a juntar esos diferentes componentes, y luego empezaremos a construir nuestra App. Entonces, ese es el inicio de la fase de diseño que veremos ahora. 9. Mapa de sitio: Echemos un vistazo a un mapa del sitio. Entonces, en el mapa del sitio, lo que he empezado a pensar son todas las diferentes pantallas que podría necesitar para diseñar para este proceso en particular. De nuevo, podría haber empezado esto en papel. Podría haber bosquejado esto. Voy de inmediato a la acción aquí para dibujar realmente estos elementos. Entonces estas son solo cajas individuales que he dibujado en la pantalla y diagrama de flujo, y luego lo hermoso aquí es que en realidad puedo entrar, y puedo tomar esto, y en realidad puedo enlazar esto a una de mis páginas. Más tarde, en realidad puedo publicar entonces este sitemap como sitio web, y puedo hacer que la gente haga clic a su alrededor. Por lo que realmente puedo hacer clic en la pantalla de carga aquí, y puedo ir a esa página de pantalla de carga, y en realidad podré ver eso, y luego puedo hacer clic en esto y luego ir a otra. Entonces, esta es en realidad una forma de construir un prototipo áspero, solo una acción antes de que incluso lo meta en mi teléfono móvil. Entonces, ¿en qué estoy pensando aquí? Sé que va a haber una pantalla de carga. Qué sucede cuando tocas un ícono en tu escritorio, realidad carga la app, y mientras esa app se está cargando, podemos poner un gráfico ahí arriba antes de que llegues realmente a lo que estoy llamando la pantalla de inicio. Entonces, desde esa pantalla de inicio, estoy pensando en todas las diferentes páginas que pudiera tener. Entonces, colección de puertas, dónde comprar, página de contacto, sobre página que podría estar llevando estas puertas que voy a poner sobre la pantalla de mi cámara, llevando a una página de detalles de puerta que voy a poder capturar el puerta, y luego voy a poder compartirla. Entonces, ese fue un mapa del sitio. Esa fue una idea que tuve para esta aplicación en particular. Entonces, aquí hay otra, que es una forma ligeramente diferente de acercarse a esto. Voy a ir de la pantalla de carga de inmediato a la pantalla de captura. Entonces, aquí, ya estoy empezando a pensar en diferentes experiencias de usuario y diferentes formas de moverme a través de la aplicación real. Entonces, el anterior con tipo de dos pasos antes de llegar al núcleo de la experiencia, éste se mete directamente en ella y empieza de inmediato con la captura de cámara en la que estoy pensando. Capturo una puerta en mi espacio y luego la comparto, así que es realmente un proceso rápido para llegar a este punto de compartir donde realmente pienso el tipo de encuentro de las experiencias de usuario y donde obtendrás más deleite y el más tipo de compromiso. Entonces, tenemos los detalles de la puerta, a los que puedo llegar de inmediato otra vez fuera de la página del espectador, y luego puedo ir al mapa y averiguar dónde puedo comprar este producto. Puedo contactar con la marca, o saber más sobre la marca y la app, etcétera, etcétera. Entonces, esta es solo una forma alternativa. Entonces, realmente te animo a que empieces a buscar diferentes formas de organizar tus páginas. Este fue uno de ellos. Esta fue otra. Antes incluso de profundizar en el proceso de diseño, solo estoy pensando en el usuario y las páginas con las que se van a confrontar, el contenido con el que se van a enfrentar, la experiencia que van a tener. De nuevo, quizá quieras volver a pensar en algunas de las apps que tal vez usas, como Uber de la que estaba hablando, como Yahoo Weather que me gusta. Estuvimos involucrados con Seamless y la aplicación Seamless, y diseñando elementos de interfaz de usuario y de interfaz de usuario para eso, y estas son aplicaciones que realmente se enfocan en conseguir a las personas lo que quieren lo más rápido posible a través de la experiencia de la aplicación. Así que realmente piensa en eso mientras estás desarrollando y diseñando tu mapa del sitio. 10. Flujo: A medida que estoy desarrollando el mapa del sitio, también estoy empezando a pensar en el flujo. Entonces, este es el compromiso que la gente va a tener, es como van a moverse a través de la experiencia de la aplicación, y estas van a ser las interacciones que tienen. Entonces, es similar al mapa del sitio pero me preocupan menos las páginas, y realmente me preocupan las acciones y cómo agrupo estas acciones. Entonces, sé que voy a tener una página de inicio de bienvenida aquí. Sé que voy a tener algún tipo de pantalla de inicio, así que esto está en la línea de versiones del mapa del sitio que miramos. Entonces, voy a darle a la gente la opción de que quieran saber cómo usar la app, ¿quieren ir y empezar a mirar los productos de la puerta y tomar fotos? ¿ Cuál es la acción a partir de ahí, o la siguiente sección? Podrían ir a la página de detalles del producto. Podrían tomar una foto. Podrían ir a la página de imagen, luego podrían compartir a través de estos diferentes canales de redes sociales, podrían elegir colores. Entonces, podrían averiguar dónde comprar, o podrían ponerse en contacto con la marca. Entonces, estoy pensando en esos flujos y cómo podría arreglarse esto. Pero esto me parece un poco ocupado. Entonces, al hacer este, empecé a pensar realmente en si hay una forma mejor más fácil de armar esto realmente, y así es como se me ocurrió el segundo concepto que si lo ves aquí incluso sólo en este diagrama se ve aún más simple. Entonces, obtengo esas dos versiones solo para que pudieras ver la diferencia entre una y otra. Entonces, estoy pensando en la pantalla de carga que no tenemos otra opción ahí, pero entonces realmente vamos directo al núcleo de la experiencia de la app donde quiero que la gente pueda tomar fotos, mirar los productos de la puerta, y luego empezar a comprometerse, compartir y hacer todas esas cosas o profundizar en los detalles del producto si quieren saber dónde comprar, ponerse en contacto con la marca o aprender más sobre la propia app. Entonces, éste creo que es un camino y camino mucho más sencillos. Sólo para que lo sepas, solo para echar un vistazo a cómo construí algunas de estas cosas. Vamos a entrar en algunas de las cosas que he hecho aquí en Photoshop. Estos son algunos de los iconos que acabo de armar muy aproximadamente. Nuevamente, este es un prototipo, así que acabo de construir estos iconos para que vamos a cortar lo que copiamos y pegamos y ponerlos directamente en acción aquí para que puedas empezar a ver algunas de las acciones que estoy pensando en eso la gente va a tener realmente. 11. Elementos del diseño: Entonces, echemos un vistazo a algunas de las otras cosas que he hecho aquí. He creado una página llamada elementos de diseño, y en esta página de aquí, acabo de juntar todas las pequeñas piezas, esos iconos que miramos que diseñé en Photoshops, algunos botones que puse aquí. Estos son algunos de los productos de puerta, aquí está esa habitación que quiero usar en el fondo, aquí están algunos colores de las pautas de marca, de la marca y algunos de sus logotipos. Entonces, acabo de lanzar todos estos elementos en una sola página. Esto es lo que me gusta particularmente de la acción, que puedo tener este tipo de áreas de retención, y entonces sólo puedo venir a tomar estos elementos, y usarlos ya que estoy empezando a diseñar pantallas y wireframes. 12. Tamaño de pantalla y resolución: Antes de que realmente empecemos a wireframing páginas fuera, solo quiero hablar un poco sobre el tamaño y la resolución de la pantalla. Para esta aplicación en particular, voy a diseñar para iPhone 6 plus, ese es el teléfono que tengo y estoy usando así que eso es lo que voy a usar. Ahora, durante mi fase de descubrimiento miré a mi público objetivo, descubrí lo que la mayoría de ellos están usando en cuanto al dispositivo en el que van a estar y estoy diseñando específicamente para ese público objetivo y para ese dispositivo. Entonces, solo voy a elegir el iPhone y un par de cosas aquí sobre la resolución, ahora porque este es un prototipo realmente no me importa demasiado que se vea absolutamente cristalino y nítido. Se trata de sacar la idea y el concepto por ahí. Este no es el diseño final. Pero si sí miro las resoluciones de pantalla el iPhone original era de 320 por 480 píxeles. El iPhone 6 es 750 por 1334, y el 6 plus es 1244 por 2208. Ahora ese es un tamaño enorme para estar haciendo prototipos en. Si realmente miras el tamaño de esa pantalla en particular es demasiado engorroso y voluminoso para mi gusto. Entonces, lo que voy a hacer es en realidad diseñar mis wireframes en el tamaño iPhone 6 y luego cuando los meto en mi aplicación de prototipos donde los coso todos juntos y convierto esto en una aplicación mini prototipo, estoy los va a escalar, y realmente no me importa eso otra vez. Va a haber alguna borrosidad en la resolución, pero realmente no he pensado tanto en el diseño final. Esto es sólo un prototipo en esta etapa. lo otro de lo que quiero hablar es de la orientación de la pantalla. Entonces, como probablemente sabrás por usar apps puedes convertir tu pantalla horizontal y algunas apps se reorientarán y escalarán todo a una pantalla horizontal y luego la vuelves vertical y entrarán en un posición vertical. Nuevamente, este es un prototipo y solo quiero conseguir esta idea y concepto frente a la gente y probarlo para que mis flujos vayan y para las pantallas diseñen adecuadamente y pensar en los elementos que van a ser en la pantalla. Y por eso estoy decidiendo solo hacer este prototipo en formato vertical. Entonces, he sacado resolución de pantalla de la imagen. Voy a ir por un tamaño de pantalla y resolución que sea fácil. Voy por una orientación que sea sólo vertical, y en tercer lugar sólo voy a ir por el iPhone. Está bien. Entonces, estoy simplificando el mundo en el que voy a estar trabajando, otra vez sólo porque se trata de un prototipo. 13. Contorno reticular: Entonces, hemos mirado a nuestro público objetivo. Sabemos que están en iPhone. Sólo construiríamos un prototipo, así que vamos a ir por un tamaño que en realidad sólo funcione para nosotros y de nuevo, porque la orientación, sólo vamos a ir por vertical. Nuevamente, porque se trata de un prototipo en esta etapa, y no me preocupa demasiado que esto tenga que trabajar tanto en horizontal como en vertical. Simplemente nos vamos a quedar con una orientación vertical. Entonces, aquí está mi pantalla de carga. Voy a llamar a la app abriendo puertas por ahora. Aquí está el logotipo de la empresa. De nuevo, sólo poner estas cosas en una página y luego estoy pensando en la pantalla de inicio a donde iría esto. Entonces, aquí está mi pantalla de inicio y tengo una opción que elegir puerta. Ahora, esto se va del mapa del sitio número uno y aquí fue donde puse esta pantalla adicional ahí contra la versión dos donde estaba pensando, ¿por qué no entramos directamente a la aplicación real en sí, y le damos a la gente la experiencia de puerta que quiero que tengan, y que se comprometan de inmediato? Entonces, aquí están algunos de los elementos que armé que vimos en la página de elementos de diseño. Sólo estoy tomando algunas de estas cosas, copiándolas, y las estoy trayendo a estas páginas. Entonces, puedo empezar a utilizar estos elementos como parte de este diseño para hacer estas pantallas. Ahora, una de las grandes cosas que los reales que hace es dominar aquí abajo. Entonces, en realidad puedo hacer elementos como mis rutas de navegación principales, y eso puede ser consistente en todo, y puedo simplemente arrastrar y soltar esos maestros en cualquier página que esté diseñando, y luego serán consistentes en todo. Entonces, si edito el maestro, lo editará en todas las diferentes páginas de marco de alambre. Entonces, eso puede ser extremadamente ahorrador de tiempo y ventajoso. Entonces, aquí es donde estoy pensando, estoy llamando a esto la pantalla de inicio, pero aquí es básicamente donde realmente empiezo a usar la app. Entonces, si hago clic en el enlace de la parte superior, voy a una página de detalles. Entonces ahora, esta va a ser una página de desplazamiento largo. Entonces, aquí hay más información que cabe en una página. Entonces, solo voy a construir esto como una gran página larga y más tarde, descubriremos cómo hacer este desplazamiento correctamente. Entonces, lo que estoy empezando a hacer es mirar este sitemap, y usar los elementos que están en ese sitemap, aunado a las elecciones que la gente toma en el flujo para empezar a pensar en lo que realmente hay en esas pantallas y páginas. Entonces, esta fue la idea original para la página de inicio, no muy emocionante y solo una opción importante allí. Entonces, eso iba a llevar a esta página de puerta y si recuerdas desde el mapa del sitio, tenemos puertas. Tenemos donde comprar. Tenemos contacto. Tenemos sobre. Entonces, tenemos detalles del producto. Entonces, eso son muchas cosas que tener en mi pantalla ocupando bienes raíces todo el tiempo, pero no necesariamente voy a estar usando. Entonces, solo quería mostrarles que es mi punto de partida, y entonces por qué no sólo tomamos esto, y ponemos esto junto a eso, y les hablaré de algunos de los pensamientos que está pasando detrás de donde yo realmente quieren terminar con esta página. Entonces, esa fue la vieja página de inicio, pero ahora, con un nivel abajo y en la primera iteración, pero ahora es donde realmente estoy pensando en ir con esta nueva pantalla de inicio. He tomado todos estos botones por la parte inferior y los he puesto dentro de este ícono de hamburguesa. Voy a pensar más adelante, ¿cómo quiero poder exponer esa navegación y llevar a la gente a estas otras páginas dentro de la experiencia de la app? Pero lo que se hace es que se ha incrementado mi pantalla inmobiliaria, cual es tan valioso en una experiencia móvil como esta. Entonces, solo mostrarte este par de ideas para empezar a pensar en el proceso por el que realmente estoy pasando al enmarcar las páginas que están en la página web. 14. Repaso de Axure: Entonces, vamos a recapitular rápido de dónde estamos. Mi empresa más de unas pocas páginas aquí así que solo estoy haciendo un seguimiento y anotando los pasos que he dado y el proceso por el que he pasado. El proceso de página que fue, lo puse aquí arriba para su beneficio para mostrarles los pasos y etapas por las que estoy pasando. Entonces, que normalmente no pondría en la app. Obtuve esta página aquí donde empecé a poner todos mis iconos y elementos de diseño, logotipos de las opciones de color de la empresa basadas en las pautas de marca y luego esta colección de elementos que voy a estar usando para el proceso de diseño. Entonces, tengo esos aquí. Tamaños de página de los que hemos hablado solo guardo eso ahí tal vez como referencia. Hemos pasado por un par de versiones diferentes del mapa del sitio y parece que ahora nos estamos inclinando más hacia esta. Este es el punto en el que podría si quisiera realmente tomar ambas ideas del mapa del sitio y prototiparlas a ambas y luego probarlas una contra la otra. En realidad solo voy a construir esta en particular porque creo que esta es solo una mejor solución, pero el hecho de que pasara por este proceso de probar un par de cosas diferentes durante el proceso de wireframing fue muy útil para mí. Entonces, seguí y empecé a construir algunas de las pantallas, por lo que muy sencillo wireframe de una pantalla de carga. La pantalla de inicio original para la primera idea y luego las páginas posteriores y luego la otra vez, que en realidad voy a construir cuál es ésta, una página de detalles de piso. Lo siento, página de detalles de puerta y luego tengo otras páginas, como dónde comprar página. Todavía no he hecho la página de contacto y algunas de las otras páginas que, la página sobre, por ejemplo, que sabemos que queremos tener en la app final. 15. Conexión a tu mapa de sitio: Ya he hablado antes sobre cómo realmente podemos construir un prototipo HTML usando iSare, para que pudiéramos juntar muy rápidamente estas pantallas antes de que incluso pasemos a construir una aplicación real para ir a mi teléfono. Entonces, solo echemos un vistazo a una o dos de las características aquí. En el mapa del sitio, tenemos esto nuestro dónde comprar. Vamos a entrar aquí y vamos a conectarlo a una página de referencia, así que hay una forma de comprar. Vamos a entrar en los detalles de hacer. Seleccione allí una página de referencia. Ahí está la página de Detalle de la Puerta que tenemos. Entonces, aún no he construido estos otros wireframes. Pero, lo que esto me va a permitir hacer es en realidad hacer click de esto a esas páginas específicas. 16. Vinculación y publicación a HTML: Mientras tanto, he hecho un poco de limpieza y he puesto en orden el lado izquierdo aquí para que las cosas sean un poco más claras para mí. Voy a volver al mapa del sitio aquí y sólo voy a asegurarme de que estos estén conectados a los lugares correctos. Esta pantalla en particular aquí, que actualmente se llama doble colección uno, en realidad voy a volver a vincular esa página de referencia hacia arriba porque eso ahora va a ir al nuevo lugar porque este es el nuevo esquema que se me ocurre. Entonces detalle de puerta, solo quiero asegurarme de que esa página de referencia vaya al lugar correcto, lo es. Eso va a la página de detalles de la puerta, así que está bien. La pantalla de carga, solo quiero asegurarme de que esa página de referencia sea correcta, y lo es. Entonces, esas son las pantallas que en realidad he diseñado, y podré enlazar esas todas juntas. También podré entrar a algunas de estas pantallas y conectarlas también. Ahora, esta pantalla en particular aquí, sólo voy a vincular este logotipo a la siguiente página de la secuencia sólo para que tenga eso. No es un enlace real que tendríamos en la propia app porque la pantalla de carga va a ir a la página de inicio. Pero lo voy a vincular a lo que estamos llamando, colección de puertas. Ahí vamos. Entonces, si en realidad toco eso, tú vincula esto también. Crear un enlace. Eso también irá a la página de recogida de la puerta. Entonces, cuando estoy en la página de colección de puertas, he conectado esto a la página de detalles de la puerta. Sé que quería que eso pasara. Entonces tenemos una puerta marrón que yo quería tener que está conectada a esa página. Entonces si voy a la página de la puerta marrón, podemos ver que puedo volver a la puerta blanca. Vamos a crear un enlace que vaya a la pantalla de inicio. Entonces, sólo voy a tomar esto y voy a decir crear un enlace, y luego esto va a volver a la página de colección de puertas. Entonces, ahí vamos. Entonces, cada vez que toque esto, eso sólo volverá a esa página. Entonces, vamos a cosechar todas estas cosas juntas como un prototipo HTML muy rápido. Entonces, voy a ir a publicar, y voy a decir, “Generar Archivos HTML”, “Generar” Como puedes ver, ahora estoy en un entorno de navegador web. Puedo ir aquí y puedo dar click en esa página de sitemap en particular y puedo ver todas esas páginas diferentes. Entonces, esto es bastante útil para mí solo como principio organizacional, solo para ver que tengo todas estas páginas, ver cómo están conectadas entre sí. Creo que dijimos cuando estábamos en la pantalla de carga. Vamos a poder hacer clic en el ícono que iba a ir aquí. Esto nos iba a llevar a los marrones, verde. Entonces si hacemos clic en el icono, nos llevará de vuelta a casa. Si hacemos clic en esto, irá a la página de detalles. Está bien. Entonces, muy, muy rápido ahí. Acabo de crear un flujo y algunos click-throughs. Entonces, esta es una forma de crear prototipos, pero no está en mi teléfono. Está en página web. Ahora, podría publicar la URL, podría compartir eso. Hacemos eso frecuentemente para compartir con clientes o compartirlo con los programadores después de haber hecho algo más de orden y un poco más de trabajo de diseño y terminado algunos de los otros marcos de alambre a estas páginas. Pero quiero meterme esto en mi teléfono. 17. Introducción a Flinto: Voy a traer a Flinto. En Flinto aquí, lo que he empezado a hacer es armar todas las diferentes pantallas que diseñé en Azure. Ahora, como ya había dicho antes, podrías haber hecho esto en Illustrator, podrías haber hecho esto en papel, y luego escanear estas y/o tomarlas fotos, y rebanarlas en Photoshop. Hay todo tipo de formas en las que puedes unir todos estos elementos. Te acabo de mostrar una forma de hacerlo. Es la forma en que me gusta trabajar actualmente pero hay muchas maneras diferentes de llegar realmente a este punto. Entonces lo que estamos viendo son diferentes pantallas de iPhone, y lo que he hecho es colocar todos los diferentes elementos ahí, y lo que estoy mostrando son estados adyacentes de pantalla. Entonces, esta es la página principal o la página de detalles de la puerta, y la pantalla al lado de ella, estoy mostrando donde he activado el menú, la navegación de hamburguesas. Se puede ver que he hecho algunos cambios menores. He cambiado la marca para poner ícono de la hamburguesa en la esquina muy superior izquierda. Eso lo he hecho para que pueda tener este panel deslizándose sobre donde pueda ver los diferentes estados de navegación. Tengo varios tratamientos diferentes de puerta aquí en los que voy a estar deslizando sobre el fondo. Además, ahí puedes ver nuestra página de detalles del producto aquí. Esta es en realidad toda la página, y tenemos una función de diapositiva para que podamos deslizarnos hacia arriba y hacia abajo, desplazarnos hacia arriba y hacia abajo esa página, poder verlo. Entonces, lo que hemos hecho es coser todas estas páginas juntas para que podamos activar puertas de diferentes colores. Entonces, hubo algunas cosas muy específicas que quería hacer, y por qué quiero meter esto en esta aplicación es porque aquí tienen algunas transiciones hermosas y puedo personalizar estas transiciones. Una de las más importantes es cómo realmente deslizo la puerta de ida y vuelta, y por eso quería traer todos esos elementos a Flinto para que eso sucediera. 18. Transiciones: Una de las características más importantes y centrales de esta app de la que hemos hablado es cómo quiero poder deslizar estas puertas por encima de la cámara. Entonces, voy a activar la cámara automáticamente cuando se abra la aplicación y luego quiero poder deslizar estos productos sobre esta vista de cámara que tengo abierta en mi pantalla. Entonces, solo echemos un vistazo a las transiciones ahí, voy a ir por aquí y decir: “Editar transición”. Esta es una de las grandes características de Flinto, me permite mostrar, aquí sólo lo haremos en cámara lenta, la pantalla de antes que tiene una puerta blanca sobre ella y lo que quiero poder hacer es deslizar la puerta blanca y llevar en una puerta de madera, así que sólo veamos eso de nuevo. Entonces, en una acción muy específica aquí, he dicho que quiero que la puerta esté en ángulo y está en el lado derecho, quiero que se deslice y luego la voy a posicionar, estaría haciendo esto con mi pulgar como usuario pero luego se forma en posición central es absolutamente vertical. Ahí tal vez un zoom de pensión características, podría escalar eso y cuando se trata de desarrollar realmente esta app, voy a hablar con los desarrolladores, voy a escribir notas junto con el prototipo para decirle a los desarrolladores cómo funcionaría esa característica en particular. Pero este, es algo que realmente quiero poder diseñar a medida y al animarlo mostrar a los desarrolladores exactamente cómo quiero que esta puerta se deslice. Entonces esa es una acción muy específica y estoy emocionado de que en realidad sea capaz de hacerlo usando un conjunto de herramientas muy sencillo. Entonces, solo veamos algunas de las otras transiciones. Hablamos del ícono de la hamburguesa, así que esa es otra transición que realmente quería hacer específicamente. Esta es la pantalla previa a hacer clic en el icono de la hamburguesa y luego si hago clic en ella, esta página se desliza y la navegación se desliza dentro. Sólo veamos eso de nuevo en despacio eso hacia abajo. Entonces, la acción que llegué aquí, esto es antes de que haga clic en el ícono de la hamburguesa y luego haga clic en el ícono de la hamburguesa, y se puede ver que la navegación en realidad se escaló hacia abajo y se deslizó hacia adentro, estaba en ángulo de 20 grados y luego se se convirtió en una posición horizontal. Entonces, sólo salgamos de eso. Entonces, esas son un par de transiciones ahí, tenemos lo mismo pasando aquí abajo, nuevamente sacando el ícono de la hamburguesa en la navegación primaria cuando estoy en la característica de mapa, eso por supuesto pasaría con todas estas pantallas pero no voy a pasar y animar todo eso para estos, eso me va a llevar demasiado tiempo y realmente no necesito volver a hacerlo para esta característica de prototipo. Pero una de las otras cosas que sí necesito hacer y de las que habíamos hablado, es poder cambiar el color de la puerta. Entonces, esta pantalla de aquí en realidad enlazará a esta página, que puedas ver los resaltados de la línea roja. Entonces, si hago clic en el icono marrón de ahí, la puerta marrón saldrá. Si hago clic en el color rosa, entrará la puerta rosa. Entonces, estas son solo algunas transacciones muy simples y acabo de hacer un fade cruzado como método de transición para esa característica en particular. Entonces se trata de página de desplazamiento largo y sabemos que vamos a necesitar desplazarnos hacia abajo, así que volvamos a activar, aquí vamos, puede ver que este es el área de desplazamiento y pongo algunas instrucciones aquí que tiene un ligero rebote hacia ella y se va a desplazar verticalmente hacia arriba y hacia abajo en la página. Entonces, muy rápidamente, pasé de la ideación conceptual en cuanto a un sitemap, alambra-frames, hice algunos flujos breves, luego creé los diseños de marco de cable para estas pantallas en particular, los jalé aquí, los copió y pegó. He empezado a crear algunos elementos de transición y tengo los inicios de un prototipo aquí. Entonces, vamos a echar un vistazo muy rápido en su modo de vista previa, cuanto a cómo eso podría funcionar realmente. Entonces, aquí está la pantalla de vista previa, vamos a ir a la pantalla de inicio allá, así que aquí está y ahí está esa acción de puerta que yo quería, así que esto será un dedo pulgar en el teléfono. Entonces, puedes ver que estoy en la puerta blanca ahí y puedo deslizar y traer esta puerta de madera, puedo deslizar la puerta de madera y puedo traer esta puerta de cristal. Entonces, tengo mi acción yendo allá que parece estar funcionando exactamente de la manera que quería, veamos esa característica de hamburguesas. Está bien así que ve de ahí a donde comprar, ahí está de vuelta a esta página. 19. Exportación a tu teléfono: Entonces ahora, que hemos llegado a un punto en el que tenemos una serie de pantallas diferentes y hemos probado varias transiciones diferentes, y efectos, y enlaces, ahora quiero meterme esto en mi teléfono para que pueda empezar a sentir cómo funciona realmente en un dispositivo smartphone. Quiero enviárselo a algunos de mis colegas lo más rápido posible y obtener sus comentarios, y aprender de ellos lo que ven está funcionando y lo que no está funcionando, y cómo les gusta la aplicación y toda la experiencia de la aplicación. Yo sólo voy a compartirlo y me lo voy a mandar como correo electrónico, puedo enviárselo a otras personas también. Entonces, ahí vamos. Yo lo llamaré prototipo Flinto, y eso va a llegar en mi teléfono. 20. Aplicación terminada: Entonces aquí está mi email con el prototipo de Flinto en él, y lo que tengo aquí es la app de Flinto que he descargado que luego carga el prototipo que he incorporado en eso y aquí está. Entonces, esta es mi aplicación con la función de deslizamiento que me interesaba mucho ver cómo funcionaría eso. Entonces eso es genial. Eso parece ir bien para mí. Aquí está la página de detalles del producto con la función deslizante, la página de desplazamiento, desplazamiento largo. Vamos a retroceder, volver a esta página, volver a la página de inicio aquí. Algunas de las otras características que estábamos viendo es el lugar donde comprar característica por lo que esa es esta página aquí. Todavía no he hecho nada con la función de búsqueda ni cambiando mi código postal. Entonces esas serían algunas de las otras cosas que estaría queriendo mirar ahora y tal vez esta es una zona de desplazamiento debajo con todas estas ubicaciones diferentes en ella. Eso sería algo que me gustaría empezar a mirar o qué pasa cuando en realidad toco algunos de estos marcadores en el mapa. Sólo volvamos a la página de inicio desde aquí. El otro rasgo principal que estamos viendo fue la capacidad de poder realmente colorear o cambiar el color de la puerta que realmente me he deslizado sobre la vista de la cámara. Está bien, entonces, ahí lo tienes. En un periodo de tiempo relativamente corto, hemos pasado por una serie de pasos diferentes, en primer lugar, mirando las características y las funciones que queremos tener esta app, para quién es en realidad, realmente buscando y pensando en ese público objetivo, pensando en la plataforma en la que realmente queremos construir esto, en este caso, iPhone 6 Plus en esta instancia. Después fuimos al mapa del sitio, flujos, proceso de wireframing luego tomamos los wireframes, los pusimos en Flinto y luego creamos estas transiciones y hemos creado algo que ahora podemos compartir con otras personas y entonces ahora puedo experimentar y realmente determinar si esto realmente está funcionando para mí de la forma en que quiero que lo haga? ¿ En realidad me gusta esta función de deslizamiento? ¿ Hay quizá una mejor manera de hacer esa transición? ¿ Quiero tener un fondo blanco detrás de estos? A lo mejor no. A lo mejor estos colores podrían en realidad ser más en el espacio aquí a través de mi vista de cámara sobre este fondo en particular. Tampoco he hecho la siguiente característica principal que sería lo que pasa cuando tomo una foto aquí, click en la cámara y luego compartirla. Entonces esas fueron algunas de las otras cosas importantes que quiero poder sumar a este prototipo y ahí es donde estamos hasta ahora en este punto en el tiempo. 21. Cierre: Entonces, hemos pasado por diversos pasos y etapas diferentes y utilizando diferentes herramientas para obtener la idea conceptual prototipada y en tu smartphone. Muchas gracias por hacer este curso, y espero mucho ver lo que haces y lo que producen y los prototipos que se te ocurren. Por favor siéntete libre de llegar a mí y compartir tus conceptos y prototipos. Me encantaría ver lo que haces, y espero tener la conexión y ojalá ver tu app en la tienda iTunes en algún momento pronto.