50 banners de ilustración de páginas web: cómo diseñar banners de páginas web

¿Quién puede decirme algo sobre la producción de un banner?

Seguir las reglas de belleza formal en el diseño de un banner y adoptar una estructura formal especial hará que la página web esté llena de personalidad y funcione bien. La ubicación es diferente a la de sitios web similares y hace que la gente lo recuerde profundamente.

(1) La suavidad y belleza de las formas orgánicas.

La forma orgánica se compone de un cierto número de curvas. Es una forma formada por la competencia entre fuerzas externas e internas de los objetos naturales. La forma orgánica está llena de tensión interior, dando a las personas una sensación de sencillez, calidez y vitalidad. Por ejemplo, en la Figura 5.56, las curvas crean un fuerte contraste con la ilustración personalizada. (2) El encanto único de las formas accidentales.

Las formas accidentales son gráficos formados aleatoriamente bajo la acción de la fuerza. Son muy aleatorios y tienen un efecto natural e interesante. El método de utilizar factores accidentales para refinar la belleza hace que el diseño del banner sea más exclusivo. La definición de pinceles, formas de pincel, extensiones, texturas y efectos de filtro en Photoshop son muy aleatorias y se pueden aplicar al diseño de banners.

(3) Reserve una gran área de espacio del Banner para la creación.

En diseño web, puede reservar espacio para el diseño de banners. Si el diseño de banners ocupa un espacio grande y el espacio ocupado es un área importante y valiosa, puede ser difícil de manejar durante el proceso de diseño, pero. Si se hace bien, obtendrá el doble de resultado con la mitad de esfuerzo y transmitirá el mensaje de forma muy eficaz. (4) Redacción eficaz y botones orientados a la acción.

En el diseño de banners, a través de la visualización de productos reales, junto con eslóganes inspiradores y textos llamativos, se puede inducir directamente a los usuarios a hacer clic en botones orientados al comportamiento, lo que permite que la página web obtenga más clics de los usuarios y Atención. Puede lograr un muy buen efecto de diseño. (5) Efectos combinados de exhibición de productos enriquecidos.

Utilice el método de apilamiento para diseñar efectos especiales de banner para mostrar diferentes ejemplos de obras y adjunte un eslogan introductorio, de modo que la página web se vuelva más convincente, rica en contenido y toda la página tenga capas y pueda ser recogidos. Inventario de los elementos/tipos/estilos/pasos de diseño del diseño de banners

Para un diseñador, banner definitivamente no es una palabra desconocida. Podemos ver que la demanda de banner está involucrada básicamente en varios campos de la industria actual. La sombra de los banners en todas partes, ya sea en la web o en dispositivos móviles, ¡por lo que dominar el diseño de los banners es una habilidad esencial para todo diseñador!

Los banners (y los anuncios publicitarios) son la parte más importante de Internet. Esta forma de publicidad es también la más común en la actualidad. Los anuncios de banner, también conocidos como anuncios de banner, son tableros de anuncios rectangulares que abarcan una página web. Cuando los usuarios hacen clic en estos banners, generalmente se vinculan a la página web del anunciante.

Es una imagen que expresa el contenido del anuncio de un comerciante y se coloca en la página del anunciante. ¡Es la forma más básica de publicidad en Internet!

A continuación explicaremos los banners desde estos aspectos:

Uno: Componentes del banner

Dos: Tipos de banner

Tres: Selección del estilo del banner

Cuatro: Pasos para el diseño del banner

1: Los componentes del banner

Resumo brevemente los componentes principales del banner:

Y los elementos principales del banner son: copia + elementos + fondo

Los elementos se pueden subdividir en: elementos = productos + modelos + logotipos + adornos (los elementos aquí deben seleccionarse de acuerdo con la situación real del banner y son opcionales)

Como se muestra en la figura:

(De pétalos)

Dos: Tipos de banners

Los tipos de banners que resumo aquí se dividen principalmente en:

01: Banners de promoción de productos (productos nuevos, productos de gran venta)

02: Banners de eventos (promociones de eventos de festivales, promociones de productos)

Los banners se dividen simplemente en dos tipos Debido a que diferentes banners tienen diferentes efectos y propósitos, necesitamos diseñar banners de diferentes estilos.

Para los banners de promoción de productos, lo más importante es resaltar las características del producto, por lo que los elementos más importantes. La necesidad del diseño del banner debe ser el producto y una breve introducción de redacción. En cuanto a los elementos de adorno, también podemos elegir los elementos apropiados de acuerdo con las características del producto real, o no podemos usar elementos de adorno, el fondo ¡Definitivamente es esencial!

01: Banner de promoción de producto:

Producto + texto + fondo

Por ejemplo:

( (de pétalos)

Los casos anteriores son todos estilos de diseño para banners de promoción de productos. Una de las características más comunes que tienen es que el producto se amplía y se vuelve a ampliar para mostrar completamente las características del producto, de forma concisa. de espacios en blanco resaltan las características del producto, haciendo que los ojos del usuario se sientan atraídos involuntariamente hacia el producto en sí.

Banner de promoción del producto:

Producto + redacción publicitaria + elementos + fondo

Por ejemplo:

(de pétalos)

La característica de este tipo de banner es que además del producto en sí, se añaden algunos otros elementos como adorno del banner. ¡El efecto hace que la imagen parezca más saturada o más dinámica!

Entonces la pregunta es

¿En qué circunstancias es bueno agregar elementos al diseño del banner del producto? ¿En qué circunstancias no agregarlos? ¿Son buenos los elementos?

Primero: cuando es necesario mostrar al máximo las características del producto, es mejor que optemos por no agregar elementos que interfieran con el producto.

Segundo: Para productos simples, lo mejor es no agregar elementos decorativos. Una gran cantidad de espacio en blanco es más adecuado para el estilo de productos simples.

02: Banner de evento.

Producto + redacción publicitaria + elementos + fondo

Por ejemplo:

(de pétalos de flores)

Para el diseño de banners para eventos, la mayoría de Elegiremos colores brillantes y coloridos, y la imagen estará saturada e impactante, creando una especie de atmósfera animada. También es esencial agregar elementos, porque para el diseño de pancartas para eventos, cuanto más animada sea la imagen, mayor será la intensidad de la actividad. lo que será más atractivo para los usuarios. El título del evento también debe ser lo más destacado posible.

Dos: Selección de estilo de banner

¡También hay muchos estilos de banners, pero el! Los estilos elegidos para pancartas de diferente naturaleza son definitivamente diferentes, y diferentes pancartas tienen diferentes combinaciones. El estilo le da a las personas un efecto visual completamente diferente. Solo una combinación adecuada puede hacer que la pancarta exprese mejor sus características y propósito.

Por ejemplo. :

01: Banner de inicio de producto simple El banner promocional es más adecuado para un estilo simple, elegante y limpio

(de pétalos)

02: Tecnología de alta gama productos ba

nner, elige un estilo con sentido de la tecnología

(reflejado a través de gráficos y colores con sentido de la tecnología)

(de pétalos)

03: Moda Los carteles de ropa son adecuados para elegir el estilo de las imágenes de moda

(reflejados a través de formas y estilos, gráficos y colores únicos)

(a partir de pétalos de flores)

04 : Los carteles de marcas de lujo de alta gama son adecuados para combinar estilos atmosféricos y de alta gama

(Reflejados por colores de alta gama como negro y rojo, negro y dorado, etc.)

(De pétalos)

05: Banner de estilo lindo para niñas\niños, adecuado para combinar con elementos de estilo lindo

(A través de elementos lindos: ilustraciones, líneas, globos, corazones, redondos fuentes, vitalidad (para reflejar los colores, etc.)

(de pétalos)

06: Los carteles de estilo/cultura/festival nacional son más adecuados para elegir elementos con temperamento cultural

(A través de caligrafía de estilo chino y elementos chinos antiguos: sellos, pinturas de paisajes chinos, marcas de tinta, abanicos, recortes de papel, paneles de jardín, patrones antiguos, nubes auspiciosas, ópera de Pekín, pergaminos, etc.)

(de pétalos)

Dos: Pasos del diseño del banner

01: Comprender y determinar los requisitos de diseño del banner

02: Aclarar los propósito del diseño del banner

p>

03: Determinar el estilo de diseño del banner en función de los requisitos de diseño del banner obtenidos

04: Seleccionar la estructura de diseño del banner adecuada

05: Seleccionar elementos coincidentes para decorar el banner Efecto general (agregado según las necesidades reales)

06: Selección de combinación de colores

01: Comprender y determinar el diseño necesidades del banner

Para esta comprensión de las necesidades del diseño se dice que no importa qué diseño estés haciendo, la premisa es un paso indispensable y el paso más crítico si no tienes claro el diseño. requisitos, los resultados del diseño definitivamente no satisfarán las necesidades reales

Entonces, ¿qué requisitos específicos debemos aclarar para el diseño del banner?

El primer punto: determinar el texto del diseño del banner

La redacción publicitaria también es muy importante para los diseñadores. Punto: el diseñador puede encontrar inspiración para el diseño basándose en la información del texto y también puede conocer la dirección general del estilo de diseño.

El primer punto: determinar el Tamaño del diseño del banner y plataforma de entrega

Se determina el texto Finalmente, también necesitamos saber la plataforma y ubicación del banner, su tamaño y si es necesario adaptarlo a la visualización de cada plataforma.

02: Aclarar el propósito del diseño de banner

Para diseñar un banner se debe diseñar un banner para lograr un propósito determinado, por eso antes de diseñar el banner, se debe entender claramente cuál es el propósito del El diseño del banner es, por ejemplo: ¿quieres promocionar productos o promocionar productos? La naturaleza de los dos es completamente diferente.

03: Determine el estilo de diseño del banner en función de los requisitos de diseño del banner obtenidos.

Podemos encontrar el estilo de diseño del banner en los requisitos de redacción del banner. Palabras clave para el posicionamiento, como: soporte para automóvil con operación inteligente de voz completa A5

A partir de esta copia del tema, las palabras clave que que se le ocurren son: lenguaje completo, inteligencia

Para esto, al comprender las palabras clave, definitivamente pensaremos primero en la imagen de la era tecnológica e inteligente, ¡así que hemos elegido el estilo aquí!

04: Elija la estructura de diseño de banner adecuada

p>

Podemos dividir aproximadamente la estructura de diseño de banner en:

Estructura centrada, alineada a la izquierda estructura, estructura alineada a la derecha

La estructura del banner debe basarse en la situación real de acuerdo con las diferentes necesidades. ¡La elección está hecha!

05: Elija elementos coincidentes para decorar el. efecto general del banner (agregar según las necesidades reales)

Para los elementos decorativos del banner, también debemos basarnos en la situación real y las características del banner del producto. Por ejemplo, los banners de productos simples no requieren elementos decorativos, mientras que los banners de eventos son mejores.

Para diseños de pancartas lindos, como niñas o niños, debe elegir elementos decorativos más adecuados, y la selección de elementos decorativos para diferentes formas de pancartas también es diferente (anteriormente se dio una breve introducción, así que no la repetiré aquí)

06: Selección de combinación de colores

La elección del color también es muy crítica. La combinación de colores seleccionada para diferentes pancartas también es diferente. La combinación de colores adecuada hará que el producto sea más prominente. la imagen es más llamativa y la sensación también es diferente.

Por ejemplo:

*El oro negro y el rojo negro darán a las personas una sensación de lujo.

*Azul , negro, la combinación de colores fríos como el morado, la imagen da a las personas una sensación de dureza, espacio, velocidad y poder, que es más adecuada para el sentido de la tecnología

* La combinación de rojo, naranja , amarillo y morado crearán un ambiente cálido más adecuado para la moda y las actividades

*La combinación de negro, blanco y gris dará a las personas una sensación fría e inaccesible, y es más adecuada para las elecciones de estilo de. grandes marcas

*Blanco, la combinación de gris dará a las personas una sensación de tranquilidad, literatura, temperamento y elegancia, y es más adecuada para la selección de productos sencillos.

Ejemplos prácticos :

Requisitos de redacción publicitaria:

Soporte para automóvil A5 con operación inteligente por voz completa

Soporte de voz que saluda y obedece

Uso de iFlytek AIUI solución de interacción persona-computadora, la conducción inteligente se puede lograr tan pronto como abre la boca

Tamaño del diseño: 1920x650px

Propósito del diseño: el propósito del diseño del banner que obtuvimos de acuerdo con la demanda es promocionar el nuevo producto soporte para automóvil A5

Paso 1: Copiaremos la información y proporcionaremos Colocar el producto en el lienzo

Paso 2: Aclarar nuestro título principal "Completo soporte para automóvil con operación inteligente por voz A5"

Así que ampliamos el título principal para resaltar el título principal.

Paso 3: elige el estilo del banner, porque lo que necesitamos reflejar aquí es la inteligencia del producto, por lo que nuestro estilo puede definirse como tecnológico.

Paso 4: Elija la estructura de diseño, ¡elijamos aquí una estructura simple izquierda y derecha!

Paso 5: Elija elementos decorativos Los elementos decorativos también deben seleccionarse en función del efecto de la ciencia y la tecnología, y se pueden extraer de la redacción publicitaria, por ejemplo aquí podemos extraer: líneas y gráficos tecnológicos, gráficos de voz, etc.

Paso 6: Ajuste de la posición general y combinación de colores También procesamos los titulares de texto en diferentes estructuras jerárquicas para hacerlos más prominentes, la redacción de los subtítulos también se procesa ligeramente de acuerdo con el estilo general de la imagen, para que la redacción y el diseño. La imagen es más armoniosa y unificada, incluido el impacto de la luz alrededor del producto, que también necesita ser procesado

Al final, obtenemos el efecto de banner anterior ¡Guau! ¡Ahora hemos diseñado un banner tecnológico simple!

¡Está bien! El conocimiento de hoy es cada vez más completo. ¡Espero que te guste!

Artículos recomendados de números anteriores

—

Diseño de formato: 7 métodos sencillos de diseño de imágenes

10 diseños de carteles gráficos de líneas creativas

2 consejos para enseñarte la combinación de colores ¡Consejos para deshacerte de las dificultades de combinación de colores!

Ideas innovadoras de diseño de carteles y métodos para diseñar banners web

Los métodos para diseñar banners web son los siguientes:

1. Centrarse en el texto

Aunque la mayoría de las imágenes en el sitio web ahora recomiendan la combinación de imágenes y texto, lo que puede mejorar la experiencia del usuario, ahora vemos que muchas de las imágenes en el sitio web son principalmente imágenes, por lo que es fácil caer en un malentendido: banner imagen Es solo para mostrar los principales productos del sitio web o la imagen general de la empresa en forma de imágenes. De hecho, es difícil que un banner de este tipo atraiga usuarios. Porque algunos usuarios todavía necesitan ciertas palabras para entender el contenido del anuncio. Si está basado en texto, hágalo conciso y completo, y dichas imágenes y textos pueden ayudar a aumentar la tasa de clics.

2. No mostrar información de precios

Los consumidores en general son muy sensibles al precio, a menos que el precio de su producto sea mucho más bajo que el precio de los productos de la misma industria. una ventaja de precio; de lo contrario, no se recomienda mostrar información de precios en el banner. Porque una vez que el precio no sea psicológicamente aceptable para los usuarios, los usuarios ignorarán este banner.

3. Añade palabras como gratis o gran descuento

Según la psicología de consumo de muchos consumidores, les gustan mucho los productos de alta calidad y bajo precio. Lo mismo ocurre con la promoción de sitios web corporativos y el diseño de banners. Agregar grandes descuentos gratuitos al banner también puede ser muy eficaz para atraer usuarios.

4. El diseño tiene un llamado a la acción

Solemos ver algunos banners en Internet que tienen botones o enlaces similares a clics, y subconscientemente tenemos la idea de ​​​​Quizá haga clic en ellos. No puedo evitar hacer clic en ellos. Este enfoque también es excelente para mejorar las tasas de clics.