Diseño web en Affinity Designer para principiantes y un poco más avanzados | Dawid Tuminski | Skillshare
Menú
Buscar

Velocidad de reproducción


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

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

teacher avatar Dawid Tuminski

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Lecciones en esta clase

    • 1.

      Diseño web en Affinity Designer Promo Video

      2:08

    • 2.

      Introducción al curso

      1:49

    • 3.

      Qué es el diseñador de afines y cómo configurarlo para el diseño web

      3:11

    • 4.

      Las habilidades de diseño web de Affinity Designer.

      8:43

    • 5.

      Los 10 principales principios de buen diseño web

      3:53

    • 6.

      Los 10 principales principios de buen diseño web: continuado

      4:34

    • 7.

      El factor más importante a tener en cuenta antes de elegir los colores

      4:06

    • 8.

      Cómo mezclar colores para obtener la mejor experiencia de usuario posible

      4:36

    • 9.

      Cómo elegir los colores de "corrección psicológica"

      4:37

    • 10.

      7 herramientas fáciles para elegir esquemas de colores a prueba de errores

      6:32

    • 11.

      Una historia de tipografía web muy corta

      2:41

    • 12.

      Cómo mezclar colores para obtener la mejor experiencia de usuario posible

      5:18

    • 13.

      Cómo elegir las fuentes adecuadas para los encabezados

      3:37

    • 14.

      Cómo mezclar fuentes para encabezados y texto corporal

      4:18

    • 15.

      La fuente perfecta para el diseño de la interfaz de usuario

      2:35

    • 16.

      Secciones de encabezado, branding, navegación y héroes

      3:52

    • 17.

      Las secciones centrales e inferiores de tu diseño de sitios web

      4:13

    • 18.

      Qué son las rejillas y cómo usarlas

      3:08

    • 19.

      Cómo diseñar tu propia rejilla

      4:09

    • 20.

      7 tendencias de diseño web que gobiernan el mundo del diseño web

      8:58

    • 21.

      Dónde encontrar la inspiración adecuada para tu próximo diseño

      2:28

    • 22.

      Cada diseño de sitios web necesita andamios

      3:13

    • 23.

      Construye tu propio wireframe en el diseñador

      4:41

    • 24.

      Vamos a continuar construyendo la biblioteca

      10:08

    • 25.

      Cómo usar los activos para crear un wireframe

      11:19

    • 26.

      Enmarcado de cables en línea

      4:28

    • 27.

      Hablemos de imágenes e iconos

      5:53

    • 28.

      Cómo crear estilos de fuentes en Affinity Designer

      4:00

    • 29.

      Resumen de la parte de diseño

      6:01

    • 30.

      Vamos a crear las muestras de colores

      4:05

    • 31.

      Vamos a crear los estilos de texto

      2:34

    • 32.

      Echemos un vistazo a las imágenes e iconos

      2:34

    • 33.

      Vamos a crear el logotipo primero

      3:25

    • 34.

      Construyamos los enlaces de menú

      4:04

    • 35.

      Vamos a agregar los iconos de redes sociales

      8:05

    • 36.

      Vamos a empezar añadiendo la imagen principal

      6:41

    • 37.

      Vamos a empezar añadiendo la imagen principal

      3:02

    • 38.

      Cómo cambiar el tamaño de la imagen

      3:02

    • 39.

      Hagamos que la imagen sea un poco más oscura

      3:14

    • 40.

      Ahora vamos a agregar el texto principal

      5:04

    • 41.

      Vamos a agregar la navegación de deslizantes

      3:47

    • 42.

      Vamos a empezar a crear la primera secion destacada

      3:35

    • 43.

      Vamos a agregar los artículos destacados

      10:07

    • 44.

      Vamos a agregar la segunda sección de artículos destacados

      5:40

    • 45.

      Empecemos a crear la sección de blog

      8:13

    • 46.

      Vamos a reemplazar las imágenes

      3:05

    • 47.

      Vamos a empezar a construir la galería de imágenes

      7:13

    • 48.

      Vamos a crear la primera columna del pie de página

      4:13

    • 49.

      Terminemos el diseño y el pie completo

      3:56

    • 50.

      Entregar el diseño al cliente

      3:39

    • 51.

      Entrega del archivo al desarrollador

      2:30

    • 52.

      Cómo usar la persona de exportación para exportar los activos a granel

      2:29

    • 53.

      Gracias por ver el curso

      0:52

    • 54.

      1Vamos a descubrir el Wireframe para el diseño

      6:08

    • 55.

      2Vamos a descubrir el diseño de blogs

      5:30

    • 56.

      3Vamos a echar un vistazo a nuestros activos

      6:06

    • 57.

      4Cómo crear el logotipo y la naval

      7:38

    • 58.

      5Vamos a agregar los iconos de redes sociales

      6:18

    • 59.

      6Vamos a agregar las primeras imágenes

      7:22

    • 60.

      7Vamos a agregar el sombreado a las imágenes

      7:57

    • 61.

      8Vamos a agregar los botones de Navifation

      5:24

    • 62.

      9Vamos a crear un contenedor para la publicación del blog

      5:16

    • 63.

      10Vamos a agregar las primeras piezas de texto

      4:29

    • 64.

      11Vamos a agregar las piezas de texto que Remining

      6:07

    • 65.

      12Vamos a empezar a crear la rejilla de publicaciones de blog

      5:57

    • 66.

      13Vamos a crear la primera tarjeta de publicación de blog

      5:19

    • 67.

      14Vamos a agregar las tarjetas restantes

      6:35

    • 68.

      15Vamos a agregar el enlace de publicaciones anteriores

      4:17

    • 69.

      16Vamos a explorar el proyecto Sidebar

      2:37

    • 70.

      17Vamos a crear el cuadro de búsqueda

      3:54

    • 71.

      18let's Create the about mí Section

      6:37

    • 72.

      19Vamos a crear la sección de texto del Sidebar

      4:48

    • 73.

      20Vamos a crear el primer contenedor para las publicaciones más populares

      4:06

    • 74.

      21Vamos a crear la lista de las publicaciones de blog más populares

      6:29

    • 75.

      22Vamos a crear la sección de anuncios

      2:50

    • 76.

      23Vamos a tarta creando el pie de página

      4:07

    • 77.

      24Vamos a explorar diferentes conceptos de pie de página

      2:35

    • 78.

      Termina el proyecto y explora el próximo

      7:08

    • 79.

      26Let's Explore el diseño de publicaciones individuales

      3:13

    • 80.

      27Vamos a crear la imagen destacada y el contenedor de correos

      5:47

    • 81.

      28Vamos a agregar el título de la publicación del blog

      6:21

    • 82.

      29Vamos a agregar los párrafos e imágenes

      10:11

    • 83.

      30Let's Add the Icons of Social Media

      7:18

    • 84.

      31Vamos a agregar el pre Entrada siguiente Navegación

      8:26

    • 85.

      32Vamos a agregar la sección de publicaciones relacionadas

      7:21

    • 86.

      33Vamos a empezar a crear la sección de comentarios

      4:46

    • 87.

      34Vamos a crear los textos para los comentarios

      5:55

    • 88.

      35Vamos a crear los formularios de post comentario

      9:02

  • --
  • Nivel principiante
  • Nivel intermedio
  • Nivel avanzado
  • Todos los niveles

Generado por la comunidad

El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.

1212

Estudiantes

2

Proyectos

Acerca de esta clase

Este curso trata de usar Affinity Designer para el diseño web. Si no estás demasiado familiarizado con el software, primero aprenderás rápidamente de qué se trata y cómo configurarlo para el diseño web.

Antes de empezar a diseñar cualquier cosa en Affinity Designer, veremos los conceptos de diseño web y las buenas prácticas. Aprenderás a elegir colores para tu diseño y dónde encontrar la inspiración de colores y temas de colores ya creados.

También aprenderás la tipografía básica de diseño web, que es extremadamente importante no solo para un buen diseño web, sino para un buen diseño en general. Aprenderás todo sobre el texto corporal, los encabezados y cómo emparejarlos para una gran experiencia de usuario.

Luego echaremos un vistazo a la estructura de un sitio web típico, por supuesto, con un diseño sensato. Hablaremos de logotipos, navegaciones, barras laterales y todos los bloques de construcción de la otra web.

Después de eso hablaremos de lo que hay y lo que no hay en el mundo del diseño web ahora mismo. También buscaremos algo de inspiración de diseño web alrededor de la web.

Con todos esos conocimientos y habilidades, pasaremos a la parte de diseño del curso. Y por favor, ten en cuenta que tienes que tener al menos algunas habilidades básicas para seguir sin esfuerzo

Este curso no se trata de aprender todo lo que hay que saber sobre las habilidades de Designer. Si lo necesitas, mira mi curso de diseñador de afines para principiantes.

Al final de este curso, deberías poder diseñar sitios web de forma independiente usando Affinity Designer.

Conoce a tu profesor(a)

Teacher Profile Image

Dawid Tuminski

Profesor(a)

Designer, coder and educational entrepreneur.
Adobe Certified Expert in Illustrator whose courses were listed in the Udemy's TOP 10 best reviewed courses.

Creating online courses on design tools like Adobe Illustrator and Adobe Photoshop, logo design, web design, graphic design freelancing, online teaching and digital marketing .

Teaching +30k students in 160 countries worldwide.

Loves the freedom of creating courses and prides in his teaching method, which is straight to the point and with a smile.

His motto: Boring instructors are worse than boring topics!

His students value his courses for their conciseness, professionalism and actionable tips and techniques they can apply in their day-to-day design tasks and online education businesses.

Ver perfil completo

Level: Intermediate

Valoración de la clase

¿Se cumplieron las expectativas?
    ¡Superadas!
  • 0%
  • 0%
  • Un poco
  • 0%
  • No realmente
  • 0%

¿Por qué unirse a Skillshare?

Mira las galardonadas Skillshare Originals

Cada clase tiene lecciones cortas y proyectos prácticos

Tu membresía apoya a los profesores de Skillshare

Aprende desde cualquier lugar

Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.

Transcripciones

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