Cómo diseñar un sitio web - Parte 1

1. Hola: Entonces necesitamos a Christine. No tengo que seguir diseñando mi egresado escolar de Flatiron y tengo antecedentes en diseño visual, capacitación, estrategia, marketing y publicidad. Y me fui del Parlamento me enseñé a codificar. Todo lo que veo fuentes, por supuesto, es un todavía aplastamiento Todavía compartido código academia Connick cabeza abajo yo y muchos otros. Si quieres conocer más sobre mis pensamientos sobre el diseño tecnológico, puedes ver el enlace abajo del cual de mi blog. Y si quieres saber más sobre mí y mis proyectos en el trabajo que hago, puedes visitar mi página web. No te pongas abajo junto con Jacob para que puedas ver un viernes de mi gente. Gracias por tomar este curso. Espero que aprendas más. Acerca de qué diseño de desarrollo. Vamos a conseguir 2. Introducción: hola y bienvenidos a cómo diseñar un sitio web. Este es mi primer costo de enseñanza en cuota segura, Así que espero te comprendí los mejores conocimientos y habilidades sobre lo que diseña con el diseño a partir de dos mentoles. Como parte de esta clase, aprenderás sobre el proceso de diseño. Ayudó a crear un perfil de marca. ¿ Por qué están las técnicas de prototipado Freeman y qué diseños de página a través de un diseño responsive, el total usando nuestro B X D contemplado y el dibujo de Google? Todos son equipos libres. Por favor, fírmelo con el acceso a Adobe Creative Cloud Toe. Será X'd. Estaremos utilizando esta herramienta para diseñar nuestros marcos de alambre y prototipos. Si estás interesado en aprender a hacerlo y entonces será software funciona. X'd sería una gran introducción. Adobe es el fabricante, tienda de flotadores y otros problemas impresionantes. Ya que Photoshopped y otros APS vienen con el precio, X'd es completamente gratis. Todo lo que tienes que hacer es hacer clic en este botón aquí en este sitio web. Te llevaré al Adobe Creative llamado Signo of Age. Por favor, inscríbete para visionar en Los Well, estaremos usando esta herramienta. Lejos canchas de comida. Es completamente gratuito y la vision tiene una herramienta para la creación de prototipos, pero para este curso se atendrá al acuerdo. BXC, para la creación de prototipos y la visualización se utilizaría para nuestros tableros de humor. Es realmente sencillo, aunque ya tengo una cuenta una vez que haga clic en este botón y me llevará a mi página principal. lo que mientras tanto, por favor regístrese en Adobe Creative llamado y imagínese eso último pero no menos importante, sorteo de Scougall. Si aún no tienes una cuenta de Google, por favor limpia. Estaremos usando Google. Sorteo rápido. Disculpe, dibujo de Google. Se parece más y a partir de aquí estará jugando con nuestras herramientas de mapa del sitio a partir de materiales. Vamos a empezar a usar formularios que yo mismo creé. Entonces si puedes por favor descargar los formularios de proceso de diseño Web y creé estos formularios para ayudarte junto con este curso, por favor siéntete en absoluto mientras nos movemos por cada lección para ayudarte a diseñar tu sitio web y diseñar Recurso es yo creé un lista de investigaciones de sitios web útiles para ayudarte a elegir fondos, imágenes, imágenes, colores y otras herramientas de diseño. Si lo prefieres, es como Matt, tu sitio web a mano. Se puede imprimir ese diseño sitios web mapeo inicio archivado que tengo aquí. Es un archivo de parpadeo y puedes iniciar tu set. Lo mío. Mi mano. Se trata de los sitios web de diseño como nada terminado archivo Aquí está la herramienta finalizada no miking de nuestro proyecto. Esto si Condell arriba esto será una manera para que entiendas lo tristes que mis obras estarán discutiendo más adelante. último pero no menos importante, le pediría que descargue el dopey X T presentado aquí. Tenemos que iniciar archivo el cual empezará a trabajar juntos en nuestros proyectos de clase. Y entonces este es el trabajo de ojos finales que se nos verá lo que terminamos nuestro proyecto. Por lo que una vez que tengas configuradas tus herramientas y materiales, comenzaremos con el proceso de diseño. Nos vemos en el siguiente video. 3. Proceso de diseño: el proceso de diseño. El proceso de diseño nos ayudó a salir Un problema a través de diversas etapas desde la superficie del proceso de diseño puede verse así. Empezamos por encontrar un problema. Para resolver el problema. Creamos muchas ideas ha sido el intercambio de planes. Condamos forma a estas ideas que las estructuran a través de marcos de alambre de prototipos. Entonces traemos esas ideas. Aún así, la vida hace coca. Y como siempre, probamos esas ideas o soluciones al problema para obtener retroalimentación. ¿ Cuáles son los procesos diseñados? Más complejo? En realidad puede verse así. Hay un montón de colaboraciones entre diseñadores, desarrolladores e investigadores. Juntos, dan vida a ideas basadas en cómo se comportan, sienten y piensan los usuarios . Áreas clave involucraron la investigación del usuario, la experiencia del usuario y la estrategia y pruebas del usuario. Y un montón de pensamiento de diseño sí. Creo que tiene un proceso para resolver problemas creativos pensamiento de diseño de lobo y que el proceso de diseño cambie constantemente. En respuesta a los comentarios, Aprendemos de los usuarios y prototipos dedo del pie ayudan, redefinir el problema inicial, crear nuevas ideas o modificar las existentes. Entonces ahora que tienes una mejor idea de cuál es el proceso de diseño, empecemos a planear nuestro proyecto. Nos vemos en el siguiente video 4. Usuarios: durante la etapa de planificación, hablaremos de contornos de proyectos, perfiles de marca, recorrido de usuarios, mapeo de sitios y diseño visual. Cuanto más sea plan investigado, más supongo que podemos ganar lo que debemos tener en cuenta. Es el Quién y por qué, qué y cómo de las interacciones de los usuarios con nuestro sitio durante el Who y por qué las etapas estaban pensando en nuestros usuarios. Estamos preguntando quién podría estar de visita. ¿ Serán fans, potenciales empleados? ¿ Clientes potenciales? Números o curiosos? La gente también se preguntaba, ¿Por qué faltaban? ¿ Podría ser orientado a objetivos o exploratorio? ¿ Significado? ¿ Están buscando información, necesitando servicios específicos, queriendo ser un potencial empleado o empleador? ¿ O simplemente se preocupa por la persona, producto, empresa o marca? Y quieren aprender más sobre algo o alguien. Bueno, para tu 1er 2 dio, piensa en tus usuarios y por qué están visitando tu página web. Una vez que determine que sus usuarios comenzarán a delinear nuestra página web, vemos en la ciudad de 5. Esquemas del proyecto: en la cara Oeste. ¿ Alguna vez usaste tus interacciones? Nosotros configuramos nuestros esquemas de proyecto aquí respondemos las preguntas de ¿cuáles son los socios de los sitios web que existen? ¿ Cuáles son las metas de acción para nuestros usuarios y cuáles son las prioridades u objetivos que tenemos? Donde sitios web tipo de objetivos de acción incluyen contacto registrarse de nuevo, comprar algo , obtener información, escuchar música, ver videos y más acción va a encontrar el propósito de que tus usuarios quieran interactuar para su sitio web. Por ejemplo, este es un artista que me gusta. Se llama Selena Child. Me encantan sus obras de arte y golpiza meta para mí, cuando miro su situación Web es saber más para las obras de arte yendo a su galería aprendiendo más sobre ella como persona y artistas. Si sí quiero ponerme en contacto con ella, ese es mi objetivo de acción. Al ir a su página de contacto, te concebimos una linda imagen, un poco de lista de correo de suscripción que puedo inscribirme a un contacto personal, ya sabes más a representación, junto con una lista de redes sociales cuentas de las que forma parte. Por lo que para contactar a Alina niña, puedo ponerme en contacto con ella directamente inscribirme en su lista de correo de suscripción o seguirla en cualquiera de estas plataformas de redes sociales. Por lo que el objetivo para mí como objetivo de facción usuario sería contactar buscando un niño y de cualquier manera o para mi campamento. Otro ejemplo sería Spotify. Entonces digamos, como usuario, queremos inscribirnos en Spotify. Por lo que vamos a dar clic en este botón una vez que visitemos la página web y nos consignemos con Facebook o nos registramos con un correo electrónico pero actriz de nuestra elección. Una vez que te sientas en esa información, rápido, el cuadro de capítulos podemos dar clic en inscribirte. Entonces esa es una acción go. Otro objetivo de acción para el sitio web de Spotify entre usuarios sería, si el usuario ya ha sido cuenta, simplemente pueden iniciar sesión. Por lo que una vez que estés en la página de inicio de sesión, puedes iniciar sesión con Facebook o con la dirección de correo electrónico y contraseña. Has creado otro objetivo de acción que es muy común esto para poder chocar. Entonces, ¿de qué estoy? Digamos que estoy buscando un elemento en particular desplazándose hacia abajo. Veo el ítem de elección Quiero hacer tu reseña. Es como la cantidad que quiero primero a cartular. Tengo el artículo al carrito, así que vamos a proceder a la salida ya. Una vez que proceda a la salida, voy a ser pronta. Esta es la perfección de citar en cuenta. Esto sucede porque actualmente no tengo cuenta o no estoy iniciando sesión con el fin de realizar el objetivo de acción de hacer una compra. Ese ha sido al menos otro comentario. En realidad, ir sería buscar algo. Entonces volviendo a nuestros, um, objetivos de acción aquí, podemos ver que todo lo que nos encontramos en línea tiene un propósito. Aquí te dejamos un ejemplo de nuestro proyecto de clase. Cuando recortamos una diapositiva de sitio como esta, significa que te estaré guiando a través de lo que acabamos de aprender y aplicándolo a nuestro proyecto de clase . Entonces empecemos para nuestra clase. Proyecto estará construyendo un libro apagado. Ahí hay sitio web, así que estas son sus informaciones para el esbozo de su proyecto. Su propósito es vender algunos libros. Pueden las oportunidades exhibir su trabajo y compartir su pericia en la escritura. Sus objetivos de acción son vender libros, ponerse en contacto por oportunidades, dirigir comunicaciones y conectarse vía redes sociales, o haber sido una prioridad u objetivos seguidos incluyen mostrar libros para vender, llamar y enviando un correo electrónico a la madre para conectar o seguir al padre. Entonces para que lo haga use su qué proceso de diseño Para eso, proporcioné una respuesta preguntas a su proyecto. Esbozos y metas. Escribe lo que conozcas, ¿crees que será beneficioso para ti. Entonces cuando delinee su carrera, hablaremos de contenido. Siyuan siguiente video. 6. Contenido: contenido. Otra parte de la etapa qué de las interacciones de los usuarios es el contenido. Hacer las preguntas. ¿ Qué necesita incluir el sitio web? ¿ Cómo serán los contenidos categorías y cuáles serán los principales contenidos categorías? Podría ser cualquier cosa. Podrían ser imágenes de texto, iconos, videos y más. El contenido varía de un sitio web a otro, pero siempre deben ser relevantes para tus objetivos de acción. Basta con echar un vistazo a algunos ejemplos. El contenido del texto debe incluirse en un documento de palabras. Muelles simpáticos. Cuanto más contenido de contexto incluya, mejor. Podemos averiguar qué debe o no incluirse en nuestra página web. También te ayuda a organizar tu contenido de texto a tus categorías principales. Entonces aquí están mis contenidos de texto para mi sitio web personal. Como puedes ver, lo bosqué las principales categorías home page in about, y también lo tengo para el trabajo. Tengo mucho otro contenido de texto que categorizé en mis categorías principales. Entonces como pueden ver, más concluyo, más puede entender de mi sitio web y lo que quiero comunicar. Por lo que la otra parte del contenido, incluyendo las imágenes tenemos que tener en cuenta que muchas imágenes fuera en el mundo tienen derechos de autor . Eso significa que necesitas obtener permiso. Por suerte, sitios web como ceniza virgen nos permiten utilizar imágenes de alta calidad para política gratuita. Mira un ejemplo. Digamos que queremos mirar una imagen para perro una vez que ingresemos a nuestra búsqueda. Como puedes ver, tenemos algunas altísimas calidades impresionantes de los perros. Digamos que queríamos descargarlos mientras tenemos dos DUIs Hubbard. Da click en esta flecha y la tendremos. Descárgalo. Asegúrate de acreditar también al artista. Otra información de contenido. Podemos incluir serían iconos y elementos gráficos. Muchos sitios web hacen uso de pequeños objetos visuales como iconos y símbolos. Arresto enlaces con piso I icono algunos elementos y concierto gratis hizo para descargar y usar. Entonces digamos que queremos buscar el cohete consiguió algunas imágenes de cohetes impresionantes porque puedes ver que algunas de estas son gratuitas. Si nos encontramos con una multitud, eso significa que es parte de una cuenta de suscripción, por lo que esos iconos no tendrán que comprarse. Pero digamos sólo vocal con este en particular para que podamos hacer clic en este botón. Una vez queríamos descargar. Veremos algo de PNG y haremos click en el tamaño de píxel más grande de 120. Vamos a repasar esto más a medida que trabajamos en nuestra página web en el proyecto de clase. Como puede ver, contenido de nuestro proyecto de clase incluirá a través de nombre de texto artículos sobre contacto y libros. Las imágenes serían imágenes actuales del libro. Aspectos de autorretrato, imágenes en imágenes de artículo. Alas serían redes sociales, alas, sectores, Twitter, instagram y Facebook. Los elementos gráficos incluyen logo, redes sociales, iPhones y un toque en texto. Vamos a usar algo llamado Lauren Gibson y estos texto de relleno de aire. Entonces Lauren, es, um es en realidad, um, um, texto de marcador de posición. Y lo que pasó es que para nuestra página web, ya que no tenemos texto relevante en nuestra información, entonces vamos a usar algún texto de relleno. Y como pueden ver, puedo generar la Laura Epsom. Entonces si digo que quiero párrafos una suma mayor, obviamente generar porque me desplaza hacia abajo, podré tomar café todo este texto y copiar pegado en mi página web así que hablaremos más de esto a medida que empecemos a construir el sitio web, nuestro primero en hacer sobre el contenido. Recogamos y organizemos tu contenido usando el formulario pdf que creé para ti. Por favor, rellena el formulario y rellena tus principales categorías. Cuanto más puedas incluir información de texto, mejor. Por lo que después de recolectar tu contenido, podemos construir nuestro perfil de marca. Nos vemos en el siguiente video. 7. Perfil de la marca: perfil de marca. Un perfil de marca define cómo debe verse y sentirse tu marca y define. ¿ Qué mensaje quieres decir? Branding describió quiénes somos, qué nos gusta y qué representamos. Cómo expresan esas características es quemar pautas. Correr construye la identidad visual de una persona o empresa a través del lenguaje, estilo, personalidad, imágenes, las interacciones y el lenguaje visual. Cuando diseñas un sitio web para ti, usas tu propia voz mientras diseñas para un cliente significa diseñar ahí dentro. Chicos, el encontrar un estilo de personalidad significa eran dar forma a rasgos de carácter o algo que los usuarios quieran poseer, imitar, abrazar o identificarse a sí mismos a través de fotos, dibujos y símbolos y otros , podemos reflejar esos rasgos de la forma en que interactúas con el usuario. Expresa demasiado bien tus rasgos de carácter. Tu interacción sea Hume orejas animadas. ¿ Plantearás preguntas, o serás estricto? lenguaje visual es la parte divertida de la impresión. Llegamos a crear paletas de colores, elegir teléfonos y encontrar elementos gráficos e iconos. Echemos un vistazo a nuestro proyecto de clase con su perfil de marca. Al trabajar en tu perfil de marca, asegúrate de hacer un resumen de toda tu marca. Por ejemplo, en nuestro proyecto. Nuestros autores dijeron que le gusta, correcto, así que este es su resumen. Dijo que le gusta escribir sus estilos de escritura ingeniosa, y también lo fue su personalidad. Es creativa, pero le gusta mostrar un lado fresco y minimalista de sí misma para ser menos sobre los detalles de fantasía, y ser más sobre el contenido es lo que le importa. Entonces este es un ejemplo artificioso realmente corto, pero espero que esto traiga el punto a casa. Cuando estés construyendo tu perfil de marca, asegúrate de consumir, surge quién eres y qué te gustaría llevar a la mesa. El Miller parte del perfil de marca donde hablamos de nuestro regalo de personaje así que para reflejar tus golosinas de personaje, tenemos que llegar a una frase o una sola palabra que realmente resume toda la marca para este ejemplo son autores y ella es ingeniosa, por lo que su personaje es ingenioso, y estamos tratando de averiguar qué significaría esto para ella. Por ahora, dice que es fresca en color pero no ojos frescos en la cultura pop. Enfriar. Es una minimalista, es suave, pero no está tranquila, y es simple, y es simple pero no llana, así que para reflejar nuestros rasgos de carácter. En realidad podemos encontrar imágenes, colores y artículos que nos inspiren para que podamos usar vírgenes, cenizas o cualquier otro servicio de imágenes visuales para que podamos encontrar artículos que nos ayuden a encontrar nuestro carácter o rasgos enfermos. Entonces digamos, por ejemplo, que buscamos ingenioso, nuestro autor regañando. Se puede encontrar con esta imagen, y esto es algo que ella podría hacer bien la dieta. ¿ Me comí eso? Por lo que esta sería una imagen divertida que podemos recolectar para un tablero de humor. Por lo que una vez que haga clic en este botón de descarga, podemos guardar las imágenes en una carpeta que le ayudará fue construir nuestro tablero de humor. Por lo que para nuestro proyecto de clase, ya he proporcionado las imágenes estarán usando y debajo de la parte superior de recursos. Nos aseguraremos de descargar eso y ponerlo en una carpeta en tu proyecto de clase. Entonces, para hacer, vamos a genial un resumen de marca. Piensa en tus rasgos de carácter y encuentra algunas imágenes que te pueden ayudar a inspirarte. Una vez que definas el resumen de tu marca y los rasgos de carácter, podemos comenzar en nuestro diseño visual, ver cuándo se realizará el siguiente video 8. paneles de inspiración: Por lo que una vez que tengas tu marca en algún lugar de rasgos de carácter definidos, podemos empezar a juntar nuestro perfil Bram en un tablero de humor. El objetivo es encontrar patrones, colores e ideas. Podemos usar un movimiento para a través de Pinterest o la visión. Pero para este proyecto de clase, vamos a empezar a trabajar en la visión, y te voy a mostrar cómo crear tu tablero de humor. Empecemos. Una vez que inicies sesión en tu visión hacia arriba, vamos a dar click en este botón aquí y empezaremos a crear a bordo de nombre entero. Es proyecto de matar compartir. Sigamos con el estilo de albañilería. Empecemos. Entonces aquí tenemos nuestro reporte y esta es nuestra sección aquí, así que empecemos a añadir algunas imágenes que fueron inspiradas. ¿ Recuerdas esta foto de aquí? Hemos decidido incluir volvamos a quitar tablero y ya lo he descargado en nuestras carpetas. Entonces lo que voy a hacer es agarrar todas las fotos que me inspiraron. A y voy a dar clic secándolo en el tablero aquí. Se va a llevar algún tiempo, pero estas son todas las imágenes que se incluirán con nuestras imágenes subidas. Vamos a crear un título aquí, imágenes cada pergamino, estoy abajo. Se pueden ver todas las imágenes que hemos subido con unos pocos que todavía se toman su tiempo. Entonces volvamos aquí arriba y luego llegamos a lo que nos inspiramos más. Puedes usar eso para ayudarnos a encontrar nuestra paleta de colores, y me gusta esta foto en particular. Entonces volvamos a nuestra carpeta y encontraremos esa foto. Aquí vamos. Entonces vamos a empezar a usar esa foto para nuestro próximo paso de colores. Entonces para que tú sí tengas configurando tu propio tablero, puedes usar Pinterest o imaginacion, pero el objetivo era encontrar imágenes y ver si puedes encontrar algún patrón y colores e ideas que te gusten con tu puesta a bordo, podremos entonces empezar a crear nuestras paletas de colores. Nos vemos en el próximo video 9. Color: elegir colores puede ser divertido. Los colores son más de lo que parecen, y te hace sentir y pensar. Los colores pueden venir con muchos símbolos, y al recolectar varios colores , crea una paleta. Estas paletas son como palabras para encontrar un estado de ánimo o sentimiento, así que echemos un vistazo a algunos ejemplos fuera de los generadores de color. Un generador de paleta de colores que me gusta mucho es para Canda. Es uno de mis favoritos porque puedo sostener una foto que me guste. Y todo viene cinco millones de colores que fueron poblados a partir de la imagen. Ahí, podemos obtener un número frío de texto y un nombre, Así que esta es una forma de generar una paleta de colores haciendo imagen que te inspira. Otra herramienta de color se llama enfriadores. Aquí en el generador de color, se comprimen la barra base y los resultados. Un montón de otros colores que vienen usando colores es bastante simple. Puedes arrastrar una barra de color de tu elección. Puedes ajustarlo según sea necesario. Gracias saturación y brillo. Si te gusta un color en particular, también puedes mantenerlo bloqueado en su lugar a medida que generas nuevos otros colores. Como usted nota. También tenemos el número de código hexadecimal para el color así como un nombre que te será útil en un poco. Sigamos adelante con nuestro proyecto. Voy a Silicon Image que me inspiró de nuestro tablero de invasión. Entonces empecemos con eso. He guardado la imagen en mi computadora. Voy a tomar esa imagen. Voy a arrastrarlo. De lo que vienen los cinco colores principales. Entonces vamos a poblar esto en nuestra visión A así como nuestro aburrido archivo B X D. Entonces empecemos con Envision en Honor Report creará una nueva sección, y aquí podemos añadir una muestra de color. Voy a dejar esto a un lado. Doy clic en este botón para copiar Pegar. Haremos la misma cura. Y aquí tenemos nuestro color. Es percenter. Tiene de vuelta a nuestro fuerte. Eso es lo mismo para todos los demás colores. Ahora que tenemos nuestra pizarra de color configurada en nuestra pizarra de humor, actualicemos nuestro archivo dopey X'd estos open skill share realizan. Empezarás. Como puedes ver, tendrás un parpadeo vacío. Una página de colores del sistema donde todos los bloques de carne geniales. Entonces actualicemos nuestra paleta de colores. Una copia. Aquí, estira esto de nuevo adentro. Vamos a dar click en este recuadro. Una vez que haga clic en esa casilla, vamos a dar click en este botón un poco pega nuestro código. Ahora que el cambio de color que guarda un recorrido muestra, asegúrate de actualizar tu nombre en código hexadecimal aquí en él. Nombra aquí nuestro color. Ahora RGB, como mencionamos, significa rojo, verde y azul. Entonces encontremos nuestro código de color RGB de color azul medianoche que permite a Internet hacer eso. Iremos a los códigos hexagonales de color. Entonces vamos a estirar esto de nuevo y te puedo mostrar cómo nos confinamos para que podamos café pegar el código. Aquí se meten en remolque. Aquí tenemos nuestra lista de otros códigos de color. Paso RGB para nuestro color cocinero es 9 59 y 74. Selecciona y pon eso ahora que el archivo guardar Vamos a través del resto para todos los demás colores . Por lo que aquí tenemos nuestro sistema de colores todos configurados. Se ha guardado en nuestro expediente, y se ha guardado en nuestra nueva cancha. Para que tu lo hagas en tu propio proyecto personal, encuentra tu paleta de colores que puedes usar en vision o Pinterest o cualquier otra herramienta que encuentres muy útil a tus propias necesidades. Entonces vamos a avanzar a aprender sobre la elección de nuestros fondos. Nos vemos en el próximo video 10. Tipografía: Por lo que una vez que tengas tus colores elegidos, podemos empezar a elegir fuentes. Ahora. tipografía es un estudio de las tipografías, y hay toda una ciencia detrás de ella. Ahora. Una tipografía es cómo se ve, se siente y se lee un texto. Es el arte del texto creado por un artista o artistas, y es básicamente lo que vemos cuando leemos textos. Ahora. Ah, diversión es un archivo que contiene una tipografía, y usamos fuentes en una computadora grava el tipo SIDA. Veamos un ejemplo. El monstruo de la roca frontal se instalaría en su computadora, y cuando decidamos usar, esta fuente tendrá acceso a sus tipos de letra. Y esas tipografías son ligeras, normales, medianas, semi viejas, viejas, negras y algunas otras. Ahora también se pueden categorizar tarifas de tipo. Tipos de Sarah y sensores. Hay otras categorías, pero las de Sarah y Sand Sarah son las dos más comunes. Ahora Sarah Air, las pollitas que sobresalen de las letras, mientras que San Sears, lo que significa que no, Sarah tiene una mirada más llana que comúnmente se usa para el texto. Algunas tipografías se usan mejor en artículos impresos, mientras que otras lo hacen bien en la Web. Y si nos fijamos en este ejemplo podemos ver algo llamado emparejamiento apretado. Tenemos un tipo San Serif y un cierto tipo. Todo lo que importa es que podamos ver un equilibrio y ese texto y todo el contenido se pueda leer muy fácilmente. Entonces veamos algunos ejemplos de padres podemos acceder al punto com de Mi teléfono Mi hans dot com tiene una de las fuentes y tipos de letra más altas profesionalmente de diseño y calidad. Por lo que al trabajar a través de este sitio web, también podemos ver una etiqueta de precio pero algunas de estas fuentes. Pero por suerte tenemos lo que es Google Farm que nos permitirá acceder a fondos forma gratuita, y podemos acceder a través de sus categorías. Y también podemos editar la frase para que podamos probar cómo están la frase Will podría verse en nuestra página web. Escucha, queremos cambiar nuestra frase por algo que podamos en nuestra página web. Entonces hagámoslo. Se puede aplicar esa frase a todos los fonds, y a medida que nos desplazamos, podemos ver cómo la fuente se verá larga a nuestra frase. Este es un gran ejemplo de cómo impugnamos pensamientos y tipos de letra. Si decides elegir mucho, solo puedes hacer click en este botón aquí y luego abajo abajo. Se puede decir este botón y podemos descargar a nuestra computadora para acceder a los diferentes tipos de caras y estilos. Entonces vamos antes a nuestro proyecto de clase. Por suerte, cuando estaba trabajando en nuestro proyecto, decidí elegir el pensamiento. Un conjunto rápido fue rápido. Hijo, tenemos cuatro estilos. Eso significa que hay cuatro tipos de letra. Nosotros vamos. Entonces vamos a aplicar Quick Santo nuestro tablero. Pasemos a nuestra visión y reafirmemos en otra sección en ST. Entonces lo que ya he hecho es que tomé algunas capturas de pantalla de nuestras tipografías de bonos locales. ¿ Qué? Voy a hacer su cabeza hacia atrás su carpeta en tipografía, Agarra todas las imágenes aquí y haga clic y deje caer una cura. La mayoría de los crímenes como no podíamos empezar a cambiar nuestra tipografía a nuestro dopey x d cinco. Bueno, alguna vez lo hice es que ya he subido arenas movedizas cargadas. Entonces digamos que me llevé este artículo en particular vamos a ver que lo lama. Y ahora mismo se envía al ritmo regular alto. Entonces lo que voy a hacer, selecciono todos estos textos en particular cambia a arenas movedizas y lo mismo irá para estos ítems aquí, el pre resumido. Pero sólo tenemos viejos. Entonces sostengamos esto me dijo de esa manera. Tener regular establecido a regular y lo siguiente que podemos hacer es actualizar nuestros colores de texto. Entonces lo que ya he hecho es que ya tenemos los grandes colores. Entonces lo que podemos dio ha cambiado tres colores principales de diferentes tonos. Entonces vamos sólo a ese click en que elegir copia sin luz pieza ahora volver a nuestras formas de colores. Ahora podemos actualizar todos los textos, y queremos tener color. Ella era la grande más oscura. Cambiemos el cuerpo del texto a algo un poco más ligero. Entonces, ¿qué Eso se asentó? En realidad podemos guardar el estilo click derecho arriba. Se puede ver que los estilos de carácter activos. Lo que eso significa es que no podemos acceder a estos tipos de caracteres más adelante ya que trabajamos en nuestro prototipo , cuando haces lo mismo para los colores más. Mientras tanto, me gustará que elijas tu diversión. Nos reuniremos en el próximo año. Empezaremos a hablar de navegación por sitios, stealin 11. Navegación: después de definir a nuestros usuarios y su propósito de interactuar con nuestro sitio web, queremos saber cómo, aunque navegar al sitio web y cuándo están en el sitio web Hola navegar dentro de él. navegación en realidad se puede desglosar a externa e interna externamente. Queremos saber cómo encuentran los usuarios tu sitio web, cómo los usuarios antiguos llegan a tu sitio web. Qué puntos de acceso mientras toman tipos de puntos de acceso pueden ser durante el correo electrónico, donde un enlace dentro del correo electrónico y cuando haces clic en él y tomas uso del sitio web. Una búsqueda básica como Google siendo o joven un enlace directo, lo que significa que los usuarios visitan el sitio con frecuencia para que recuerden tu resto. Por lo que todo lo que tienen que hacer es introducir el nombre de los sitios web en la contraseña de la parte de búsqueda, no sitio protegido por contraseña significa que solo tienes acceso al sitio web si creas una contraseña por lo que éstas podrían ser como una cuenta bancaria o una cuenta de redes sociales. A redes sociales lentas a través de una búsqueda de perfiles o publicaciones de amigos. En realidad se puede ver información sobre el sitio Web o la empresa o el particular. Entonces cuando pasas por las redes sociales, hay un montón de monedas de acceso dentro del propio post o de la propia página a través de publicidad pagada . Es un punto de acceso común al que muchos usuarios se dirigen. Por lo que cuando veas un anuncio y te interesa ese artículo o información en particular al hacer clic en, te llevará directamente a ese sitio web. Hay algo ejemplo de un acceso. Este es mi viaje de usuario, que hablará más adelante en el curso. Pero en cuanto a la navegación, forma en que los usuarios llegarán a mi sitio web y completarán una tarea depende de qué acciones se lleven a cabo. Por ejemplo, tengo un potencial empleador curioso por mí a través de su acción de ver mi carta de presentación de currículum YouTube, videos de un proyecto. Obtén su perfil, Twitter o mi blogger me defina directamente a través de la búsqueda básica. Al igual que Google, se pueden dirigir a mi sitio web. Por lo que hay muchas avenidas a las que se puede acceder a un sitio web, y una vez que estás dentro de la web, hay otro tipo de navegación, y eso se llama la interna. Entonces mientras estamos en lo eterno, estás haciendo preguntas sobre cómo los usuarios pasan de una categoría de contenido a otra. ¿ Cuántos abusos sexuales toman para completar una tarea? Enfriar. Entonces echemos un vistazo a nuestro proyecto de clase ahora proyecto de clase. Cuando hablamos de navegación, estamos hablando de la notificación interna. Por lo que nuestro sitio web de autores Navegación Interna son los siguientes. Contamos con categorías principales como casa sobre looks, artículos y páginas de contacto. Por lo que dentro de cada categoría media, tenemos los siguientes ítems que seremos, incluyendo en esa página en particular. Está en la página principal. Vamos a tener una portada, un libro de título de libro, vistazo a escondidas con formulario de pre pedido y otros libros listados en el sobre Page tendrán Self Portrait y una bio Dentro de los libros. Page tendrá una galería de libros con el título y su descripción, junto con la longitud para llevar a los usuarios a esa página de libros en particular sobre artículos tendrá lista de artículos. El artículo, Imagen, artículo, título y la descripción del artículo y por último, en el contacto por edad tendrá la información del dedo del pie cómo los usuarios pueden contactar a otros Así estaremos incluyendo su correo electrónico, una cuenta de redes sociales y de pensión corta. Por lo que para su hacer ripper, su navegación externa e interna, revise sus categorías de contenido para determinar su navegación interna Up. A continuación, comenzaremos a discutir sobre el mapeo del sitio. Aquí es donde empezaremos a mapear nuestra navegación interna. Ver en el siguiente video 12. Mapa de acciones: sitio Mint describe una navegación desde la página principal hasta las diferentes páginas Web fueron pieza de contenido de nuestro sitio web. En cierto modo, un mapa del sitio es como un flujo de contenido. ¿ Cómo queremos que los usuarios pasen de una pieza de contenido a otra y mapean la ruta de los usuarios al interactuar con toda la página web? Entonces en cuanto a navegación interna, significa que estamos conectando nuestro contenido. Queremos asegurarnos de que la conexión a la navegación interna tenga sentido. Entonces cómo los usuarios obtienen por una pieza de contenido a otra. ¿ Cómo usarás tu skiffle una categoría de contenido a otra categoría? Entonces aquí hay un ejemplo de mapeo de sitios. Esta es mi ligera. Mi para mi sitio web personal. Usando Google dry fue capaz de mapear mis contenidos y bloques. En la parte inferior izquierda, se puede ver una leyenda. Amarillo significa la página de Forro en los diversos colores a continuación representa pestañas, contenidos de pestañas, páginas secundarias en sitios de terceros. Entonces aquí está el desglose. Cuando un usuario accede a mi página principal, aquellos que tienen un desenfoque Nobel en la galería de proyectos más recientes desde su usuario pueden navegar hacia la página de contacto. Una página de trabajo en el blawg ahora la sangre no será una página web separada, pero va a estar vinculada a mi log medio, que así usaría tus clics en ese enlace. Se los llevará directamente a la cuadra en medio. Ahora, cuando use su acceso a la página del proyecto de trabajo, verán una variedad de proyectos. Pero esos proyectos están listados con las pestañas. Entonces cuando un usuario hace clic en cualquiera de esas pestañas, ya sea estrategia de desarrollo de amor diseñada ilustración en las artes del libro se navegará para separar páginas bien para qué estrategias de desarrollo estarán navegando tu página web, lo que significa si sus curas sobre proyecto particular dentro de esa pestaña. Una vez que hagan clic en esa información o ese proyecto se llevará a eso. qué que proyecta página personal desde ahí, la alerta o sobre ese proyecto, incluyendo cualquier enlace externo que esté conectado a él ahora para ilustraciones de diseño de Foot Bart, esos proyectos individuales no serán navegado a nueva página web. Se quedará dentro de las pestañas, y se podría ver cualquier otro enlace externo relacionado con él. Abajo en la parte inferior estaría mi pie de página. Aquí hay más iconos de redes sociales, así que veamos cómo funciona esto. Navegar a mi página web personal. Esta es la página principal. Como puedes ver, tenemos el trabajo plug in contacto categorías principales. Está en la página principal. Si nos desplazamos hacia abajo, verás en sobre Blurred y mi último proyecto. Entonces vamos a ver si hacemos click en la edad laboral. Como puedes ver aquí, tenemos una variedad de pestañas en las que podríamos hacer click. Entonces si seguimos en la pestaña Desarrollo Web, digamos que miramos el Proyecto t crear al hacer clic en T Crate fueron dirigidos a la página principal del comercio del té. Aquí. Llegamos a conocer más sobre este proyecto en particular, pero volvamos atrás. Por lo que decidimos ir en ilustraciones. Toma un reloj. Hola. Aquí tienes. Podríamos ver nuestro proyecto en particular. Como pueden ver, no puedo hacer clic en cada proyecto para llevarnos a su propia página personal porque habrán ganado su propia información se establece dentro de este sitio particular. Pero podemos tamizar a través de imágenes para más información. En caso de ir a la página de contacto, tenemos alguna información de contacto a continuación. Aquí se puede ver el flotador de pies, que incluí mis iconos de redes sociales como mencioné Cuando hacemos clic en bloque, nos dirigirá hacia mi blawg en el medio, que tomaría un segundo Duque de So. Como puedes ver, cada cosita importa. El modo en que interactúas con tus usuarios es extremadamente importante. Aquí tenemos el logotipo, que una vez hecho clic, podría llevarte de vuelta a la página principal, por lo que quieres que sea lo más sencillo posible para tus usuarios. Cuanto más puedan navegar por tu sitio web con facilidad, mejor regresarán y nos apreciarán individual o su proyecto de clase. Vamos a empezar a trabajar en el mapeo de sitios web de nuestros autores por favor abra número uno sitio web diseñado set inicio en Google draw Harold diseñó cómo funcionará nuestro sitio web desde la tortuga en aplicación. Lo primero que necesitamos a Dio es poner bloques de nuestras principales categorías. Entonces hagámoslo. Eso ha estado en una cuadra. Bueno, digamos inicio para la página principal. Asegurémonos de que todo centrado y para que el texto sea un poco más fácil en los ojos. Cambiemos eso. Haré a los peleados sólo un poquito pequeño Perfecto. Entonces es menos Isis un poco aquí. Pondré esto en el centro de nuestro documento servido con casa es una de nuestras principales categorías, pero debido a que es la página principal, va a ser dirigido a nuestras otras categorías principales. Entonces construyamos eso. Tendremos una copia pegada. Yo sí uso atajos en el teclado que, forma que quieras una copia pegando tus elementos, por favor hazlo camino tener un total de otros cuatro. Puede Grecia. Eso es lo que Jesús ciclista por lo que ha cambiado esto a sobre libros, artículos y contacto para todos estos elementos. Démosles uno fronterizo. Se lo cambió a gracia es lo que es más fácil en los ojos. Úsalo a esta cubierta. Esa es una línea. Estas categorías bien, mismo medio. Destruiremos todo. manera uniforme horizontal. Solo seamos alinearlo igual Ahora también tenemos nuestra mantequilla donde vamos a incluir nuestros iconos de redes sociales. Entonces usemos estos dos que copiamos pegado antes. ¿ Qué cara de café? Uno más. Estás mintiendo. Estos tipos era, digamos, Instagram, Twitter y Facebook. Distribuyamos estos un poco uniformemente tiramos las cosas aquí abajo. También está en algunas fronteras a estos tipos. Consíguelo. ¿ Entra esto? Aquí vamos. Entonces a continuación, averigüemos cómo se estaban conectando nuestros contenidos. Entonces dijimos en la página sobre, vamos a tener una bio en libros de autorretrato. Page, sin embargo, íbamos a tener una galería de libros para cada libro sería llevado a su propia página de libro. Entonces hagámoslo. Esa es una página secundaria. Entonces cambiemos esto por libro. Y debido a que la galería se está redirigiendo a una múltiples páginas web, hagamos un símbolo para notificarnos que la página de libros se ha conectado a múltiples páginas secundarias . Entonces lo que vamos a hacer es copiar pasta, nos enteramos. Suprímate ese impuesto. Um, vamos a dar nuestras categorías principales. Es de color blanco. Podríamos hacer lo mismo. Su página de inicio era amarilla, Así que volviendo a los libros, todo cambió el orden para volver. Mueve esto aquí arriba. Tan sólo un poco hace un poco de carne. También puedes hacer otro copiará pasta. Vuelve a cambiar el pedido. Está a la altura de atrás. Simplemente lo ajustas así. Entonces agrupemos estos artículos, y luego demos a esto un borde de DOT a puntos. Es una página secundaria y le dará el color melocotón y probar ahora en la página del libro. Mencionamos que el libro tendrá un enlace externo a un sitio que permite a un usuario comprar un libro. Entonces construyamos eso. Eso es ritmo de copia, pero el elemento arrastrar esto hacia abajo dirá sitio para comprar un libro. Y cambiemos un color a Gris porque dijimos que los enlaces externos son geniales, pero volvamos a cambiar el dedo del borde un sólido. Voy a cambiar también el tamaño de la fuente sólo para que sea un poco más fácil en los ojos. Ahí tenemos una sección de la página que hizo. El vínculo que tenemos con los artículos es que la autora tendrá un blurb de artículos que está escrita para trabajar como freelance. Por lo que cada uno de los blurts podrá enlazar con el artículo principal en la otra página web. Entonces ese es un enlace externo. Entonces vamos a copiar ritmo. Otro artículo aquí, solo una luz le gusta para que puedas usar las líneas rojas para ayudarte. Diremos que el contacto de artículo Queen solo tenía el correo electrónico también en, así que vamos a dibujar eso, también. Pero no es un buen enlace externo, pero sigue siendo una forma de contacto. Entonces aquí tenemos, es nuestra conexión de contenido para nuestro mapeo de sitios. A continuación, tenemos que asegurarnos de que lo que queremos Dio es señalar a qué puede navegar un usuario. Pero primero, agruparemos ciertas cosas. Como mencionamos, las principales categorías serán nuestra principal navegación para el sitio web, lo que eso suele colocarse en el encabezado. Entonces hagamos un símbolo, así que cambiaremos. Esto demasiado transparente cambió la frontera. Hablar con Dios cambiará el orden en la espalda. Podemos usar la gráfica en la parte posterior del documento para ayudarnos a gustar las cosas un poco más limpias y entrar. Puedes hacer lo mismo diciendo aquí que este es un encabezado y este un clic desaparecen de otros qué páginas tomará un usuario. Cambiemos el tamaño. Asegúrate de que las cosas estén centradas. Entonces digamos lo mismo para nuestro pie de página copiará ritmo. Durante eso de abajo, diré que este es el pie de página, así que limpiemos el archivo sólo un poco. Hacer las cosas un poco Niedere, reduciendo algunos de los tamaños. Todavía él lo mismo podría ser para nuestro contenido. Aquí seco, estos chicos ligeramente la página de inicio está un poco bien Así que hagamos la conexión. Usemos nuestra línea. Tear usará el conector del tío para que la página principal pueda ser navegada para estar a punto. Entonces todo lo que tienes que hacer es tocar ese punto morado con la boca. Sosténgalo ahí abajo, botón y arrastre. Podemos hacer lo mismo para todos los demás bloques, Pero hagamos esos barriles para estos chicos de aquí. Entonces lo que ponemos de libros Galería nos lleva a una página de libro, pero una página de libro también puede volver a nuestra galería de libros, así que vamos a necesitar un villancico en particular. Entonces cambiemos y pongamos la flecha sosteniendo el ratón rubio y mantén pulsado el botón de turno. Simplemente puedes arrastrar hacia abajo la liberación. Haremos lo mismo yendo hacia arriba, dijimos un libro. Ponte junto a un dedo del pie ligero, permite a los usuarios por él. Pero así hagámoslo. Y entonces los artículos en realidad hacen lo mismo para los artículos principales. Ángulo de contacto al correo electrónico también. Entonces cuando estás en este sitio para comprar un libro, hay una referencia para llevarte de vuelta a la página principal. Por lo que no podías leer más sobre el autor si no lo has hecho. Entonces hagamos una conexión ahí. No toques eso. solo mantener pulsado drag se irá a la parte superior haciendo clic en esta tecla de selección. Como pueden ver, tenemos diamantes. Lo que puedes hacer es pasar por encima de este diamante. Arrástralo por aquí así porque es una conexión externa. Vamos a cambiarlo para adoptar un punto Podemos hacer lo mismo para el artículo principal. Hagamos otro como ese perro de vuelta aquí arriba. Aquí vamos. Cambiemos el punto a punto Haga clic en la tecla de selección, el cursor sobre el diamante. Simplemente muévelo como para que también puedas arrastrarlo hacia abajo. Entonces es un poco más fácil a los ojos porque este tipo de fronteras de nos estamos conectando. Entonces vamos a pasar esto y esto de vuelta hacia fuera sólo para que sea un poco más ordenado. Hagamos algunas notas sobre esta sección en particular. Es copia de cerdos, y diremos cuando eso esté a un clic de distancia de los libros. Calorías, ¿quién lo hace? Otra copia vale decir aquí mismo que se trata de libros externos y ahí se tiene el mapeo del sitio. Por lo que ahora hemos completado nuestro mapeo del sitio del proyecto de costos. Espero que esto tenga sentido para ti, y que Google draw realmente nos pueda ayudar a construir nuestro sitio, mapeando a través de fácil e intuitivo. Y es una gran práctica si solo quieres aprender más sobre la herramienta o simplemente aprender a construir diagramas. Por lo que para que lo hagas construye tus diagramas de mapa de sitio una vez que eso esté completado, podemos hablar de tus viajes. ¿ Ves el siguiente video? 13. Trayectoria del usuario: uso del usuario tu viaje es el flujo que suele atravesar al interactuar con un sitio web completo . en torno a un objetivo de acción. Nos ayuda a averiguar qué harán los usuarios y en qué orden. Cual es su camino desde el punto A para señalarme para completar una tarea o meta. La parte difícil es limitar el número de pasos. Usa tus tomas para llegar de un punto a otro. Hacer clic en múltiples botones solo para obtener información eran poder comprar algo molestará a un usuario. Debes asignar de manera intencional para que el usuario tenga una experiencia amena y regresará a tu sitio web. Algunos usuarios que se unen a envolturas pueden ser simples o complejos. Al igual que esto. El viaje de usuario idea es conocer la respuesta emocional de un usuario, sus pensamientos y experiencia general. A partir de esas respuestas, podemos obtener retroalimentación para mejorar nuestras ideas o para crear otras nuevas. A partir de este ejemplo, podemos ver una experiencia de usuarios desde encontrar un nuevo look para nuevo caído desde poder encontrar un servicio que le brinde de lo que pareces y en el que tiene una gran experiencia y ella abogará por eso empresa en particular. La experiencia general de los usuarios contiene muchos niveles en es que múltiples pasos? Pero ese es el punto de uso del viaje es conocer más de tus usuarios porque son ellos los que van a ser tu sitio web. Tú como diseñador tendrás que diseñar a sus necesidades y a sus experiencias a la altura. Siguiente. Hablaremos de nuestro proyecto de clase, así que vamos a empezar a construir nuestros sueños de autores. Abre tu archivo un usuario de sitio web de diseño a mí Inicio archivo en Global Drop. Cambiemos nuestros objetivos de acción para nuestro usuario. En realidad ir por un usuario sería comprar un libro para obtener información sobre el autor o libro eran ponerse en contacto. Estira la cuadra aquí. Entonces digamos nuestro usuario, es cualquier potencial. ¿ Qué hay en el tráiler? Cambiemos el tamaño frontal solo para conseguir mucho más fácil en los ojos. Asegúrate de que todo sea centro. Se le da una frontera. Hazlo fácil en los ojos. Todavía está fuera Solo un pueblo, está bien, bien, así que ah, cliente potencial puede acceder al sitio web de un par de maneras. Entonces vamos a copiar, pagar y decir una búsqueda básica Es un poco demasiado búsqueda en Google y eso está rastreado. Pidió un poco en curso. Copiar pegar agujeros más justo arriba. Voy a ver bien. Voy a quitar el frío fronterizo. Transparente. Cambias la búsqueda de Google en un borde punteado. Vamos a bajar esto un poco más, así que está un poco más cerca. Entonces voy a copiar Pega esto para el próximo punto de acceso, y eso podría ser ahora. Usa la risa de aquí. Consola para pero mezclar. Podemos empezar a construir la red social en este punto. Sabor que ya veremos. Entonces, Sean, arrastremos un poco los puntos porque dijimos Centro esta cuadra. Por eso protege el centro. Entonces cambiemos esto para que tengamos Twitter. Ahora me quedo por Facebook. El otro podría formar parte de muchos otros escritores y grupos de libros crudos. Entonces digamos que bueno lee esta de ellas. Otro. Digamos que hasta club solo coraje en Herrick. Otra semana ser, um, YouTube. A lo mejor alguien se encontró con una página de YouTube donde está hablando de sus libros. Entonces creo que la última sesión por ahora. Solo hagamos un ejemplo rápido de todos nuestros puntos de acceso. Um, X puntos pueden ser muy complejos. Entonces, um, lo que sea que tengas que hacer para construir tu sitio web punto para determinar tu viaje de usuario te ayudará con el diseño de tu sitio web. Pero para este ejemplo de este proyecto de clase, vamos a hacerlo lo más sencillo posible. Centro todo aquí y construyamos Ah, página web. Simplemente voy a copiar pegar nuestros elementos ayudan a ahorrar tiempo, empuja esto aquí abajo. Religión en nuestra página principal de nuestra página web es que ella tiene una lista de otras galerías de libros. Pero mientras tanto, vamos a diseñar sólo las categorías principales para conseguir la página principal que teníamos sobre qué libros. También teníamos nuestros artículos en la página de contacto. Ahora sí dijimos que los libros tienen una galería de libros que llevaría a una página de libros, mismo para los artículos que serían conducidos a un enlace externo extendido de webs de TI. Ahora, los artículos también serán tratados igual donde tenga un enlace externo al artículo principal . Entonces construyamos un bloque extra. Usa el punto a punto Voy a decir libros aquí, Otra copia de la paz. Su libro. Entonces, esencialmente, estamos construyendo nuestro mapeo de sitios dentro del sitio web. No tiene que ser exacto, pero es algo sencillo. Todavía parece para artículos aquí médicos para que estemos tratando de construir un pequeño ejemplo de nuestra página web siesta. Sí mencionamos que el artículo principal nos encontraría de vuelta a la página web de Harmony. Entonces ese es otro punto de acceso. Entonces hagamos que esto suceda. Así es este Copiar pegar aquí a estos individuos y vamos a decir enlaces externos. Y esto podría ser artículo, página historia. A ver eso. O también puede ser el sitio de compra de libros. Volvamos a nuestra página interna. Voy a quitar artículos y libros. Kristen lo haría un poco más limpio. Vamos a salir de esto de nuevo a la cima y lo que voy a hacer aquí. Conectemos estos bloques individuales. Entonces voy a hacer una Y y conectar los puntos aquí usando mi cambio de objeto selecto para atracar línea de frontera, y vamos a usar los círculos para denotar que la bestia está conectada, y voy a encogerlo esto solo para conseguir un poco más limpio tiene cambió la forma de nuestro sitio web . Bueno, limpiemos un poco esto. Había frío. A la acción vamos que tenemos aquí. Sería comprar un pero obtener contacto, obtener información en contacto. Entonces, solo volvamos hacia abajo. No lo sé. Este es el sitio. Solo ayuda a limpiar las cosas de nuevo aquí arriba. Bueno, ahora conectemos el aire nuestra navegación externa e interna usando el conector Hubble. Bueno, el cliente potencial a una búsqueda básica. A lo mejor la tendremos larga newsletter. Red social donde se encuentran con enlaces externos. Vamos a limpiar esto sólo un poco. Me levanté Miss Uppers Wall. Sólo vamos a Esto es un poco más. Démosle meses de flecha a estos tipos. No, el punto de acceso siempre nos llevará de vuelta a la página web, así que hagámoslo. Está en el conector del codo, enlaces externos. Pondremos esa parte aquí. Red social. Simplemente camina, ya sabes, la misma y cirugía básica a la página web. todo, el sitio web siempre nos llevará a Oops, se ha tocado este particular morado conseguido paso. Compra un libro. Entonces vamos a seleccionar todas estas marcas. Dale un angosto. Ahora mencionamos el artículo necesidad a los ings externos. Entonces, ¿qué? El con el sitio de compra de libros. Entonces es genial. Tengo que puntar estrecho con el codo. Bueno, no le importa, y el artículo estará de vuelta aquí para debilitar antenas selectas. Aquí, escogeremos la frontera. Este tipo 'll. Déjame ver si puedo conseguir el diamante que tienen. Eso es lo que hace una flecha. Es elegir una L. diferente Hasta ahora, así es como nuestro viaje de usuario podría verse como un cliente potencial. Conexa nuestra página web a través de cuatro puntos de acceso básicos. Basic Search England newsletter. Una red social o hacer diversas molduras de accesorios que se conectan a nuestra página web. Dentro del sitio Oeste, el usuario puede navegar internamente en la página principal sobre página, contacto, contacto, clics de página, página y página de artículo en los libros y artículos. Página puede cumplir a secundaria qué página o un enlace externo. Con todo, el objetivo de acción se puede completar ahora el canal de clientes potenciales, ya sea por un libro consiguiendo para mayor o comuníquese con el Arthur. Por lo que así es como usas tu viaje puede verse. Ahora es tu turno a eso por tus sueños de usuario. Asegúrate de conectar tu contenido con tu navegación de Charles y piensa en cómo navegarán tus usuarios por tu sitio web y lo que quieres que experimenten. Una vez que eso esté completo, podemos empezar a hablar de diseño responsive. Ya veremos en el siguiente video 14. Diseño adaptable: diseño responsive de X. Cómo se van a diseñar nuestros diseños de páginas Web porque hay tantas pantallas en el balón desde tu teléfono móvil hasta el escritorio de tu computadora. Qué diseños de página tienen que ser una reestructuración y responde a los cambiantes tamaños de pantalla. Todo se presenta en un asunto muy limpio, organizado y con propósito. El contenido se diseñará para estirar hacia afuera pero no para un tamaño de pantalla específico. Por qué la crema de prototipos ayudan a estructurar este diseño. Entonces, ¿qué? Páginas diseñadas apilando bloques el contenido de una página Web se descompone en el cuerpo , donde tenemos el encabezado, pie de página principal y algunas otras rubias semánticas. Ya que tenemos que diseñar contacto, estirar. Podemos usar los diseños de Greg. Alineamos los bloques del CERN a las páginas Web. Grit. Estos son algunos ejemplos de este artista Chris Bannister. Creó una sala de cables receptiva Jif. No creo que esto sea un gran ejemplo para mostrarte la Constable Responsive Web. Entonces echemos un vistazo si haces click en el escritorio. Como puedes ver, los escritorios crecen aquí es bastante blanco en el contenido que se extendía. La galería de productos tiene cuatro columnas y si miramos a continuación. El pie de página también tiene cuatro Collins, y está alineado como tal. Por lo que es una mentira convertirse en una cuadrícula, y lo hace para un sitio web ordenado, la navegación y el groeller promedio u otra parte del contenido que es una especie de división . Pero si le echamos un vistazo a la tableta, ellos pueden ver el producto. Galería ha demostrado que tomó tres columnas, por lo que esencialmente un escritorio puede estrictar su verde para convertirse en una tableta. Por lo que una chica promedio de navegación er, todavía especie de sigue siendo la misma. Pero la galería de productos y el flotador su grilla tiene triunfo a un estilo de tres columnas, y eso no está tan mal. Pero eso es porque mantener una mente se quitaría de dispositivo a dispositivo. Especialmente vamos de una vista de escritorio dedo del pie una tableta. El contenido se está reduciendo, por lo que otra forma de pensar en ello es que el contenido debería poder propagarse hacia afuera. Entonces eso significa que cuando trabajamos con una configuración móvil, el contenido solo debe depender de la propia pantalla, tiene que ser flexible. Por lo que en la configuración de su teléfono, hemos notado que nuestra galería de contenidos ahora se ha reducido a una cuadrícula de una columna. Y eso no está tan mal, porque con el teléfono, cuando nos desplazamos de arriba a abajo, está en una sección de una columna. ¿ Te has dado cuenta de la navegación? Está borracho en sí mismo en un menú de hamburguesas para que ahora se pueda acceder a esa navegación mediante un menú desplegable. Cómo diseñas tu capacidad de respuesta depende de ti, pero hay algunos patrones de diseño para que podamos seguir. Pero eso es para otro video en el futuro. Yo solo quiero señalar esto relato, informativo, sensible diseño Web. Blawg aquí, y tienen grandes ejemplos donde tocan en sitios web de la vida real. Entonces aquí está la comida. Ya que me gusta mucho la forma en que peinaban, son diseño receptivo. Entonces si miras de cerca, esta es la vista de escritorio. Tienen sus iconos de redes sociales en el aleteo y su navegación a la izquierda como menú de barra lateral. Tienen la imagen principal aquí en el centro y una cuadrícula de cuatro columnas de otros artículos también . Pero cuando te mueves a una vista de tableta, la navegación desde la barra lateral se mueve hacia arriba hacia arriba. La imagen principal se ha movido de centro a la página, y la cuatro columna buena se ha estirado hacia afuera en esta información aquí se ha mantenido igual. Pasando a un diseño de teléfono o móvil, notamos que la navegación se ha empujado hacia arriba sin los iconos. El local se ha centrado en el medio. El Mitch Gallery todavía está en el centro, pero todo lo demás se ha convertido en una cuadrícula de llamada. Por lo que este es un ejemplo de diseño web responsive. Es una gran manera de pensar cómo quieres diseñar tus ings y prototipos de armazón de alambre antes de un proyecto de clase. Voy a pegarme a un tamaño de pantalla de 1024 píxeles. Hablaremos más de eso cuando nos acerquemos a nuestro cable. Libérame, pero te veremos en el siguiente video. 15. Continúa a la parte 2 Mensaje: gracias por tomar cómo diseñar una página web parte ¿Qué? Hemos cubierto mucho terreno sobre el proceso de diseño, especialmente la etapa de planeación. A continuación, por favor continúe con la segunda parte para conocer más sobre las etapas de mecanografía de marco de alambre y portal. ¿ Por qué va a poner todo lo que hemos aprendido en nuestras estructuras de nuestra aplicación Web? Nos vemos ahí.