Conceptos básicos de diseño de UX: crea un prototipo sensible en Axure RP

1. ¿Qué es el prototipo?: bienvenido al problema tapping básicos. Yo soy Sophia Me. De verdad detuvo al hombre. Tiene experiencia en diseño de experiencia de usuario y sus tipos de problemas tienen una medalla de comunicación con los clientes para conseguir que las personas antes del desarrollo. ¿ Cuál es el prototipo? Proteger es una simulación de cómo se verán las cosas hermano, y es un mensaje de uso común. Experiencia del usuario Diseño Esposa Total Actuación Tipo de hermano útil Ayuda a limpiar los costos de desarrollo facilita la comunicación con las partes interesadas y los clientes y ayuda a probar ideas y conceptos médicos , para entender su facilidad de uso y deseo. En este último, vamos a tener que crear un prototipo de un sitio web de negocios en tablet, móvil y escritorio. No se requiere para esta última y no se requieren habilidades de codificación para el final de esta clase y debería poder crear tus propios prototipos y ciertamente con tus colegas y clientes. Empecemos 2. Instalación de Axure RP: antes de que podamos empezar con la creación de nuestra primera esposa de, necesitamos tener un averiado para esta clase. Voy a usar terapia real como nuestro Salter para crear novios. Podemos descargar el taburete de su página web. En realidad, esta es mi herramienta de prototipado favorita. Al tener muchas capacidades para el trabajo en equipo, para la publicación y para la generación de documentación. La herramienta es muy fácil de usar apenas volver y soltar funciones desde el lado izquierdo de tu pantalla Tiene muchos estados diferentes, . por lo que, por ejemplo, podemos cambiar una pantalla basada en diferentes estados. También podemos crear diagramas de flujo, por ejemplo, condiciones. Por ejemplo. Podemos validar formularios que podamos y las indicaciones en pico. Podemos cambiar la U. S. Usted puede ver aquí también. Podemos hacer que el Colton sea dinámico. Podemos ayudar a diferentes alimentadores, diferentes listas desplegable. Es muy, muy flexible. También es muy fácil de compartir. Esto archiva a los 15 miembros porque puedes publicarme en la unidad de compartir real on line. Si consigues que eres un enlace que te preocupa ven a proteger también sea posible y básicamente recomendación. También es bueno porque puedes modelar flujos de usuario Cómo debe navegar el usuario por el sitio Web . ¿ Cuáles son los próximos estados permitidos? Cuando los usuarios en sitio web de artículo específico y fue una posible documentación general significado, por ejemplo, se puede generar documentación en un barrio con todas las pantallas fuera de los markups que haya realizado y luego algunos explicación bajo tener debates sobre lo que se supone que debe esta página, y esta puede ser una manera muy grande. Informar a los desarrolladores cómo tienen que ser básicamente sitio web. Por lo que es especialmente útil si estás trabajando con cosas y luego duran pero no menos importante, también puedes generar código HTML, es decir Si creamos aquí esta página, por ejemplo, podemos generar portones de marketing ellos y oro para ella. Entonces es un futuro muy, muy frío si quieres crear sitios web de la muerte y no quiero gastar mucho dinero en ello. Es realmente genial para la colaboración y la creación de prototipos rápidos. Y de hecho es la necesidad de ST Leader como dicen. Por lo que los invito a seguir adelante y descargar el juicio, así que ahora voy a bajar. Es así que lo voy a instalar. Vuelve a ti con No empieces 3. Primeros pasos con Axure RP: tener ahora en Seúl, Doctor, siendo mi computadora y estoy listo para empezar a mostrarte cómo puedes conseguir prototipos. Con la primera vez que abres. En realidad, siendo tu computadora, vas a conseguir este trabajo en mis sentados. Si estás usando una prueba, veremos que te quedan 30 días para que puedas comprar una licencia o fin de la licencia Mantén tu problema todo lo que puedas buscar en la cuenta personal, . pero no lo haces por esta demo y aún puedes usar para intentarlo durante 30 días sin ningún problema. Básicamente, aquí puedes crear ya sea conoció cinco o puedes abrir archivos existentes. Por el momento no tenemos ninguna pelea, Skip, así que iríamos por ti pelea y también vas a conseguir este tutorial interactivo paso a paso , que te explica, como da real abusivo o tú, Si lo decidiste, dices que no aparezcas de cerca. Voy a dar click en un nuevo cinco. Entonces básicamente, ahora este señor Desaparecido y me puedo dar una explicación sobre cómo se podría usar después Así por ejemplo, en la parte superior de la página tenemos que comprar aquí tenemos acciones de retención en la pelea. Por ejemplo, Fin de semana 85. Adopta cómo queremos nuestro cebo, qué elementos queremos ver cuando trabajamos con él. Podemos tener algunos. Probablemente visto una muestra deportiva fueron publicadas en el online after cell, donde conservamos el enlace a un ataque al corazón con diferentes usuarios. Podemos generar los archivos HTML a partir de eso podemos generar especificación de barrio. Estas son acciones más avanzadas para esta demo. No lo necesitamos, pero definitivamente puedes tomarlo. También podemos crear el equipo. Cinco. Podemos crear un proyecto de equipo básicamente, y podemos trabajar con mis compañeros de equipo en la misma pelea, y podemos adoptar estos. Esto también es más oponentes ajuste, que está fuera de alcance este entrenamiento. Pero también puedes estar buscando tu cuenta guardada. Cinco. Abrir si traigo exportación básicamente toda la configuración estándar fuera de cada software del lado izquierdo de los dos, no tenemos más importante en las páginas de sección que podemos editar, eliminar o duplicar. Se pagaron los salarios. Si hago doble clic en un determinado elemento, podría nombrar Así, por ejemplo, puedo nombrar este aparece sitio web. Francamente, comentó. Esto se guarda. Entonces puedo renombrar también pagado al sonido. Puedo eliminar el cebo tomando evento como tú borras o simplemente presionando el fondo. También puedo todos no basar si los cavé y dejo caer, o tomando pico divide y los van a sacar. Eso es lo mismo para los bebés sangrados. Básicamente, has estado hablando con cada uno allana el camino que quieres crear la estatua de tu tamaño. También es posible crear una nueva base con solo hacer clic en este icono, ya sea puede dar el nombre. No puedes ser así, todos buscando, por ejemplo, regular multi boot. Qué páginas eran sección específica del sitio web debilitó nombre, por ejemplo, thes nuestros productos y luego podemos arrastrar múltiples páginas debajo de él. Entonces de esta manera podemos crear esto. Eso es lo que queremos dedo del pie teniendo más fácil para ti. Y si tenemos múltiples páginas, lo que también podemos hacer es que usen la función de búsqueda. Por lo que para algunas personas tendría 100 páginas aquí. Podría hacer diarios y encontrar mercado basado en teclear. Nos busca chicas. Entonces así es como podemos monitorear páginas sección mal pagadas. Encontrarás las bibliotecas sexuales. Las bibliotecas son elementos de colección. Hay muchas bibliotecas diferentes ¿Quién lo tiene en realidad? Stephen era básicamente tenemos nuestras formas tendría formas Goldman. Es marcador de posición para imágenes. Simplemente es que puedo crear placeholders, placeholder a través de un lugar. Manténgase estable en la página pero podemos reemplazarlo. Tenemos fondos manera de tener miradas. Tenemos encabezamientos. Tenemos nuestros ups de alianza labora bombarderos dinámicos que monetizan si se puede adoptar negocio. Entonces, por ejemplo, gente Esto es así que esto es algún tipo. Por supuesto que podemos tener en la vida. Contamos con áreas de texto. Siguiente. Esto es básicamente esto allá abajo en realidad no proporciona. ¿ Te gusta una de excusas? Opciones, por ejemplo, integra con un se escuelas diferentes u otro tipo de sitios web. Podrías dominar estas bibliotecas importantes y puedes usar puertas. Y básicamente, ¿qué temas? Tendríamos los fondos en este tiempo. Espera seis. se puede hacer. Pero esto es más avanzado. No necesitaré escoceses. Pero tú eres diferente. Lo haces con James Library. Ya ve, el que perturba el cambio de nuevo. El estilo Básicamente estos son todos con elementos holandeses utilizados pero podrías fluir diagramas tan comprometidos. Este último no sólo es hacer eso para un anillo de esposa para sitios web, así que me gustaría estar en esto. El último es biblioteca, que es no lo hago Esto también se inician campamentos bibliotecarios. Todavía en esta ofrece con algunos Eichel's. Entonces, por ejemplo, si quieres tener un poco más sofisticado para mi amigo y pegar justicia formas básicas, veamos a Ahmadi según nacido para la costumbre de los nuevos clientes explicación. Entonces esta es la forma en que se puede hacer esto. Excelente toque. Cinco años. Oyes sus múltiples formas para hablar, para usar como te gusta. Adelante, espera bajo la sección bibliotecaria de los maestros. Monstruos, muy componentes genéricos pueden ser razonados mercado. Entonces básicamente, mediante la creación de maestro tu elemento que puede cada sitio web me por algo me gustaría tener un lugar. Es una gran página web. El local siempre viene con sitio de trabajo izquierdo. Sigue parado a la derecha, Austin. Por lo que diría tu local y básicamente puedo seleccionar lugar en cualquier lugar eso significa que puedo o puedo buscar ubicación maestra que se quede en la misma ubicación cada vez que doy. Entonces si yo hiciera eso, ahora tengo un maestro. Este es maestro. Vas a destinos diferentes y a quedarte en el lugar estatal. Por lo que esta es una gran manera de tener algunos socios locales. ¿ Has tenido comida u otras cosas que no cambian de bando? Si creas los más maestros en la sección media, tenemos nuestro centro de trabajo principal. Aquí podemos ver las páginas que tenemos abiertas. Podemos hacer click a través de ellos para cambiar la vista de la que podemos cerrar páginas de. No necesitamos abierto y como se puede ver aquí, hay algunos números a la izquierda y la base horizontal top off. Básicamente, lo que son los de es que te muestran cuántos píxeles son los elementos que estás creando. Toma. Eso significaría que mi logo toma alrededor de un poco más de 150 Pick, ya que puedo ver exactamente cuántas púas es. Esto es si hago clic en un elemento. Por ejemplo, si hago clic en este fondo, puedo ver en esta sección, pero el ancho esta 140 pixels. El alto es de 42 cuadros. Esto es muy útil porque cuando eres creativo, sitios web receptivos usan móviles y tabletas. Es necesario saber cuáles son los huesos rotos, por ejemplo, cuál es el peso máximo y la altura que puedes usar cuando haces esposa. Entonces con el fin de ayudarte para eso, puedes hacer todas estas guías haciendo clic en Hugh han sido Dragon Doping una guía. Esta es básicamente una línea práctica que te va a ayudar a identificarte. ¿ En qué te crees? Es lo mismo que puedes hacer haciendo click en la parte superior aquí, Bates y dejándolo caer hasta aquí. Por lo que esto ayudaría a tu cuando estás creando un marco de alambre para saber cuál es el espacio máximo y de esta manera o no excederlo. último pero no menos importante del lado derecho de su página. Tenemos los elementos de estilo que puedes ver aquí. Tres bañeras, propiedades, notas y estilo en la propiedad. Detener. No podemos interacciones, así que básicamente, las interacciones son cada acción que sucederá en base a un cierto desencadenante. Digamos, por ejemplo, que cada vez que haces clic en el logotipo quieres navegar a la página principal. Esto básicamente sucedería. Ser una interacción. De acuerdo, este es un maestro, pero usaré otra imagen de esta demostración. Por lo que al hacer clic en él, se puede decir en click. Y luego aquí en esta lista, se pueden ver todas las acciones posibles que se pueden programar. Básicamente, hay un enorme menos todo es posible, así que juega con él y ve qué se ajusta a tus necesidades. Pero uno de los más jóvenes que quiere es abrir un enlace, y podemos abrir la verdad en una ventana actual en la nueva tina o en una ventana emergente o en una ventana de padres para esta demo. Voy a usar Nueva ventana y voy a decir aquí, nunca voy a llegar a casa así que básicamente puedo enlazar a una página existente en mi marco esposa. Y entonces también me puedo quedar, extendiendo. Ahora voy a elegir el hogar, y voy a dar click. OK, entonces ¿qué va a hacer eso si hago una vista previa haciendo click a las cinco? Entonces, básicamente, si diera click en esto, tendría que ir a casa. Pero así echa un vistazo aquí. Ahora estoy en esta página. Si hago clic en esta opción, me está llevando en una nueva pestaña como se lo dije a la base de inicio. De acuerdo, La página principal está vacía por el momento, así que por eso parece vacía. Pero hace lo que se supone que tiene que hacer. Entonces esto fue por las interacciones, y se puede ver aquí en lo menos más eventos. Hay muchas, muchas condiciones que puedes usar. Por ejemplo, al hacer clic en la página o al desplazarse hacia arriba o hacia abajo, o al cambiar las bocas de la tecla que está presionando en el teclado. Son muchos los eventos y básicamente se puede aprender. Este es el mejor. Juegas con él en la nota, deja de debilitar nuestra documentación. Entonces, por ejemplo, si quisiera documentar a este tipo, diría: Oh, Oh, este es un tenedor de lugar para cualquier mucho, por ejemplo. Entonces si volvería a previsualizar esto e iría a la página específica, entonces básicamente doblar. Mira aquí en las notas Podías ver aquí que este es un positor para nombrarlo. Entonces esto es algún tipo de documentación que no se puede. Entonces cuando estás configurando el prototipo de múltiples personas que tienen una idea de qué se trata esto , y luego la sección de estilismo del fin de semana realmente nos llaman una línea, cambiar las formas, cambiar la dirección del imágenes y todo. Entonces esto depende realmente del tipo de que esté teniendo. Por ejemplo, las opciones serán diferentes. Por ejemplo, en el fondo podemos cambiar la sensación de que no podemos sombras. Por lo que pincharíamos en la sombra. Podemos revisar este libro de polluelos y entonces nuestro fondo habría extendido la sombra. Entonces aparece más como algo que se puede hacer clic. También podemos decir, hacer cuánto queremos que se extienda el dedo del pie sombra. Entonces, por ejemplo, si no aumentara estos números para empezar sería más grande, incluso podría cambiar la llamada de la sombra misma. No podemos permitirnos una forma diferente al fondo. Podemos renombrar el fondo aquí de nombrado su de Mick fondo Generalmente buenas prácticas para nombrar a tus elementos porque, como puedes ver aquí en el esquema, que es un resumen de todo, tenemos suficiente cebo. En el momento en que empiezas a agregar muchas cosas, mantienen el nombre predeterminado. Entonces si no tienes un nombre para ello, no puedes saber de qué se trata esto. Básicamente, quiero decir, da buena vista previa, pero es mucho más fácil desplazarse por estas cosas una vez que le das un nombre representativo , por lo que también podemos agregar el borde alrededor de los libros. Por lo que ahora se ha agregado la frontera, o podemos tener recto más redondeado. Estar adoptando las radios coordinadoras, por ejemplo. Si entrara aquí, entonces veríamos que mi fondo se volviera más redondo. Entonces esta es una forma en que realmente puedes peinar, aunque diferentes elementos. Por lo que esta fue cierta producción. ¿ Qué en realidad escapar de un farol? Sin más preámbulos? Limpiemos nuestro escritorio y empecemos a trabajar en nuestro primer prototipo. 4. Diseño de prototipos móviles: en esta clase, vamos a crear y sitio web Responsive con el fin de habilitar un sitio web responsive en real, necesitamos revisar este checkbooks Adaptive. Esto permitirá adoptar utilizado en nuestro prototipo con el fin de establecer los presets para nuestro diferente uso adaptativo. Tenemos que hacer click en este hombre de fondo como uso adoptivo y básicamente aquí vamos a poder establecer diferentes vistas que queremos para tablets, sitio web y móviles. Soy fan del móvil primero significa que diseñamos primero para la pantalla más pequeña y poco a poco nos movemos hacia arriba a tablet y página web. Verás que este metal tiene ventajas como pensar en lo más difícil y eres tú al principio te ayuda a enfocarte en la información más importante que tienes que poner en tu sitio web. Y también verás en el resto de esta clase de este enfoque básicamente nos ayuda a diseñar más rápido, ya que podemos reutilizar elementos para la versión móvil y simplemente expandirlos dedo del pie incluyen la tableta y la página web. You Ok, Entonces, para empezar, seleccionaremos primero el teléfono Port ocho, que es básicamente los preajustes telefónicos. Entonces vemos aquí que el nombre es Portrait Phone en el stand de testigos en 320 vamos a agregar otra vista, que debería ser el combustible de la tableta. Como puedes ver aquí, real tiene los presets estándar para las otras revisiones, por lo que solo podemos seleccionarlos. Nota también aquí. Este campo que ha heredado de básicamente esto significa que cuando creamos la tableta pocos esto va a copiar lo que hay en el teléfono y luego vas a ver cuánto nos va a ayudar esto. Tendré los últimos. ¿ Cuál es el escritorio que. Por lo que seleccionamos pantalla grande y básicamente ahora estoy terminado con mi uso adoptivo así puedo dar click en OK, si quieres tener más opciones para el fusible adaptativo y echa un vistazo a la documentación de acceso sobre este tema sobre cómo iniciar un uso productivo. Por lo que ahora usuario adaptativo configurado y se puede ver aquí que tenemos tres diferentes tina sport it fall porter tablet y display grande no excusa eso. Hay una línea práctica que básicamente es para que tanto con usted tiene,ya sabe, ya sabe, buen diseño y se puede ver cómo esto se extiende para la tableta y para el escritorio, lo que esto va a ser realmente útil. No necesitamos dibujar. Un pedido adicional está en la línea porque su última tendencia de diseño está en remolque. Tener desplazamiento infinito. Entonces, básicamente no necesitamos que el dedo del pie establezca un máximo ya que la mayoría de los sitios web y los Mobil siguen desplazándose medida que bajamos. lo que para estos curso, me he inspirado a partir de una plantilla gratuita que encontré en el sitio web de Free seizes Templates, que es esta plantilla. Es básicamente un sitio web de negocios con alguna información básica, pero me gusta el diseño limpio. Entonces básicamente, vamos a inspirar tal de esta y genial una versión equivalente en un marco de alambre. Se puede ver cómo esto adopta para tablet, y si hago mi navegador más pequeño, se puede ver cómo se comporta esto en el móvil. Entonces básicamente esta es una vista móvil. Me estoy basando en esta plantilla. Voy a empezar. Empezaré primero con un encabezado y un pie de página. Entonces para eso voy a entrar al logo de la empresa y voy a usar un humilde germinal. Entonces hamburguesa Manu es básicamente estas tres líneas que usé para la navegación para hacer de ésta un poco más grande. Y porque quiero usar este brezo en todas partes, voy a crear el maestro a partir del amor. Entonces para crear un master, voy a dar click en estos dos ítems y voy a escribir convert to master. Y voy a nombrar a este Heather y también seleccionaré la opción Localización maestra bloqueada porque no quiero que esto se mueva. De acuerdo, entonces mi amo ya ha sido creado. Lo siguiente que quiero hacer es sacar algunas imágenes con el fin de tener algún carrusel. Entonces, básicamente, voy a dejar esto en mucho placeholder aquí, y voy a hacer de esto un Bonnel dinámico. De acuerdo, así que presta atención aquí en Dynamic Panel. Podemos crear esto diciendo cover toe dynamic Parnham, y voy a nombrar a este dinámico granero y Carcelle. De acuerdo, Entonces, ¿qué va a hacer esto? Básicamente, esto puede cambiar de vista en función de ciertas condiciones. Entonces eso significaría si me desliza, por ejemplo, hacia la izquierda o hacia la derecha. Puedo verlo de manera diferente mucho así que puedo decir aquí puedo nombrar a los Estados. Este es mucho, y estoy usando éste. De acuerdo, Esto es sólo un tenedor de lugar, pero puedo duplicar estos estados. Es la forma más rápida. Si solo estás usando imágenes y digamos si quiero usar dos o tres imágenes, puedo duplicar esto en mustering. ¿ De acuerdo? No quiero usar el 3er 1 de hecho, así que tal vez simplemente lo eliminaré. También puedo cambiar Los estados dan una prioridad diferente deslizándolos. Voy a quedármela. No, como antes. Y luego encima de eso, no voy a sangrar algún texto. Entonces voy a decir como dicen en la página web. Somos una agencia de diseño mínimo. De acuerdo, quiero que esto entre en dos líneas. Entonces me voy Toe dragon. Probablemente alrededor. Puedo en línea en el medio, ser de este rey de fondo. Y básicamente qué? También lo puedo hacer si quiero personalizar el texto. Inglaterra. Aiken, toma este texto. Puedo cortarlo con control y X, y puedo colocar estos dentro de la mucho así que si pongo esto aquí todo va a ser visible en uno de los dos estados. Y digamos en el segundo, lo mucho que quiero querer algo diferente fue el texto. Entonces estoy agregando, Aquí estamos Are me movería es un poco más si hago control y arriba este movimiento stand habla otra cosa. Si solo hago abajo, se mueve un píxel va a mover esto también. Está bien, Bert. Por lo que ahora tenemos las dos imágenes diferentes. Añádalo. Lo siguiente que quiero hacer es remolcar. Tener algo más de información sobre la empresa. Entonces para hacer eso, me voy a sumar un poco de confianza. Mira, porque no queremos que todo sea completamente blanco. Entonces voy a usar estos libros, y esta caja básicamente se usará como contenedor hacia algún texto. Por lo que aquí podemos tomar otro rumbo. Somos una agencia de diseño en Australia. Esto de nuevo simplemente basándome en el ejemplo. Y aquí. Ok, no podemos Algún texto por el momento. Esto es sólo una prueba pagada. Entonces sólo voy a tomar el párrafo. De acuerdo, Tal vez un poco más de texto, y luego alinearé esto en la mejor manera de alimentar al bloque. También puedo simplemente hacer el bloque más pequeño para que pueda simplemente, como, hacer el más pequeño simplemente ajustando el tamaño. Entonces de esta manera yo También, no sabía alguna información sobre los Kobani. De acuerdo, lo siguiente que podemos hacer es remolcar impar. Algunos de los servicios que prestamos eventualmente para que podamos ampliar este bloque, básicamente y no algunas secciones más. Entonces si lo quisiera solo puedo copiar pegar las etiquetas para más rápido. Entonces solo estoy copiando basting con control C y control ser. Y voy a una sección diferente aquí servicios que ofrecemos y me voy dedo del pie raro aquí. Algunas otras etiquetas me voy a Ok, me gustaría tener el mismo teléfono, así que me voy con el dedo del pie. Ver? OK, esto está usando un punto 14 de este A 13. Voy a usar los 14 ambos. Voy a alinear esto un poco más, y voy a mover esto más hacia abajo para tener un poco de espacio limpio. Entonces voy a añadir algún texto de alguien. ¿ Y se hace optimización, por ejemplo? Por lo que estos son todos los servicios que ofrece la empresa, Así que terminamos con la introducción de la empresa. Ahora no podemos. Algunos también emerge para hacerlo más visual. Entonces lo que podemos hacer es arrastrar y soltar de nuevo. El positor 40 mucho es y luego sólo ese multi mucho está uno debajo del otro. Me encantaría imágenes lo que iba dedo del pie copiar pegar. Esto básicamente con control C control estar va a dejar un poco de espacio en blanco entre juego se ve igual. Yo también estoy basando este. E y ya casi termino. También nos vamos de pie. Otra cotización. Entonces, básicamente, muchas empresas a veces cotizaciones de clientes que están satisfechos de ellos y dice que estamos construyendo un sitio web de negocios. Nosotros también lo podemos hacer. Y esto es lo que un poco de contraste podemos usar el color más oscuro para que podamos ir en la sección de campo y podemos elegir un tono más oscuro de gris. Algo así, por ejemplo. Y voy a arrastrar y soltar el texto. Por lo que nuevamente dejaré caer etiqueta MM. A lo mejor me voy de pie. O quizá el texto del párrafo. Haré esto más pequeño. Haré el tamaño de la misma más grande de la formada y para un poco más de impacto, me voy a poner esto en cursiva, va a mover un poco del texto, y también voy a tener los nombres, toda la gente que voy a hacer. También el color blanco, el texto color blanco. Yo iría aquí y voy a cambiar el teléfono por el cuello blanco y voy a tener el nombre del oso algunos que dieron la cotización. David Brown. Ah, ¿hacha director arquero, por ejemplo. Esto no necesita estar en cursiva. Yo sólo lo voy a adoptar. Y básicamente otra cosa que podemos hacer es tener citas múltiples. Entonces para hacer eso, usaremos el Carcelle alrededor de los pensamientos para que solo podamos seleccionar en los labios, hacer este poco más pequeño, debilitar y arriba por los lados aquí, Empecemos 15 por 15. Eso se ve bien por lo que podemos tener múltiples una vez cuando queremos ver la siguiente cotización. Simplemente voy a quitar la frontera para que pueda hacerlo haciendo click en este ícono. El borde está completamente removido, y solo voy a copiar pegar esto tres veces lo es. Tenemos tres citas que van a mover esto alrededor de la mitad de la página, y digamos que ésta es la del medio. Entonces básicamente eso significaría que éste es el activo, y los otros necesitan estar sobre diferentes colores para que podamos distinguir entre cuál es el activo. En el que testigo No. Entonces voy a usar este tipo de gris, el mismo para el otro. Entonces otra vez, esta copia, la más fría perfecta. Un poco más para recitar. Y creo que esto es más o menos de la reunión. De acuerdo, lo mismo para el otro. Entonces Kansas, copia en el refrigerador. Perfecto. Un poco más a un lado. Y creo que esto es más o menos de los medios de comunicación. De acuerdo, Lo siguiente hará esto. ¿ Qué? Alguna información de redes sociales sobre la empresa. Por lo que no podemos Google Facebook y Twitter Icahn. Entonces voy a buscar esos en los iconos aquí puedo. Apenas buscando cuerda de dragón en Facebook. Tweeter. voy a reiniciar más tarde. Por lo que no se preocupe por ese ícono de LinkedIn también Necesitamos cuando está habilitado Google. Además, aquí está. Creo que éste es el último local. Sólo puedo dejarlo caer. Entonces los vamos a hacer un poco más pequeños. Lo intentaré. Esto es juicio en árabe. Más o menos hay que jugar con los números. Este no parece tan genial. Al igual que Dragon Dope it cuando estás satisfecho con la forma y luego lo del enlace también . Hagamos el Facebook de su más pequeño. Sí, y vamos a mover esos. Pero 12 más alineados y debilitan nuestros Esos fueron etiqueta encima de ese dicho presencia en redes sociales , redes sociales por presencia social podría hacer esto un poco más grande. Y podemos seleccionar estos iconos haciendo click así. Podemos seleccionar múltiples una vez, y podemos moverlos con control y abajo Arnold. Entonces sólo estoy moviendo esos un poco más de ley. Y también voy a agregar información sobre la ubicación de la oficina. Espero esta ubicación ahora entonces, aquí hay alguna dirección de polvo ahora, dicen Regent Street, Londres. No estoy seguro si este es el oro de los crags, pero está bien. Y entonces idealmente necesitábamos también la sección de contacto para que la gente pueda ponerse en contacto con nosotros. Por lo que entonces de nuevo, voy a copiar estas etiquetas voy a decir aquí, realizar información yendo a la mente mi dirección. Yo soy un teléfono. Esto es sólo el llevar a casa. Esto sería básicamente todo lo que necesitamos. Déjame sólo un polvo, Un poco de espaciado. Creo que eso lo haría. Y eventualmente También podemos agregar alguna información de derechos de autor. No merezco los derechos por esto, ¿de acuerdo? Es justo y educativo. Estar haciendo cualquier caso algo iba a hacer que este copyright involucre un poco más pequeño. Está bien, esto puede ser demasiado pequeño, y voy a drogarla y dejarla aquí. Y creo que mi versión móvil se había ido. Entonces ahora, con el fin de previsualizar podría prototipo, voy a la vista previa, está bien, como un cinco. Y esto abrirá el navegador. Y puedo ver aquí cómo se vería mi versión móvil del sitio web. Entonces si sigo más desplazándome, puedo ver aquí que hay más elementos antes de que empiece con la tableta. Tú sólo voy a hacer esta cotización carcelle significado más así voy a volver a mi prototipo y voy a convertir esto cuando panel dinámico como en todo lo que está incluido ahí voy a decir panel dinámico competitivo. Y voy a nombrar estas citas. Voy dedo del pie nombre este pie de corte porque es el 2do 1 Y voy a duplicar esto dos veces para que pueda conseguir dos estados más y luego nombre oro es cotizar uno y luego cool basicamente no poner. Tres deben ser el 1er 1 Y luego cotizar uno vendrá después. Por lo que para la Corte Tres básicamente, vamos a dar click doble yendo a entrar. Voy a cambiar el nombre. Yo sólo voy a cambiar aquí. Los nombres. Voy a inventar algo Día en. Básicamente, este es el 3er 1 Así que deberían ser el blanco. Entonces, ¿sólo voy a mover este aquí? No, el otro, Buck. Entonces ahora lo tengo ahora para uno frío. Yo voy a hacer lo mismo. No eran 108 así que voy a simplemente escribirlo. Y esto fue un 138 y voy a cambiar de nuevo. El nombre casa. Esta persona va a ser monitor digital. ¿ Cómo se paga? Por lo que estos son los clientes más agradecidos. Estos tres y lo que voy a hacer es que me voy ahora. Vuelve a casa. Yo quiero hacer de este cambio el estado. Por lo que otro panel dinámico está listo. Lo vamos a programar para que juegue cada cinco segundos, Una cotización diferente. Para ello, vamos a ir a las direcciones en el caso y vamos a entrar a las brujas y luego banda lateral de estado. Vamos a seleccionar el panel dinámico de cotizaciones y ellos iban a decir seleccionar estado siguiente . Básicamente, esto simplemente moverá el panel dinámico al siguiente estado y la vamos a ver arriba de último a primero. Eso significaría que repite las siguientes en última instancia. Y entonces diremos: Repetir cada aquí. Vamos a cambiar esto a cinco segundos y esto también activará retardo cinco segundos cuando abrimos por primera vez el sitio web. Entonces si escojo OK aquí y previsé esto, verán que si entro en esa sección, esto va a empezar a cambiar cada cinco segundos. Ya ves que cambió. Por lo que esta es una gran manera de dar algún enfoque a algunos elementos interactivos en nuestra página web. Podríamos perfectamente hacer lo mismo con mucho es con este tipo de imágenes o cualquier cosa como nos guste. Entonces ahora que son móviles. Buis terminado. Pasemos a una versión de tablet del sitio web 5. Diseño de prototipos de tableta: Ahora que terminamos con crear el prototipo móvil, crear la tableta y la versión de escritorio es un pedazo de pastel. Esto se debe a que hemos establecido el uso adoptivo. Entonces básicamente, nuestros tipos de problemas tienen capital de marido ya en las diferentes versiones. Como puedes ver aquí ahora, estoy en la tableta tú y esto ya está sobrellevarlo. Lo mismo vale para el escritorio. Tú, como puedes ver aquí, esto también ha sido corporativo y tenemos la máxima brisa. Está definido. Entonces básicamente lo único que tenemos que hacer es extender estos usos adaptativos para marchar nuestro objetivo Tú. Entonces básicamente, solo voy a dar clic en el encabezado. Voy a decir breakaway, Entonces eso significaría que liberaría el diseño inicial de brezo. Entonces de esta manera puedo mover esto. Yo sólo voy a lugares a la izquierda y básicamente voy a arrastrar y soltar el resto de los elementos también para crear la tableta tú. Entonces lo que voy a hacer es que voy a hacer dentro de la celda del auto y voy a adoptar la ver mucho vienen solo yendo del dedo del pie, arrastrarlo y colocar el texto en el medio y voy a hacer exactamente lo mismo para el segundo. El mucho y tú vas a ver lo mismo exactamente aquí. Entonces si salgo ahora de la vinculación haciendo click hero home, veo ya que esto se ha ampliado. Lo siguiente que queremos hacer es ampliar nuestro texto. Entonces vamos a expandir a este tipo y básicamente otra cosa podría dar. Esto es demasiado. Voy a adoptar Esto no llegó al máximo, sino tener un poco de espacio en blanco. De acuerdo, volver a casa otra vez y luego sólo adoptar que suspira este dedo del pie de bloque, pasar por todo el ingenio y lo que también tendremos que hacer es mover nuestros elementos hacia arriba, va a dejar un poco de espacio en blanco aquí entre. Y solo voy a arrastrar y soltar elementos de lista básicamente, solo seleccionándolos todos juntos y de seleccionar lo peor. No quiero con esto también. Hacia arriba. Haz que este bloque sea un poco más pequeño. Perfecto. Vamos a alinear esto un poco mejor, ¿de acuerdo? Y entonces básicamente el único año solo nos quedan algunas cosas. Necesitamos dedo del pie hacer que esta imagen sea un poco más grande. Entonces solo voy a agarrar el dedo del pie así y esto básicamente ampliará el tamaño. Y yo solo tengo dos opciones. O simplemente puedo hacer el mismo manual para los otros dos donde voy a eliminar estos tres . Y sólo voy a copiar esto 30 veces más. Yo descubro que esto es más fácil. Dijo que recuerdo dimensiones. Entonces solo voy a hacer esto a partir de esta copia pegándolas. Incluso puedo copiar estos dos juntos, volverme perezoso. Por lo que de esta manera no puedo decidir concebir Pastor. Entonces ya tengo 40 Mucho está bien. Veo ahora que mi cuadra por detrás marido no hizo lo que puedo hacer porque recuerdo dónde estaba. Voy a hacer clic aquí y voy a decir seleccionar. Todos pertenecen Y lo que esto hace es seleccionar todos los elementos bajo mi celda. Una excelente ubicación. Voy dedo del pie respuesta como esta imagen, y voy a simplemente mover los con control y apilados Perfecta. Entonces ahora el apareció de nuevo, y sólo voy a arrastrar esta cita. ¿ De acuerdo? Es un equilibrio dinámico, o puedo arrastrarlo. Eso significa que tengo que ir dentro de ella, y tengo que ampliarla de esta manera. También me gustaría tener algo de espacio, pero no recuerdo cómo se ve. Por lo que voy a ir otra vez fuera de la caída del cabello, mi buba, que puede restablecerlo yendo vista del dedo del pie. ¿ Esa es usted? De acuerdo, ahora tengo mi Sí. Está bien. Perfecto. Se ve realmente bien. Entonces sólo voy a volver al panel. Sólo puedo copiar estas dimensiones para las otras imágenes. Bueno, basta con arrastrar y soltar el texto para expandir toda la vista. Mueve el texto entre más amor. Ahí lo tienes. Y entonces solo hagamos un poco más pequeño este rectángulo. No necesitamos tanto espacio. Y hagamos exactamente el mismo. Por lo que sólo voy a hacer frente a estas dimensiones al segundo bloque. El otro era 743 de error. No hay libro hacia nosotros. Tomé de nuevo. Entonces solo puedo ir en cada cuadra y el doctor corrige ingenio y altura porque no lo recuerdo de memoria. Yo sólo voy al primer estado. Creo que están en el rectángulo y luego puedo ver aquí las alturas del ingenio. Perfecto. Por lo que esto también se hace ahora. Y lo último son los datos de contacto los cuales solo puedo arrastrar y soltar impacto aquí. No hay tanta información. Segundo, sólo manténgalo fuera de estos. Pero lo que también puedo hacer es dedo del pie tener este bloques para dos significando que puedo mover esto, contactar la comisión a la derecha y crear de esta manera Dos columnas alrededor en medio del cebo. Algo así. Y puedo mover la presencia social aquí y los todos los derechos reservados firmados al lado derecho , o eventualmente robar bajo las imágenes. Pero puedo hacerlo así. De esta manera, también puedo ahorrar espacio y tener un tú más adaptativo. Entonces vamos a previsualizar esto y básicamente, seguimos viendo que la visión móvil está aquí. Para la vista de tabla, tenemos que dar clic aquí y luego seleccionar adoptivo usted y seleccionar el correcto significado tablet retrato. Esto básicamente nos mostrará la tableta diseñada para que podamos ver aquí que son diseño se ha adoptado. De hecho se parece más a una vista de tableta. Entonces fue niña. Vamos a ver los cambios que hicimos y se ve bastante bien y puedo vender con las cotizaciones también se está moviendo. En el siguiente video, vamos a seguir con el mismo enfoque y construir el escritorio de ustedes. 6. Diseño de prototipos de escritorio: para el diseño de escritorio. Vamos a trabajar exactamente de la misma manera que trabajamos para la tableta. Te vamos a ir en el adoptivo tú por las dimensiones desesperadas gran pantalla. Y básicamente verá que son elementos están robando en la página. Pero las dimensiones máximas se han incrementado a 1200 píxeles. Vamos a trabajar de la misma manera y ampliar estos elementos para tomar la mayor parte de la página en un teléfono móvil y tablet te Utilizamos esta hamburguesa, Manu para la navegación en el escritorio. Podemos reemplazar esta hamburguesa Manu por una navegación completa por lo que realmente no podemos etiquetar ningún enlace para nuestros usuarios en la navegación por la web. Por lo tanto, vamos a eliminar esta navegación. Manu, vamos a añadir etiquetas reales. Voy a usar los trabajos a casa para que el usuario pueda fumar. Volvemos a las trenzas caseras nuestros servicios. Básicamente, estoy haciendo coincidir el contenido fuera de la página con un Manu de navegación. Esto es lo más lógico para que el usuario navegue dentro del continente. El siguiente sería nuestro portafolio. Si ves que esto entra en línea, significa que la bruja malvada no es lo suficientemente grande. Entonces solo camión y espero que lo haga. Entonces tenemos nuestros testimonios. Por lo que las cotizaciones de los clientes mejor rodando por debajo de la página. Vamos a mover estas cosas un poco más al sitio y hacerlas un poco más pequeñas. Algo así. Y ahora voy dedo del pie alinear mejor el espaciado. También voy a tener el enlace para los contactos. Básicamente, quiero que esto seamos nosotros cerca del final de la página como sea posible. A alguien se le ha demostrado el espaciamiento más allá, algo así. Y ahora lo siguiente es dedo del pie, haz que esto parezca mucho máximo con Ok, hagámoslo. Tenemos que ir dentro de la familia dinámica y básicamente utilizar nuestras guías aquí para utilizar todo el espacio en la línea. Esto en medio de la misma manera para el otro. Qué luce. Entonces si volvemos al hogar Bates, podemos ver que esto ahora se hace. De acuerdo, La imagen es un poco pequeña, así que lo que podemos, de hecho, también hacer es hacerla más grande. Bueno, el espacio práctico ya que tenemos el espacio en el disco arriba, lugares han sido más abajo el alto Tous Digamos que lo hagamos tres cojeos Por razones prácticas haremos lo mismo por el otro. Entonces si volvemos a casa Pero deberíamos ver que éste es efectivamente más grande ahora. Sí, Vale, nuevo, tenemos el mismo problema que hay elementos de atrás han surgido en nuestra página debilitarse justo al mismo truco nosotros antes tan seleccionables a continuación. Y luego con control y flecha abajo, podemos mover estas cosas hacia abajo. De acuerdo, así que ahora puedo volver a ver de nuevo mi mucho. Ahora tienes que actualizar este texto para tomar también el máximo de espacio. Por lo que vamos a arrastrar y soltar este bloque al lado máximo y el texto también se puede ampliar más. De hecho, lo que podemos hacer es que podemos mantener esto así y podemos poner los servicios que ofrecemos exactamente al lado. Lo que también podemos hacer es ingresar para mejorar los teléfonos. Por lo que deberíamos hacer los teléfonos un poco más grandes porque el espacio de la pantalla es más grande. De acuerdo, Este texto también puede ser Ingres en tamaño. Entonces ahora tenemos que mejorar el espaciado entre esos elementos Vamos a moverlos un poco más hacia abajo, tener un poco de espacio entre ellos. Hagamos lo mismo para nuestra segunda columna. Alguien para aumentar de nuevo. Deformado. Este otros artículos está bien, eso es invisible. Desplazamiento entre ellos. No, eso debería estar bien. El bajo también puede ser bits más pequeños. Está bien, Perfecto. Y ahora ya tenemos mucho es lo que no vamos a hacer es remolcar aumentar las simetrías y poner en realidad a su línea. Entonces vamos a hacer esos fuera de igual tamaño, y yo sólo voy a eliminar esos y básicamente sólo copiar pegar, como lo hice en la vista de tablet y móvil. Muchas Ya están hechos. Volvería a copiar. Entonces no tenemos seis emerges y luego lo siguiente que hay que hacer es remolcar aumentar el tamaño de las cotizaciones tener el ingenio máximo. Entonces voy de nuevo a entrar al panel dinámico, y voy a hacer este ingenio tirador usado. Yo solo quiero vivir 10 pixeles, Así que esto sería sobre el tamaño correcto. Voy a colocar esto un poco más en el medio y hacer que la línea de una tome todo el espacio. Algo así. Voy a deslumbrar en el Magoo. Voy a mover estas cosas. Y éste, el nombre de la persona estaba justo en medio. Haré exactamente lo mismo para el segundo estado y volveré con ustedes. De acuerdo, estoy de vuelta. Ya se hacen las cotizaciones. También no contesto algunos otros elementos del sitio web para un espacio óptimo. Voy a salir a mover más estos abrigos de la misma y lo último que voy a hacer es actualizar la información de contacto para que todos entren en una sola línea. Entonces voy a mover estos elementos. Ah, aquí para estar del mismo lado. Básicamente mi sitio web está hecho, así que si ves esto, se ve muy bien. Entonces vamos a revisarlo. Sí, así que tenemos nuestra navegación completa. Manu, ya tenemos nueces. Contamos con nuestra descripción de los servicios. Tenemos los ejemplos de portafolio. Tenemos el curso de que se muevan y tenemos nuestra comida. Por lo que básicamente, nuestro sitio web está completo como un paso opcional. Podrás poblar este sitio web con imágenes o colores personalizados o teléfonos y el sitio web se verá mucho más realista. Y como real y resultado, voy a poblar este sitio web en los tres diferentes usos adaptativos con algunas fotos y teléfonos, y voy a volver a ustedes para mostrarles el resultado. 7. Publicar y compartir tu prototipo: tener ahora en las coloridas imágenes a mi prototipo, y estoy listo para previsualizar esto. Como puedes ver aquí, parece un sitio web real. He molestado las imágenes, así que definitivamente podrías mostrarle esto a un cliente antes de invertir aquí para ellos construyendo un sitio web real. También podemos lucir una vista en topless para que puedas ver estos looks exactamente iguales. Pero tiene el adoptivo tú tablet y lo mismo va para el teléfono móvil. Para que veas qué gran diferencia lo colorido que mucho es hacer. Entonces básicamente, tu sitio web está listo. Puedes previsualizar esto a un cliente y puedes al cliente y darte las adaptaciones que él quiera. Pero el esfuerzo que tienes que gastar en cambiar esto es mínimo. Y esta es una gran manera de realmente desarrollar productos desde cero en una última vez sin tener que gastar dinero adicional. Y el recurso está en el retrabajo. Otra gran cosa de las acciones que las revisiones es que si dijiste este Toto, esto va a cambiar de tamaño en función del tamaño del navegador. Entonces, básicamente, como ven aquí, esto se convirtió ahora en la tableta pocas Y luego si la hago más pequeña, se va del dedo del pie encogimiento Botham por encima de ti. Aquí está. Aquí puedes ver el móvil de ti. Una de las características más útiles que en realidad r p proporciona es las capacidades editoriales y sirias . Básicamente, si terminas con este problema sucedió, quieres compartirlo con múltiples personas. Hay múltiples maneras en que puedes hacerlo Si la otra persona también está usando realmente ser. Se podría exportar el fuego de RPI ahorrando. Entonces, básicamente, cuando guardes esto, vas a conseguir el archivo real y va a ser un archivo RB. Esta es una manera las otras formas de publicarlo efectivamente en línea. Por lo que ves aquí si vas a Publix, tienes la opción publicada compartir corrupción. Entonces lo que esto básicamente hace es que si te derriban la parte noxiosa, te mostraré cómo hacer eso. Vas a realmente compartir dot com. Entonces, básicamente, este es el entorno de línea fuera real que te da de forma gratuita para que un usuario hospede tus sitios web. Ya tengo una cuenta, pero siéntete libre de ir y registrarte si no lo haces Es muy fácil. Entonces voy a mirar adentro y puedes ver aquí tengo mi espacio de trabajo y mis proyectos. Entonces básicamente, en estos archivos, puedo subir mis prototipos y puedo compartirlos con su palabra con otras personas. Entonces si hago la opción de publicación aquí después de un verde largo Así que necesito buscar aquí de nuevo. Ya lo tienes. Acabo de abrirlo en el navegador, así que eso es normal. Entonces tú solo que usas la misma cuenta que tienes, y luego va a buscar básicamente todas las carpetas que tienes en tu parte para que puedas dar nombre. Se puede establecer la actividad de configuración. ¿ Quién visita la modificación? Se puede establecer una contraseña. Esto también es muy útil en caso de que no quieras que nadie pueda acceder a él. Y puedes seleccionar uno de los titulares existentes que tengas. Por ejemplo, yo. Solo tengo mi titular de proyectos, pero perfectamente podría hacer una carpeta para diferentes proyectos que trabajo. Entonces sólo voy a usar este. De acuerdo, lo seleccionó. Por lo que ahora solo hago clic en publicar y esto se va dedo subiendo al señor Dive en me va a dar este enlace, por lo que este va a ser el enlace que pueda compartir. Y si no quieres tener esta barra lateral a la izquierda que tienes, se genera una. Puede seleccionar esta opción sin barra lateral. OK, ya está hecho. Yo lo voy a hacer frente. Por lo que solo me voy a basar el dedo aquí en el navegador. Y se puede ver aquí que esto es accesible para todos Así puedo decir esto con clientes o con colegas. Puedo marcarlo como marcador. Es realmente fácil si ya has publicado el archivo y solo quieres hacer adaptaciones o Newton republicado de nuevo, solo tienes que ir a publicar Doctor señor y luego actualizar proyecto existente. Y luego de esta lista, puedes seleccionar el proyecto en el que estás trabajando. El último modo de publicar es generar archivos HTML, por lo que esto básicamente generaría el frío HTML. Hagámoslo. Tienes que seleccionar la carpeta que quieres usar, y hay algunas opciones adicionales, por ejemplo, para las que los navegadores que deberían funcionar. Entonces, si quieres tener la barra lateral y luego opciones extra como el uso adoptivo y luego podrías incluso seleccionar las páginas que deseas y algunas cosas adicionales por defecto, todo seleccionado. Pero adelante y personalizar es la forma que quieras. Entonces si genero esto, te sientas aquí que la ruta es archivo Sophia documentos. O básicamente es publicar esto en mi computadora. Entonces, básicamente, solo navego por este camino. Consideras que la carpeta fue creada para HTML. Pero aquí tienes 15 y aquí puedes ver que puedo abrir esto. Está bien, Perfecto. Por lo que para mi computadora puede abrir esto. Entonces, básicamente, solo puedo darle esto a un desarrollador. Si estoy satisfecho con su diseño. El concurso de desarrolladores. Integrar este subidas en un servidor en el sitio Web está realmente listo, por lo que se puede ver que es simple código se hace. Si abres esto con una nota, pero o con otra herramienta de desarrollo, ves aquí que se genera todo el código HTML. Esto es realmente, realmente, muy útil porque si solo quieres un sitio web sencillo como este, no hay razón. Básicamente, toe bear developer toe make the works up from Scotch for you si estás satisfecho con su diseñado tú mismo. Entonces ahora que sabemos hacer un marco de alambre y lo publica en línea, pasemos al proyecto de clase 8. Proyecto de clase: para el proyecto de clase. El reto es crear tu propio uso de sitio web, siendo en realidad las técnicas que aprendimos en esta clase para crear un sitio web de tu elección, ya sea para bloquear un sitio web profesional, una tienda Web o cualquier otra cosa que puedas venir con. Puedes hacerlo sensible si quieres, pero no es necesario. Tan solo asegúrate de publicarlo y de compartir el enlace con nosotros. En la sección de proyecto de clase, puedes encontrar la sección de proyecto de clase debajo de la clase en la sección de tu proyecto. Aquí, puedes encontrar más descripciones, y puedes ver algunos sitios web donde puedes inspirarte para crear las tuyas propias. Por lo que solo publicas tu proyecto también aquí con nosotros. Y también voy a subir el real despedido del sitio web que creé para ayudarte a empezar. Buena suerte. 9. Próximos pasos: gracias por invertir tiempo en esta clase. Ahora puedes empezar a crear tus propios tipos de hermanos e impresionar a tus clientes y compañeros . Si te gusta esta clase, por favor me gusta y comparte y sígueme para que me notifiquen por nuevas clases. Hermano feliz escribiendo.