Conceptos básicos del diseño web: crea páginas de inicio de marketing que consigan resultados

1. Introducción: Mi nombre es Dennis Field. Yo soy parte de Evangelista aquí en InVision así como diseñador. En esta clase, te estaré enseñando a crear una página de inicio de marketing efectiva para tu producto. Como diseñador tienes que crecer de forma natural desde diseñar para bonito hasta diseñar para conversiones. Y a través del cambio de la industria así como de la demanda del cliente he crecido hasta convertirme en diseñador web. Todas estas experiencias me han llevado a InVision. Ayudamos a diseñadores de todo el mundo y a empresas de todo el mundo aprovechar todo su potencial creativo utilizando características como prototipado, comentarios, Gestión de activos, así como compartir en vivo. Cosas que puedo enseñarte en esta clase son todas las cosas que he aprendido ya que he transitado de diseñar la página a diseñar realmente con la intención realmente ayudar a mis clientes y empresas a mover más la aguja. Va a haber algo para todos en su curso. Ya sea que estés empezando o si llevas diseñando desde hace varios años. Es posible que estés luchando con cómo diseñar la página, cómo obtener realmente los resultados que deseas. Entonces, creo que estas habilidades fundamentales en realidad te traerán mucho valor. 2. Proyecto: Se te ha encomendado diseñar una página de inicio desde la aplicación de redes sociales de Mac constantemente social. Tu objetivo es crear una nueva página de inicio que incremente las inscripciones. Yo elijo esta tarea, porque creo que es importante que entiendas los fundamentos clave que se necesitan para ofrecer más valor a tus clientes en la organización a medida que creces como diseñador. Aprenderás principios como el diseño, la narración y el diseño son todas cosas que debes considerar y tener en cuenta ya que no solo diseñas este proyecto sino para proyectos en la función. Por el bien de este proyecto, las conversiones son nuestras inscripciones, pero la convergencia podría ser cualquier cosa que se relacione con su proyecto. También aprenderás a crear un prototipo en InVision, así como a gestionar el proceso de retroalimentación. Para este proyecto, vas a necesitar Photoshop o Sketch de tu elección, así como una cuenta gratuita de InVision a la que puedes inscribirte en invisionapp.com. Puedes esperar que este proyecto te lleve de una hora a una hora y media, dependiendo de la complejidad de tu diseño. Cuando completes tu proyecto, asegúrate de compartir tu enlace de prototipado de InVision y una captura de pantalla de tu proyecto dentro de la galería de proyectos de habilidshare. Recuerda, la mejor manera de aprender es haciendo. A medida que cambian tus objetivos, medida que tu audiencia cambia, siempre tienes que volver a visitar este diseño para optimizarlo. Empecemos. 3. Objetivos, historia, comprobación social, conversiones: Siempre que estés diseñando algo, necesitas tener un conjunto claro de objetivos. Sin eso, solo estás diseñando. Entonces, lo primero que necesitamos hacer es definir nuestras metas. Para Simply Social, vamos a tener tres conjuntos de metas. El primer objetivo es, en general, necesitamos poner más énfasis en las configuraciones. Número dos, necesitamos mostrar visualmente la aplicación. Número tres, hay que hacer un mejor trabajo a la hora de explicar la historia. Para ti, es posible que tengas un conjunto diferente de metas, pero es importante definir esos objetivos antes de que realmente empieces a entrar en tu diseño. Entonces, una vez que tenemos nuestras metas establecidas, empezamos a hablar de historia. La historia es realmente, realmente importante para cualquier página de inicio o cualquier tipo de diseño en general. Pero cuando piensas en grandes pinturas, cuando piensas en grandes diseños, siempre hay algún tipo de historia que está sucediendo ahí. Cuento puede venir en forma de copia. Puede venir en forma de pistas visuales. Todo lo que coloques en este diseño o en tu página de inicio tiene que relacionarte con la historia que intentas contar. Es realmente importante pensar en historia en una página de inicio de arriba a abajo, empezando por con quién estamos hablando, ¿qué queremos que piensen y cuál es el objetivo previsto? Todo esto se canaliza hacia abajo en el claro llamado a la acción y la retribución esencialmente. Entonces, cuando nos metamos en el bosquejo, hablaremos un poco más de esos. Hablaremos un poco de copia. Hablaremos de cómo las imágenes que vamos a usar. En realidad, juega un papel clave en esta historia de este diseño. La otra pieza a esto de la que queremos hablar es obviamente la medición y las conversiones. Hay una tonelada de la que podemos hablar con conversión que probablemente sea más adecuada para el hogar, no una clase por supuesto. Pero para aquí sólo quiero que sepan que conversión debe medirse con una serie de factores. Puedes usar grandes herramientas como Google Analytics como métricas, todas las formas de medirlo. Pero ten en cuenta que hay una serie de factores que van a afectar tu conversión. Si estás haciendo mucha publicidad, eso va a canalizar mucho tráfico, algunos calificados, algunos sin calificar a tu página de inicio. Eso va a sesgar un poco tu número de conversión. Cuando se trata de conversión, me gusta pensar en lo que sucede después de la conversión. Entonces, digamos que obtienes una gran afluencia de captación en tus números de conversión, más personas se están registrando para tu app. Pero entonces tienes otra cosa entera. Tienes que preocuparte son los que están en la app ahora en realidad califican a los usuarios de la app? Entonces, entonces tienes todo otro conjunto de optimización que tiene que suceder ahí. Entonces, no hay gran número de conversión. Obviamente siempre debes estar rodando por un número alto, pero tampoco hay una mala conversión porque hay tantas cosas que tienes que apalancar y dependiendo de dónde estés con tu producto, tus números van a ser un un poco diferente. Pero solo ten en cuenta, hay una serie de factores que van a jugar en eso. Entonces, la siguiente parte del proyecto vamos a empezar a bosquejar estas ideas y voy a entrar un poco más en estos principios de historia y diseño. Pero pasemos a esbozar algunas ideas, hablar de esas ideas y ver con qué queremos ir y qué idealmente queremos elegir para luego pasar a la alta fidelidad. 4. Concepto y diseño: Está bien. Entonces, hablemos de algunos de estos conceptos. Nos vamos a meter en algunas ideas que queremos hacer con el objetivo de aumentar las inscripciones a Simply Social. Entonces, hay una serie de formas que podemos hacer y hay una serie de factores que vamos a jugar. Para mí, generalmente me gusta empezar con algunos sueltos, ni siquiera sé si quiero llamarlos wireframes, pero solo bocetos sueltos generales que empiezan a poner un poco de énfasis en áreas clave del diseño antes de empezar a pasar a lo que quiero hacer en la computadora. Entonces, primero empecemos con algunas cosas clave a tener en cuenta en lo que respecta al patrón de usuario. Entonces, obviamente, tradicionalmente se tiene una navegación que se sienta en la parte superior de la página. En caso de duda, lo mejor es dejarlo ahí. Hay cosas que han cambiado con el tiempo, uno de los cuales es el logotipo. La belleza de cómo evolucionamos es que lentamente nos hemos alejado de necesitar un verdadero homelink. Ahora en realidad tenemos el gran patrón de usuario de poder hacer clic en tu logo para llevarte de vuelta a casa. Entonces, todas las cosas que quieras, más o menos, asegurarte de tener en tu diseño en cualquier punto dado. La otra cosa en la que pensar es en tu pie de página y en qué va ahí. Los pies de página generalmente se usan para algunas de las cosas que realmente no necesitas tener distrayendo tu historia principal. Esas son las cosas como los enlaces de soporte y las cosas que realmente no evolucionan mucho en torno a la historia de tu diseño. Entonces, hablemos de, el patrón de usuario de desplazar tu página. Es realmente genial cómo apps como Facebook, Twitter han permitido que todos abracen la idea del desplazamiento. móvil obviamente jugó mucho en eso también. Entonces, ahora no tenemos que preocuparnos demasiado por un pliegue. Es discutible, pero soy un gran creyente en cuanto más lona tengamos que contar nuestra historia, más deberíamos usarla. Entonces, sabemos que la gente va a estar bien con desplazarse por la página, también sabemos que hay muchas otras señales móviles que la gente ha recogido. El icono de la hamburguesa es una cosa en la que pensar. Es decir, eso es algo que puedes usar en tu diseño porque ahora la gente entiende, si hago clic en esto, voy a ver más opciones. Entonces, cuando se trata de enfocar en tu historia, ten en cuenta esas cosas. Úsalos donde puedas, pero nunca trataste de romper necesariamente esos patrones de usuario porque ahí es cuando pierdes a tu público o a tu visitante. Entonces, en este diseño, vamos a tener nuestra navegación, nuestro pie de página. Obviamente vamos a tener un héroe, eso tiende a ser otro patrón de usuario que la gente quiere ver. Y esa es tu puerta principal, la portada de tu libro. Esa es una gran historia de alto nivel comienza ahí. Obviamente tienes tus enlaces de navegación. Y entonces todo aquí dentro y cómo todo esto empieza a juntarse es un poco más abierto a donde se puede poner en estas áreas. Entonces, para empezar, tal vez con nuestro objetivo de explicar un poco mejor la app. Podemos tener una idea de que realmente queremos retocar la idea de que con Simply Social, es una app que te permite conectar todas tus cuentas de redes sociales en un solo lugar y vas a tener toda esta gran actividad en redes sociales. Realmente vamos a querer mostrar eso visualmente. Entonces, podemos tener versiones gráficas de quizá cuentas de redes sociales sentadas ahí atrás. Podemos tener un obviamente algún tipo de titular que va a vivir aquí. Vas a querer obviamente en esta etapa empezar a introducir la idea de un llamado a la acción. Es posible que tengas a alguien que venga a este sitio, ya se vende en él. Ya saben de qué se trata y están listos hacen acción de inmediato. Entonces, lo que puedes hacer es obviamente, y lo ves en muchos sitios, quieres empezar a agregar tu, lo vamos a llamar CTA. Eso empieza a abrir esta discusión alrededor, vale. Entonces ahora tenemos una serie de cosas trabajando aquí. Tenemos una clara comprensión de lo que va a ser el producto. A lo mejor, en este caso, tenemos alguna gran copia que queremos un titular sencillo, conciso. Y lo que pasa con Simply Social es lo que hacemos, es que hacemos simples las redes sociales o las redes. A lo mejor es una idea de titular. Muy directo. No lo sé, tendremos que probar eso, podemos usar aplicaciones geniales de pruebas de usuario para hacer eso. Pero empecemos con algo para que fluyan algunas ideas. Lo siguiente que quieres hacer es empezar a considerar lo que pasa abajo de la página, ¿verdad? Tenemos esta idea de cómo se mueven nuestros ojos. Muchas veces, con las típicas páginas de inicio, vas a caer en ese movimiento de ojos de patrón Z, donde alguien empezará por el logo, cambiará y empezará a bajar por la página. Entonces, queremos aprovechar eso en nuestro diseño. Queremos asegurarnos de que cada uno de esos movimientos que estás golpeando en algo importante, algo que realmente va a enfatizar tu historia. Si estás haciendo algo que probablemente sea más editorial o centrado en la historia, tal vez sea un diseño de blog, puedes empezar a meterte en un layout F, donde tu patrón F, donde mayoría de las personas escanean por la página y se mueven por un F como están leyendo. Pero para la mayoría de los diseños visuales de la página de inicio, estás mirando una salida Z por aquí. Entonces, ahí es donde tocarás esta página, cruzarás, cruzarás la navegación , bajarás y luego saldrás . Por lo tanto, ten en cuenta a medida que empiezas a pensar este diseño en términos de un punto de vista de escanabilidad. Está bien. Entonces, tengo este pensamiento áspero en torno a un héroe. La otra parte que queremos hacer es mostrar visualmente nuestra app un poco más. Entonces, tal vez aquí si ese es un objetivo nuestro, tal vez empecemos a introducir algunas capturas de pantalla, tal vez sea agradable cuando puedas. Nuevamente, vamos a contar la historia que esto obviamente es una aplicación, la historia obviamente vive dentro de la web. Si se trata de un diseño móvil, este es un gran uso de donde se empieza a ver diseños photoshopped en dispositivos porque ayuda con esa historia. Cuando estás escaneando la página, inmediatamente sabes lo que va a pasar aquí, ya sabes lo que es esto. Esto lo verás mucho con las páginas de aterrizaje del libro. Aunque sea un libro electrónico, es importante que lo pongas en contexto. Entonces, si es un e-book y está viviendo en un libro, hay un diseño de libro, le da al público o al visitante una comprensión clara, realmente rápida de lo que es esto que van a descargar. Entonces, en nuestro caso, lo que es esto en realidad va a ser algún tipo de aplicación que viva dentro de la web. Entonces, tal vez esta sea una buena oportunidad para involucrarse con alguna interactividad. A lo mejor una buena manera de mostrar ahí están nuestras diferentes pantallas, utiliza algunos bonitos elementos de navegación convencionales que ciclo el diseño. A lo mejor por la historia de la que también quieres empezar a hablar un poco tres o cuatro diferentes en elementos clave que conforman Simply Social. Entonces, tal vez quieras hablar de eso. Quizás quieras traer un poco eso a esta página. Esto no es algo donde te estamos diciendo que somos un sitio de redes sociales, crea tu cuenta y empieza a publicar aquí. Estamos diciendo que nos conectamos con tus cuentas de redes sociales. Entonces, está muy claro de frente que, el objetivo aquí es que llevemos tu red de redes sociales, llevemos a esta app, y te lo haremos sencillo, estamos unificando las cosas. Quizás también quieras hablar un poco sobre cómo es seguro. Creo que muchas veces, hay una preocupación de qué vas a hacer con esta información si conecto mis cuentas? Bueno. Simplemente social, no solo es una gran manera de simplemente administrar tus redes sociales, también es una forma segura de hacerlo. Entonces creo que una cosa clave aquí es decir también que ahora se puede publicar en estas cuentas de redes sociales también. Entonces, estás obteniendo algunas ideas en cuanto a lo que realmente puedes hacer aquí sin siquiera empezar y registrarte para una cuenta todavía. A medida que continúas moviendo la página, necesitamos tener un bonito elemento descriptivo. Podría ser un párrafo de copia, pero necesitamos asegurarnos de que les estamos contando una historia sencilla, cuanto a lo que hace este producto. Entonces, tienes esa la puerta principal, o la portada del libro y las estás moviendo. Por lo tanto, puede que tenga una copia descriptiva simple real que respalde la declaración anterior. medida que continúas avanzando, te vas a meter en elementos como la prueba social, es realmente importante incluir pruebas sociales en tu diseño y cuando estás contando tu historia, porque esa es la convincente mecanismo. La gente está más dispuesta a apuntarse o invertir dinero en una aplicación o lo que sea tal vez, cuando se haya construido el fideicomiso. Ahí es donde realmente consiguen grandes testimonios o logotipos entran en juego que dice, "Nosotros respondemos por esto, hemos invertido en ello, y dimos el primer salto, creemos que tú también deberías. Entonces cuando puedes apalancar esos y apalancar esos de manera efectiva, y puedes exagerar los testimonios pero si tienes algunos jugadores realmente clave a los que puedes meterte en tu producto y en tu aplicación, que hablen de ello, definitivamente asegúrate de que tengas esos y no tengas miedo de usarlos. Entonces, vamos a querer asegurarnos de que aquí tenemos el aspecto de prueba social. Lo que está haciendo ahora es, comienzas obviamente con el alto nivel rápido, buceando en algunas características si quieres hacer la pregunta de “Vale, bueno, ¿qué significa esto para mí?” Empiezas a meterte bien lo que puedes hacer es componer, conectarte a cuenta asegurada, y entonces obviamente hey, estas grandes personas están usando y yo obviamente debería estarlo. Entonces eso es lo que eso está haciendo por ti y en términos de tu historia. medida que continúas embudo a través de esto, es posible que veas esta historia y puedas decir bien, tal vez necesitamos sacar esto un poco. A lo mejor tiene sentido decir bien, es lo que hacemos, aquí es por qué lo estamos haciendo, y luego aquí están las características si quieres conseguir un poco más para ver la interfaz, y luego te metes en los aspectos de prueba social. Entonces, para cuando llegues al final de esta página, agrega mis datos de pie de página aquí, deberías tener realmente bonitos libros de acción atrapados de algún tipo. Podría ser un registro tan simple, para ser un formulario, hay muchas cosas de las que podemos hablar cuando se trata del mecanismo de conversión real aquí, y hay muchos estudios a su alrededor, es solo un botón que se abre en un modelo. Ahí es cuando tomas tu primera acción, y hablaremos un poco más de esas cuando nos metamos en la fidelidad superior, aquí pero solo vamos a empezar a diseñar esto. Entonces, esta podría ser una opción potencial a considerar. Probablemente me gustaría afinar un poco más esto, así que vamos a ver cómo podemos hacer que esto sea un poco mejor. Podrás empezar aquí y otra vez, vas a continuar con tu conjunto base de patrones de usuario aquí solo diremos suficiente, sabemos lo que eso va a hacer y nuestro pie de página aquí. Nosotros sí creemos que esto está funcionando pero con nuestros objetivos en mente, creo que podemos hacer un poco mejor trabajo tal vez mezclando estos dos mundos un poco mejor. Creo que lo que podrías considerar hacer si empezamos a pensar aquí en el patrón Z. A lo mejor es que realmente traiga un disparo de dispositivo aquí. En mi boceto, generalmente lo mantengo muy suelto porque es la forma en que me gusta bosquejar. Entonces tenemos tal vez nuestro gran titular aquí, y luego nuestro llamado a la acción. De lo que esto va a hacer, tal vez navegación, es cuando te mueves por la página como eres”. De acuerdo, esto es simplemente social”. Esto es un poco de lo que quieres que haga, es confiar, tenemos algo de información así que voy a cavar un poco más profundo. Pero inmediatamente después de eso, voy a disparar por aquí, y voy a ver wow, está bien. Esto es lo que es la app. Dependiendo de lo que ponga aquí, si es una toma del flujo de actividades, si es una toma del perfil de una persona, esto va a contar una gran historia. Se va a decir realmente lo que es esto sin siquiera pasar a leerlo. Entonces, es mucho más efectivo en el punto de vista de la escaniabilidad. Entonces podría entonces refinar esto y ahora esta sería una buena oportunidad para tal vez dar seguimiento poniendo mi copia descriptiva y titular, tal vez aquí. Por lo que puede que tenga un subtítulo que empiece a respaldar esto con un pequeño párrafo. mejor entonces me meto en mis tres características distintas sobre el producto. Ahí es donde te metes en que compongas conectado es una cuenta asegurada etcétera. Se puede empezar a ver de nuevo si vamos al aspecto de escalabilidad para esos. Porque estamos en un mundo muy acelerado, no tendemos a gustar leer mucho tan rápido que estás empezando en el golpe de alto nivel de lo que simplemente es social. Entonces, una vez que refinas eso, empiezas a ver que estás condensando un poco esa historia en la página. Estás creando un montón de señales visuales aquí también, con la superposición que podría estar sucediendo aquí con el dispositivo entonces comienzas a meterte tal vez en una forma diferente de mostrar los detalles más finos de lo simplemente social. Pueden en este punto estar haciendo la pregunta, ¿ hay más que necesito saber de esto que aún no sé antes de comprometerme a darle mi dirección de correo electrónico, y comprometerme a unirme simplemente social? Aquí es cuando se puede empezar a usar este espacio, y cuando digo relleno pero es cuando se empieza a especie de entrar en algunos de los detalles más finos de su aplicación. Entonces, para sencillamente social tal vez empezamos a, tal vez tengamos una forma fresca de mostrar las diferentes capturas de pantalla de la app. No lo sé. A lo mejor van a través de la página como cuadrícula. O tal vez están todos apilados aquí y aquí tenemos algunos elementos interactivos que les permiten sumergirse más profundamente y casi hacer un recorrido rápido antes de que se comprometan. A lo mejor es lo que vive aquí. Lo que está haciendo es ahora que hemos tomado partes de esto, lo metimos aquí, ahora estamos consiguiendo este bonito paso opcional refinado para ellos para aquellos que quieren sumergirse un poco más profundamente en lo que simplemente social tal vez. Si tienen más preguntas. Entonces, una vez que vayas y de, una vez que revises eso, telón de fondo de tu historia, estamos empezando a pegarnos a nuestros objetivos, obviamente estamos haciendo que la app sea mucho más interfaz, y algunas apps no necesitan preocuparse sobre eso como Facebook, LinkedIn, Twitter, si miras sus páginas de inicio, sabemos lo suficiente de ellos que realmente no necesitamos la historia es en realidad, una vez que te metes dentro de la app. Entonces, tienen un gran lujo de poder crear homepages que sean súper eficientes, y si las miras, es simplemente crear cuenta, como que no pasa mucho más allá que esa simple declaración, y luego ellos solo quieres que te sumerjas en la app, porque ahí es donde realmente empieza a cobrar vida. Pero simplemente social no está del todo ahí todavía. La mayoría de las aplicaciones no lo son. Lleva años llegar a ese nivel de confianza y comprensión de que el mundo les está contando su historia. Entonces, en este caso, necesitamos muchos de estos elementos para asegurarnos de que todos entiendan lo que es simplemente social. Entonces traes tu, siempre es agradable volver a, si pisas persona aún tiene preguntas, probablemente vas a decir “Oye, no te preocupes porque estas grandes personas en realidad usando nuestro app y debes unirte al club” eso es esencialmente lo que hace este elemento de prueba social. Podemos aún más que hasta con, tal vez algunos iconos de redes sociales y cuántos seguidores ya teníamos e intereses estamos teniendo fuera de simplemente sociales alrededor de nuestra comunidad? ¿ Qué tan grande es nuestra comunidad? ¿Tenemos miles y miles de seguidores en Twitter? ¿ Nuestra página de Facebook es súper masiva? Al igual que todos los que son señales visuales que ayudan a los visitantes a su sitio a entender que este es un lugar en el que necesito estar y debería estar invirtiendo. Entonces, entonces tal vez como siempre, vas a darle seguimiento a esto con ese pago. Entonces, si empiezas a correr a través de este concepto, puedes empezar a ver donde creo que nuestros objetivos están siendo golpeados un poco mejor. Hemos tocado los lindos indicios visuales de lo que es la app, hemos hecho un muy buen trabajo, creo que lo he explicado. Después también respalda esa historia con pruebas, y luego claramente conduciéndolos hacia abajo a la página con un bonito llamado a la acción, y luego te metes al pie de página. Entonces esas son algunas ideas sueltas, probablemente voy a ahora solo enmarcar esto un poco más, trabajar a través de ellas como siguiente paso, y luego saltaremos en la computadora, y vamos a ampliar en estos principios y vamos a hablar de cómo la fotografía, juega un papel en esta historia, dominio y color, todos los demás elementos que van a empezar a traer tal vez este concepto a la vida un poco más. 5. Creación del diseño [Parte 1]: Ahora que tienes nuestras ideas sueltas vamos a empezar a mover esto hacia un diseño más de alta fidelidad. Creo que fuera de los dos, siento que el segundo concepto empieza a funcionar un poco mejor para nuestros objetivos en cuanto a un punto de vista jerárquico mientras escanea rápidamente ya están apareciendo ciertas cosas, así que vamos a movernos en esa dirección. Entonces, siéntete libre de usar Sketch o Photoshop, es tu elección para las necesidades de esto. Simplemente voy a usar Photoshop porque visión tiene algunas integraciones realmente geniales aquí que podemos usar más adelante para ayudar a retocar esto para el pequeño empujón final. Pero por ahora solo vamos a empezar con un documento. Ya tengo una creada aquí por el bien del tiempo pero si quieres que algunas dimensiones funcionen, para esto tengo esta configuración en 1500 pixels por 4355 pixels. Ese es un lugar para empezar. De nuevo, ahora tenemos estos grandes monitores. Se apalancó el tamaño de las pantallas para realmente contar nuestra historia un poco mejor. Tengo algunas guías que ya he marcado aquí pero esto es otra vez, vamos a simplemente sacar estas ideas aquí en la pantalla y luego podemos finura a partir de ahí. Entonces, dependiendo de tu nivel de habilidad, no vamos a entrar en las cosas más finas de Photoshop, pero hay muchos otros grandes recursos aquí en Skillshare, estoy seguro de que voy a ayudarte con eso. Entonces empecemos primero tirando de algunos elementos con los que vamos a trabajar. Tenemos este diseño, obviamente necesitamos un logotipo. Tengo una pauta de marca que voy a estar tirando algunas cosas que ya tenemos son simplemente sociales. Todos estos se guardan en la carpeta de activos del plan de estudios del proyecto, así que siéntete libre de agarrar eso o como dije, usa el tuyo propio. Entonces vamos a aprovechar esta oportunidad para hablar también un poco de algunas imágenes. Sabemos con sencillamente social, estamos hablando con un joven profesional. Alguien que obviamente está realmente activo en una serie de sitios de redes sociales. A lo mejor esta persona usa LinkedIn, Facebook, Twitter, Instagram. Su mundo está muy consumido en las redes sociales. Ese es un lugar para empezar. Encontré esta imagen realmente genial aquí que creo que podemos usar para empezar a contar un poco nuestra historia. Entonces para traer eso, vamos a desglosar esto a un poco más en vamos a desglosar esto a un poco cuanto a por qué creo que esta imagen va a salir realmente bien para nosotros. Voy a voltear esto y empezar a hablar un poco más sobre eso. Voy a cortar esto de verdad rápido con un rápido vistazo a la masa. Yo quiero que sea por ahí. Se trata de dónde puedo encontrar que 800 píxeles es un buen punto para tener ese corte. Entonces esta imagen que me funciona, es que queremos contar una historia que simplemente social va a simplificar tu vida en redes sociales. Hay algo realmente genial en este tipo con vistas a algo tan ocupado como una ciudad pero en este tranquilo espacio de sentarse junto al lago aquí. Obviamente encaja un poco nuestro demográfico. Que el bonito beneficio que tenemos aquí, está arqueado en nuestro lo que ojalá sea nuestro disparo de interfaz. Él va a traer naturalmente tu ojo dentro de ella. Por lo general, hay muchas cosas bonitas que suceden cuando comienzas a usar imágenes o caras que las apuntan a tu código de acción. Empezarás a ver una captación justo de ese pequeño cambio. Naturalmente como humanos que seguimos, tenemos que mirar a las caras y seguimos a los ojos, pero esto es realmente limpio a medida que empiezas a crear ese movimiento remolino en tu disparo de interfaz. Obviamente esto es probablemente un poco demasiado fuerte de un tratamiento aquí. Se puede ver que suceden algunas cosas válidas. Entonces, lo que probablemente vamos a querer hacer es publicar algunas otras imágenes aquí y luego hablaremos de cómo podemos retroceder eso cuando se trate del tratamiento de nuestras imágenes. Déjame abrir una carpeta de activos. Ya tengo una imagen de MacBook aquí. Eso ya está cortado con la interfaz en ella. Ustedes son probablemente lo van a hacer ustedes mismos pero por el bien del tiempo sólo sentí que sería bueno tener ya eso ahí dentro. Entonces, se puede ver tan agradable como esto está mirando todavía hay un tema. Tenemos un problema de dominación aquí. Estamos tratando de hacer demasiado. Necesitamos realmente retroceder esto. Lo bueno de cuando usas fotos realmente de alta calidad es que tienes muchas cosas geniales con las que puedes trabajar. Esa es clave para crear una página de inicio realmente efectiva es comenzar con grandes fotos. A lo mejor podemos simplemente simplemente cambiar este tema dominante poniéndolo atrás sólo un poquito y empezarás a ver cómo empieza a salir un poco de la página aquí. Ahora estás empezando a ver este énfasis aquí que está pasando en simplemente social pero también tienes esta foto de estilo de vida realmente genial que empieza a funcionar obviamente con un diseño. Ya estás contando esta historia cuando ni siquiera hemos llegado a los detalles de las cosas. Déjame jalar aquí algunos elementos de navegación. Voy a arrastrar estos de nuestro tablero de marca aquí. Vamos a tener un lindo tour y luego en cuanto a algo en lo que pensar verás que aquí tengo este espacio realmente bonito. Cuando esté en duda airea tu diseño. Las cosas se pueden poner un poco demasiado apretadas y cada que estás diseñando lo que estás haciendo es que estás confundiendo tu historia o estás tratando de que la gente se tome demasiado de una vez, así que me gusta realmente airear del lado del espacio alrededor de tu logo. Quieres tener estos momentos de pausas en tu historia para que la gente pueda consumir lo que intentas decirles ya sea inconscientemente o directamente. Entonces, vamos a patear aquí unos cuantos elementos de navegación. De nuevo, sólo vamos a estropear esto en. Vamos a fingir esto, esto está lejos de ser un diseño final, pero iremos de ahí. A lo mejor tenemos un enlace a Apoyo o tenemos un Tour Support puede ir al pie de página, pero sólo lo vamos a meter aquí en la parte superior nav y entonces supongo que tendremos a la capacidad para que alguien inicie sesión, porque obviamente vamos a tener un gran llamado a la acción, que en realidad está apuntando, por lo que quizá no necesariamente necesitemos incluir eso aquí en este punto. Está bien. Entonces, ahí vamos. Por lo que estás empezando a ver cómo empieza a jugar este diseño. Vamos a tirar de nuestro elemento titular estandarizado aquí. Nuestros estilos de titular, lo siento. Trae esto. Siguen viendo aquí algunos temas de valor, así que vamos a tratar de retroceder un poco más esto donde podamos. Está bien. Está bien, y de nuevo estamos desbaste las cosas. Entonces traeremos nuestro activo de botones estándar ya que ya tenemos eso de nuestra página de aterrizaje anterior, y muchas veces no tienes que rediseñar cosas para recrear la rueda pero nuestro diseño anterior ya tenía una muy bonita conjunto de directrices. Entonces, sólo vamos a reutilizar donde podamos pero también simplemente más o menos hacer mejor trabajo al enfatizar cierta cosa son nuestras metas. Entonces, no siempre significa que tengas que rediseñar toda tu marca para aumentar tus conversiones. Entonces, estás empezando a ver cómo esto realmente se está dando forma, creo, agradable desde otra vez, el punto de vista jerárquico de las cosas. Realmente ponerlos en la historia ya que era para volver a nuestro concepto aquí. Tienes todas estas piezas empezando a jugar bien juntas. Esta superposición va a ser realmente agradable, pero necesitamos realmente tirar un poco este taco visual pero llamemos al héroe en un buen lugar y bajemos un poco por la página. Cuando se puede pensar en secciones lo vas a hacer un poco mejor en cuanto a diseñar las cosas. Naturalmente tu mente se va a centrar en estos cuando empieces a separarlos versus poner todo en la página todo a la vez. Ahora, tenemos esta cosa visual realmente genial sucediendo aquí. Tenemos este color que empieza a moverte a través. De verdad empieza a estallar aquí así que sabemos que algo importante va a tener que pasar aquí. Ahí empezamos y queríamos empezar a explicar substorio de qué queremos decir con redes sociales simplificadas, como explicarme eso. Eso es lo que vamos a hacer aquí. Si vuelves a nuestro sketch realmente queríamos enfatizar así como nuestros objetivos lo que es Simply Social, una mejor manera de lo que hacíamos en el pasado. Entonces, la forma de hacerlo es que puedes usar copy, en nuestro caso vamos a tener un bonito titular aquí y creo que vamos a tener una agradable declaración simple que no es mucho pero solo establece el tono para toda esta sección. Entonces, tengo alguna copia, como dije, ya elaborada aquí, pero vas a usar tu copia. También siéntete libre de calificar tu propia copia por Simply Social. ¿ Qué harías mejor aquí para que este diseño sea mucho más efectivo en tus puntos de vista. Me encantaría ver eso. Entonces, voy a tirar de algunos otros elementos. Ahora estás empezando a ver donde tenemos esta enorme ventaja arriba y estamos empezando a descomponerla, y ya puedes decir solo desde un punto de vista visual que vamos a empezar a romper esto en una historia más profunda alrededor Simply Social. Entonces, vamos a continuar este tema alrededor de las imágenes, alrededor de esta idea de tomar algo tan complejo y caótico como las redes sociales, y combinarlo con esta tranquilidad que hará Simply Social. Eso lo hemos hecho con esta gran foto de como este tipo calmante mirando algo tan complejo. Pero creo que aquí también podemos hacer eso y vamos a usar ese mismo tema de la naturaleza para que eso suceda. Entonces, tenemos esto realmente genial, de nuevo, una imagen de fondo realmente genial. Esto ya se ha creado así que sólo voy a dejar esto justo dentro. Se consiguió unos valores realmente bonitos aquí pasando. Entonces, tienes este tiro realmente genial, tormentoso. Te mostraré el original ahora revés y sometido. Entonces, tenemos esta descripción realmente clara de qué se trata Simply Social, pero queremos sumergirnos un poco más en esas tres áreas de enfoque. Me tomé algún tiempo para afinar eso un poco. Estas tres áreas deben ser realmente diferenciadores clave que te distancien de tu competencia. Simplemente vamos a retocar realmente la idea de que puedes publicar, puedes conectar todas tus cuentas, porque siempre obviamente va a haber una pregunta en cuanto a qué cuentas puedo conectarme a Simply Social. Vamos a contestar eso muy rápido y vamos a hablar de cómo este beneficio de Simply Social y la idea de un simple sitio de redes sociales como este y tirar de esto a un solo lugar en realidad aumentará tu compromiso con todos con los que te enfrentas de forma regular. Entonces vamos a empezar con así esta configurada de- Vamos a tener algunos iconos aquí. Los iconos son una gran manera de, de nuevo, pequeña cue visual que ilustra de qué se trata algo. Es limpio cómo se siente este diseño. Están pasando muchas cosas complejas, pero sin embargo parece todavía controlado. Esto se debe a que definimos claramente nuestras metas. Hemos dicho claramente lo que dominante aquí es lucir un poco mejor la app y vamos a entrar en estas pequeñas piezas, pero no estamos perdiendo el énfasis en la visualización real de la interfaz y estamos usando el imágenes para, más o menos, configurar un bonito telón de fondo que todo esto vive encima. Obviamente tus visitantes van a decir me pregunto por qué usaron este árbol aquí atrás o este escenario tormentoso pero juega un poco en el fondo o en el subconsciente. Pueden hacer la pregunta pero obviamente tú quieres tener una respuesta y nosotros sí. Está bien. Entonces, tengo alguna copia que voy a llenar aquí. Vamos a decir Connect y vamos a decir Engage aquí porque esos son los tres beneficios aquí que Simply Social te ofrece. Te da la oportunidad de publicar, conectar e involucrar. No necesitamos contar todo. No necesitamos entrar en cada pequeño detalle, lo cual creo que muchas veces hacen los sitios de marketing y creo que ahí empieza a caer la conversión es porque cuantos más información a veces se compartes, el más preguntas que se hacen llegar a tus visitantes y cuanto más confusos se ponen. Entonces, cada vez que puedas más o menos mantiene las cosas realmente, realmente enfocadas, y puedes ver el tema clave aquí es definir esos objetivos, apegarte a esos objetivos, y mantener las cosas realmente, realmente enfocadas cuando puedes en controlando esa expectativa. Entonces, aquí puedes empezar a ver tenemos esa sección trabajando para nosotros y me gusta. Podemos trabajar con nuestro redactor, realmente estoy apretando todo esto. Pero por cierto, tenemos algunos diferenciadores realmente clave a los que estamos golpeando. Se sienta de una manera realmente agradable de colocarlo, tal vez haya una oportunidad aquí para crear algunos alineados para conectar un poco estos. Entonces, a medida que tus ojos se mueven por aquí puedes ver que estas no son tres cosas separadas, pero ésta es una unidad. Podemos apretar eso una vez que lleguemos a la etapa final. 6. Creación del diseño [Parte 2]: Pasemos a una especie de cómo queremos mostrar nuestras características reales. Si volvemos a nuestro sketch, tenemos esta oportunidad ahora para resaltar algunas partes de la app. Para recapitular, tenemos una especie de que el héroe funcione, configura nuestra historia, vamos por aquí, te metes en los detalles más finos, es una especie de la siguiente jerarquía de nuestra historia, qué son esos guisantes de alto nivel o el segundo nivel I adivinar lo que es simplemente social. Ahora, queremos una especie de taladrar un poco más profundo. Siempre hay otras preguntas, bueno, ¿qué aspecto tiene la pantalla de composición tal vez te ves o cómo es mi perfil? Si me voy a poner aquí fuera. Porque lo genial de Simply Social es que también puedes conectarte individualmente con algunas personas, especie de crear tu propio mini perfil aquí junto con tus otras cuentas de redes sociales conectadas entre sí. Entonces, obviamente hay una pregunta de ¿cómo me van a ver en línea? Entonces, estas son todas las cosas que vamos a empezar a responder en esta sección. Entonces, empecemos otra vez con nuestro tipo de telón de fondo. Ya tenemos una imagen de fondo realmente genial. Ahora, estamos mirando de nuevo, algo más que tormentoso que necesita ser contenido. Todavía tengo ese ya tipo de sentado aquí, sólo vamos a traer eso. Para hacer estos efectos, es como que es realmente más o menos. Tan sólo una cuestión de jugar con opacidades para que éstas funcionen de la manera en que están trabajando. Pero se puede ver, aquí hay muchas imágenes pero nada está dominando lo que queremos que la gente salga de esta página. Entonces, voy a tirar de estos elementos, los tengo todo tipo de ya creados. Voy a traer estos y ver cómo pueden funcionar esos. A lo mejor queremos centrarnos en uno a la vez aquí, así que tal vez sólo vamos a cortar eso, empezar a ver si cómo podrían llegar a ser las cosas, tal vez tengamos un titular, en algún lugar de ese titular podría sentarse al otro lado de la parte superior, que en realidad se siente un poco raro para ser honesto, y consideras la forma en que escaneas la página, tipo de rompe este flujo, así que tal vez lo mejor es un tipo de compensación como habíamos esbozado inicialmente. Creo que en realidad voy a desactivar eso. Porque eso realmente hace que eso salga de la página. Realmente crea una dimensión aquí que es genial. Entonces, necesitamos algunos controles, ¿de acuerdo? Podemos usar- estos podrían circular por su cuenta o podríamos hacer un poco de ambos. A lo mejor hacen ciclo por su cuenta pero también tenemos la capacidad de tipo de conectar con aquellos si así lo deseamos. Entonces, consiguió unos cuantos iconos más. Vamos a destacar algunas otras cosas, ¿no? Queremos destacar el feed tal vez, ¿cómo se ve el feed para tu perfil? Tipo de esa alimentación pública, ¿Cómo se ve la composición? Esto es tal vez, ¿cómo se ve un perfil? Haremos pruebas en torno a estos escenarios para asegurarnos de que es exactamente de lo que queremos hablar. Pero ahora mismo, sólo vamos a meter esos en juego, estos deberían ser de la marina. [ inaudible] aquí. Podrías hacer click en estos, verás estos cambios, y probablemente también podamos ver tal vez algún tipo de trabajo de línea que tipo de funciona con eso cuando tipo de apretar las cosas. Entonces, ahora tenemos el tercero, supongo que se podría decir el tercer capítulo de la historia, una especie de desbaste aquí. La siguiente parte vuelve a volver a nuestro boceto, la prueba social. Esta es una especie de donde ahora estás empezando a moverlos al tipo del final del libro o al final de la historia. Como que copias este bonito flujo, conduciéndolo hacia arriba, tirándolos a través de ellos. Este es un buen momento de capturar, tu ojo rebota la página realmente agradable, nos encontramos. Entonces ahora, queremos hacer algo aquí que creo que compensa lo que estamos haciendo en este apartado pero también empieza a introducir alguna de esa prueba social. Entonces, tenemos otro cool continue con ese tema, otra manera realmente genial de presumir algún ajetreo. Pero lo vamos a someter con cierta opacidad visual. Entonces, sólo voy a dejar eso ahí dentro para ustedes chicos. Nuevamente, siéntase libre de usar cualquier combinación de colores. Creemos que esto funciona, porque creo que empieza a sándwich esto realmente bonito cuando se pasa por la página, rebota, ese dispositivo realmente muy bien también. Entonces, cuando se trata del modo de prueba real, puedes hacer una serie de cosas. Puedes ponerlos en una cuadrícula, solo como que dejen correr la página, podemos ponernos un poco más interactivos, tal vez haya un carrusel que se desplaza, tal vez haya cartas reales, hay mucho de las cosas visuales que puedes hacer aquí. Pero lo importante es, en realidad, solo enfatizar la prueba social, y veo que también hay un par de elementos de prueba social en la página. Hay testimonios, y luego creo que queremos empezar a hacer un poco de algunos compartir redes sociales, también pruebas sociales. Pero, por aquí, sólo queremos asegurarnos de que dejamos que la gente se tome un momento, detenga, y consuma estos testimonios. Entonces, vamos a tener eso en cuenta mientras diseñamos esto. Nos dieron el bonito tema de ir con unos iconos realmente bonitos, traer de vuelta a este tipo. Simplemente se sienta en la página. Tenemos otro testimonio aquí, y puede, que traerá. Ahora, cambiar a un diseño centrado, funciona aquí, porque tenemos una especie de disposición central sucediendo aquí. lo hemos alternado, así que cuando se trata del diseño, algunos, piensan que se rompe un poco a medida que se trabaja por la página. Creo que lo que haremos, es simplemente mostrar el tiro a la cabeza, la descripción de quién es esa persona, y dejaremos que eso se siente aquí también. Tengo un par de ese tipo de ya aquí. A lo mejor tenemos [inaudible] Creo que hay otra gran oportunidad para hacer aquí algunas piezas visuales interactivas. mí me gusta poner un poco de interactividad en cualquier lugar que podamos, pero no voy a dejarlo demasiado sobre el poder. Como dije, el objetivo aquí es realmente hablar más sobre el diseño, narración versus como exactamente cómo hacer una serie de tratamientos reales aquí. Entonces, siéntase seguro de componer algunas de estas imágenes es una especie de forma agradable de hacer eso para ustedes. Entonces, eso está empezando a lucir realmente bien. Es decir, podría haber algunos controles aquí, tal vez en el móvil, pienso la experiencia móvil tal vez simplemente voltear a través de esto con el pulgar. A lo mejor estos son otros tipos de gestos, hay muchas cosas que podemos hacer aquí, cuando comienzas a meterte en la optimización alrededor del móvil. Pero, por ahora, creo que esto está empezando a formarse muy bien. Está bien. Entonces, a medida que estás pasando, siempre te estás preguntando, ¿estamos a la meta? ¿ Nos estamos distrayendo de la portería? Porque ahora vas a empezar a relajarte, y creo que, como en el boceto, hemos hecho un muy buen trabajo al derribarnos en el momento adecuado, y tirarlos a la acción actual de Goto. Entonces, en este diseño en particular, y puede que tengas un par de diseños, donde el objetivo para tu página de inicio tal vez demasiado no solo aumentar las inscripciones sino tal vez quieras también aumentar el registro de newsletter, por lo que hay un número de cosas que pueden suceder en una página de inicio, pero es importante enfatizar siempre una. Esta va a ser una zona donde te mostraré una buena forma de hacer eso. Muchas veces, es cuestión de cómo lo configuras en la página. Entonces, pasémonos a especie del área de contacto aquí. Creo que para esto, sólo vamos a mantenerlo simple y coloreando, frente al consiguiendo- porque ahora, queremos, como digo, queremos hacerlos caer. Creo que esta es una gran manera de introducir un formulario de contacto. Pero también vamos a tener alguna prueba social adicional aquí. A lo mejor, les vamos a dar la opción. Si no están del todo listos para inscribirse, tal vez les vamos a dar la opción de ahora solo sígannos un poquito. A lo mejor queremos impulsarlos a algún tipo de interacción con nuestra empresa o con el producto. Pero si no están listos para inscribirse, queremos darles otro ligero toque potencial y una ligera oportunidad de convertirlos en otra fuerza, en otro embudo de algún tipo. Entonces, creo que eso es lo que vamos a hacer aquí, es que vamos a empujar el contacto o formulario de registro. Pero también, quizá miren hacer algo aquí abajo por promocionar y mostrar su prueba social, pero también dándoles una opción para seguirnos en Facebook o Twitter. Es un tratamiento muy sencillo aquí. Sólo vamos a nocaut esta forma aquí muy rápido sin embargo. De nuevo, tengo una forma que ya hemos utilizado en un diseño anterior, que sabemos que en realidad funciona desde el punto de vista del formato y desde el punto de vista de la conversión real. El problema con este diseño no era del todo sobre si nuestra forma se estaba convirtiendo tanto, estaban consiguiendo toda la historia del producto en términos de funcionalidad de nuestro llamado a la acción. Porque aquí hay muchas cosas que puedes hacer. Cuando se trata de tus conversiones, simplemente puedes tener un botón aquí que es-. Regístrese. Eso funciona muy bien. Hay muchos estudios alrededor. Si consigues que se comprometan a eso y se te hace estallar un modal, podrás obtener el resto de la información para nosotros. En realidad, las cosas funcionan muy bien si solo las metemos en el- sacamos algo de su información desde el principio, y tipo de llevarlas directamente a la incorporación real. Entonces, nuestra forma y el bien de esto, es simple formulario de registro, y van a continuar, y eso realmente los llevará directamente a la aplicación real, donde pueden empezar a involucrarse más. Entonces, voy a nocaut este formulario rápido. Entonces, hablaremos de esto en esta sección, y hablaremos de cómo todo esto va a funcionar en conjunto. Entonces ahora, tenemos nuestro formulario de registro, hemos equilibrado esto de una manera que-. Obviamente, lo primero que queremos que hagan es empezar. Nosotros queremos conseguirlas- si no están listos para hacer eso, simplemente vamos a ver si van a comprometerse con una de estas dos opciones. Nuevamente, podrías simplificar mucho más esto si quisieras, y solo usar una llamada a la acción que abra un modal o los lleve a otra página, y todo lo que hacen es enfocarse en esto. Pero hemos encontrado que hemos tenido algunas buenas conversiones a su alrededor apenas empezando lentamente al proceso de incorporación desde el principio. Entonces, vamos a envolver este diseño con un pie de página rápido. Entonces, el siguiente paso es, voy a terminar este diseño y luego lo vamos a traer a la visión y hablamos de cómo obtener retroalimentación de tu base de usuarios existente o dentro de tu equipo interno. 7. Colaboración y comentarios: Está bien. Entonces, ahora, estamos listos para tomar ese diseño y estamos listos para obtener algunos comentarios al respecto. Eso lo vamos a hacer introduciéndolo en InVision. Estoy creando un buen prototipo y te estoy mostrando cómo compartirlo con otros de tu empresa o con clientes existentes. Obtienes alguna retroalimentación de alto nivel y rápida antes de empezar a meterte en el refinamiento de tu idea un poco más y entregarla al desarrollo. Entonces, lo primero que debes hacer, es que necesitas crear una cuenta gratuita de InVision si aún no lo has hecho. Puedes hacer eso simplemente yendo a registrarte en invisionapp.com, ingresando tus credenciales, y luego tendrás una cuenta gratuita que es buena para un proyecto. Ya tengo una cuenta, así que lo que voy a hacer es tomar y crear un proyecto. Es realmente simple. Sólo voy a llamar a esto Simply Social Homepage. Va a ser un escritorio. Hay muchas cosas que puedes hacer en torno al móvil, pero este es un proyecto de escritorio, así que solo lo voy a crear. Lo siguiente que quieres hacer, es traer tus diseños a InVision. Se puede hacer eso arrastrándolos y soltándolos aquí, foro de navegación, pero me gusta usar InVision sync, que es realmente genial y una manera realmente genial de meter las cosas en InVision en hacer actualizaciones sobre la marcha sin tener que arrastrar y soltar cualquier cosa más o menos por el resto del proyecto, así como acceder a un montón de otros activos compartidos con tu equipo. lo tanto, funciona con Dropbox, así como en tu unidad local. Entonces, tenemos nuestras pantallas ahora dentro de InVision usando InVision sync. Ahora queremos crear prototipos a los que hacen que se puedan hacer clic, para que podamos obtener algunos comentarios reales de ellos en contexto sin tener que enviarles JPEG a través de un correo electrónico. Entonces, entra aquí. Vamos a hacer algunos cambios de configuración rápidos aquí. Vamos a hacer negro este fondo sólo para dejar que esto se apague un poco más, pero estamos listos para empezar a crear prototipos. Lo primero que tal vez quieras hacer es empezar a vincular esto, muy rápido sin escribir código. Entra aquí y tenemos este patrón de usuario del que hablamos que va a ir por todas las páginas que va a ser simplemente una plantilla y podemos llamar a este nav. Ya que sabemos que eso va a ir en todas las páginas, vamos a hacer que esto vaya a la página de inicio real. Hago que esto vaya a la página de inicio, y haga clic en Guardar. Esto en realidad irá a un Tour, y tal vez en realidad queremos conducir eso hasta lo real, o un spot en la pantalla. Entonces, tal vez cuando configuro esto para que en realidad vaya a esta sección, o podría bajar a una url externa, no importa. Entonces, ahora, tenemos este botón Registrarse. Como obviamente, queremos bajar eso hasta el formulario de registro real. Yo quiero hacer esa transición sin problemas, y entonces también vamos a prototipo rápidamente. Esto, podríamos hacer prototipos, pero por el bien de la velocidad, sólo vamos a hacer prototipos rápidamente en esta sección fuera ahora mismo. Por lo tanto, fácil de hacer es simplemente hotspot. Vamos a llevar esto a Testimonial dos, ver que sí. Vamos a mantener ese spot a las páginas y dejar caer, y luego lo vamos a hacer aquí para ir a Testimonial tres, y si probamos todo esto muy rápido, vas a ver, una vez que llegues esto yendo a la demo real, cómo es esto todos van a trabajar. Entonces, estoy en mi modo de vista previa, solo haciendo clic en el globo ocular, podemos llegar aquí, haces clic en Regístrate y solo te impulsa justo hacia abajo en la página. Doy click a Angela Wells, la va a llevar a la vanguardia. Bueno, en realidad, aplica eso a todas las páginas que hay ahí. Entonces, lo que haremos es, rápidamente prototipearemos el resto de esto bajo estas otras páginas y luego hablaremos de cómo establecer el escenario para la retroalimentación y empezar a obtener algunos comentarios al respecto. Entonces, tenemos todo prototipado y está listo para compartir. Lo primero que quiero hacer primero, como diseñador que se está preparando para presentar esto, quiero dejar algunas notas, tal vez tener algunas discusiones rápidas. Si tienes esta característica genial aquí llamada Tours, que nos permite hacer pequeñas notas con nuestro equipo sin tener que entrar y dejar comentarios necesarios. Esto simplemente puedes llamar Tour point. Entonces, tal vez, voy a sugerir y quiero hacer aquí es, realidad podemos hacer de este un GIF animado para desplazar los pensamientos de alimentación. Estas son todas las cosas que apenas inician alguna discusión. No son comentarios realmente procesables, pero son cosas en las que tal vez piensas. Podríamos también querer hacer eso con otra sección, tal vez hacemos lo mismo aquí donde decimos: “¿Es ésta la mejor captura de pantalla? ¿ Puede ser mejor?” Yo sólo notaré, tal vez el redactor, platicamos los a través de tal vez, “Necesitamos afinar algo de copia. ¿ Podemos meter al redactor?” Para solo hacer algunos pequeños puntos de conversación rápidos antes de meternos en una inmersión más profunda en esto, así que con nuestros equipos. Entonces, eso fue en el modo Vista previa. Estamos listos para compartir esto. Entonces, para hacer eso, puedes o bien entrar en Photoshop, crear una sesión de LiveShare realmente usando nuestro pequeño y cool plug-in llamado LiveShare PS. Una vez que esté cargada, podrás crear una sesión de colaboración virtual que en realidad saca esta vista de tu diseño al LiveShare, para que puedas colaborar internamente con tu equipo en tiempo real en dar forma a este diseño antes de que lo pruebes. O bien, simplemente puedes ir aquí, crear una pequeña URL de compartir sencilla, establecer algunos parámetros y luego empezar a obtener algunos comentarios. Entonces, voy a usar una ruta para compartir y lo que va a pasar es, vas a conseguir una URL, cargar esta página, y luego vamos a empezar a obtener algunos comentarios. Así es como se ve el enlace de compartir. Entonces, puedes ver, hemos hecho estas marcas que vienen aquí unas pequeñas balizas realmente bonitas que te ayudan a ilustrar los puntos de Tour reales que te han dejado o los puntos de conversación que dejaste para tu diseño. Cualquiera puede entrar aquí, hacer clic en ellos, responderles, puedes moverte a través de ellos. Es una gran manera de presentar tus ideas cuando no puedes estar ahí. Entonces, hemos enviado esto fuera un feedback y tenemos algunos comentarios ya vienen en eso es en respuesta al verdadero Tour point haciendo un GIF animado. Se puede decir: “¡Genial! Hagamos que suceda”, pero también tenemos algunos otros comentarios que están empezando a caer aquí. “ ¿Podemos mover este botón hacia arriba? Ahora mismo hay una necesidad. Aquí hay algo de espacio extra que no necesitamos así que ¿podemos apretar eso?” Esta es toda la retroalimentación que está llegando a tu diseño en tiempo real. Entonces, como ves, “Suena genial”, gestiona la retroalimentación sobre la marcha. Entonces, dentro de tu cuenta de InVision, puedes empezar a ver estas conversaciones ocurriendo. Para que pueda responder. “Claro que sí. Hagámoslo”, y realmente empieza a tener esta colaboración interactiva que está sucediendo a través de tu diseño. El otro gran cosa es, ya que tenemos todo esto en InVision sync, puedes hacer estos cambios de inmediato en Photoshop. Podemos mover este botón hacia arriba y en realidad daremos clic en Guardar. Tan pronto como eso se sincronice con el servidor, ahora este cambio realmente se reflejará en tiempo real. 8. Resumen: A medida que empiezas a empujar tu diseño a la línea de meta, probablemente sea un buen momento para empezar a traer a tu diseñador o eres ingenieros y tus desarrolladores para empezar a recibir sus comentarios y dejar algunas notas reales que les pertenecen específicamente. Eso se puede hacer fácilmente. Obviamente tienes tus 12 puntos pero también puedes hacerlo con notas de Dev realmente geniales. Entonces, aquí dentro, simplemente puedes decir: “Esto necesitará algún código adicional que no tenemos”. Se puede decir una Nota de Dev que diga: “Este es un acarreo desde la última página de aterrizaje”. Todas las notas que solo los desarrolladores verán cuando elijan ver en. Entonces, lo hermoso la URL Share es que puedes compartir esto con tus ingenieros y ellos, también, pueden hacer clic y comprometerte con el diseñador. También pueden dejar sus propios comentarios donde sea necesario. Entonces, otras grandes herramientas que tenemos para trabajar con tus desarrolladores son Snaps, lo que te permite tomar páginas realmente codificadas o cualquier página URL y llevarlas a tu cuenta de InVision. También está la capacidad de los activos compartidos donde los desarrolladores e ingenieros pueden entrar y realmente descargar todos los archivos fuente, imágenes, fuentes que necesitan para empujar esto a la línea de meta. Entonces, InVision empieza a hacerse cargo. Te mueves a un rol de soporte pero todo se está gestionando a través de la plataforma InVision. 9. Conclusión: Por lo que ahí lo tienes. Algunos principios fundamentales clave que puedes empezar a utilizar para aumentar las conversiones o cualquier proyecto en el futuro. Entonces recuerda, la retroalimentación es una parte muy importante del proceso creativo, es importante abrazarlo. A medida que cambien tus objetivos, vas a tener que cambiar tu diseño. Me emociona ver cuál creas, por favor comparte conmigo en una galería de proyectos a continuación. 10. Explora más clases de diseño en Skillshare: manera.