Wireframing para diseño de sitios web para principiantes

1. Introducción: dan la bienvenida al encuadre de alambre para diseñadores en esta clase, vas a aprender los conceptos básicos del enmarcado de alambre en. Vamos a explorar estilos analógicos, bajos fi y hi fi. Vas a poder trabajar en papel, lápiz y libros de bocetos,notas publicadas, notas publicadas fototienda ilustradora y actos de navegador web en línea. Vas a ver la variedad de herramientas que puedes usar y cómo este estilo de trabajo realmente puede beneficiar y mejorar tus habilidades de diseño. encuadre de alambre te permite lidiar con la estructura esquelética del diseño de tu sitio web en lugar quedarte empantanado por los detalles justo fuera del bate, cual sé a veces somos aptos para dio. Entonces en esta clase vas a aprender los conceptos básicos de cómo remolcar marco de alambre, cuándo usarlo y cómo usarlo como de costumbre con mi clase, quiero que explores y te diviertas 2. Suministros de curso: Está bien, sigamos adelante y echemos un vistazo a qué suministros vas a necesitar para encuadre de alambre Para un tipo de encuadre de alambre, solo necesitas algún tipo de papel. Esto podría ser simplemente, ya sabes, papel de computadora tableta dibujante básico, publicarlo notas y algún tipo de bolígrafo lápiz rotulador. Un utensilio de escritura. Si eres más trabajador digital, también puedes usar la computadora para esta clase. Ya sea ilustrador o Photoshopped funcionarán perfectamente para esto. Si te gusta en el diseño, puedes sustituir eso en un oleaje, pero voy a estar mostrando ilustrador y foto shopped por esto, y he proporcionado plantillas para cada una de ellas para ti, para este proyecto de clase también. Puede utilizar sitios de marco de alambre en línea como Besame IQ. Funcionan muy bien. Ese tiene un juicio de un mes. Algunos de ellos son gratuitos. Algunos de ellos no son eso. Sólo tienes que averiguar cuáles fuiste experimento dentro de cuál si son tus necesidades económicas y ver qué dieron. Pero los libres son bastante decentes. Por lo que yo diría Empezar por ahí. Está bien, sigamos adelante y empecemos 3. ¡El proyecto!: todo bien. Tiempo para el proyecto de clase. En este proyecto, vas a diseñar sitios web de marcos de alambre. Ahora bien, éste podría ser uno que acabas de maquillar. Este podría ser tu propio sitio web. O podría ser un rediseño de un sitio que sientas necesita solo un poco de amor por esto . Vamos a diseñar tres de sus páginas. De esa manera podemos ver su consistencia y su unidad a lo largo de las tres páginas. Lo que vas a hacer es verde el elegir en qué estilo pareces más interesado. ¿ Te gusta el análogo? Esbocearlo. Agarra tu papel, agarra tus lápices, agarra tu cuaderno de bocetos y mira cómo pueden ser tus páginas. Con eso Te gusta publicarlo notas. Ve por ello. ¿ Tienes una pizarra o una pizarra? Esbocearlo ahí. ¿ Te gusta el sistema lo fi? No nos preocupamos del todo por demasiadas de las rejillas todavía. Entonces prueba ilustrador o fototienda y ve qué pasa ahí. A lo mejor te interesaba aprender la mitad. Construirlo sobre el estilo del navegador en línea en eso, Explora un par de esos y ve cuál funciona mejor para ti. Como de costumbre, la exploración siempre es clave. A lo mejor en esta etapa, ni siquiera sabes lo que te gusta. Si ese es el caso, prueba un poquito de todos ellos. Recuerda, no nos estamos empantanando eso por los colores. No nos estamos empantanando por el tipo. No nos estamos empantanando por detalles finitos. Simplemente nos preocupamos por el sistema esquelético. ¿ Y cómo interactúa este marco y consigue el mensaje a través de tu página? Entonces no vamos a poner un texto real, vamos a usarla. Lauren, está dentro. Si lo estás dibujando, podría ser sólo la caja con algunos garabatos en ella. Entonces, no te preocupes por la carne y las papas cuando te preocupas por lo que realmente es el plato . Entonces para esto, relájate y diviértete. Experimenta y ve qué estilo funciona mejor para ti. Siempre que tengas tus tres páginas completas y cualquier estilo que te interesara, adelante y subirlo al proyecto de clase. También puedes mostrar algunos de los pasos que has dado para ello. Siempre encuentro que ver el proceso siempre ayuda, y lo que es genial con la participación de habilidades es cuando ves lo que todo el mundo está haciendo, obtienes una idea más amplia de las opciones que hay por ahí así que comparte. Comparte tu proyecto y comparte tu proceso. Y luego en los proyectos del curso a continuación, podemos ver tu trabajo y ver cómo se ven tus diseños. Como de costumbre, diviértete. 4. ¿Qué es un Wireframe?: Está bien. Entonces, ¿qué es exactamente por qué estás enmarcando? Podría estar haciendo una buena pregunta, y por eso estamos aquí. El encuadre de alambre es una herramienta increíble para el diseño. Y para los diseñadores web, nos da el tiempo que necesitamos para pensar nuestros pensamientos y para descifrar nuestro plan de acción , por así decirlo. Sé que hay esta tentación que siempre sabes, tiene que ser esta cara apretada. Tiene que ser este color a quien me encantaría tener X, y y Z todo eso empujarlo hacia un lado. No nos preocupamos por los detalles de éste. Nos preocupa la funcionalidad de la misma. Entonces piénsalo como un plano. Entonces si estás construyendo una casa, lo más posible es que no vayas a saltar y decir, Esta es la pelota. Esta es la otra pared de ahí. Ah, va a ser firma rosada y amarilla. Oh, va a ser precioso. No te preocupes por los detalles. No te preocupes por la estructura real de solo hagamos que se vea bastante bien, así no es como funciona. Tienes que tener los planos para que sepas funcionar y mapear todo. ¿ Cuál es su tamaño? Cuál es su contenido, etcétera. Entonces en lugar de preocuparnos por el color de la pintura de la casa, preocuparnos por la base y la subestructura reales de la misma. Entonces este es nuestro sistema esquelético. Tenemos que construir sobre ello eventualmente. Pero esta es la primera parte. Esta es la parte que le va a dar su columna vertebral y su estructura. Entonces para esto, piénsalo como lo que voy a llamar amorosamente es el boceto de fantasía. Podrías empezar con un par de miniaturas lee garabatos solo para que tus ideas iniciales vayan. Pero para entrar en el marco de alambre real en el escenario, vas a trabajar con los detalles básicos para que puedas construir la estructura alrededor de esto . Entonces sin color, sin tipo. Voy a estar diciendo mucho esto, así que no te preocupes por los detalles. Preocúpate por la cáscara. Entonces para esto, hay un par de formas en las que puedes, por supuesto, hacer esto el estilo analógico donde solo te sientas en drawl, sin redactar. Puedes hacerlo el lo fi, que es Photoshopped illustrator sketups y así puedes ir Hi fi, que es un poco más elegante para ilustrador y Photoshopped. Aquí es donde estamos lidiando más con columnas y cuadrículas y también. Son herramientas en línea para encuadre de alambre. Voy a entrar en cada uno de estos en profundidad en sus propias secciones en los próximos capítulos de pareja . Pero ahora piensa en el encuadre de alambre como ese boceto el boceto inicial que te va a permitir ver cómo va a fluir todo? ¿ Qué conecta con qué? ¿ A dónde te diriges? ¿ Cómo se iba a manipular la vista a través de la casa del sitio? Su flujo? ¿ Es fácil de usar? ¿ Es obvio un diseño intuitivo? ¿ O hay hipo? Esta es la etapa en la que se puede pre resolver esto para que cuando realmente te metes en la parte de codificación de esto, esos hipo, mayor parte, ya se deberían resolver. Entonces en lugar de ir a bosquejar código, tal vez sea agradable tener un paso entre ahí, que es el marco de alambre. Entonces para esto, vamos a explorar una variedad de opciones y estilo de trabajo para que puedas encontrar la que sea adecuada para ti. 5. Tipos de esquemas de alambre: Echemos un vistazo a los diferentes tipos de opciones de marco de alambre que tienes. Una de ellas te va a gustar mejor. Y como siempre, si has tomado mis otras clases, ya sabes lo que voy a decir a continuación. Como siempre experimentar, probar cada uno de ellos y averiguar cuál sí hunde realmente lo mejor para ti y tu estilo de trabajo. El 1er 1 con el que vamos a tratar es el análogo para analógico. Puedes usar una variedad de materiales para esto, y todo esto va a ser de estilo manos a mano para que puedas ir con el clásico papel y lápiz . No se pone mucho más sencillo que eso. Siempre disfruto empezando con algunas notas post it o las notas pegajosas para que pueda especie de reorganizar y barajar cosas alrededor. Las pizarras funcionan muy bien. También puedes usar recortes de papel que tipo de similar a las notas pegajosas. A algunas personas les gusta usar plantillas. Esto es más por si te metes en el encuadre de alambre U. S. S. U X tan móvil diseño, etcétera encendido también. abordaje blanco, que es, ya sabes, como el abordaje de chuleta. Pero, ya sabes, solo subirlo ahí arriba y ya sabes, es un poco más interactivo de lo que puedes trabajar con tu equipo en eso. Eso va a depender de tu estilo de trabajo, el papel y el lápiz. Típicamente, ese vas a ser tú. Tan bajo, pegajoso notas la chuleta hacia las tablas blancas, etcétera. Eso probablemente sea más trabajo basado en equipo después de analógico, vamos a lidiar con baja Fi on. Esto es sólo un poquito, voy a decir versión más elegante de analógico. Pero seguimos manteniéndolo suelto, áspero y algo gestual para esto. Ah, puedes usar Illustrator. También puedes usar la tienda de fotos para esto. Y si usted o su empresa tiene sketch, puede usar sketch también para esta clase. Yo sólo voy a ser demo ing ilustrador y foto comprada para esto. Uh, si estás haciendo esto en el tipo de punto de vista más lo fi, no te vas a empantanar con rejillas en esto. Simplemente estás arreglando los elementos de la página y viendo cómo funcionan. Uh, cuando nos metemos en los cinco altos, es cuando empezaste a lidiar con los agarres y ahora tiempo para la multa alta mientras estás enmarcando. Uh, este. Te vas, Teoh, Trae con las rejillas. Vas a tener ah sort column sistema modular del que vas a estar basándolo. He construido una plantilla para ti una versiones e Illustrator One va a estar en photoshop para que quieras probar el hi fi. El caparazón ya existirá para ti. Entonces con lo que vamos a estar lidiando curso con hola, fi. Acabo de regalar esos dos. Todavía vamos a estar lidiando con ello a través de ilustrador y fototienda. Uh, también puedes usar algunos mapas web en línea para esto. Um y yo voy a demostrar eso también. En una sección que vale la pena venir de esa manera, puedes ver qué tan seguro sabes que APS funciona para esto versus construirlo y Photoshopeó también a un ilustrador. Esto pagó por software de marco de alambre para eso. Yo recomendaría si fueras realmente empezando a esto. Ahí es cuando vas a hacer el compromiso por eso. Ah, uno. Qué bonito voy a añadir, um Adobe Creative Cloud acaba de lanzar fuera de la beta, la x d, que es una voy a llamarlo más de un simulacro en lugar de un encuadre de alambre, porque estás lidiando más con los detalles sobre esa. Pero si ya tienes la nube creativa, haz un seguimiento de esa app para que puedas ver como podrías usar eso para maquetas rudas también. Pero para el hi fi, vamos a lidiar con un poco más de construcción de rejilla y sacar los elementos del lugar, quedándonos empantanados por los detalles, como tipografías de color, etcétera. Muy bien, entonces, ¿cuándo realmente haces marco de alambre o, ya sabes, cuándo usas tus marcos de alambre? Uh, típicamente, si iba a pasar por,ya sabes, ya sabes, el flujo de trabajo. Ya sabes, comenzarías con un boceto rápido y entonces vas a pensar en esto es ese plano? Estás construyendo una casa, pero primero tienes que tener ese plano. No solo saltarías justo porque muchos eran paredes y coinciden y todo estaría torcido. Tenemos que arrasarlo para que sepamos dónde están las puertas en los pies, etcétera. Entonces antes de que podamos construirlo antes de que podamos decidir, ya sabes si esta era una casa antes de decidir de qué color es, qué alfombra? Entonces ya sabes, ¿cómo vamos a pintar, vagabundo? Necesitas descifrar, ya sabes, dónde va a ser realmente cualquier saber, ¿cómo funciona el marco esquelético? Uh, ademas, algo a tener en cuenta es solo tener una buena comunicación de equipo. Si estás trabajando en un equipo, um, si todos ven el plano, sabes que puedes reorganizar partes, puedes averiguar qué va hacia dónde, y sigue en esa etapa flexible. Una vez que llegues a la etapa de código, vas a estar un poco más encerrado. Entonces si no estás trabajando solo, ya sabes, si estás trabajando solo, solo eres tú y tu cliente s o el escenario. No tienes que preocuparte tanto por la comunicación con un equipo. Todavía hay un equipo sin embargo, pero con un equipo de pareja de personas, sabes esta etapa un súper útil porque pone a todos en la misma página y recordar todas las cosas y diseño la comunicación va a ser clave 6. Métodos de trabajo de la calidad: como con todas las cosas y el diseño, necesitamos averiguar qué sistema funciona mejor para ti, que va a ser el que sea más eficiente en el tiempo y el que te va a dar los mejores resultados. Entonces lo que tenemos que hacer es averiguar qué sistema funciona mejor y experimentar para que podamos averiguarlo . El más básico sería simplemente empezar con un simple boceto. Tan solo saca tu idea deshuesada. Se puede pensar en esto como una clase de dibujante. Se consideraría el dibujante gestual. A partir de ahí, podrías simplemente seguir adelante y entrar en el código. Esta sería la versión más sencilla y directa de generación de ideas para tu trabajo . Ese paso sería comenzar con el encuadre real del alambre, ya sea e alta def para baja def, y luego empezar a vaciar en algunos de esos elementos visuales solo para dar un poco más consistencia. ¿ Cuáles son las imágenes? Ya sea el texto, ¿cuáles son los encabezados? Una vez que tengas eso resuelto, entonces puedes seguir adelante y entrar en la parte de codificación de tu proyecto. Muy bien, para nuestra tercera versión, lo adivinaste. Vamos a empezar con ese boceto. A lo mejor Añada también alguna lista a esta lista. Hacer podría ser una gran manera de tener idea generando para tus proyectos. Después de eso, salta a remolque. Marco de alambre, alta def Baja. Def. De cualquier manera , lo que funcione mejor para ti y luego agrega algunos de esos elementos visuales. ¿ Cuáles son las imágenes? ¿ Cuáles son las porciones de texto para su sitio? Una vez que tienes ese rubor un poco, lo adivinaste. Puedes subirte y empezar ese código. Yo sólo quería tocar brevemente los elementos visuales thes air, los detalles que van a entrar en juego una vez que empecemos a involucrarnos un poco más en nuestro proceso. Uno de estos detalles a los que debemos prestar especial consideración cuando lleguemos a la etapa orientada al detalle es la tipografía del sitio. ¿ Qué usarás para el encabezado? ¿ Qué vas a estar usando para el cuerpo, etcétera? ¿ Tienes alguna fuente Web que necesites para rastrear? ¿ Cómo vuelve a empatar este en el branding? Estos pequeños detalles van a entrar en juego después de que tu encuadre de alambre esté terminado así no te empantanen por el color. El color va a venir después del encuadre del alambre también. ¿ Vas a usar un generador de esquema de color para esto? ¿ Ya tienen una identidad de color de marca preexistente con la que ya asocian su marca? ¿ Y con qué tipo de imágenes vas a estar lidiando para tu página web o van a ser más grandes? ¿ Van a estar más al cuadrado en una especie de estilo blawg? Ya lo sabes? ¿ Se vinculan al artículo o se sabe que están vinculados a otras fuentes? Estos aire, los detalles que hay que pensar cuando se trata de las imágenes? A lo mejor parte de las imágenes es que vas a tener que lidiar con crear todos tus botones y radios y todos los bits y bobs que entra en esto. Voy a poner esto en la bonita pila etcétera, ¿sabes? ¿ Va a tener video? ¿ Tienes enlaces en redes sociales, etcétera? Los contactos, los suscritos. Esto va a entrar en esa pequeña, ya sabes, olla de vajilla de miscelánea. I Entonces los detalles por los que te estarás preocupando pero no te preocupes por el tipo de detalle finito de ellos porque con encuadre de alambre, solo estás buscando los huesos desnudos. Estás buscando el esquelético. Después de pasar por esa etapa, entonces puedes empezar a ponerte quisquilloso con tu diseño. 7. Consideraciones de diseño de sitio web: antes de empezar a cualquier proyecto de diseño, tenemos un par de consideraciones a las que debemos prestar atención antes de saltar. En lo que hay que pensar es en el quién qué? Por qué y cómo de su proyecto de diseño. El 1er 1 el que ¿Quién es tu público objetivo? ¿ Quién va a venir a esa página web y quién es el foco? El siguiente área en la que concentrarse es el qué? ¿ Cuál es el objetivo del sitio y qué vas a hacer para cumplir esta tarea? El por qué es un elemento en la página que no estamos diseñando al azar y no estamos tirando elementos hacia abajo solo para risas. ¿ Por qué? ¿ Por qué está en la página? ¿ Por qué aire lo anclas en ese lugar? ¿ A qué propósito sirve? Nosotros lo entregamos con tu toma de decisiones esta sección te está permitiendo descifrar esa porción hacia fuera. Y por último pero no menos importante, ¿ cómo están todos los elementos en tu página y en tu sitio? Unificado. ¿ Cómo vas a empatar todo? ¿ Cómo vas a utilizar esos elementos y principios? ¿ Cuál es esa meta final de unidad? Este es el momento de diseccionar esta porción y averiguar cómo vas a hacer realmente esta tarea 8. Consideraciones de elementos: una vez que tengas el quién, qué, por qué y cómo resuelto. Ahora es el momento de cavar aún más profundo. Entonces, ¿cuáles son las consideraciones del sitio en las que debes estar pensando primero? ¿ Cómo se ve tu dedo del pie de navegación? ¿ Cuál es tu cabecera? ¿ Cuál es tu pie de página? ¿ Cuál es el contenido real va a estar en la página? ¿ De dónde viene? ¿ Y qué plazos necesitas establecer para esas imágenes? ¿ Estás brindando las imágenes? ¿ Su cliente está proporcionando las imágenes? ¿ Vas a tener una barra lateral? ¿ Una búsqueda? Lejos. ¿ Y los elementos interactivos? Entonces, cada vez que estés rompiendo esto a tu encuadre de alambre, ten en cuenta también estas partes y piensa en dónde estarán? ¿ Cómo se van a conectar entre sí y cómo se van a unificar en todo el sitio? Entonces si estuvieras bastante seguro con qué elementos necesitabas lidiar primero, esta es una buena lista de inicio para ti. Para aquellos de ustedes que son nuevos en el diseño Web usado, se trata de un chico para averiguar qué parte hacer necesitas para crear tu conjunto 9. Técnicas de la de Wireframe de lo Fi (analoges): todo bien. Hora de empezar para esta sección. Vamos a lidiar con lo que yo llamo el análogo. Entonces el papel, el post, anota los marcadores. Sea lo que sea que tengas manos en las que puedas usar, puedes usar las pizarras y puedes usar las pizarras blancas. Además, si lo son, estás disponible para mi demo. Yo sólo voy a lidiar con el periódico porque está justo aquí frente a nosotros. Está bien, así que agarraremos mi práctico marcador de dandy Sharpie para que sea más fácil de ver. Pero puedes tener tus lápices. Puedes tener marcadores de tema, los marcadores de destellos. Cualquier cosa que haga una marca va a hacer el trabajo. Por lo general, cualquier cosa que gira alrededor del mundo, drawling tiende a asustar a la gente. Entonces lo que tenemos que hacer es quitarnos algo de ese tipo de mito. Cuando estás haciendo un boceto, tus bocetos no se basan en el concepto de perfección. lo que vas a estar trabajando es solo lidiar con ello de conseguir la idea de aquí en adelante. Por lo que no te preocupes por tener todo perfecto y alineado. Recuerda, por eso estás enmarcando. Solo estamos bajando las ideas para ver si van a fluir y si van a funcionar. Por lo que para el 1er 1 en drawling, puedes hacer lo que se llama el boceto de gestos. Entonces el dibujamiento de gestos es solo, ya sabes, no te estás preocupando necesariamente de que todo sea agradable, ordenado y perfecto. Te preocupas por bajar la idea y simplemente capturar ese momento áspero en el tiempo. Entonces si estas son nuestras tres páginas, esto sería decir, por ejemplo, la página principal sobre la que hicieron en el contacto. Entonces, solo empecemos con lo que con amor me referiré como los tres Fundamentos. Entonces si por tu proyecto de clase cuando estamos haciendo nuestras tres páginas y entonces no estás seguro en cuáles trabajar, haz el hogar sobre en contacto porque son más o menos estándar y estables a lo largo de cualquier inicio de página Web. Este es el que van a ver primero, ese va a ser el que está justo fuera del bate. Entonces para nuestro en este caso, estilo gestual, tal vez voy a tener mi encabezado en la parte superior, y voy a tener aquí las historias de desplazamiento. A lo mejor una foto y otra historia, y habría una pequeña barra de desplazamiento y luego tendríamos quizás enlaces de redes sociales aquí videos . O simplemente pongamos un video aquí porque estamos anunciando algo o ¿qué tienes? Y esto se siente bastante bien, porque estás como, OK, sé donde sabes. Estoy pensando que esto necesita entrar en eso, ya sabes, tal vez nuestro menú. A lo mejor pondremos nuestro menú justo debajo de nuestra barra de encabezado. Y así para nuestra página sobre, sabemos que tenemos esa parte que debe traducirse hacia abajo a ella. Por lo que nuestro encabezado de imagen y luego nuestro menú. De acuerdo, entonces para el acerca, como que ganamos eco el mismo tipo de postura porque queríamos parecer que es eso unificado para esto. Voy a tener el texto contando la historia del sobre. Y tal vez esto sería una foto. Aquí tienes una hermosa foto. Y tal vez esta es una imagen de sus productos, sea lo que sea. Entonces no estoy siendo exacta. No estoy siendo, ya sabes, deliberado con mi marca haciendo. Simplemente estoy bajando la idea para poder ver, ya sabes. De acuerdo, tal vez no me guste cómo funcionan estas fotos al aire. ¿ Sabes qué? Si en cambio lo doy la vuelta o hago esta parte dos columna. Por lo que es un poco más fácil de leer. Te da la oportunidad de verlo y empezar a trabajar a su alrededor. Y se obtiene por la página de contacto. Ahí está nuestra gran pancarta, y ahí está nuestro menú. Y luego para la página de contacto probablemente tendrá un titular. Uno aquí. Estamos como, estamos contentos de ayudarte. Y luego vamos a tener nuestros campos de entrada. Entonces nombre, dirección, ya sabes, cheque. Sí. Si quieres suscribirte en un botón de envío y entonces tal vez por esto solo lo voy a dejar en blanco porque queremos ver algo del blanco, la página, así que no es demasiado abrumador con el diseño que vas a notar justo al bate. Hay algo de lo que no me preocupa. No te preocupas por el color. No me importa bastante lo que esté pasando ahí todavía. Todavía no estamos en esa etapa. Um, no me preocupo por los detalles. Al igual, ¿cómo se ve este encabezado en realidad? ¿ Qué hacen mis Sin botones, Aviadores. De hecho te ves así y no me preocupan mis tipos de letra. No estamos haciendo los detalles. Estábamos pensando en ello en un marco rápido, esquelético. Punto de vista. Está bien, así que este es nuestro estilo gestual lo va a tirar a un lado. Y si quieres conseguir un poco más preciso, puedes agarrar a nuestro amigo la regla. Ahora, también tengo papeles de rastreo y tabletas de dibujo. En realidad sí me gusta el trabajo del dedo del pie en papel de calco también, porque te dará la capacidad de hacer capas encima de él. Entonces si quieres probar el papel de calco, eso también es realmente bueno, y es útil. Está bien, entonces para esta siguiente parte, pongámonos un poco más precisos. Por lo que esto será para aquellos de ustedes que conocen, como un poco más de estilo exponente al horno cuando se trabaja. Y yo sólo voy a Teoh, hacer una caja, va a servir como mi página. Yo sólo voy a uno en cada página, así que voy a dar una linda marcita para que básicamente pudiera conseguir mi marco el mismo, que sería el mismo en todos ellos, y sólo me dio tal vez una pulgada más. Entonces, esa manera tengo uniformidad. Entonces para este, sólo voy a hacer demo con uno, pero será lo mismo para las tres páginas. Entonces cada vez que tengas este solo caparazón armar un reino. Fotocopia si lo deseas o construye la caja en tienda de fotos se ilustran y solo imprímelos . Y solo utilízalo como una guía de ID de plantilla que esto funciona muy bien también. Entonces construye esas líneas para la caja. Y para esto vamos a conseguir un poco más,ya sabes, ya sabes, exactas versus ya sabes, solo el áspero estilo a mano alzada del gesto. Este, vamos a ser más especie de dibujante, como con nuestro estilo de trabajo. Muy bien, encabezándolo Esto. Está bien. Entonces ahora tenemos nuestro show, y esto va a tol esta página principal derecha para que pueda hacer un seguimiento de ustedes saben, donde estoy con esto. Hazlo por cuantas, muchas páginas que estés buscando con él. Me voy a quedar con los mismos conceptos que lo puedes ver en este, ya sabes, diferentes estilos de trabajo. Pero para este, vamos a conseguir eso. Simplemente vamos a tener el encabezado de la imagen en la parte superior de algún tipo. Entonces sigamos adelante y construyamos eso. Entonces voy a ir por el mío, y creo que solo voy como media pulgada. Siento cuarto Greenwich y luego 3/4 pulgada solo para mantener una buena proporción y otra vez eco con lo que estábamos haciendo por ahí. Y yo sólo voy a por este, tenerlo arco lado a lado. Por lo que va a llenar la página cada vez que voy a hacer mi trabajo de diseño. Ahora, cada vez que digo espacio sombrerero así que sea cual sea mi banner o lo que sea que esté pasando aquí arriba como el nombre de la página principal o el nombre del sitio, ¿qué tienes? Um, no necesariamente tiene que retomar todo esto gráficamente. Simplemente va a vivir en este contenedor. Este es el espacio en el que está haciendo su hogar para esto. Queremos mostrar que esta es una imagen de algún tipo. Por lo que necesitamos hacer una X sobre. El X se está mostrando y te vas a dar cuenta. Esto también es un ilustrador y en diseño, Siempre que estuvimos trabajando con una caja de imágenes, tiene esta X a través de ella, está mostrando que el contenedor está sosteniendo algo, y que algo es, en este caso, una imagen. Muy bien, Así que de nuestra otra, entonces teníamos nuestro menú, y yo sólo voy a hacer una línea para eso también. Ahora, eso debería ser suficiente. Y entonces el menú, por supuesto, mantendría consistente a lo largo de cada una de nuestras páginas. Y ya sabes, puedes sombrear esta parte si quieres, porque sí se acerca bastante a eso. O puedes hacer tu ex. Algunas personas de aquí cambiarán los colores de la misma. Por eso tengo a los coptos fuera. Además, eso va a depender de ti. Se puede, ya sabes, tal vez navegaciones aire va a ser de un color. Las imágenes van a ser otra y Texas otra, así que va a depender de qué sistema estés trabajando. Simplemente lo voy a llenar, ya que el tiempo es una especie de esencia aquí. Pero de nuevo, depende de tu estilo de trabajo. Está bien, entonces sabemos que esto va a estar en el menú y en el otro. Lo que teníamos era nuestro titular y sólo voy a usar el rincón de mi gobernante para esta parte. Muy bien, aquí está nuestro titular. Uno en esto es tal vez esto va a ser una página blawg. Entonces para nuestro blawg, ya sabes, queremos que nuestros artículos sean el líder en nuestra página para nuestros televidentes, para el público, para los lectores. Entonces para esto puede ser fuera este tipo tienen mina uno, porque para nuestro más alto sabemos H uno es el más alto. Es necesario un elegir el siguiente. Entonces adelante y demás eso entonces de esa manera lo sé para ese espacio que va a ser lo que sea el titular, y entonces vamos a tener nuestro artículo real. Entonces sigamos adelante y redactemos eso aquí. Está bien, adelante y recuerda que éste iba a ser nuestro tipo de desplazamiento. Entonces solo voy a Teoh hacer que parezca que está sangrando de lo que se consideraría el pliegue de la página web El pliegue que significa como un periódico donde lo volteas. Pero en este caso, el primer desplazamiento a través. Entonces el segundo desplácese por llevando al resto de la misma. Y sólo voy a mano alzada esto por el tiempo, y esta sería nuestra barra de desplazamiento. Ahí vamos. Entonces para texto, tienes un par de opciones diferentes con esto, puedes dio otro se puso aquí abajo la clase garabateando líneas como verías en cómics para dibujos animados así que parece que está implicando la línea para que solo puedes hacer líneas rectas para implicar que el texto estaría ahí. Y creo que decidimos probar la columna de dos para esta. Por lo que nuestro contenedor va a tener dos columnas de texto. Entonces para la mía, sólo voy a hacer la recta y repetirla. Uno. la Segunda columna. No nos preocupamos por los detalles. Sabemos del color. No nos preocupa el tipo, pero sí queremos ver como va a fluir esto? Y entonces sólo pondré en la única imagen los pavos que teníamos pasando. Teníamos un video por aquí, así que sigamos adelante y áspero eso en. Y puedes usar papel rallado para esto. Además, esto sí funciona muy bien para eso. De esa manera puedes conseguir todo lo que sabes un poco más recto que lo que estoy más en ello. Esta porción, esta porción del juego y al igual que antes, con lo que sea que esté pasando de nuestra imagen Encabezado, vamos a hacer la X para que la X vaya a mostrar imagen o colocación de video. ¿ Qué tienes Así que para este, si estamos haciendo una caja que tenga una imagen de algún tipo en ella. Es la caja y haces tu ex si es texto garabateando forrado o simplemente líneas rectas. Entonces para esto, ya sabes, marcadores, papel, papel, cualquier cosa con la que te sientas cómodo. Hasta tengo de mis notas amarillas favoritas con las que me gusta trabajar también, que siempre que esté trabajando, Así que digamos que solo voy a gestar esta otra vez. Mismo estanterías. Ahí está nuestra cabecera. Ahí está nuestro menú, y sólo voy a garabatear sobre eso porque no voy a tomarme el tiempo para que esta demo haga todo el detalle. Muy Así está nuestro video o titular uno y luego nuestro artículo real con nuestras dos columnas de texto. Entonces, ¿qué tiene de bueno cuando estás trabajando como un cuaderno de bocetos o un bloc de notas? Entonces puedes empezar a hacer notas como Ok, así que tal vez Unidad Uno va a ser un video de YouTube sobre esto va a ser el Blawg. Blawg publica artículos, y van a ser cronológicos, etcétera. Por lo que se puede cronológico. Perdón, cronológico. Ahí vamos. Entonces podemos empezar a hacer notas sobre ella y construirla a ese siguiente tipo de capa de detalle. Entonces tenemos el shell y luego podemos empezar a hacer un seguimiento de ustedes saben en qué estamos pensando . Entonces podemos empezar a decir Ok, tal vez por el fondo, ya sabes, ellos quieren su El cliente quiere el número de código hexadecimal del cliente. Sea lo que sea para eso para el color en el fondo. Esto te da una manera de empezar a rellenar esos detalles a su alrededor sin llegar a abajo en el detalle del boceto. Y entonces todo el mundo puede verlo si estás trabajando en equipo y le agregas sus bits y bobs. Además, otro sistema con el que es bueno trabajar es publicarlo notas. Así que se pegan. Las notas son realmente agradables para esto también, porque podrías dividirlo en los sistemas que estás buscando. Está bien, entonces tenemos una página de inicio ahora, solo pon página ahí para que podamos ver y luego ¿qué? Tenemos que ir al menú de la página principal. Y luego lo que sean los artículos que estén en el menú y solo, ya sabes, el sobre artículos de contacto, bebé, un portafolio enlaces, no lo sé. Lo que sea. Sea lo que sea que vaya a implicar tu proyecto. Puedes escribir eso en tu post it Nota. Además, pongámoslo un poco para que no se superpongan. Titular uno. Por lo que esto sería para el artículo principal. ¿ Qué? Y luego puedes empezar a entrar en detalles como, ¿Cuáles son esos artículos que tu cliente está buscando? ¿ Nuevo? Ni siquiera se me ocurre ningún fuera de juego como códigos de cupón de ahorro de compras de vacaciones, etcétera. Pon el siguiente post it anota el video de YouTube del que estamos hablando, y este podría haber sido el único video de intro para que no supieras exactamente cuál es , y eso va a ir al lado de aquí. Ahora, cuando estoy trabajando con Post it notas, tiendo a gustar el trabajo del dedo del pie en una pared para que pueda especie de diseñar todo y tener reorganizar partes móviles a base de hierbas con esto encendido. Y entonces también alguien es como Bueno, ya sabes, me gusta el video de YouTube, pero lo que creo que tiene que pasar es que tiene que ir aquí, y el artículo va a estar del otro lado para que puedas barajar las cosas alrededor y tal vez hacer un boceto suelto después. Una vez que tengas todas las partes móviles dispuestas como grupo. supuestas notas son increíbles con los grupos. Siempre tengo montones de post it notas en mis aulas. Y luego cada vez que vengamos a esta etapa, solo toma una olla entera de ellas y ve a la ciudad y te gusta y te ayuda a averiguar qué partes necesitas. Cuántos artículos, ¿Dónde se van a posicionar? ¿ Qué va en la página del portafolio? ¿ Qué imágenes necesitas tomar o ya tienes? Por lo que te ayuda a organizar publicado ese sistema es realmente bonito, porque entonces el equipo puede trabajar en conjunto, y luego puedes verlo todo dispuesto frente a ti y reorganizarlo según sea necesario, por lo que este probablemente vendrá primero. Esto es más de lo que voy a decir, esa idea generando etapa de qué partes realmente necesitamos y luego podrías entrar y simplemente trabajar en la porción de boceto de la misma. Entonces si estás usando la pizarra o el método de pizarra blanca, solo va a depender cuál tienes en sabes que estás listo en mi casa, en mi casa office, tengo una de las paredes pintadas con la pintura de pizarra y luego cada vez que estoy trabajando, solo puedo sentarme y escribir o dibujar lo que sea que necesite y luego borrarlo cuando se hagan esos proyectos y luego en el trabajo en el aula, tengo la pizarra blanca y la pizarra. Por lo que los estudiantes, dependiendo de con cuál se sientan más cómodos, pueden usar cualquiera de ellos. Y muchos de nuestros proyectos están orientados a grupos para el diseño web. Por lo que esto es mucho más fácil cuando están trabajando en equipos. Entonces lo que voy a recomendar es, como siempre, ¿ cuál crees que te va a gustar más? Cual tienes las herramientas que ya conoces, para experimentar. Entonces empieza por ahí. Entonces si te sientes cómodo con el bosquejo, adelante y bosqueja. Si no tienes curiosidad sobre cómo es la pizarra Blanca y quieres probar listar y dibujar en su intento eso también, no importa lo que hagas, lo que te voy a recomendar, tomar fotos de lo que sea proceso es en lo que estás trabajando y compartimos en nuestros proyectos de clase a continuación, para que podamos ver con qué has experimentado. Y también puedes decirnos cuál sientes que funciona mejor y cuál crees que podrías seguir adelante en el futuro para tus proyectos. Entonces, como siempre, comparte para que podamos ver qué está pasando. Y entonces de esa manera podrás explorar todos los métodos de encuadre de alambre analógico para que puedas averiguar cuál funciona mejor para ti y tu eficiencia laboral. 10. Hi Fi de la Wireframing con Illustrator y Photoshop: todo bien. Ahora es el momento de explorar las opciones de encuadre de alambre del sitio web de alta definición. Y para esto, vamos a pop en ilustrador, y también vamos a echar un vistazo a la tienda de fotos en. Y para esto, te he hecho plantillas, y van a estar en nuestra área de proyectos de clase. Entonces si quisieras usar un shell preexistente, uno estará listo para ti. ¿ Todo bien? Tan alta def va a estar un poco más involucrada que nuestra baja def, donde estamos tratando de sólo conseguir lo básico, ya sabes, resuelto. Pero vamos a estar usando nuestras columnas y usando más de un sistema de organización para ello, igual que nuestro tiempo analógico. Voy a estar usando el mismo concepto que estábamos haciendo ahí. Entonces eso no es reescribir en la rueda. Está bien, Así que para el mío, estábamos empezando con nuestra cabecera. Um, Entonces si este sea el sitio web, nombre un banner. Este es el espacio donde la información principal para tu sitio web en realidad va a ir ahora por esto , lo que voy a recomendar es conseguir un sistema Ah, bastante temprano. Similar a nuestro análogo. Entonces un análogo, hablamos de nuestros marcadores. Entonces tal vez un color iba a ser, ya sabes, titulares representativos. Uno iba a ser el tipo uno iba a ser cuadros de imagen, etcétera. Entonces tenías algún tipo de sistema a ella. Lo mismo aquí, ya sabes, ¿Cuál sería tu sistema? Um, tal vez en este caso, no quiero un esbozo. Yo solo quiero poder ver el color de caja. Y entonces tal vez mis cajas, Uh, tal vez voy a hacer el pelo gris oscuro como un gris de gama media. Y entonces esas serían mis cajas de imagen. Y entonces mi tipo será otro. Entonces diré que este color va a ser nuestra imagen. Voy a volver a cambiar a mi selecto regular y cómo lo teníamos. Waas Teníamos nuestro menú debajo, así que sólo voy a copiar, y lo voy a pegar. Muy bien, Transforme libre. Voy a golpear mi letra e. y de esa manera, podría hacerte saber, la báscula un poco más en proporción a esto y otra vez, ya sabes, esto va a ser un bar? Quedan las cruces santas? ¿ Es correcto? Ya sabes, tal vez tu naff cuando lo estás haciendo se va a quedar ahora, um, um, Así que si este es el caso, es donde estamos una especie de jugando con él, viendo lo que se ve bien, qué se siente bien en la página para nosotros y para nuestro diseño. Tomamos mucho café y pegamos una imagen por aquí, así que sigamos adelante y pongamos eso en su lugar y teníamos otro debajo de él. Sólo voy a dejar que ese poquito pase por el fondo. Entonces no me voy a preocupar por ese pequeño detalle ya que está pasando sólo ese poquito . Entonces no preocuparse por eso. Está bien, ahí están nuestras imágenes, y si queremos apagar a nuestros chicos para que podamos ver qué está pasando, esto es lo que tenemos. Tenemos nuestras cajas de imagen en su lugar. Ahora tenemos que empezar a pensar en nuestro tipo. Entonces voy a usar la misma cantidad de espacio para la mayor parte de aquí, y este va a ser para nuestro tipo, deslízalo hacia abajo solo un poquito para que estén alineados. Si quieres ponerte un poco quisquilloso aquí, puedes Va a depender de ti. Está bien. Y entonces para esto no queremos que este sea del mismo color, porque esto se va a poner realmente confuso. Entonces tal vez para mi tipo, voy a tener un poco de encendedor. Gris. Está bien, entonces esta va a ser mi H uno. Entonces el H, como sabemos, va a ser la forma más alta de nuestra jerarquía, tamaño sabio, y entonces nuestro artículo o sub encabezado va a ir ahí y luego nuestro artículo, y luego simplemente seguimos construyendo de aquí. Para que esa waas la imagen que iba a nuestro YouTube, así que no la voy a conectar realmente a esa línea de rejilla. Pero entonces el siguiente artículo que teníamos estaría viniendo debajo de aquí, y luego teníamos otro artículo debajo de él. Y lo bonito con photoshop e ilustrador es que puedes, ya sabes, construir tus conceptos con bastante rapidez con estos eso que sabes a dónde van, justo al bate. Te alejas solo un poco. Entonces probablemente él en este momento es que estamos trabajando en cierto sentido, justo en contra del filo. A lo mejor no quiero eso Así que voy a seleccionar todos estos, y voy a empujarlos. Y además, quería tener espacio para nuestra barra de desplazamiento, y esto se siente mejor al instante. Entonces este es nuestro tiempo de juego. Lo espacialmente Se ve bien. ¿ Cómo está la vista? Vamos a estar flotando, Ya sabes, ¿cuál es el flujo para el espectador? Um, ¿por qué les va a facilitar la navegación? Está bien, así que para estos, sólo voy a ocultar que la guía otra vez para que podamos ver qué está pasando. Tenemos algún tipo de espacio extraño ahí en el medio. Entonces lo que haría es pasar un límite más tiempo jugueteando entre, ya sabes, tal vez en vez fuera de esto, me gustaría tener que arriba, o éste se subdividiría. Y tal vez esto sea una imagen. Pero por aquí va a ser ah, alimentación en vivo de nuestros instagrams. Y de esa manera la gente puede ver lo que nuestro nuevo post waas. Um entonces eso va a ayudar a esa estructura justo fuera del bate ya se ve mejor. Entonces, con las rejillas, esto es lo básico. ¿ Qué? Diré de cualquier diseño con rejilla. Entonces en este caso, las columnas, pero es una cuadrícula como sistema. Nos está dando este sentido del orden, y a través de esto en realidad podemos dar de baja el baile en la página y ver qué se ve bien estructuralmente para nosotros y para nuestros televidentes. Entonces esto nos da ese tiempo de juego que normalmente necesitamos para averiguar qué está pasando. Y cómo podemos hacer de este un sitio que sea realmente agradable y utilizable para quien vaya a venir a visitar para nuestro ilustrador si vas a hacer la alta muerte o la tienda de fotos, estamos mirando tres páginas. Por lo que éste era representativo de nuestra página principal y yo seguiría adelante. Y como dije, que el contacto y sobre los valores por defecto, si no estás muy seguro cuáles construir de ti ni siquiera tienes que tener cabecera hasta aquí . Um, solo juega y ve qué espacios funcionan mejor para ti y el sitio que tienes en mente. Este es un diseño realmente simplista. Puedes ir todo tipo de locos con este, Así que juega con el ilustrador Um, si quieres, puedes entrar, y tal vez en una nomenclatura de pareja es a ello. Para que sepamos que este es el titular. A lo mejor podríamos tener uno que diga, ya sabes el artículo, y solo voy a duplicar ese Oops. No duplicó el equivocado. Um, Y entonces de esa manera, ya sabes, si estás mirando hacia adelante más tarde, sobre todo cuando hemos tenido los cambios para por aquí. Entonces este era ahora nuestro feed de instagram. Um ¿Qué? Sí, creo que cambiaré eso. Voy a mantener eso como el gris más oscuro desde que alimentar. Y tal vez esto sean anuncios o algo así. Entonces pondremos anuncios aquí y la primera intro de YouTube. Para que de esa manera podamos recordar dónde estábamos con todo. Tú también, en lo verdadero y nuestro menú. Entonces para el alto def uno, se puede conseguir un poco más etiqueta lee y estructura orientada, pero las cajas nos van a dar una especie de pre forma para empezar. Hace que sea un poco más fácil para este s o jugar con él y ver qué funciona para ti. Y también voy a entrar brevemente y mostrarte cómo se ve esto y seguir comprando también . Antes de meternos en tienda Feder, aunque quería mostrarte un par de ejemplos de algunos proyectos estudiantiles s O que podrías hacerte una idea de a dónde podría llevar esto para tus propios proyectos. Cada uno de estos que voy a mostrar estamos hechos en uno de nuestros métodos. Este 1er 1 realmente se iba a hacer en eso presume Tomic, que vamos a llegar con nuestra sección en línea. Uh, este sí tiene una especie más de dibujante doodle como apariencia para él. Este también se hizo en línea usando herramientas de encuadre de alambre en línea para que puedas ver que puedes obtener una amplia variedad con el resultado y la salida reales. Con esto, va a depender de tu estilo de trabajo. Entonces, como de costumbre, asegúrate de experimentar y ver cuál te gusta más para este. Estábamos trabajando en Illustrator. Para que veas que sabes, el éste tiene a los compañeros texanos. Te vamos a mostrar cómo hacer eso a continuación, Así que te da una idea de cómo podría parecer una vez que realmente tenga algo en la página. Y eso es para este. Este se hizo en las tiendas de fotos que esto nos va a Segway a nuestra demo otra vez. Está usando el texto de relleno. Tenemos nuestras cajas, este estudiante, pero los ex en ellos en lugar de usar, uh, las grandes cajas fuera para que puedas ver que hay una variedad de formas de hacer esto. Experimentos ven cuál funciona mejor para ti. Fuiste, ya sabes, cajas codificadas por colores. ¿ Quieres usar relleno, texto e imágenes para ser el exceso? Descubre cuál funciona mejor para ti. Entonces ahora vamos a saltar a conseguir texto de relleno y ver qué podemos hacer en una tienda de fotos. Está bien, así que ahora vamos a hacer otra versión de Ah, hola fi. Ah, técnica de marco de alambre. Con este tiempo, vamos a entrar a una tienda de fotos. Pero primero quiero agarrar algunos aprender texto ipsum. Entonces para esto, adelante. Tipo en Lauren Epsom y bajo la primera búsqueda, probablemente vas a tener que salir lo mismo. Quieres los labios de generador, adelante y haz clic en esto, y para desplazarse hacia abajo solo un poco. Ver enseñanza de C dice cuántos párrafos quieres o palabras o mordeduras o listas, y ¿quieres que empiece con la Lauren. Es, um entonces voy a decir que dos párrafos deberían ser suficientes y luego seguir adelante, generar y luego seleccionarlo y copiarlo de esa manera. Está en tu tablero de arte para cuando lo siento, No tu tablero de arte tu portapapeles para siempre que estés listo para usarlo. Muy bien, así que ahora estamos listos para subirnos a la tienda de fotos, igual que un ilustrador. Ya tengo una plantilla configurada para ti. Este es 1200 por miles. Es solo un tamaño ligeramente diferente. De esa forma tienes diferentes opciones con las que trabajar, por lo que también puedes ver cómo funciona tu diseño a diferentes escalas, verdad? Entonces va a ser básicamente lo mismo. Voy a usar el mismo estilo que lo estábamos haciendo más en, um, um, son versión analógica. Entonces sigamos adelante y construyamos un simulacro aquí arriba. Vamos a necesitar son constructores en forma. Entonces voy a agarrar mi herramienta de rectángulo y voy a seguir adelante, y este va a ser ese espacio al que, um, vamos a tomar para nuestro sea cual sea nuestro nombre de sitio, o va a ser, tú saber, una imagen va a estar centrada. ¿ Se va a dejar? ¿ Es correcto? No estamos del todo seguros. Pero este es el contenedor en el que se va a vivir del dedo del pie. Voy con el dedo del pie. También cambia el color. Vamos con tal vez un azul oscuro y esto va a ser representativo de, Ya sabes, cualquier imagen que vamos a usar va a ser ese azul. Muy bien, También vamos a necesitar nuestro menú, y tenemos eso sentado justo debajo donde sea que vaya a estar nuestro nombre de sitio web. Y entonces de esa manera es consistente a lo largo de todos ellos. Y así recuerda por hacer nuestras tres páginas para un proyecto, más o menos la navegación y el nombre de nuestro sitio en la parte superior va a mantener una posición estable porque sí queremos tener unidad dentro de nuestro diseño. De acuerdo, así que a partir de ahí, lo que vamos a necesitar para dio es averiguar dónde eso creo que teníamos nuestro YouTube, así que pongamos nuestro video de YouTube. A lo mejor se va a vivir aquí, y sólo voy a cambiar a mi selecto regular y voy a aguantar y quiero un Mac. Voy a usar mi clave de opción. Ah, Esto podría ser una alimentación para, um Instagram. Para que así pudiéramos tener nuestras redes sociales aquí también. Uh, de aquí, sigamos adelante. Vuelve a nuestra herramienta de rectángulo. Uh, tal vez por este, voy a romperlo sólo unos pedacitos. Tenemos mucho espacio. Entonces creo que para este, lo que vamos a dar es nuestro titular, y voy a cambiar el color. Así son el azul iba a ser nuestras imágenes. Y hagámoslo un azul claro para texto de esa manera, es algo similar, pero un poco diferente también. Um, entonces de esa manera, ya sabes, nuestros titulares van a tener una agradable consistencia a través de ella y podrás decir la diferencia entre los dos van a mantener presionada la tecla de opción porque este aire va a ser lado a lado leyendo artículos y sigamos adelante y hagamos la caja para nuestro texto. Entonces ahí es donde el contenedor para nuestro texto va a estar duplicándolo sobre Beautiful. Entonces estamos consiguiendo que nuestros artículos se coloquen en ella. Um, tal vez aquí abajo, no voy a pasar por todo, pero tal vez ahí abajo vamos a seguir adelante y averiguarlo, sabes, como, porque van a ser más artículos, fotos, ¿sabes? ¿ Es sólo la pagina de una página o vamos a seguir desplazando. Estas son todas las cosas en las que vas a estar pensando cuando estés en ese proceso de diseño . Está bien, así que sí tuvimos nuestro texto de relleno, Así que sigamos adelante. Voy a agarrar mis herramientas tipo. Voy a hacer una nueva capa encima, así que no voy en nada de eso, y va a hacer un cuadro de texto, y voy a poner mi texto Lauren ipsum ahí para que podamos ver una especie de cómo se ve una vez que el texto es en realidad ahí y solo lo voy a duplicar y lo hice también, uh, uh, cuando me desplaza hacia atrás por mis capas y apagué nuestras guías y solo voy a hacer una caja llana encima de eso. De esa manera vamos a poder verlo. Entonces, solo hagamos un relleno de blanco. Está bien, ahí vamos. De esa manera podemos tener una especie de idea de hacia dónde va ahora. Aquí sí tenemos un poco de espacio raro, así que no me gusta eso, así que no querría averiguarlo. Los propios cuadros de texto se ven en realidad bastante decentes. Por lo que usando solo tus formas y volcando en algún texto de relleno, estás teniendo una idea de cómo podría sentirse este sitio para quien lo esté visitando. Eso Si te sientes cómodo con photoshop, prueba aversión y photoshop si quieres. Illustrator, adelante y crea una versión e ilustrador como de costumbre, Adelante y guarda tus archivos y sube esas clavijas J a nuestro proyecto de clase para que podamos ver qué estás trabajando. 11. Opciones de Wireframe: así como nuestras opciones de fototienda e ilustrador. Hay algunos sitios web gratuitos que te permitirán hacer simulacros por ahí. Además, sólo voy a reventar a través de un par de ellos para que los puedan ver. Y luego, si quieres, prueba la montura. Ve cuál funciona mejor para ti otra vez. Estos aire, la congelación o las demos libres. Algunos de ellos tendrán costos, pero los que voy a mostrar no tienen costos. El 1er 1 del show es simulacro de flujo. Este está en el plan básico. Entonces hay, por supuesto, algunas limitaciones al mismo. Pero si quisieras, podrías haberte dibujado a mano. Yo cincha. Mira, las bootstraps, las manzanas, APS, etcétera, o simplemente los espacios en blanco pueden depender de las necesidades que tengas. Um, si quieres, solo sigue adelante y empieza con una y solo voy a llamar a esta prueba para que cada vez que vuelva a entrar en ella, podamos ver qué pasa. No, en su mayor parte, todos estos son ah, intuitivos. Entonces lo que ves es lo que obtienes con estos. Entonces, como siempre, solo recomendaría jugar con él y ver, ya sabes, cómo funcionaría esto para ti y hacer tu encuadre de alambre lo iba a salvar, pasar por el siguiente elemento. A lo mejor voy a añadir un botón ahí. Y lo que es bueno con estos es con los elementos preexistentes. Se puede, ya sabes, sólo una especie de juego y no tener que preocuparse por el escenario de construcción, porque en su mayor parte, ya sabes que van a estar ahí para ti. Pongamos algo de texto y solo juguemos con él. Entonces tal vez esto va a ser como una página de galería, etcétera. Entonces solo voy a meterme en los elementos. Se puede ver. Contamos con marcos de navegador, círculos de texto, imágenes, botones, banners, barras de desplazamiento, los botones de radio, corchetes así sucesivamente y así sucesivamente. Diferentes páginas agregando tus imágenes, puedes ver tu flujo. Um, y igual que siempre, juega y mira a dónde te lleva todo esto de nuevo. Esta es solo la versión básica, está bien. Nuestro próximo sitio de freebie que voy a ir rápidamente a través de esos simulacros. Um, y de nuevo, todos los enlaces estarán en nuestras hojas en nuestra área de proyecto de clase en este es un freebie uno también. Para que veas que tienes nuevos contornos de páginas. Podrías empezar con plantillas, imágenes, iconos, uh, etcétera. Y funciona bastante similar a la última. Se puede ver que tiene los encabezados, las etiquetas, los párrafos, botones, cheques, radios, textos. No voy a mostrar esto, ya sabes, el detalle de funcionamiento real. Pero sólo que se puede ver qué elementos existen ahí dentro. Había algunos elementos dibujados de forma ahora de partes, um , espectáculos, bajadas, botones, montones y montones y montones y muchas opciones para elegir de este también. Y al igual que el último, solo juega y ve qué hace. Muy bien, Otro es ir mockingbird dot com y vas a notar una tendencia. Hay, en su mayor parte, muchas similitudes entre todos estos. Vas a tener tu espacio de trabajo y tus gotas de dragón que puedes sacar del lado izquierdo s para que puedas conseguir tu página en un bonito boceto de necesidad, por así decirlo. Es unos botones. Tenemos los botones aquí encendidos, entonces de esa manera podrías tener algunos de los elementos fuera en la página para que puedas averiguar ¿Cómo se vinculan todos? - Otro es Wire frame dot cc, y se puede ver la versión gratuita. Simplemente obtienes un marco de alambre de una sola página, Uh, pero vas a tener las mismas herramientas que tienen los demás. Este que puedes pop entre dispositivos móviles para las ventanas regulares del navegador. Y sólo va a depender. ¿ Cuál es su proyecto y cuáles es su proyecto necesita? Entonces es bonito, pero éste es Puedes escoger y elegir. Ya sabes con qué base quieres empezar. A partir de ahí, es más o menos el mismo estilo de enjuague y repetición. Uh, ya sabes, tienes tu forma puede ganar herramientas. Uh, tienes tus rellenos tipo. Se puede ajustar en consecuencia. Simplemente voy a dejar todo en el defecto para esta demostración. Puedes poner tus imágenes en. Puedes poner tus botones etcétera. Simplemente depende de tu estilo de trabajo. El siguiente es glitzy dot com. Se puede distinguir de inmediato el bate. Ya tenemos similitudes. Ya sabes, tenemos diferentes formas en este caso, así que él son constructores moldeados en las relaciones. Formas básicas. Um, van a funcionar. Exactamente. Ya sabes, lo mismo. Este. puede elegir entre ser una forma o el cuadro de texto. O bien puedes añadir una etiqueta sobre ella. También, uh, reposicionar el cambio de tamaño, Um, dependiendo de sus necesidades. Lo bonito con esto es que sí tiene, uh, las guías de regla con su tomada ve una especie de chicos inteligentes con ella puesta, y vas a tener la misma funcionalidad a la que estás acostumbrado. Si te sientes cómodo con la suite creativa, puedes hacer tus duplicados. Puedes hacer tus copias y pegar. Tiene muchos comandos que puedes usar y navegar con. Um, entonces para esto, solo voy a hacer un par de cajas en repetición para que puedas ver ese proceso. A mí sí me gustan las guías en este. Y cómo se podría trabajar con ellos aquí tiene una buena capacidad de ajuste con ella. Um, puedes contar todo tipo de herramientas, formas, contenedores, formas, botones, radio, lo que sea. Ellos lo van a tener. El último que voy a hacer demo es Masonic. Ambos tan mansos. Esfuerzo. Ambos, Um, adelante esto. Sólo voy a dejar que una especie de velocidad, plaga fondo. ¿ Por qué hablar de ello? Porque en esta etapa, lo estás averiguando. Todos tienen una especie de patrón repetitivo a ella. Esto se puso bonito porque sí tiene una especie de más, o le puedes dar la opción de tener en una especie de look más boquito a su Se ve más gestual en dibujado a mano, lo cual es un bonito tipo de estética con él. Sí tienen una prueba gratuita fuera de éste, y luego también han pagado por la versión eso. Este es un poco diferente. No está basado en navegador, como los otros. Esta, vas a tener que hacer una descarga primero y luego abrirlo igual que el software normal. Pero creo que es un mes de prueba gratis, y luego pagas por mes, similar a la nube creativa. Entonces para éste es solo el divertido para jugar. qué es tan seguro, yo diría Adelante y haz la prueba de un mes solo para ver cómo se ve, y sí tiene muchas opciones con ella. Más allá de solo, ya sabes, la página Web que puedes ver en la parte superior y todos los activos que tienen botones el icono de formularios de contenedores , que , uh, yo o s estas funcionando con mark ups ? Y esa parte de ella es agradable que puedas comunicarte con el equipo con éste? Se podía ver una cabezas, sin gráficos, etcétera. Entonces hay muchas opciones y esta que no están en las otras. Entonces, um, aprovecha esa prueba gratuita de un mes para que puedas especie de ver qué todo lo que tiene para ofrecer . Y si esto es algo en lo que te metes, um, mantenlo en el segundo quemador con tus recuerdos para que puedas volver a él o si estás trabajando en un equipo y estás buscando ese tipo de solución, tiene un montón de opciones dedo del pie trabajar con frente a las otras. 12. Conclusión de marco de Wire: Realmente espero que hayas disfrutado de tu exploración en el análogo, el lo fi, las cinco versiones altas de encuadre de alambre. ¿ Por qué el encuadre podría ser una herramienta tan grande para las etapas iniciales de su sitio web? El diseño te ayudará a organizar tus pensamientos. Ve lo que necesitas. Ve lo que tienes. No ve lo que te estás perdiendo. Entonces solo con lápiz básico, tu papel lo publique notas, photoshop o ilustrador. Incluso nuestras herramientas en línea Puedes construir un marco a un sitio web realmente exitoso. Espero que hayan disfrutado de esta clase. No puedo esperar a ver qué has diseñado en los siguientes proyectos. Y te veré la próxima vez. Adiós.