Diseño web en Affinity Designer para principiantes y un poco más avanzados

1. Diseño de Affinity Designer Video: Si estás pensando en empezar como freelancer diseñador web, probablemente hayas intentado aprovechar la tienda de fotos en algún momento del pasado, y conozco el dolor que tengo cena. Recuerdo pasar días tras días, incluso semanas tras semanas, tratando sólo de recordar ciertas herramientas y efectos. Pero por suerte vivimos en tiempos en los que si quieres empezar como freelancer diseñador Web. Pero puedes simplemente dejar a un lado la tienda de fotos. Hola, mi nombre es David Tyminski, y en este curso aprenderás a usar una aleta en diseñador para diseñar sitios web de la A a la Z. Este curso está repleto de valiosa información. Cualquier novato de diseñadores Web debe saber, como cómo elegir los mejores colores y fondos para tus sitios web. ¿ Qué hace un sitio web diseñado profesionalmente? ¿ Cuáles son las tendencias modernas de diseño Web que debes conocer? Y eso es sólo la introducción, porque el verdadero pan y mantequilla del discurso está dentro de sus partes prácticas. Nos ensuciaremos las manos y exploraremos todas las herramientas y técnicas armas profesionales y nos negaremos a diseñar un sitio web dentro de diseñador afinidad Eso incluye construir marcos de alambre y srenas, que son los bloques de construcción de cada utilizando activos para hacer que el proceso de diseño sea ultrafino, creando estilos de texto que te permita cambiar fondos en un abrir y cerrar de ojos. Y, por supuesto, diseñando un sitio web, aprenderás a diseñarlo desde abrir el archivo a través del lugar y las imágenes, agregando texto y fondos justo hasta exportar en el diseño que finalmente repartirías a un cliente. Tenemos mucho de lo bueno que cubrir en este curso, y realmente creo que te ayudará tremendamente en el diseño de sitios web increíbles dentro un ajuste al diseñador, así que me encantaría verte dentro. 2. 1Introducción al curso: este curso se trata de usar un ajuste en el diseñador para el diseño Web. Si primero no estás demasiado familiarizado con el software, aprenderás rápidamente de qué se trata y cómo configurarlo para el diseño Web. Antes de empezar a diseñar algo en Afinitor, Designer echará un vistazo a los conceptos de diseño web y las buenas prácticas. Aprenderás a elegir colores para tu diseño y dónde encontrar el color, inspiración y los temas de color listos para hacer. También aprenderás armas básicas y topografía, lo cual es extremadamente importante no solo para un buen diseño Web sino para un buen diseño en general para aprender todo sobre los encabezados gravados corporales y cómo los pares del dedo del pie para una gran experiencia de usuario. Entonces echaremos un vistazo a una estructura típica de sitios web. Diseño sabio, por supuesto. Hablaremos de logotipos, guerras laterales de navegación y todos los demás sitios web bloques de construcción. Después de eso, hablaremos de lo que está dentro y lo que no está en las armas en el mundo ahora mismo. También buscaremos alguna inspiración de diseño Web en torno a la Web. Con todos esos conocimientos y habilidades pasarán a la parte de diseño del curso cuando los diseños realizados echen un vistazo a finalizar tu trabajo, aprenderás a guardar y exportar adecuadamente para diversos formatos de archivo. Hay bastantes cosas buenas que cubrir, y realmente creo que una vez que hayas completado el curso y practicado por tu cuenta, comenzarás a crear increíbles diseños de sitios web en un ajuste en el diseñador en poco tiempo. Entonces saltemos justo al curso y empecemos con los fundamentos. 3. 2.1de Affinity Designer y cómo configurarlo para el diseño web: Si eres completamente nuevo en ofender al diseñador, aquí te presentamos algunos datos al respecto. En primer lugar, ofender al diseñador es ante todo una aplicación de diseño gráfico factorial. Pero eso no quiere decir que no sea adecuado para el diseño de Scream y dispositivos. De hecho, es una gran combinación de herramientas y habilidades pensadas para el trabajo dentro y fuera de la pantalla. Al principio solo estaba disponible para Mac OS, pero desde finales de 2016 también puedes instalarlo solo Máquina Windows. En este curso, estaré usando una versión para PC fuera del software. No obstante, si tienes un diseñador instalado en un Mac, no deberías tener problemas para seguir solo. Sólo recuerda que cada vez que voy a estar usando el modificador de control keep, tendrías que usar la tecla modificadora de comando. Y siempre que voy a estar usando el modificador Olt keep, tendrías que usar la tecla modificadora de opciones en tu teclado. La tecla de turno es la misma para ambos sistemas operativos. Lo que es genial del diseñador en términos de interoperabilidad es que permite trabajar y exportar a diversos formatos de archivo que van desde vector estándar, una vez como V G y E. P s hasta un archivo ráster estándar como J. P, G, P y G y Regalo. Permite abrir archivos PSD estándar y A. I, y hace el trabajo muy bien. También puede exportar tus ilustraciones a formatos de archivo que pueden ser leídos por otras piezas fuera de software de diseño como Dobie Photo Shop y Adobe Illustrator. Entonces si necesitas guardar tu trabajo como tiff en PDF o incluso PSD, puedes hacerlo en afinidad Designer. Entonces, si eventualmente vas a estar enviando tu diseñado a un desarrollador, puedes hacerlo usando un archivo PSD estándar, y no tienes que preocuparte de que el desarrollador no pueda abrir el archivo. Usted produjo soportes de diseñador de afinidad, capas, símbolos, foto tienda como efectos, guías y arenilla, y prácticamente cualquier cosa que necesitara para diseñar sitios web con él. Tengo que decirte que todo eso es sólo una punta del iceberg. Es decir, el software puede hacer tantas cosas, y hay algunos aspectos del mismo que lo hacen más bateador que ilustrador o photoshopped. Para ciertos tipos de trabajos de diseño, es realmente una ventanilla única para las necesidades de diseño. Puedes diseñar logotipos con él webs tarjetas de visita, prácticamente cualquier cosa que tu cliente pudiera querer ser diseñada. Pero este curso no se trata de aprender. Todo lo que hay que saber acerca de desmayar a un diseñador. Si necesitas eso, echa un vistazo a mi cómo empezar rápidamente con el curso de diseñador de afinidad donde puedes aprender todo lo que hay que saber. El software en este curso se enfocará en usar el programa en un escenario de diseño Web, así que creo que podemos echar un vistazo a las habilidades de diseño Web fuera de diseñador ahora mismo. 4. Las habilidades de diseño web de 2.2diseño de diseño de la: Afinitor diseñador está configurado para grande Usted. Diseño experiencia justo fuera de la caja. Realmente no hay mucho que tengas que hacer para aprovechar todas sus habilidades de diseño Web, que echarán habilidades de diseño Web, un vistazo ahora. En primer lugar, ofender. El diseñador soporta capas, lo cual es bastante importante si quieres hacer tu diseño perfectamente organizado. Siempre es una buena idea poner tus elementos separados construyendo partes separadas de un diseño de sitio web en capas distintas. Los elementos que componen el encabezado deben ir en una capa separada. Los elementos que componen la barra lateral deben ir en una capa separada y así sucesivamente. Es una buena técnica de producción para nombrar adecuadamente las capas. En lugar de dejar sus nombres genéricos, como la capa una capa a etcétera, debe renombrarlos y darles nombres más lógicamente descriptivos que se relacionarían con el contenido de las capas. Por ejemplo, Hatter Food ER artículo de barra lateral, etcétera. Incluso iría un paso más allá y creed sub capas valen nombres lógicamente descriptivos, por caso, por caso, que crea subcapas para sólo los bloques de navegación o Brandon sentados dentro de la capa sombrerero . Realmente no hay nada más indicativo de un diseño y diseñador descuidado que contenga todo su contenido en una sola capa genérica. Si eres fan de las sombras, Grady INTs y desenfocos, te alegrará escuchar que el diseñador ofrece una variedad de efectos off que puedes terminar con tu obra de arte. son destructivos, lo que significa que no modifican la obra de arte de forma permanente sino que se están agregando dinámicamente a su y se pueden cambiar en cualquier momento que quieras. Sería mucho más difícil crear diseños de sitios web sin nuestros tableros. Son la mejor manera no solo de diseñar versiones móviles del sitio Web sino también de mostrar tu trabajo. Lo más importante que necesita tener en cuenta a la hora de crear sitios web lo suficiente en diseñador es que por defecto, cuando creas un nuevo archivo, no crearás un tablero de arte. El hacia el sur te permite elegir si quieres crear una obra de arte o simplemente salir de página predeterminada. Entonces recuerda que cuando sí quieras crear en nuestro reporte, cuando estés creando tu archivo, comprueba la opción crear arte a bordo. Por supuesto, si simplemente te olvidas de ello o cambias de opinión, siempre puedes usar el arte a bordo. Todavía por crear un sitio web de tablero de arte Los diseños necesitan la perfección de píxeles, y puedes usar diseñadores, toda la familia de herramientas y opciones. Sólo por eso. Lo que es genial de esta característica es que simplemente puedes elegir un preajuste de ajuste tú yo diseño y estar seguro de que las opciones de alineación perfectas para propósitos de diseño Web están activadas . También activará la alineación de píxeles de fuerza y se moverá por opciones de píxeles de retención solo para asegurarse de que todos los objetos se estén alineando y moviendo correctamente. Cuando se tiene el chasquido. diseño activado te mostrará cuándo se están alineando los objetos, pero también indicará la distancia en píxeles entre objetos específicos. El preset de ajuste de ajuste U I I diseñé también hará que tus ilustraciones se ajusten a dos guías y se ajusten a rejilla . Entonces si hay usarlos en tu flujo de trabajo, tú diseñé el ajuste preestablecido de snapping te permitirá alinear la obra de arte perfectamente con ellos. Y si nunca has usado la cuadrícula antes porque era demasiado confusa, estarás encantado de escuchar que Designer ofrece una cuadrícula automática, que encuentra los mejores ajustes por sí solo. No necesitas contar todo por tu cuenta. La cuadrícula cambiará dependiendo del valor de Zoomer que establezca. Por supuesto, si lo desea, puede cambiar la cuadrícula a manual e introducir sus propios valores. También puedes usar el gestor de guías para poner tus guías precisamente a donde quieras que vayan . El diseñador Afinitor es principalmente un programa de diseño de factores, pero te permite imitar el entorno de píxeles en el que los diseños de tu sitio web vivirán en última instancia . Para propósitos de diseño Web, podría usar la vista de píxeles estándar y una vista retina de alta densidad de píxeles. Esto te permitirá previsualizar o diseñar como si estuviera hecho completamente a partir de píxeles. Un sitio web no puede vivir sin texto. Es tan importante que muchos diseñadores lo convierten en el centro de sus diseños, eliminando como sea posible los elementos gráficos Manny. Y es realmente fácil trabajar con el diseñador fiscal. Además de tus opciones estándar de carácter y párrafo, puedes crear estilos de texto que aceleren el proceso de desconexión de fondos. Dentro de su diseño. Puedes tener decenas y decenas de estilos de texto diferentes, y puedes cambiar prácticamente todos los aspectos de los mismos. Diseñador cuenta con la capacidad de construir tus propias bibliotecas a partir de activos que puedes usar al diseñar sitios web. Viene con bonitos hallazgo de Iowa 10 activos que puedes simplemente arrastrar sobre el tablero de pegar activos eran algo así como símbolos. Acerca de la diferencia entre activos y símbolos es que se pueden crear bibliotecas a partir de activos que se pueden exportar o incrustar en un documento específico. Y no se puede hacer eso con símbolos suficientes en diseñador. Entonces digamos que estás construyendo un marco de alambre para tu sitio web. ¿ Te gustaría sólo los elementos esquemáticos para ese derecho? Simplemente crea tus propias representaciones de un sistema de navegación de logotipos. Block presume etcétera, luego seleccionado, y del menú del panel, elegir y de selección. El elemento irá directamente a la biblioteca de activos y te estará esperando. En caso de querer volver a usarlo. Offend el diseñador viene con estos espacios de trabajo separados pensados solo para exportar elementos de tu diseño. Se llama a la persona de exportación, y es una gran manera de exportar partes en rodajas de tu diseño. Simplemente puede otorgar la herramienta de corte, crear un sector a partir de un determinado elemento de diseño y exportarlo como una defensa de archivos separada. Hay un montón de herramientas y opciones que te permiten crear magníficos diseños de sitios web en un ajuste en las herramientas de diseñador y Panelistas como las capas están hacia el chasquido. Gestor etcétera te ayudará en la creación de tus propios sitios Web. Pero créeme que acabamos de desnatar la superficie aquí. Hay mucho más en diseñar sitios web usando ofender al diseñador y lo descubrirás todo a medida que avanza el curso. Supongo que en este punto podríamos saltar directamente a crear nuestro primer diseño, pero quiero que este curso sea algo más que un escaparate de técnicas y procesos de diseño . Quería adquirir conocimientos de Thora sobre diseño Web contemporáneo. Por lo que a continuación vamos a echar un vistazo a los principios del buen diseño Web, seguido de información práctica sobre colores, tipografía y elementos utilizados para armar un sitio web. 5. 3.110 principios de buen diseño web: Si eres un diseñador web inicial, la abundancia de información que tienes que descubrir y aprender puede hacer que tus manos lo hagan girar. Es por eso que he elaborado una lista de 10 principios esenciales fuera del buen diseño Web que te ayudará a empezar. Mirar cada uno de estos principios es una especie de directriz, pero no una regla absoluta que no se puede agrupar. No obstante, seguirlos, sobre todo si apenas estás empezando, te permitirá evitar muchos errores novatos. Tan buen diseño Web siempre se preocupa por el usuario final. Después de todo, como lo dijo Steve Jobs, el diseño no es cómo se ve, sino cómo funciona. Y debe funcionar a la perfección en cuanto a servir al visitante de la mejor manera posible, debes diseñar el sitio web con su propósito en mente. Debes pensar, como pensaría el usuario cuando estaría visitando el sitio, piensa lo que los visitantes estarán esperando encontrar en el sitio web información, entretenimiento, entretenimiento, tal vez productos. ¿ A qué induce esto en términos de diseño y luego diseñó el sitio en consecuencia? Éste es sumamente importante, y tengo que admitir que tengo una especie de sesgo personal hacia un texto mal ejecutado de lado . No estoy hablando de topografía específica, sino de composición gravada. El usuario quiere encontrar y consumir la información de forma rápida y sin esfuerzo. Por eso es tan importante construir tus párrafos correctamente. El texto bien compuesto tiene encabezados, párrafos cortos y viñetas para facilitar la lectura. Creo que a la longitud fuera de los párrafos es crucial para los diseños orientados a la información. En los últimos años, copyright móvil se ha ido extendiendo por Internet, haciendo que todos los párrafos sean tan cortos como una frase. Un buen número de oraciones en párrafos suele ser de 2 a 3. En general está de acuerdo en que las tipografías de sentido serif, decir las que no tienen terminaciones decorativas en letras, son más fáciles de leer en pantallas digitales. No lo miraría como un dogma, pero recomendaría encarecidamente no usar más de dos tipos de letra diferentes dentro de su diseño . Ya sea que vayas por Sand Saref o Serif Typefaces es subsidiaria para pegarse a tu elección de fondos a lo largo de ese diseño. Si decidiste ir por encabezados de Sarah y algún cuerpo serif, solo apégate a ellos. El diseño de su sitio web debe ayudar a los visitantes a encontrar la información en lugar hacerlos buscar en frustración. Es por ello que es importante construir el diseño que permita al ojo humano navegar fácilmente el contenido de arriba a abajo e de izquierda a derecha de más importante a menos importante. En breve aprenderás más sobre la teoría del color y cómo usarla en el diseño web. Pero por ahora, solo recuerda que los colores que elijas pueden hacer o romper tu composición. Es esencial crear esquemas de color que ayuden a los usuarios a entender el mensaje de la página web y encontrar la información que buscan mientras hacen que el diseño estéticamente agradable. 6. 3.2Top 10 principios de un buen diseño web (continuado: las imágenes te pueden ayudar en nudos, simplemente haciendo que el sitio sea más bonito para mirar, pero también para contar una historia. Pueden involucrar a los usuarios en un nivel más profundo si se eligen correctamente y se emparejan bien con el esquema de color Sitios, te ayudarán tremendamente en la creación de un diseño hermoso y útil. Recientemente, se está volviendo mucho más común usar la fotografía del cliente en lugar de solo fotos cursi pegadas descargadas de la web. Solo recuerda optimizar las imágenes a la hora de entregar el diseño a un desarrollador, y optimizar los medios para comprimir las imágenes para que sean más pequeñas. tamaño ayuda al sitio web a cargarse más rápido. La mayoría de los sitios web contemporáneos se basan en cuadrículas, y el que se usa con mayor frecuencia es la cuadrícula de 12 columnas. Piénsalo como las líneas fuera invisibles de un Siri que te ayudan a estructurar el diseño de tu sitio web y a hacerlo simétrico y fácil de codificar. Esas líneas son de gran ayuda a la hora de colocar los elementos sobre el diseño. Eso son sólo los contenedores principales. Aleck off alineación es muy notable y crea una impresión descuidada. Aprendes más sobre las setas y cómo crear las tuyas más adelante en las partituras. Esto no hace falta decir que su diseño debe verse bien en los dispositivos móviles. De hecho, incluso podrías crear tus diseños principalmente para dispositivos móviles, especialmente smartphones, y luego construir diseños de escritorio encima de ellos. Se llama el primer enfoque móvil y es un diseño en respuesta al hecho de que los usuarios se conectan mucho más a menudo usando sus smartphones, no computadoras de escritorio. En cualquier caso, tu diseño tiene que estar listo para ser mostrado en cualquier pantalla. No hay nada más destructivo para un diseño y luego un traqueteo. Mantén tu diseño simple para que sean fáciles de digerir. Eso significa elegir la cantidad correcta de colores, que normalmente no es más de cinco. Significa ser consistente sobre la elección encontrada. Pero también significa hacer que la interacción entre los elementos de los sitios web sea fácil de entender el espacio adecuado y es importante por una razón importante. Hace que el consumo de contenido sea fácil y agradable. Existen diferentes tipos de espacio, y puedes usar y debes estar atento en tu diseño. Espacios entre líneas. El texto fuera no tiene que ser demasiado pequeño, por lo que las líneas de texto no se superponen, pero tampoco demasiado grandes. Para que el ojo humano no se pierda. También puedo jugar con espacios entre personajes. Pero yo dejaría para encabezamientos mayores si se quiere ir por más de un enfoque artístico en mundo del diseño y desarrollo Web, también hay tipos especiales de espacios llamados relleno y patrón de margen es el espacio entre piezas de contenido dentro de un contenedor, y los márgenes son espacios entre contenedores. Regla general es ésta. Las piezas fuera del contenido nunca deben tocarse entre sí, y siempre debes tener algún espacio entre ellas. Buen diseño Web moderno no puede vivir sin una cantidad decente de espacio en blanco. Espacio en blanco significa espacio vacío entre objetos y es necesario para una apariencia limpia y moderna. espacio en blanco puede dirigir un diseño específico de cierta manera. Úsalo profusamente si vas por una especie de lujo de un look sofisticado de tu diseño . Por lo que estos son los 10 principios esenciales del buen diseño Web. Existen, por supuesto, otros principios a considerar, como la navegación clara, el uso de la relación dorada o el tiempo de carga. Pero la idea general siempre es esta. Debes diseñar para el usuario y, al tener en mente a tus clientes objetivo, utilizaste estos principios como lineamientos para crear diseños estéticos y exitosos 7. 4.1El factor más importante a tener tener que considerar antes de elegir colores: justo en el color de piel adecuado para tu próximo sitio web. El diseño está junto con la tipografía. El más importante hacer que los colores que elijas será lo primero que llamará la atención del visitante y, si se elige correctamente, si se elige correctamente, no hará que le duelen los ojos y los dedos busquen rápidamente el botón de cierre. El motivo detrás de tu elección de color puede ser solo el hecho de que te guste. Es parte de toda la estrategia que ayuda a enviar el mensaje que su cliente quiere enviar. Esto puede sonar extraño, pero recuerda que no estás diseñando el sitio web por ti mismo. Ni siquiera lo estás diseñando para tu cliente. Lo estás diseñando para tus clientes. Y eso significa que los autos fuera de la página web deben ayudar a los visitantes a entender de qué se trata el sitio web. Navega por el sitio sin la sensación de confusión y encuentra el contenido que buscan . Entonces, ¿cómo elegir realmente los mejores colores para un trabajo específico de diseño Web? Son muy pocas las cosas que debes tomar en consideración. Esto te ayudará a entender el mensaje que se supone que el sitio web está enviando y entender lo que esperan experimentar los visitantes. En primer lugar, debes saber, qué es lo que hace tu cliente, Ya sea una empresa de alta calle, una tienda de mamá y pop, una organización benéfica, debes entender ese negocio. No irías por el mismo esquema de color para una empresa financiera como lo harías para una juguetería , ¿ verdad? Hablaremos de psicología del color un poco más tarde por ahora. Tan solo toma nota, también, que los colores transmiten y encienden emociones, y es extremadamente importante encender las correctas. ocasiones de los negocios, en cierto modo, obligan el uso de ciertos colores. Por ejemplo, si estás creando un sitio web para una tienda de esquina de comida orgánica, lo más probable es que vayas por tonos tierra, y si crearas un sitio web de jardín de infantes, irías por un color más colorido y encontrado paletas. En segundo lugar, si la empresa ya tiene un logotipo o lo está rediseñando, hay que tomar en consideración sus colores. Esto no quiere decir que todos los colores dentro de la página web tengan que ser exactamente los mismos que los utilizados en el logotipo, pero definitivamente tienen que complementarse entre sí. En tercer lugar, escucha a tu cliente, pero no sucumbas a las ideas claramente malas. Es decir, hay una razón por la que el cliente te contrató en lugar de hacerlo ellos mismos o pedirle a su sobrino que diseñe su sitio web. Pero claro, no tienes que ser demasiado esquemático si tu cliente quiere destacar de alguna manera. Y si le echas un vistazo a sus competidores Presencia web, puedes experimentar un poco con esquemas de color. Si, por ejemplo, estás diseñando un sitio web para un ambiente moderno una empresa, no tienes que ir por el azul oscuro y el gris, sino Espolvorea las cosas con el marrón claro o el verde. Mira el sitio web del cliente earth dot org. Este puede no ser el mejor diseño del mundo, pero muestra claramente que el mensaje y las emociones se arman o son importantes que la corrección del collar al decidir sobre un esquema de automóvil que desea utilizar en el diseño. Recuerda sobre el tipo de negocio que es tu cliente y sobre los usuarios que van a estar visitando en el sitio. A continuación, hablaremos de aspecto más práctico fuera de elegir colores para tus diseños. Echaremos un vistazo a preparar los colores para la mejor experiencia de usuario 8. 4.2Cómo mezclar colores para la mejor experiencia de usuario posible: Hay muchos diseñadores que dejan que sus ojos juzguen de cierto color o paleta de colores será bueno para un trabajo específico de diseño Web. Pero el problema con este enfoque es el hecho de que tantos colores pueden verse hermosos. Y así las paletas de colores maney pueden parecer apropiadas para ese diseño específico. Entonces, ¿cómo saber si tu elección de cuello es buena? ¿ Hay alguna forma de juzgar las combinaciones de colores que elegiste? Bueno, probablemente de Leary. Pero tenemos que echar un vistazo a algún aspecto fuera de la teoría del color, pero prometo que será lo más práctico posible. Básicamente, podemos hablar de cuatro tipos fuera de esquemas de color, monocromáticos, cortesía y los logotipos y para probar ático. Entonces hablemos de estos para un segundo modelo. Esquema de color cromático utiliza un color base y varios tintes tonos y situaciones fuera de él. Es la mejor opción si necesitas un diseño cohesivo, pero puedes caer en una trampa usando un esquema de color aburrido. Aquí, los esquemas de color compuestos, a veces llamados split complimentary, se basan en dos colores del tamaño opuesto fuera de la rueda de color. Cuando quieras crear tu propio esquema de color complementario, echa un vistazo a la rueda de color e imagina que estás dibujando un reloj de arena sobre ella. Esencialmente, estás tomando dos colores de extremos opuestos del espectro de colores, lo que le da a tu diseño más libertad que los esquemas cromáticos motores. Si es consistencia lo que buscas en tu diseño, ve por y logos esquema de color. Vuelve a echar un vistazo a la rueda de color y elige tres colores vecinos. Estos temas pueden crear un campo unificado sin nacer como el color monocromático askew. Para crear un esquema de color de ático try, dibuja un triángulo cuyos lados tengan la misma longitud y elija los colores en los triángulos. Endpoints. Esto crea un esquema de color diverso pero equilibrado con colores igualmente vibrantes. Aparte de estos principales tipos de esquemas de color, existen algunos factores más que debes tener en cuenta a la hora de elegir colores para tu diseño. Hablo de complementación, contraste y vitalidad. Los colores que se complementan se sientan en el extremo opuesto apunta fuera del espectro de color porque son visualmente significativamente diferentes. Es más fácil para el ojo humano distinguirlos. Es por eso que a la gente tiende a gustar la bateadora que diseños que son fáciles de ver, lo que significa que proporcionan un cierto equilibrio y no obligan al ojo a buscar ligeras diferencias entre colores. En un esquema monocromático, la complementación se utiliza en los esquemas de color triásico y compuesto. Una buena experiencia de usuario no puede vivir sin un uso adecuado del contraste. opción más importante a la hora de contrastar es, por supuesto, el gran color del suelo y del texto. Si no estás seguro de qué colores usar, la mejor práctica suele ser elegir un color muy claro para el fondo y un muy oscuro para el texto en sí, o viceversa. vitalidad es el lado emocional del esquema de color. más brillantes, Coloresmás brillantes, vivos provocan sentimientos energéticos, mientras que más oscuros, tranquilos, todos los colores relajaron a los visitantes, lo que les ayuda en el enfoque en otras cosas. Estas son las principales herramientas teóricas que deberían ayudarte a hacer más, así cuarta elección para tus esquemas de color. Por supuesto, hay muchas más herramientas e ideas para usar y para elegir en cuanto a elegir colores . Pero si te familiarizas con los que cubrimos, estarás en el camino correcto para el manejo profesional del color en el diseño gráfico. Ya que mencionamos emociones provocadas por los colores, creo que es un buen momento para hablar de la psicología del color, que es sumamente importante, no solo en el diseño Web, sino en el diseño en general. 9. 4.3Cómo elegir los colores "que de la: los colores que elijas para tu diseño, crea un estado de ánimo específico. Es necesario entender la psicología detrás de colores específicos. La psicología del color podría sonar excesivamente científica, pero simplemente describe los sentimientos y significados que las personas a menudo asocian con colores particulares . Seleccionándolos cuidadosamente, puede reforzar el mensaje general de un sitio. Echemos un vistazo a algunos de los colores base que es más probable que uses al diseñar tus sitios Web. rojo es el color más vibrante y agresivo. Es el 1er 1 en atraer los ojos de los hombres, dependiendo de qué colores que lo haga con él pueden transmitir poder y coraje, pero también amor y pasión. Dado que se utiliza en muchas señales viales, se utiliza con frecuencia en sitios web para alarmar al usuario para que informe de peligro. De ahí que sea un error usarlo para tu llamado a las acciones. Tal espartanos o enlaces naranja es uno de los colores más agradables a la vista. Es difícil de perderse, y puede evocar ambiente divertido y enérgico. amarillo es el color apagado, el algo de calidez y tiempo de verano. También es el color más visible del espectro, así que no lo uses en exceso. A mucha gente le parecerá demasiado irritante amarillo. Es especialmente llamativo cuando se combina con blanco o negro ya que emite en equipos de seguridad , autobuses escolares y taxis. Si le preguntas a la gente a punto de su color favorito, lo más probable es que digan azul. Es agradable mirar su discreto y te hace sentir cómodo. A lo mejor es porque es el color del cielo. También es el color fuera del agua, por lo que la gente conecta el azul con refresco y el azul limpiador, especialmente el azul oscuro, es el más profesional. El color, después de todo, es el color del traje presidencial. Entonces usa este color cuando sea profesionalismo lo que quieras transmitir. Con tu diseño, verde es el color de la naturaleza. Si te duelen los ojos al mirar a más larga una pantalla de computadora, mira el verde. Es una opción perfecta y más obvia para productos orgánicos, respetuosos con el medio ambiente y saludables, pesar de que es un color del dólar estadounidense. Si estás creando un sitio web para una empresa financiera, no te vayas por la borda con verde. En cambio, apégate al azul oscuro, gris oscuro, blanco y negro para transmitir confianza y profesionalismo. El púrpura está históricamente asociado con la realeza, que lo hace perfecto para marcas de lujo. También, cuando se combina con otros colores , perderá parte de su patrimonio real. Con el rojo, puede sentirse íntimo y romántico. Con blancos y rosados, se vuelve juguetón e infantil. Por qué significa pureza e inocencia. Pero también se usa para crear minimalismo y sofisticación que es más probable que asientes en los sitios. Centrarse en bodas, atención sanitaria y letreros así como en el negro del blog moderno y minimalista es sin duda el color elegante definitivo. Nunca pasa de moda. Implica fuerza, lujo, mal, muerte y evitar. Recuerda que puedes decidir qué emociones sentirán los visitantes al mirar el sitio que diseñaste, por lo que tienes un papel importante que desempeñar como diseñador. Además, los significados del color pueden variar drásticamente entre culturas y regiones, por lo que es mejor comprobar si el color Joe's es apropiado en una cultura determinada. Ahora sabes un poco de la teoría del color, y yo admite que podría sentirse abrumador. Por suerte, existen herramientas que pueden ayudarte en gran medida a elegir el esquema de color correcto. Por lo que a continuación echará un vistazo a siete herramientas fáciles para elegir esquemas de color a prueba de errores 10. 4.4-7 herramientas fáciles para elegir esquemas de color a prueba de colores: elegir colores para tu próximo diseño puede ser un proceso largo e incluso desalentador. Para mí, siempre toma demasiado tiempo encontrar la combinación correcta, pero probablemente todo su proceso pueda acelerarse con algunos generadores de esquema de color en línea. Echemos un vistazo a siete herramientas fáciles para elegir nuestros esquemas de color a prueba. Empecemos con Kohler hex a dot com. Este letrero es genial si eres un fanático del color. Todo lo que tienes que hacer aquí es escribir en cualquier color, valor o nombre de color para obtener una enorme cantidad de información propiedad de ese color más, por supuesto, diferentes esquemas de color. También obtendrás ejemplos de diferentes usos fuera de ese color en particular, junto con alternativas para ello. Y si prefieres alguna fuera de las alternativas, solo puedes hacer click en él para ver toda la información y esquemas de color necesarios. El segundo instrumento, llamado punto de color, es realmente divertido y fácil de usar. Esta herramienta le permite crear rápidamente un esquema de color usando el ratón arrastrar a izquierda y derecha para cambiar el tono, arrastrar hacia arriba o hacia abajo para cambiar la ligereza y desplazarse hacia arriba o hacia abajo para cambiar su saturación . Si estás contento con el color haz clic para guardarlo y repite el proceso con otro color. La herramienta sólo te mostrará colores que funcionan bien con el que elegiste antes de poder repetir el proceso tantas veces como quieras. Los dos siguientes, llamados Palatable, es particularmente divertido de usar. Puedes elegir tu propio color o hacer clic en el botón de aversión para que el programa elija los colores por ti. Si te gusta, haz clic en Like and Seve, el siguiente color que se supone que coincida con el anterior coincide con tu gusto. También puedes quitar un color en particular para encoger toda la paleta sobre el color. Mente. Puedes elegir tus propias muestras de color, y si te gustan, puedes mirarlas y golpear. Genera para que el programa encuentre, imagina colores a los que elegiste. Lo que tiene de especial este taburete en cuanto al diseño Web es que puedes elegir la opción de colores del sitio web y paleta de agua que se está aplicando a una página Web ficticia. Paleta de materiales fue creada para principalmente con el propósito de fusionar colores de diseño de materiales en sus diseños. Entonces, ¿qué es el diseño de materiales? Bueno, es el diseño conceptual de Google el que está orientado a la experiencia del usuario. Está específicamente diseñado para funcionar mejor en dispositivos móviles y la paleta de materiales está aquí para ayudarte a elegir colores. caso de que desees diseñar siguiendo los principios de diseño de materiales, todo lo que tienes que hacer aquí es escoger dos colores y dejar que el programa haga el levantamiento pesado por ti. No sólo creará un esquema de color para usted, sino también más grandioso. Una vista previa del esquema aplicado a una interfaz de usuario móvil de la que probablemente has oído hablar de Can Va ? Pero ¿has oído hablar de su paleta de colores para ti? Puede usarlo para crear esquemas de color fuera de imágenes importadas. Dragón imagen en la interfaz y dejar que el programa recoja los colores de esa imagen. Y por último pero no menos importante, es mi generador de esquema de color favorito. Eso es totalmente diferente en la forma en que piensa en crear palets. En lugar de escribir los nombres de los colores, subir imágenes o arrastrar el ratón para crear muestras de color, escriba el evento del tema o cualquier palabra que esté describiendo su diseño. Después de unos segundos, obtendrás esquemas de color relacionados con esa palabra clave. Bastante dulce, ¿eh? Todas estas herramientas generadoras de color son una representación humilde de un área de herramientas que puedes encontrar en línea. La mayoría de ellos funcionarán más o menos de la misma manera. Entonces si solo encuentras tu uno o dos favoritos, eso es realmente todo lo que necesitarás. A continuación, aprenderás los fundamentos de la topografía en diseño Web, así que no te vayas. 11. 5.1historia super de la tipografía de la web: cuando se compara con los más de 25 años de existencia de Internet. Verdadera tipografía Web parece un jardín de infantes. Sólo tiene unos pocos años. Por supuesto, incluso los primeros sitios web contenían texto. De hecho, el primer sitio web de la historia no fue nada de texto, pero la elección telefónica fue limitada, decir lo menos. Antes del nacimiento fuera. verdaderos diseñadores de topografía Web podían elegir entre cinco tipos de letra diferentes, pero sólo dos de ellos, verdana y Georgia, fueron creados específicamente para uso Web. Los otros fondos, a saber, Aerial, Helvetica y Times New Roman, fueron sacados del sistema operativo de la computadora y cargados en un sitio web. Por supuesto, esto no significa que los diseñadores y desarrolladores acepten cortésmente ese concepto demasiado limitado de tener sólo cinco tipos de letra disponibles. La alternativa más simple era usar imagen como deseos de texto podrían utilizar los fondos instalados en sus computadoras sin dar demasiada preocupación, licencia demasiado formada en. Pero hubo dos grandes inconvenientes de este método. primer lugar, Enprimer lugar,para convertir el diseño lleno de imágenes en un sitio web, había que rebanarlo en una cantidad ridícula de imágenes en una pieza de software como Photo Shop. Además, no olvides que este fue el tiempo libre. No tan rápida conexión a Internet. Por lo que el tiempo que tardó en cargar un lado lleno de imágenes fue significativamente más largo. Todo cambió en el 2010 cuando Google creó su propia biblioteca fuera de los fondos Web. Son gratuitos, en su mayoría bien hechos y definitivamente fáciles de usar tanto para diseñadores como para desarrolladores. Esto ha cambiado el mundo de la tipografía Web. actualidad, encontrarás fondos específicos para la Web en todas las fundiciones de tipografía más importantes, y es difícil imaginar diseñar sitios web. Sin ellos. El auge off responsive diseño Web ha hecho que su tipografía pase por un nuevo tipo de transformación. El hecho de que tu trabajo se vaya a ver en diferentes dispositivos hace imposible predecir cómo se va a ver un fondo específico en un dispositivo específico. No obstante, existen algunas reglas básicas para elegir los fondos adecuados para el tipo adecuado de empleos, y hablaremos de ellos a continuación 12. 5.2Cómo mezclar colores para la mejor experiencia de usuario posible: elegido adecuadamente. Tipografía para el proyecto significa que ayuda a enviar el mensaje fuera de la página web. También es importante recordar que las tipografías, igual que los colores, pueden provocar cierto tipo de emociones. Por eso es importante elegir a tus amigos con cuidado y con el lector en mente. Las personas que ven el sitio web pasarán la mayor parte de su tiempo leyendo el texto corporal. Por eso es una buena idea elegir primero el fondo para el texto corporal. El tipo de letra que elijas debe ser discreto repisa un ble y legible. Hay algunas formas de elegir fondos con esas características, pero prometí mantenerlo lo más amigable con el diseñador regular posible. Es decir, no todos los diseñadores están súper entusiasmados con la topografía. Entonces, ¿cuáles son las características de los fondos discretos y legibles para los diseños de tu sitio web? Un hallado legible tiene lotes fuera de altura X, que es la medida vertical de una X minúscula Cuanto más corta sea la altura X, menor aparecerá este último, lo que puede provocar que el tipo se vuelva ilegible. Por otro lado, demasiada altura X puede hacer que las letras M y H sean difíciles de distinguir. Echa un vistazo a la misma palabra escrita en Lotto e hijos abiertos para comparar sus exalturas. El segundo que hay que quitar una nota es lo abiertas que están las aperturas. Pero lo que nuestras aperturas son las huecos en letras como una C o s. Cuanto más abiertas estén, más legibles se vuelven las letras. También debes prestar atención a los A. Remitentes y centros D de los pasajeros de este último son los trazos que se extienden por encima de la línea media y los centros D son los trazos que se extienden por debajo de la línea base. Cuanto más distinguibles sean, más legible se vuelve el texto. La mayoría de las tipografías de Saref suelen ser opciones ideales para leer pasajes de texto más largos. Debido a los trazos notables en sus remitentes A y D. Su elección de tipo de letra del impuesto corporal debe contener al menos cuatro estilos diferentes. Cursiva regular. Cursiva audaz y audaz. Si el tipo de letra no contiene una fuente cursiva, los navegadores se inclinarán forzosamente. Y si no contiene una versión negrita, los navegadores duplicarán la versión regular del frente, lo que dificultará el texto en los ojos. El último que debe tomar una nota a la hora de elegir tipografías para su texto corporal es el contraste entre líneas delgadas y gruesas dentro de las letras. Al echar un vistazo a tipos de letra como Play for display, notarás un enorme contraste entre líneas gruesas y delgadas dentro de bandejas separadas. Tipografías como esa pueden verse muy bien en encabezar diseños para blogs de moda, pero no funcionarán bien como gravados corporales. Ahora ya sabes cuáles son los cinco rasgos cruciales de las tipografías que funcionarán bien como texto corporal. Esas tipografías tendrán una altura X generosa, aperturas abiertas, entros de culo distinguibles y remitentes D, al menos cuatro estilos y pesos y pequeño contraste entre líneas dentro de escaleras. No, todo está bien y bien sobre la pregunta principal aún queda sin respuesta. Y esa pregunta es: ¿Qué tan grande debe ser el texto corporal? Bueno, la respuesta corta es de 16 puntos. Es el tamaño de texto que muestran los navegadores por defecto. Es el tamaño de texto que los navegadores estaban destinados a mostrar. Generalmente, este tamaño funciona bien para portátiles, computadoras de escritorio y teléfonos. Y qué pasa con la altura de la línea, que por supuesto, significa la distancia vertical entre líneas de texto. Una buena regla de oro es agregar seis puntos al tamaño del teléfono de texto corporal, por lo que si estás usando 16 importancia como el tamaño del teléfono de texto corporal ir con 22 puntos como la altura de línea . Por supuesto, puedes experimentar con otros valores de altura de línea. De hecho, muchos diseños modernos de sangre usan alturas de línea más generosas, así que conseguimos el cuerpo. tipografía de texto está bastante bien cubierta. Si sigues todas estas reglas, harás un gran favor a los usuarios haciendo de leer tu sitio una experiencia agradable. Siempre te ahorrarás mucho tiempo y evitarás tipos de letra. No vale la pena terminar en tu diseño. A continuación, echemos un vistazo a la elaboración de captadores de atención. Hablaremos de encabezamientos. 13. 5.3Cómo elegir las fuentes adecuadas para los títulos para: buenos encabezamientos y subtítulos son aquellos elementos de un sitio web de diseño que atraen a los usuarios y fomentan una mayor lectura. Por eso es fundamental aprender a crearlos correctamente. Si no estás seguro con tipografía para usar en peligro con el fondo corporal, solo tienes que ir por la misma familia telefónica. Por ejemplo, si elegiste las arenas abiertas para ser el fondo corporal, ve por un audaz y ampliado dos o incluso una versión triple de la misma para tus encabezamientos. Esto hará que el diseño Luke sea armonioso y reducirá el tiempo necesario para cargar el sitio. Esa es la manera rápida y fácil, pero las posibilidades son que tarde o temprano tu diseñador así prevalezca y te instará a mezclar diferentes tipos de letra. Tendrás que usar un fondo para etiquetas de cuerpo y otros cuatro títulos si quieres lo mejor de ambos mundos. Es decir, si quieres quedarte en el lado seguro y aun así spruced la topografía de tu página web un poco arriba, puedes quedarte dentro de una súper familia. Por ejemplo, puedes elegir hijos droide para los encabezados y droide serif. Para texto de cuerpo. Encontrarás algunas super familias buenas entre los teléfonos de Google, por ejemplo, Roboto y Roboto Slab Merryweather y Merryweather Sands o Noto Santas y Noto Saref. La siguiente gran pregunta es, ¿qué tan grandes deben ser los encabezamientos? En primer lugar, recuerda que tu lado va a usar un número máximo de seis partidas. No todos ellos tienen que estar necesariamente incluidos en el diseño. Es decir, diseños típicos no van por debajo de rumbo, pero es una buena práctica desarrollar un conjunto de tamaños para que todos los encabezamientos los coloquen. Encabezados simples son títulos fuera de los sitios web componentes encabezamiento uno típicamente reservado para las vistas branding, por lo que técnicamente no necesita ser texto en absoluto. Puede abarcar el logotipo de la empresa, los encabezamientos que la mayoría de sus diseños van a depender de nuestra partida dos. Esos chicos son tus títulos de bloque, títulos sección principal, etcétera. Yo recomendaría hacerlos por lo menos 32 puntos grandes, que es el doble del tamaño de un tamaño de texto corporal típico. Aquí también se aplica el troll alto de la línea de agregar seis puntos al tamaño de la fuente. Todos los demás tamaños de encabezamiento variarán dependiendo del trabajo que estén haciendo dentro del diseño. Por ejemplo, encabezamiento tres suele utilizarse como título de elementos cibernéticos. Por lo que su tamaño debe funcionar bien con todo el concepto de diseño, en lugar de ser solo un porcentaje o algún tipo fuera de un derivado Fuera de los otros encabezamientos. No obstante, si tu diseño va a ir en el fondo como cabeza en seis, no recomendaría hacerlo más pequeño que el tamaño del texto del cuerpo en sí. O sea, dirigiéndose más pequeño que el cuerpo se ataca a sí mismo. Eso es hilarante, ¿no? Ahora ya sabes elegir tipos de letra tanto para el cuerpo como para los encabezados. Entonces ahora es el momento de mirar mezclarlos juntos. Hagámoslo a continuación. 14. 5.4Cómo mezclar fuentes para títulos y texto de tu cuerpo: suerte para nosotros. Hay una tonelada de recursos y en lentejas para más fácil para los padres. Echemos un vistazo a algunos de ellos ahora. El 1er 1 es una herramienta incorporada directamente en los propios fondos de Google. Cuando elijas un tipo de letra, digamos que abras arenas y haz clic en Ver Ejemplar. Verás una avería fuera del frente. En la esquina inferior izquierda, notarás una lista fuera de los populares emparejamientos delanteros. Todo lo que necesitas hacer es elegir un par frontal. ¿ Y qué se debe aplicar a la pieza de texto de la derecha? También se puede comprobar con el frente se va a ver como encabezado y como texto de cuerpo. Pero hay un inconveniente importante de esta herramienta. Sólo obtienes un modesto adelanto de los fondos en acción. Es difícil imaginar con sólo mirar estas piezas de texto cómo van a ser en diferentes escenarios. Por ejemplo, en un llamado a las tarjetas Sliders de Action etcétera para ver algunos pares delanteros más. Junto con ejemplos extendidos, ir a inicio telefónico gran punto simple io. Aquí encontrarás algunos Google poco común de París que puedes considerar al diseñar tu próximo sitio web uno fuera del principal fondo más grande y visitado, ALS, es front pair dot co. Aquí encontrarás una extensa biblioteca fuera de pares frontales dividida en categorías específicas. Te transmito cualquier combinación fuera de Saref, San Serif y fondos cursivos, y si te gusta cualquiera de los pares frontales, solo puedes descargarlo con un solo clic. Obtendrás un archivo ZIP que necesitas desempaquetar e instalar teléfonos escondidos en el interior. Pero por supuesto, el mayor repositorio de pares de Google Front es el propio Google. Es decir, si solo pares de teléfonos Google, encontrarás los artículos de Tom y Thomas off sobre la lista hecha a partir de peras para que elijas y uses. Entonces si siempre se debata contigo mismo, qué fondos usar, es una buena idea mirar las sugerencias de otros diseñadores que pasaron exitosamente por este laborioso proceso. Una palabra de precaución aquí Si nota una visualización de palabras en un nombre de tipografías, eso significa que está destinado a encabezamientos, no gravados corporales. Entonces si un par de fondos sugiere un tipo de pantalla de fondo para texto corporal, eso es sólo un mal consejo e ignorancia. Así que ten cuidado de que estas son las formas y herramientas más comunes para encontrar grandes pares de teléfonos de Google . Pueden ser una gran manera de diseñar un sitio web único, solo muy mente que no estás solo tras el efecto artístico, sino también después de la legibilidad. A continuación, resumiremos brevemente esta sección y nos centraremos en los tres aspectos más importantes fondos bien elegidos para los diseños de su sitio web. 15. 5.5La fuente perfecta para el diseño de la Interfaz de usuarios: Sepamos que algo pasa y echemos un vistazo a tres aspectos principales de cualquier fondo que estará agradecido de sus diseños Web. Creo que a estas alturas entiendes lo suficientemente bien que tus diseños deberían servir a tu audiencia de clientes . Si un usuario visita los sitios que diseñaste y lo deja después de unos segundos porque él o ella no puede leer nada, eso es señal de un mal diseño. Los mejores indicadores fuera de legibilidad son las distinciones claras entre letras que podrían parecer similares. Por ejemplo, tipografía mayúscula I y la minúscula L bien elegida se mantiene fuera de los usuarios. Espera, por así decirlo. Es decir, hace que el proceso de lectura sea más fácil. Pero leer no es solo para ver publicaciones en bloque. También es para leer descripciones de productos, leer llamadas Toe Acciones en botones sobre mí secciones de sitios web. Por lo tanto, tipografía es una media off conseguir que el usuario del punto A al punto B lo más rápido y genuino posible . Por lo que dependiente del objetivo de los sitios web, ya sea vender, suscribirse o informar topografía fácil de absorber puede ayudar en gran medida o impedir región de esos objetivos, y por último, bueno que yo tipografía funciona bien a través de diferentes tamaños de pantalla, no importa qué dispositivo o sitio web esté apareciendo en la masa tipográfica permanecen legibles. Algunas personas afirman que los fondos de Sarah son más difíciles de leer en las pantallas de los teléfonos inteligentes, luego los teléfonos sans serif. Y de hecho, las personas con trastornos de la lectura o discapacidad visual podrían encontrar más pequeño impuesto serif más difícil leer. Pero si una tipografía web serif está bien compuesta, debería ser fácil de leer, incluso en unos tornillos más pequeños, incluso para personas con trastornos de lectura que alguna vez encontraron elegir. Recuerda que el propósito fuera de cualquier texto en tu sitio web usaba para ayudar a tus usuarios a lograr sus objetivos. Considera todo el contexto, en lugar de limitarte a depender de un conjunto de reglas cuando tomes tus decisiones de diseño. Hasta ahora hemos aprendido bastante sobre los colores y la tipografía en el diseño Web. Ahora es el momento de echar un vistazo a los bloques de construcción de un sitio web típico. 16. 6.1de la marca, la navegación y las secciones de héroe: Al diseñar sitios web, debes recordar sobre ciertos bloques que lo construyen. Algunos de ellos siempre estarán presentes en el diseño, pero algunos de ellos son opcionales. Echemos un vistazo a cómo se construye un sitio web típico. Vamos a diseccionar un sitio web partiendo de arriba y moviéndose hacia abajo. El primer bloque de construcción de un sitio web sería come Sombrerero. Se trata de un contenedor que suele contener la información de Brandon como el logotipo y el tagline, algún tipo de sistema de navegación y a veces información de contacto, incluyendo alas de redes sociales. Muchos diseños de sitios web, incluyendo cuadro de búsqueda en el encabezado también. Típicamente, el Brandon se sienta a la izquierda y la navegación a la derecha. El sistema opcional de información de contacto y búsqueda también puede ir a la derecha, arriba o debajo de la navegación. Pero esta es sólo una forma de presentar al Sombrerero. En algunos diseños, especialmente los modernos diseños de sangre, los contenidos de Heller a menudo se centran, por lo que el logotipo está en el centro y la navegación va por debajo de él, y también está centrado. Creo que hace que el diseño sea aún mejor organizado y más fácil de entender. Lo que va por debajo del brezo es opcional. Es decir, puedes incluir algo que se llama sección de héroes. Entonces, ¿qué es eso? Básicamente, es un componente que muestra contenido clave de tu lado. Su principal propósito es captar rápidamente la atención del usuario y explicar de qué se trata el sitio Web . A menudo lo puedes ver en los insights del mercado donde se te pide que introduzcas tu dirección de correo electrónico para obtener un libro electrónico gratis. Ooh, un reporte o algo así. Por lo general, la sección Hero contiene una imagen de fondo completa o un video con contenido superpuesto que topografía es grande y audaz, la topografía es grande y audaz,y la mayoría de las veces también encontrarás aquí algún tipo de llamada a la acción. En ocasiones la imagen de fondo completa se comparte entre las secciones de encabezado y héroe en respuesta a versiones del diseño, especialmente en teléfonos móviles, una sección de héroes puede transformarse en algo completamente diferente. La imagen de fondo puede ser reemplazada o incluso una completamente eliminada, haciendo que el diseño sea más ligero. Otra idea para la sección de héroes es utilizar el deslizador, que es un escaparate de imágenes o una combinación de imágenes fuera y texto. Esas imágenes son interactivas y cambian automáticamente o en la interacción del usuario. No obstante, hoy en día los deslizadores están empezando a volverse redundantes. En primer lugar, no son demasiado s yo amigables. En segundo lugar, son demasiado pesados y un poco inservibles en las pantallas de los pequeños smartphones. Pero toda la sección de héroes es realmente opcional. En algunos casos, realidad puede estar obstruyendo todo el propósito del sitio web, y estoy hablando de diseños de bloques. Una rubia es mayormente sobre los artículos, por lo que el usuario que visita un sitio web se debe presentar con lo que él o ella está esperando encontrar aquí, que son exactamente los artículos. Por supuesto, los artículos se pueden presentar de una manera más interesante que solo traquetea el texto, pero hablaremos de y de otras secciones que van por debajo del héroe en el siguiente video . 17. 6.2Las secciones de centro y fondo de tu diseño de sitio web: Ahora pasemos más allá de las secciones de cabecera y héroe y detengamos de los artículos y barras laterales . Estas secciones se verán diferentes no sólo por su elección de diseño, sino principalmente por la naturaleza del sitio. Se verán diferentes para un blawg diferente sitio corporativo o personal gratuito. Variaciones C anuales dentro de esos conceptos para hacer las cosas simples. Si no es un blawg, la sección debajo de la imagen del héroe se verá como cajas horizontales, separadas por contenido y colores que pueden contener mezclas de iconos, imágenes de texto y enlaces. El motivo principal detrás de crear estas secciones de una manera específica es para hacerlas fácilmente legibles en dispositivos móviles. Aquí la clave es crear el diseño de escritorio encima del diseño móvil. Cualquier cosa que se vea bien en un smartphone también debe verse bien en una computadora de escritorio en caso de diseños de bloques. Es muy probable que estas secciones engloben los artículos, y se pueden presentar de diversas maneras. Pero un denominador común es que siempre tendrán los títulos de artículos que también pueden presentar imágenes destacadas, fragmentos de publicación en bloque, enlaces y otra información. En ocasiones, si se trata de un sitio web de comercio electrónico, los artículos pueden contener fotos de producto, descripciones precios en otro bloque de construcción de sitio web que puede sentarse junto a las secciones o artículos es una barra lateral. Una barra lateral típica contiene información que, alguna manera es complementaria al mensaje principal fuera de la página web. Podría ser la información del autor del blog. Redes sociales feed latest posts, tags call to actions, productos relacionados, etcétera. Lo interesante de las barras laterales es que pueden sentarse en el lado derecho de la página en el lado izquierdo o en ambos lados al mismo tiempo. último bloque central de un sitio web es que sus pies de página realmente han crecido a lo largo de los años a partir de simples secciones de una línea que contienen principalmente los derechos de autor en folk. Han evolucionado hasta convertirse en sofisticadas cajas con muchos datos adicionales. Los pies de página así como los encabezados son los mismos en todos y cada uno de los sitios, y contienen información que no cambia. No importa qué página esté viendo el usuario actualmente, son una ventanilla única para toda la información esencial que pueda necesitar el usuario. Por eso, en las secciones de pie de página verás bios rápidos o sobre mí enlaces a páginas más importantes o recientes presume. A las alas de redes sociales de Commons recientes o subsecciones enteras con feeds de redes sociales como fotos de instagram. Los pies de página suelen ser fácilmente distinguibles gracias al uso del contraste en colores en relación con todo el sitio web. Si se hacen correctamente, hacen que todo el sitio se vea profesional y bien diseñado. Para resumir las cosas, un sitio web típico contendrá un encabezado. A secciones de héroe con artículos, a veces barras laterales y siempre f pie de página. Ahora que ya sabes estructurar un sitio web, es hora de mirar las rejillas. Podrían parecer aterradores al principio, pero ayudan a crear un sitio web simétrico y más fácil de codificar, así que echemos un vistazo rápido a ellos a continuación. 18. 6.3¿Qué son las cuadrículas y cómo utilizarlas: Entonces, ¿qué es una grilla? Piénsalo como un serio fuera de las líneas invisibles que te ayudan a estructurar el diseño de tu sitio web y a hacerlo simétrico y más fácil de codificar. Esas líneas son de gran ayuda a la hora de colocar los elementos de tu diseño, no solo los contenedores principales. Es muy notable la falta de alineación y crea una impresión desplomada. construye una cuadrícula típica de unidades, canalones y columnas. Echemos un vistazo rápido a aquellos que usan una cuadrícula de 12 columnas como ejemplo. Las unidades son los bloques básicos de construcción de cada rejilla. Parecen columnas largas, un poco estrechas con un poco de espacio a cada lado de ellas. Las canaletas son espacios sentados, tanto en el lado izquierdo como en el derecho de cada unidad. No importa si es un centro para unidad derecha o de extrema izquierda. Siempre hay la misma cantidad de Ghadir a ambos lados de ellos. En las columnas se tiene el nombre más confuso de todos los bloques de construcción de grano. Básicamente, son clústeres de contenido similar, repartidos en una cantidad específica de unidades y consiguieron la suya. El cuadrícula más común y versátil es una cuadrícula de 12 columnas. Se trata de un gran terreno común. Tanto para diseñadores como para desarrolladores, es la mayor ventaja es que se puede dividir fácilmente en diferentes clústeres de unidades. Por ejemplo, puede tener cuatro columnas creadas a partir de tres clústeres de unidades, seis columnas creadas a partir de dos blásteres de unidades y así sucesivamente. El bello de este sistema es que se pueden mezclar columnas juntas. Por ejemplo, la izquierda, se puede tener un yeso de ocho unidades y a la derecha, un clúster de cuatro unidades y así sucesivamente. El truco aquí es dividir la cuadrícula en columnas cuyas algunas siempre van a ser 12. También se pueden hacer columnas horizontalmente, por así decirlo. Una sección se puede dividir en dos columnas, otra en cuatro, otra en tres y así sucesivamente. Aconsejaría usar la grilla todo el tiempo. Al principio podría ser un poco incómodo, pero después de un tiempo te encantan las rejillas. Te ayudarán tremendamente en la creación de diseños cohesivos, estéticamente agradables. Si es más fácil para ti, solo puedes descargar una versión PSD de una cuadrícula de 12 columnas y utilizarla fácilmente en el interior. Diseñador de afinidad. Simplemente puedes google 12 columnas grit y encontrarás montones y montones de ejemplos, pero creo que por el bien de entenderlo un poco mejor, que diseñaría nuestro propio hagámoslo en el siguiente video. 19. 6.4Cómo diseñar tu propia cuadrícula: Abrimos diseñador y creemos un nuevo documento que va a utilizar el perfil Web para el preset de página. Iré con full HD y revisaré la opción creat art a bordo. Dejaré intactas todas las demás opciones. Antes de empezar a crear algo, me aseguraré de que a la U I diseño ajuste preestablecido esté activado. Esto me ayudará a crear una gran rejilla de hechos de zapatilla. Empecemos por crear un ángulo craqueado básico que va a tener 1200 píxeles de ancho. Esto es importante porque vamos a estar creando diseños basados en una cuadrícula de 1200 píxeles con y 1200 píxeles es el más típico con de los sitios web contemporáneos. Asegurémonos de que el rectángulo esté exactamente en medio del arte a bordo, y ahora podemos pasar a sacar las primeras guías. Oprimida el control, son combinación de teclas en mi teclado y sacar dos guías que se chasquearán en ambos lados del rectángulo. Nuestra rejilla va a seguir las pautas de bootstrap. Si no sabes qué es bootstrap, déjame decirte rápidamente que es un framework de desarrollo Web que está ampliamente adaptado en el mundo W W W W. Utiliza un sistema de cuadrícula de 12 columnas donde todas las columnas tienen 15 píxeles fuera de palmaditas en ambos lados . Por eso ahora voy a divinar el rectángulo por 12 usando ese panel de transformación, y me aseguraré de que al punto de partida de transformación esté sentado a la izquierda. Después de eso, restaré 30 píxeles del resultado en rectángulo, porque 15 pixels más 15 big slips off patting en cada lado equivale a 30 pixels. El último que hay que hacer es mover la columna 15 píxeles a la derecha, y la unidad base está lista. Ahora vamos a clonar en la primera columna a la derecha presionando y manteniendo presionada la tecla de control hasta que la columna clonada encaje con el original. Después de eso, todo lo que tenemos que hacer es mover a ese tipo por 30 píxeles a la derecha. Ahora bien, si solo clonamos en la segunda columna a la derecha, diseñador nos mostrará la distancia entre las columnas y las encajará en su lugar cuando las distancias sean iguales. Todo lo que queda por hacer es presionar control más J en tu teclado. Para duplicar la última transformación, que fue la clonación y movimiento. Tenemos que hacerlo nueve veces más hasta que tengamos todas las 12 columnas. Ahora tienes tu propia cuadrícula de 12 columnas hecha a medida para un diseño de sitio web. Si lo desea, puede cambiar el color de las columnas, cambiar su transparencia y, por supuesto, su tamaño. Una vez que el diseño crece en altura, cuando pasemos a la parte de diseño real del curso, verás esta misma cuadrícula en acción. Pero antes de que hagamos eso, echemos un vistazo a lo que está en este momento en cuanto al diseño web. Descubramos las últimas inspiraciones de diseño Web. 20. 7.1 a 7 tendencias de diseño web que regulen el mundo de diseño web: En el próximo par de videos, echaremos un vistazo a las tendencias modernas del diseño Web. Esto te ayudará a entender el diseño de patrones que los diseñadores están siguiendo estos días. Empecemos con los menús que se ocultan al principio de Glenn's. Por lo general se esconden detrás de tres barras de chorizo NITEL llamadas manual de hamburguesas. Basta con hacer click sobre ellos para ver un sistema de navegación flasheado completo. Si crees que esta es una forma de imitar los menús de la APP móvil, tienes toda la razón. Dado que cada vez más personas están navegando por la Web utilizando sus smartphones, hace de Santa para transferir parte de esa experiencia al sitio web de escritorio. El diseño, uno de los beneficios de la navegación oculta, es que crea más espacio en la página principal. Permite que los contenidos principales sean destacados de manera más destacada. Otro beneficio del menú de su nombre es el hecho de que se puede combinar con un menú tradicional si ese diseño lo necesita. Si tienes muchos lugares a los que llevar al usuario, puedes ocultar algunos de ellos debajo de un menú y mostrar otros en el menú visible. Diseñar menús móviles sabios a menudo utilizados colores de fondo contrastan con el esquema de color general del sitio, haciendo que destaque del resto. El texto vincula el contraste de color con el fondo para facilitar la navegación. Parece que los usuarios han crecido acostumbrados a ver los sistemas de navegación como simples tres líneas que necesitan ser colectadas para ver lo que se esconde debajo. Es por eso que puedes experimentar libremente con la hamburguesa. Manu's en tus diseños. La experiencia de usuario contemporánea está cambiando lentamente de los visuales dos palabras. Es por eso que la tipografía está jugando un papel más importante que nunca. Pero, ¿qué significa tipografía grande y audaz? Bueno, ciertamente no significa que absolutamente debas usar solo versiones negritas de la tipografía y configurarla al tamaño más alto posible. Significa que muchos diseños tienen una cantidad decente de espacio para texto limpio y conciso justo en medio de una sección determinada. El ejemplo más obvio de eso son, por supuesto, las acciones del héroe. Con grandes imágenes de tipografía sobre fondo de carril, la UX moderna se desplaza hacia consignas que están limpias de tamaño y útiles, lo que significa que en el futuro, tipografía es papel en el diseño será más grande que nunca. Sin duda, la revolución de los teléfonos inteligentes ha cambiado. El modo en que las personas interactúan con el mundo de Internet. Pero hay un aspecto de esa revolución que con bastante frecuencia se omite, y eso es realmente importante para los diseñadores estadounidenses. Hasta hace poco, el principal sistema operativo solía conectarse con Microsoft Windows. Pero ahora es el androide de Google, y Google ha llegado con su sistema de diseño, llamado diseño de materiales y luz de diseño de materiales. Es por eso que los diseñadores que quieren crear un tú sin fisuras experimento para que los usuarios de la mano utilicen visuales de diseño de materiales. Ideas en los diseños Web. El diseño de materiales no está lejos en un diseño plano de Hanson. También se enfoca en la simplicidad pero agrega un toque de tres dimensionalidad. Si quieres usarlo en tus diseños, estarás encantado de escuchar que viene con todo un espectro fuera de ti y herramientas, colores, colores, topografía, interacciones, etcétera. Podrás revisarlos permitidos sobre el material que debo. Página web. No se puede negar que el crecimiento y desarrollo más rápidos está en el mundo de los dispositivos móviles . Tiene repercusiones significativas para Web diseñada para, con el énfasis en la palabra diseño. cambio de comunicación visual iniciado por el diseño de la APP móvil está abriendo camino al diseño Web también, y todo comenzó con el cambio de logotipo de Instagram. El diseño contemporáneo a menudo utiliza colores más y más brillantes. Juntos, tiene Grady INT están de vuelta, pero son consignas y algo sutiles. A menudo se reza con simples iconos de diseño plano y tipografía prominente. ¿ Qué es interesante? Resplandor están haciendo su camino icono del dedo del pie y el diseño del logotipo también. Pero como siempre, en el caso de Grady INTs, hay que tener mucho cuidado de no ir por la borda con ellos. Por suerte, existen herramientas en línea que pueden ayudarte en crear ingredientes de buen aspecto para tus diseños Web . El mejor ejemplo es una herramienta llamada U I Grady ints dot com. Aquí encontrarás una fantástica colección de hermosas INTs Grady, junto con los códigos de color para Easy Implementation, uno de los elementos de más rápido crecimiento en el diseño de sitios web. Oriente. El uso fuera del video de las imágenes en movimiento de pantalla completa que se utilizan a menudo como fondos en lugar de imágenes a pop ups y video incrustado de video de redes sociales es un must have cuando se trata contenido. El uso más generalizado del video es que se muestre como fondo en las secciones de héroes de los sitios web. El mejor modo de utilizar el video en este formato es hacerlo complementario al mensaje y un llamado a la acción que se están poniendo sobre el video. Pero a veces, sobre todo en los sitios web personales, los videos son despejados por cualquier visual. Ellos son amable presentación fuera del dueño del sitio web. También hay videos que de alguna manera imitan imágenes fijas. El movimiento del sitio es limitado. Imagina viento soplando en los árboles, haciéndolos perfectos como videos de fondo, pero agregó que algo extra especial al diseño sin ser distraído. Internet dice que el video es rey en estos días. Es muy posible que en algún momento de tu diseño, se le pida a carrera diseñar un sitio web que va a estar usando video en algún formato. Por eso es una muy buena idea echar un vistazo más de cerca a esta tendencia. Cada vez más diseñadores aceptan el hecho de que realmente necesitan pensar en sus diseños como que se ven con más frecuencia en las pantallas de los teléfonos inteligentes en lugar de en los portátiles. Eso conlleva un cambio total en el desarrollo de sus diseños. El escritorio versión del sitio se convierte en Onley, un derivado de su original móvil. Ese diseñador debe preguntarse a sí mismo. Una pregunta fundamental se verá bien solo smartphone. Pero la pregunta puede eventualmente cambiar en el futuro con el desarrollo fuera de los wearables. A lo mejor es hora de empezar a preguntarnos ¿Se verá bien en un smartwatch? Lo que nos lleva a la última renta de nuestra lista, que son tarjetas que diseño. El idea detrás de las tarjetas es meter el contenido en pequeños contenedores para que sea dispositivo cruzado . Desde smartwatches hasta escritorios grandes. Cada contenedor es un cúmulo de información sobre una idea específica. El interfaz es simplificado y fácilmente comprensible. Este enfoque también se utiliza en muchos blogs modernos, donde un artículo en la página de aterrizaje tiene su propio módulo. Estas son las siete tendencias más importantes en el diseño Web en la actualidad. Es una buena idea estar al tanto de ellos ya que no se trata sólo de visuales, sino que son conceptos bastante enteros fuera de la entrega efectiva de contenido a los usuarios. A continuación, echarás un vistazo a algunos lugares alrededor de la Web donde podrás encontrar alguna graninspiración de diseñoWeb inspiración de diseño 21. 7.2Donde encontrar la inspiración adecuada para tu próximo diseño: En este video, echaremos un vistazo a algunos lugares alrededor de la Web donde encontrarás gran inspiración de tu próximo proyecto de diseño Web. El primer sitio web que recomendaría se llama unas palabras dot com deletreado con un triple doble tú para www. Aquí encontrarás muchos ejemplos de diseño diferentes recopilados en categorías como ilustración, blogging corporativo, etcétera. Si te gusta un diseño en particular, puedes visitar el sitio web de la fuente y echar un vistazo a cómo se construyen. Lo que, caso, tendencias allí siguiendo y simplemente aprender del mejor segundo sitio web que recomendaría es un mercado temático de WordPress llamado theme forest dot net. Aquí encontrarás no solo temas de WordPress, sino también diseños laterales codificados en HTML. Es un enorme repositorio fuera de diferentes diseños Para tu inspiración. Puedes elegir entre muchas categorías diferentes, y también puedes previsualizar cómo funciona cierto diseño en el mundo real. También puedes visitar Web design inspiration dot com aquí, incluso también solo etiquetas y categorías específicas por las que deseas ordenar sus diseños. Es un gran recurso fuera de diversos diseños. Creo que es la variedad que es el aspecto más importante fuera de este repositorio de diseño Web vilificado lotes y mucho fuera repositorios de inspiración de diseño Web alrededor de la Web. Si estos tres no son suficientes para ti, aunque creo que para empezar les va a ir bien, solo puedes Google Diseño Web, inspiración e inmenso tú mismo en el mundo del diseño Web. Creo que a estas alturas ya no tienes suficiente lista para empezar a llegar con tus propios diseños. Conoces los principios que conoces, las tendencias y dónde buscar inspiración. La siguiente parte es comenzar a usar el diseñador de afinidad para hacer que tus ideas cobren vida. 22. 8.1Cada diseño de sitios web necesita un scaffolding: desde un punto de vista típico de diseñadores ansiosos. Crear un marco de alambre para el diseño de un sitio web es tan aburrido como redundante. Bueno, eso no es cierto. De hecho, un marco de alambre puede ayudar a acelerar tremendamente tu flujo de trabajo, y te puede ahorrar mucho tiempo. Muchas ideas que parecen geniales en tu cabeza cuando las estás imaginando tienden a verse mal cuando se ponen en una pantalla de computadora. Y confía en mí, lo sé por experiencia, pero ¿qué es un marco de alambre, y por qué estoy haciendo tanto al respecto? Los marcos de alambre son versiones esquemáticas de sitios web que te ayudan en la ización visual de los bloques de construcción de sitios web. Hay una tonelada de enchufes, herramientas en línea y recurso se paga y gratis que para ayudarte en la creación de marcos de alambre. Pero en tan solo un segundo, diseñaremos nuestra propia biblioteca de marco de alambre, o al menos los elementos esenciales de un marco de alambre, y luego los importaremos a nuestra biblioteca de activos. Pero primero, disecemos la idea del encuadre de alambre y su aplicación práctica. Para empezar, es posible que desee crear cajas simples que correspondan con los elementos de los sitios web. Es buena idea ponerlo en contra de un bien que ya estás familiarizado con esta etapa preliminar es la forma más básica de salir. Construir un andamio de sitio web Piensa en ello es un simple garabato que se supone que te mostrará si lo que hay en tu cabeza se verá bien en papel o pantalla. Las cajas más típicas serían representar una sección de héroes de navegación de Brandon Element, imagen, pancartas, pie de página, etcétera. El siguiente paso sería construir a la jerarquía de información con tipo. En esta etapa, su elección de fuente no es tan importante como lo es usar diferentes tamaños de fondos para mostrar las diferencias en importancia de los elementos de los sitios web. Por lo general, los elementos más importantes se presentarán para usarlos en un tamaño de fuente mayor, y los elementos menos importantes se presentarán utilizando un tamaño de fuente más pequeño. siguiente paso para enfatizar la importancia de los elementos de los sitios web es mediante el uso de diferentes tonos de gris. En la regla general se dice que los colores más oscuros significan mawr. Elementos importantes y colores más claros significan elementos menos importantes. Entonces así es como se ve un marco de alambre típico. Creo que es una buena idea tener tu propia biblioteca de marco de alambre para que puedas usarla siempre que estés diseñando un sitio web. El diseñador de afinidad te permite construir tus propios elementos de encuadre de alambre y ponerlos en grupos separados de activos. Echemos un vistazo al proceso de construir estos elementos en afinidad. Diseñador. 23. 8.2Construir tu propio marco de red en Designer: la hora de construir su propio sistema de marco de alambre, creo que debe comenzar con esos elementos que es más probable que esté utilizando en un escenario típico de diseño Web. Es decir, si quieres puedes un credo, todos los elementos que posiblemente puedas imaginar. Pero creo que si primero creas los elementos esenciales, tendremos una gran base para construir y expandir marcos de alambre. Pero, ¿cuáles son esos elementos esenciales? Creo que vamos a empezar con una marca en bloque una navegación, junto con un menú de hamburguesas, un héroe sección block presume, un texto horizontal y divisor de fondo. Icahn Sidebar y un pie de página. En estos días, podría ser una buena idea crear un cable de video desde elementos hasta por razones con las que ya estás familiarizado. Entonces construyamos nuestra biblioteca de marco de alambre esencial. Quiero que lo consideres como un punto de partida para construir tu propia biblioteca. Yo quiero que aprendas el proceso y la lógica detrás de él. Esto le permitirá crear sus propios marcos de alambre extensos. Tengo un sencillo documento full HD ya creado, pero honestamente, cualquier documento, letreros que me permitieran crear tu obra de arte cómodamente estará bien. Observe, sin embargo, que no he decidido crear un tablero de arte para este tipo de trabajos de bocetos. No creo que sea necesario un tablero de arte. También me aseguraré de que la U I Snap in preset Oriente se encienda. Empezaré con crear un bloque de imagen. Este se usará en muchos elementos, así que creo que es bastante lógico empezar con él. Simplemente agarraré la herramienta de rectángulo y crearé un rectángulo en el panel de transformación. Entraré 16 para con y 94 altura, y lo estoy haciendo porque la relación 16 por nueve es la relación de aspecto de pantalla más típica. Y las imágenes en un sitio Web generalmente se mostrarán de esta manera, igual que los videos. Por supuesto, es demasiado pequeño tubo utilizable, así que buscaré sus proporciones en el panel de transformación y aumentaré el tamaño fuera del rectángulo. Pero el hecho de que empezamos con los 16 por nueve píxeles hará que el nuevo oponente rectángulo ese 16 por nueve relación de aspecto. No quiero que tengamos ningún trazo, pero sí quiero tener un gris bastante más oscuro, Phil una vez que se haya creado, dibujaré dos líneas intersecantes que indicarán que a esto, en realidad es un elemento de imagen. Por lo que agarraré la pluma tal y lo pondré en el modo de dibujo de línea. Voy a alegrarme, Línea simple que va a tener un trazo blanco de un punto. Y no Phil, claro, bajaré la opacidad a alrededor del 25 al 30%. Por último, vamos a copiar la línea y basarla de nuevo en. Entonces volvamos horizontalmente, usando el panel de contexto. Todo lo que queda por hacer es traerlo a nuestra biblioteca de activos. Y por cierto, si no tienes la biblioteca de activos encendida, solo tienes que ir al View y luego estudiar y elegir activos en el panel de activos. Crearé una nueva categoría, que renombraré como marco de alambre. Ahora solo puedo seleccionar la imagen y desde el menú del panel elegir y de selección para empezar a construir su biblioteca. Y así, conseguimos el primer elemento creado, y ya empezamos a construir la biblioteca. Sigamos, sin embargo, en el siguiente video 24. 8.3Vamos a continuar construyendo la biblioteca: Empezaré por crear un elemento de anillo esposa de video. Y para eso clonaré el elemento de imagen y me desharé de las líneas interiores. Ahora vamos a crear un símbolo de botón de reproducción para eso. Agarremos su herramienta de triángulo y creamos triángulo que tendremos que rotar y volver a dimensionar un poco. Cuando eso esté hecho le dará un Phil blanco. Bajar la opacidad al 25% y alinearla con el rectángulo. Agrupemos a estos chicos para que ahora podamos agregarlos a nuestra biblioteca de marcos de alambre, igual que agregamos al elemento de imagen. Ahora vamos a crear un elemento combinado de imagen y texto. Nuevamente, reutilizaré la imagen que ya tengo, pero le añadiré un título y extraeré elementos. Para eso, agarraré la herramienta de texto marco y dibujaré un cuadro de texto que será como un Zweig como la imagen. No introduciré ningún texto, pero usaré la opción de insertar texto de relleno en su lugar. Por supuesto, es una buena idea hacer que el título parezca un título real, así que cambiaré la fuente junto con su tamaño y estilo. Lo clonaré ahora y cambiaré la familia de frente, estilo de Sonny y el líder también. Por lo que con esta parte puede parecerse más a un extracto de publicación de Blawg. El beneficio de crear este elemento de esta manera específica es que después de convertirlo en un grupo y luego en un activo y luego lo arrastre a la página, no puedo redimensionarlo y dejar que el software llene los marcos de texto con texto. Y aún así, si quiero, puedo cambiar el tamaño de los marcos de texto, hacer encoger o ampliar tanto el título como el extracto de texto, y eso es bastante útil. Siguiente elemento creará es que volverán a logotipo. Usaré el elemento de imagen, pero esta vez lo convertiré en un cuadrado. También añadiré una palabra en el lado derecho de la misma. Ahora voy a agrupar a estos tipos y los convertí en un activo. A continuación se creará un sistema de navegación. Bueno, eso es igual de fácil en una sola pieza de editor de texto, luego duplicarlo. Son divertidos de usar para el Manual Inc no deberían ser demasiado grandes ni atrevidos. También creemos un menú de hamburguesas. Y esas son esas tres líneas horizontales que cubren al hombre principal. ¿ Te acuerdas? Está bien, genial. Agarremos la pluma tal y luego asegurémonos de que esté en el modo de línea ha creado una línea simple que va a tener un dos puntos alguien a golpe oscuro y no Phil. Cuando eso esté hecho, duplicemos la línea dos veces y transformemos nuestro manual de hamburguesas en un activo. Nuestro próximo orden del día es crear una sección de héroes, y esto realmente nos dará la oportunidad de aprovechar una flexibilidad bastante grande a la hora de crear activos dentro de un diseñador. Estaba atascado con tomar prestado el activo de imagen y en grande, y bastante. A continuación, vamos a crear un encabezado grande y audaz escrito en contraste, en color claro, seguido de algún texto corporal más pequeño. El último acento aquí sería agregar un llamado a la acción. Entonces vamos a crear un botón usando la herramienta de rectángulo y la herramienta de tipo, por supuesto, que agrupará los elementos de botón y luego agrupará piezas viejas excepto el fondo pero una línea todo bien a la mitad de la imagen de fondo. Si sabemos agrupar todos estos elementos se debilitan, conviértelos en un elemento de marco de alambre de héroe, pero si los mantenemos separados, podemos ingresarlos a los activos por separado, lo que nos permite tener un activo de héroe y separar elementos como un fondo encabezando cualquier pieza fuera cuerpo gravado. Bueno, eso es bastante útil, ¿ no crees? Con todos estos elementos, ahora podemos crear un elemento de función. Se puede arrastrar el activo de imagen al tablero de pegar, luego el encabezado y su cuerpo gravados. Ahora es solo cuestión de apagar el elemento de imagen en un cuadrado y cambiar en el frente del encabezado y cuerpo gravado para hacer esto así mientras el elemento de marco funciona. - No , tenemos prácticamente todos los elementos que necesitamos para armar un marco de alambre de sitio web. Ocasionalmente, tendremos que utilizar la herramienta de rectángulo para crear un plano por concesión, y si lo desea, puede crear elementos de marco de alambre rectangulares. Pero me apegaré a los bloques esenciales y crearé fondos a medida que vaya. Entonces hagámoslo realmente. Echemos un vistazo a agregar alambre de elementos para crear una visión esquemática de nuestra página web 25. 8.4Cómo usar los activos para crear un marco de red de red: Una vez que se crean todos tus activos, están listos y esperando que los uses para construir tu marco de alambre. En este video, vamos a echar un vistazo a cómo usar prácticamente tus activos para crear un marco de alambre. El proceso es súper fácil y agradable. Te recomendaría usar una rejilla como base para tu marco de alambre. Es una buena idea simular un escenario de diseño web de la vida real al crear un marco de alambre. No obstante, si se trata de un marco de alambre muy, muy preliminar, si se quiere simplemente sacar la sensación del proyecto, no es absolutamente necesario usar la rejilla. Empecemos con la creación de la sección de encabezado. Traeré los bloques de Brandon y navegación y los posicionaré adecuadamente, dejando una cantidad bastante decente de espacio en blanco arriba y abajo. No, es crear rápidamente un fondo claro para nuestro sombrerero primero todos agrupan los elementos del encabezado e inicializaron la opción de inserción detrás de selección en la barra de herramientas. Ahora, cuando empiezo a crear un ángulo erecto que se extiende por toda la página, puede ver que se inserta detrás de los elementos más pesados. Lo último que habría que hacer sería alinear todo bien al grupo central todos los elementos y renombrarlos como Encabezado No. Entramos a la sección de héroes de la página web. Lo más probable es que este activo necesite un poco de afinación fina. Por ejemplo, tal vez quieras expandirte o contratarte. Quizás quieras cambiar la posición de los elementos y quizá el tamaño del teléfono también. El bello off para trabajar con activos en effin en diseñador es que puedes seleccionar fácilmente elementos dentro de grupos haciendo doble clic en ellos y cambiarlos en ellos como cambiarías objetos regulares. Empezaré la siguiente sección agregando otro encabezamiento y un subtítulo. Esos tipos también podrían necesitar algunos tuiteando, dependiendo de cómo los hayas creado antes. Podrían necesitar a su color de fondo para ser cambiados. Tamaño ajustado. A lo mejor vamos a querer cambiar la alineación de izquierda a centro ahí realmente flexible y en efecto. Si decides que es posible que los necesites en la biblioteca de activos de marco de tu esposa, solo puedes agruparlos y agregarlos al panel de activos. Sí, puedes crear diferentes activos fuera de los activos ya existentes. Nadie salta algunos artículos destacados. Crearé dos filas con cuatro elementos en cada uno de ellos Traeré uno de artículo destacado y lo modificaré hasta que se vea justo como yo quería. Y como quiero tener cuatro fuera de ellos en una fila, un artículo no puede exceder tres columnas de nuestra gran. Una vez creada, solo lo duplicaré intenta a la derecha y luego todos ellos una vez al fondo. Por último, seleccionaré todas las piezas, agruparé y dibujaré un fondo debajo de ellas, utilizando la misma técnica que con el fondo del encabezado. Ahora puedo cambiar el nombre de esta sección y llamarla algo así como destacados. Pero puedes nombrarlo cualquier cosa que haga que esta sección sea fácilmente reconocible. El siguiente apartado que podemos crear podría ser un de nuestro tipo blawg de sección. Entonces vamos a traer el encabezado de sección y ajustarlo para el bloque presume, podemos usar ya sea los artículos destacados, elementos o artículos blawg. Esta es sólo otra prueba de lo flexible que es este programa. Es decir, puedes agarrar el elemento destacado, hacer que la imagen vaya a la izquierda y el texto a la derecha mientras preservas int como activo. Yo quiero tener solo para bloquear presume en cada fila, por lo que una publicación no puede superar las seis columnas. También quiero tener que salirse de las jadas, así que sólo podemos clonar la esquina superior. - supuesto Por supuesto, como antes, podemos saber agrupar todas estas piezas y crear un fondo ligeramente más oscuro para la acción de bloques . Incluso podrías experimentar con poner elementos claros sobre un fondo oscuro, pero por ahora, lo mantendré simple. - La última parte que creará es el pie de página Sección. Los pies de página suelen tener un fondo distinto y son vacaciones bastante grandes. Podrán sostener el logotipo y el lema de la empresa. Algunos enlaces, entre ellos Social Media, Instagram de Ling's, feeds, extractos, etcétera. Esta vez comenzaré con crear un fondo más oscuro sobre el que colocaré los elementos del pie de página en el lado izquierdo. Añadiré el bloque de imagen que representaría el logotipo. Podría necesitar algunos ajustes de color, por lo que es fácilmente visible contra el fondo más oscuro Debajo de él. Añadiré algunos gravados que podría ser el sobre extracto de EU para alguna información adicional. decir, Esdecir,es sólo un marco de alambre, así que sólo estamos probando la colocación de ciertos elementos, no tratando de crear el diseño final. Crearé una variación de en instagram feed extract en el paseo, y lo construiré, usando el activo de imagen que puedo redimensionar ligeramente si es necesario, y crearé dos filas de imágenes aquí Debajo de él, yo agregará otra pieza de texto y algunos pequeños elementos de imagen que representan las redes sociales. Aiken. - La última etapa sería agrupar todos los elementos del pie de página y nombrar adecuadamente al grupo recién creado . Y ahí vamos. Creamos nuestro propio un marco de alambre. Quería mostrarte el proceso de construir un marco de alambre fuera de activos que puedes crear tú mismo. Solo imagina lo intrincados que pueden ser los marcos de tu esposa si solo pasas algún tiempo en diseñar activos de buen aspecto. medida que te conviertas en crear un marco de alambre, agregarás más y más elementos a tu biblioteca. Y pronto tendrás todos los elementos necesarios para crear y frames, con cero a poco ajustes necesarios. Pero si no tienes ganas de crear tus propias bibliotecas de marco de alambre, siempre puedes buscar algunas herramientas y el recurso está en línea. Tienen sus limitaciones, pero es buena idea saber cómo funcionan y comprobar. Si quieres usarlos en tu propio flujo de trabajo de diseño Web, y los exploraremos a continuación 26. 8.5Wireframing en línea: Hay muchas herramientas, y el recurso está en línea que puedes usar para construir tus propios marcos y prototipos de esposa. El problema con ellos es que la mayoría de los que tienes más probabilidades de encontrar son pagados . Tienen algunas capacidades gratuitas limitadas. Pero para descubrir su verdadero potencial, hay que pagar en la mayoría de los casos, una cuota recurrente. Ahí hay uno. Hasta que tal vez quieras echar un vistazo al que se llama wire frame dot cc, y te permite construir rápidamente prototipos fuera de sitios web. Si quieres usarlo, recomendaría empezar por cambiar algunos ajustes. En primer lugar, puedes optar por mostrar una arena de 12 Colin, que siempre es una buena idea, y en segundo lugar, te recomiendo cambiar el ancho y la altura del marco de alambre en la parte inferior de la pestaña de ajustes. El único que tienes que hacer para empezar a construir una esposa desde aquí es empezar a dibujar. En la herramienta se te mostrará una caja de opciones para elegir. Puedes convertir tu dibujado en un cuadro dext imagen lista párrafo, etcétera. Puedes agrupar los elementos que creaste e incluso arreglarlos correctamente si es necesario. Un inconveniente importante del taburete que solo parece completamente libre es que para compartir o bajar con tu esposa marco, tendrías que apuntarte a su servicio. Y si quieres hacer eso serán mis invitados. Pero hay otras formas de acelerar el marco de alambre en proceso. Si Google plantillas de marco de alambre gratis, encontrarás mucho fuera de marco de alambre libre. El recurso es descargar y utilizar en sus propias bibliotecas de marco de alambre. Es decir, si no tienes ganas de construir la tuya propia, realidad echemos un vistazo a crear una biblioteca de marco de alambre a partir de esos elementos listos antes de que empecemos. Creo que vale la pena manejarlo en que si el archivo que has descargado es un archivo PSD, te alegrará descubrir que abrirlo es un pedazo de pastel para diseñador. Aunque sea un archivo ilustrativo. Ofendido, el diseñador lo abrirá sin un segundo de vacilación. La mayoría de estos repositorios listos para hacer un marco de alambre contendrán elementos que puede usar para construir sus propias bibliotecas. Podrás grandes los que te gusten y los hace juntos para aturdidores. Agarra el panel de activos y crea una nueva categoría. Cambie el nombre a su gusto. Pero gracia nombre algo descriptivo. No. Se puede sólo un arrastrar y soltar los elementos que necesita y les gusta a la biblioteca para que pueda utilizarlos más adelante. Por supuesto, todo este proceso es opcional. Es decir, si quieres, solo puedes dejar el archivo tal cual y copiar y pegar los elementos que necesitas a tu archivo de marco de alambre. Eatherly funciona, y será tu tarea decidir cuál se adapta a tu bateador de flujo de trabajo específico. Yo, sin embargo, recomendaría sin embargo, usar el panel de activos ya que siempre puedes mantenerlos a mano en tu espacio de trabajo, y no tienes que buscar esos mientras específicos de archivos de marco de alambre. Entonces creo que tenemos el marco de alambre y la materia bastante bien cubierta. Podemos pasar a otro aspecto importante fuera de prepararnos para empezar a diseñar, que es elegir y optimizar imágenes, y yo viene 27. 8.6Hablemos de imágenes e íconos: es difícil imaginar un sitio web sin imágenes y otros elementos gráficos. Es cierto hay algunos diseños que utilizan la tipografía Onley, pero son proyectos muy, muy neech. Es probable que en tu carrera como diseñador Web, estés usando imágenes en tus proyectos y las estés usando mucho. Es esencial saber cómo manejarlos en tus diseños. Entonces, vamos a explorar el tema ahora. La forma más fácil de agregar una imagen en afinidad. Se dice que el diseñador usa el lugar. Herramienta de imagen. Una vez que lo golpees, se te pedirá que selecciones una imagen que deseas colocar. Es un, por cierto, mismo que elegir el comando de lugar desde el menú del archivo. Si estuvieras usando una versión más antigua fuera de ilustrador antes de dar a los diseñadores tiro, probablemente te hayas frustrado mucho silencio siempre que quieras que recorte una imagen porque , bueno, no había donde podrías hacerlo sin usar una máscara de recorte. Un diseñador de muebles viene con un cultivo factorial. Será que puede recortar imágenes de manera fácil y rápida. Todo lo que tienes que hacer es agarrar el cuadro delimitador por cualquiera de sus bordes y simplemente arrastrar. Pero eso no es todo lo que puedes volver a colocar libremente la imagen dentro del nuevo cuadro delimitador, y una vez que estés contento con la operación, puedes simplemente asegurar rápidamente solo esta imagen usando la función de exportación en el Aquí. Puedes elegir con qué formatos de archivo quieres ir, pero te recomendaría apegarte a los archivos. Antiguo nativo. decir, si es una selección J, solo elige J. Pick y tal vez baje la calidad a alrededor del 75%. Este será un buen límites entre un tamaño de archivo razonable y una buena calidad de imagen. Solo recuerda elegir selección sin fondo ya que el área en la que deseas exportar cuando estén listas las imágenes más antiguas, te aconsejo que las comprimas aún. Es extremadamente importante para la velocidad general de la página, lo que afecta la búsqueda y optimización en palabras simples Me gusta de Google. Cuando las imágenes en la página están muy bien optimizadas, hay muchas herramientas online fuera que pueden ayudarte a optimizar tus imágenes. Acerca del que más tiendo a usar se llama minúsculo J p g dot com para aprovechar sus capacidades de compresión. Simplemente dragón imagen en la ventana y letra esa herramienta hace su magia. Ahora hablemos brevemente de lugares de la Web donde puedes encontrar imágenes de buena calidad de forma gratuita. Yo he estado Es una situación perfecta cuando tu cliente quiere pagar por imágenes de stock. Pero por suerte hay repositorios en línea con buenas imágenes gratuitas que puedes sugerir como alternativa . Mi lugar favorito para fotos de stock gratis es el cartel llamado pixels dot com. Se trata de una gran fuente de fotos sacadas de otros repositorios de fotos de stock, por lo que no necesitas navegar por todos y cada uno de los servicios de fotos STOCK para encontrar imágenes que estás buscando. Simplemente ingresa la palabra clave que necesitas y elige entre decenas de imágenes de alta calidad. En cuanto a Aikens, Onley tienden a usar el icono plano dot com al más. Es un gran sitio web de forma gratuita para usar iconos de alta calidad para tu proyecto de diseño Web. Cuando encontraste una Nikon, te gusta. Puedes ponerlo en una colección o previsualizarlo, y si lo deseas, puedes descargarlo en este lugar por consejo. Escoger s v. G. En cuanto al tipo de archivo. Se trata de un tipo de archivo de factor estándar que funcionará muy bien en cualquier tipo de aplicación de diseño. También visito gratis pick dot com, que es un enorme repositorio fuera de todo tipo recurso de diseño es imágenes, iconos. Pia es estos vectores, etcétera. No, sin embargo, que algunos de ellos se les paga. Entonces así es como se puede trabajar con las imágenes dentro de fit in designer. Por supuesto, medida que pasemos a la parte de diseño del curso, verás algunos ejemplos de la vida real fuera del manejo de imágenes en un escenario de diseño Web. Por ahora, solo quiero que recuerden que se pueden importar con la herramienta de imagen de lugar. Los vas a recortar con la herramienta de recorte factorial, y puedes exportarlos usando el comando de exportación. Pasemos ahora a la última parte de la etapa de preparación, que es crear estilos de texto. 28. 8.7Cómo crear estilos de fuente en Affinity Designer: estilos de texto en diseñador ofendido son una gran manera de acelerar un proceso de diseño Web. Si eres un fan off, cambia los conjuntos de fuentes demasiado rápido. Vista previa de diferentes variaciones de tu diseño. Te encantarán los estilos de texto. Cómo crear un estilo de texto basado en las características de una pieza de texto que ya has escrito. Simplemente selecciona ese texto y luego dirígete al panel de estilos de texto y elige ese estilo que deseas crear. Contar con un cuadro de diálogo que aparece de inmediato permite ajustar todas las opciones de carácter y párrafo a las que se puede acceder desde los paneles de carácter y párrafo. Lo mejor es empezar por ingresar el nombre de los estilos, y sugeriría hacerlo algo descriptivo. Tu estilo de texto se mostrará en el panel Estilos de texto, por lo que dado a él un nombre fácilmente distinguible hará que el proceso de diseño sea más rápido. Una buena técnica de producción es nombrar tu estilo en base a sus características más importantes. Si, por ejemplo, desea que el estilo de texto utilice el fondo Roboto Condensed, tenga ah, sólo los caracteres verdes que tengan 32 puntos de tamaño pondrán esa información como el nombre del estilo de texto . Cuando termines tu texto, estaré listo y esperando que lo apliques a cualquier pieza de texto que desees. El proceso de creación de estilos de texto en Afinitor designer es realmente flexible. No es absolutamente necesario tener a algunos previamente creados gravados para crear un estilo de texto fuera de él. Simplemente puedes presionar cualquiera de los botones de estilo de texto nuevo saludo en el panel de estilos de texto y elegir su tipo de deseo de la lista. Y si necesitas cambiar algunas cosas sobre tu estilo de texto, pero debías conservar el original, lo mejor es simplemente duplicar y duplicar el estilo de texto, haz clic derecho sobre él y elige duplicar. Aparecerá el mismo cuadro de diálogo donde podrás ingresar los ajustes que ish sin un hecho en el estilo de texto original. Por defecto, el estilo de texto duplicado obtendrá un Suffolk numérico. Entonces de nuevo es una buena idea empezar con cambiar su nombre para eliminar un estilo de texto click derecho sobre él y elegir, eliminar o presionar la basura que consideré en la esquina inferior derecha del panel. Crear y administrar estilos de texto en Afinitor designer es un proceso sencillo, y por eso es soleado en estilos de texto a tu texto. Seguro que una vez que comiences a crear mucho fuera de diseños de sitios web, los encontrarás esenciales en tu día a día. Estilos de texto rutinarios concluyeron esa etapa de preparación del proceso de diseño Web. Ahora tienes los conocimientos sobre todas las herramientas y técnicas que son esenciales para diseñar un sitio web en afinidad Diseñador. Entonces empecemos la parte de diseño. 29. 9.1Descripción de la parte de diseño: bienvenido al diseño de parte del curso. En los próximos videos, aprenderás a diseñar esta página de aterrizaje usando afinidad, diseñadores, herramientas, técnicas y algunos trucos. Pero antes de saltar al diseño y al proceso de diseño, permítanme descomponer rápidamente este proyecto por ustedes. Entonces aquí arriba, se puede ver el encabezado, y llegamos al logo de la izquierda que básicamente son solo algunas letras, un trozo de texto con las INT de Grady agregadas a ella. Y cuando estaremos creando este solo, aprenderás a agregar ingredientes a la vida Fondo a la vida. Texto en afinidad Diseñador a la derecha. Nos dieron la navegación junto con em bateó un íconos de redes sociales. Estos chicos de aquí son todos como archivos V g, y pronto aprenderás a en mal como V g rápido, como estos iconos sociales y cómo trabajar con ellos dentro de un sentimiento al diseñador debajo del encabezado que llegamos a esta sección de héroes aquí mismo, esta gran imagen en el fondo, con algún pequeño rectángulo siendo puesto sobre su para hacer esta imagen un poco más oscura. Nosotros, por supuesto, tenemos esta gran pieza de tipografía aquí mismo. Y sacamos esta pequeña pieza de un deslizador. Navegación. Es decir, pensé que si alguna vez quieres crear un deslizador para tu para tus diseños es una buena idea alertar cómo crear una pequeña navegación para una sección de deslizador. A continuación, conseguimos otra sección con estos artículos destacados aquí mismo. Por supuesto, antes de eso, conseguimos este gran divisor con algún encabezado de sección y algún texto de subtítulos y llegamos a estos iconos de ayuda aquí mismo, divididos en dos filas. Y para columnas aquí mismo dejé el texto al mismo para todos y cada uno de estas piezas. Las piezas fuera de los artículos destacados porque pensé que, um, ya sabes, teclear todo en ah tipo en palabras nuevas frases serían simplemente redundantes. Eso acabo de copiar el texto y luego simplemente reemplazarlos thes iconos Y esos dos igual que los iconos aquí en el encabezado. Son dos. Son como elementos v g incrustados en este documento. Por lo que de nuevo aprenderás a incrustar como V g m iconos como estos en un documento de diseñador infinito . A continuación nos dieron otra sección que sería como un divisor entre los artículos destacados y bueno, la siguiente sección que viene justo aquí. Como se puede ver que una gran imagen a la izquierda y nos dieron algunos simples gravados a la derecha con un fondo oscuro. Esto es otra tal vez no toda una tendencia, sino una tendencia pieza off y eso es que está usando el diseño Web en este momento. O sea, dividiendo toda la página en dos secciones y poniendo algo bien, bueno, una imagen en un lado y alguna otra pieza. Bueno, pedazo de texto del otro lado. Bueno, esa es solo una de las tendencias del diseñador en este momento. A continuación llegamos a algo así como a de nuestra acción de bloques. Así que creé una sección más ligera aquí mismo con un fondo más claro. He agregado algunas imágenes de la izquierda y estos chicos, ya que puedes ver nuestras plazas y agregar estas imágenes nos permitirá aprender otra técnica fuera para trabajar con imágenes en el interior. Si en diseñador con estos chicos, esta imagen aquí mismo, esta gran imagen en la sección de héroes. Bueno, estos tipos iban a estar usando la herramienta de cultivo factorial. Pero con estos chicos, bueno, vamos a usar Bueno, es una técnica ligeramente diferente en la creación de imágenes perfectas para tu imagen bien destacada en bloque poste para tu bloque Publicar extractos como estos chicos aquí mismo. Entonces conseguimos algún tipo como un feed de instagram que quería. Yo quería que pareciera una fuente de instagram. Y en realidad aquí aprenderemos a agregar imágenes y a usar máscara de recorte en el interior, ofendiendo al diseñador. Y esta será otra, creo, creo, tercera vía técnica usando imágenes dentro de un diseñador de muebles. Es decir, te prometí que si bien una vez que lleguemos a la parte de diseño del curso, aprenderás a usar prácticamente imágenes dentro del diseñador de afinidad al diseñar sitios web. Y estas tres técnicas, creo que será un think va a satisfacer tu hambre de por técnicas de manejo de imágenes . A continuación, tenemos un pie de página justo aquí que, como puedes ver, tiene un color de fondo completamente diferente, complet