40 excelentes casos de diseño web
1. Interfaz amigable
La interfaz amigable siempre hace que las personas se sientan amigables. Los usuarios se sentirán más cómodos si tiene alguna funcionalidad y es fácil de leer. "¿Cómo podemos ayudarle?" puede llevar a los usuarios a hacer clic en "unirse a nosotros", "contratarnos" y participar en suscripciones por correo electrónico.
2. Mostrar oficinas en todo el mundo
En la página "Acerca de nosotros" de Tool, el diseñador marcó las direcciones de las oficinas del equipo en Los Ángeles, Nueva York y Francia en negrita. e información de contacto. ¿No es eso lo que quieren saber los usuarios que hacen clic en nuestra página? La información de contacto correcta y un diseño simple y directo hacen precisamente eso.
3. Simplifique el proceso de comunicación
La página de contacto de Productiong Location también adopta un diseño de página atrevido y visual, pero lo que se diferencia de otras páginas similares es que simplifica el proceso de comunicación y simplifica el proceso. El proceso de comunicación divide el contenido al que los usuarios pueden prestar atención y las partes específicas que deben comunicarse, de modo que los usuarios con diferentes necesidades puedan ser guiados directamente a páginas y partes específicas, logrando así el propósito de simplificación y diversión.
4. "Avatar" e información personalizada
Pon fotos de diseñadores y miembros del equipo para que los usuarios te conozcan. Lo más importante no es si tu avatar es lo suficientemente hermoso, sino que los usuarios sepan que detrás de este hermoso sitio web, hay un diseñador real y común como tú y como yo, que es el resultado de sus esfuerzos. Avatar puede hacer que una página sea más personal y también puede hacerla más real y relevante.
5. Incentivar a los usuarios a comunicarse.
El propósito principal del diseño de nuestras páginas suele ser la comunicación, y el diseño de la página de Hello Innovation implementa completamente este concepto: tratar de alentar a los usuarios a comunicarse activamente con el sitio web. Utilice un diseño amigable, deje información de contacto y anime a los usuarios a escribir textos publicitarios y dejar direcciones de correo electrónico. ¿Qué tan difícil puede ser hablar?
6. Utilice imágenes para transmitir metáforas
Hay muchas colecciones relacionadas con el diseño en el Museo del Diseño, y el teléfono móvil en nuestra página no es solo una colección del sitio web, sino que también transmite "La importante metáfora de la imagen de "comunicación" puede considerarse como una especie de "juego de palabras" en el diseño.
7. Crea diseños inolvidables
Los diseños extraños y la redacción interesante siempre son inolvidables. Con la enorme cantidad de información que se ingiere cada día, la gente solo recuerda los más destacados. Sin embargo, es posible que los diseños extravagantes no se adapten a ninguna marca o sitio web, pero para esos sitios web pintorescos, esas ideas únicas siempre entran en juego.
8. Expresión de la personalidad de la marca
Para los sitios web, es natural y razonable presentar su propia personalidad de marca en la página Acerca de nosotros. Boone eligió una forma tan elegante y profesional de integrar la paleta de colores de la marca y los elementos de diseño relevantes en la página web Acerca de nosotros. Como empresa profesional de importación de vinos, la página Acerca de nosotros de Boone Selections utiliza un diseño único y un diseño de página de desplazamiento para crear una atmósfera de marca única.
9. Mostrar información de contacto
También se trata de que el diseño de nuestra página sea sólido y esté en su lugar, aunque el mapa de la página muestre la ubicación de la empresa. Desplácese hacia abajo en la página y también podrá ver descripciones detalladas de las direcciones, condiciones de viaje en el metro, correos electrónicos de comunicación, números de teléfono, etc.
10. Dame un consejo
La página "Acerca de nosotros" del sitio web Deux Huit Huit no proporciona un método de comunicación tradicional, sino que está diseñada como un cuadro de diálogo intuitivo y sencillo. . El cuadro de diálogo "Saludar" en la parte superior recuerda directamente a los usuarios que siempre que ingresen el contenido, el desarrollador del sitio web podrá verlo.
11. Indicar horario de apertura/trabajo.
Para webs oficiales de instituciones con horarios comerciales específicos, como restaurantes, museos, tiendas, etc. , marcando el horario de apertura de la tienda y el horario de consulta telefónica en la página "Acerca de nosotros", lo que permite a los usuarios recibir los servicios de manera más efectiva.
12. Utilice fuentes llamativas
Panache utiliza un "Travaillons Ensemble" muy llamativo en la fuente del título de nuestra página. Esta fuente es más ligera y única, pero reconocible. Muy alto.
13, utilice una combinación de colores llamativos
La página "Acerca de nosotros" de Sponge adopta la combinación de colores clásica en negro, blanco y amarillo. Esta combinación de colores contrastantes combinada con descripciones detalladas hace que toda la página luzca nítida y texturizada. Los diseñadores utilizan colores brillantes en la información más importante para que a los usuarios les resulte más fácil notarla.
14. Uso de ilustraciones visuales
Las ilustraciones siempre pueden atraer la atención de los usuarios de una forma más visual, especialmente cuando las ilustraciones están suficientemente estilizadas y personalizadas. En la página "Acerca de nosotros" de Legwork Studio, se agrega una ilustración de una cabeza de lobo, combinada con fuentes escritas a mano, para crear una atmósfera personalizada.
15. Utilice gráficos simples
La página Acerca de nosotros de Giampiero Bodini no utiliza técnicas de diseño complejas, sino que coloca un rectángulo simple sobre un fondo de boceto complejo, con los detalles de contacto y temas relacionados. información. La complejidad y la sencillez, el dibujo a mano y los gráficos forman un marcado contraste.
16. Comunicarse con la forma
La comunicación es mutua. Puede enviar un mensaje al sitio web o dejar su información de contacto para que el operador del sitio web pueda enviarle un mensaje. QED Group ha dejado un formulario directamente en la página de contacto a través del cual puede dejar su información de contacto.
17, utilizando una combinación de colores monocromáticos
Simple, elegante y fácil de leer es el estilo de diseño de la página de contacto del sitio web de Joseph Avoy. No hay un diseño magnífico ni funciones sofisticadas, solo un anillo delgado con la información de contacto más básica en el medio, es muy directo.
18. Humor
Un diseñador con humor nunca perderá la oportunidad de ser divertido. Los diseñadores de Bio-Bak incluso usarán tonterías en la página de contacto. Las fuentes de graffiti y la redacción divertida hacen reír a la gente. Puedes sentir el humor del diseñador en cada detalle.
19. Complete el formulario
La página "Acerca de nosotros" de Anakin también permite a los usuarios completar su información de contacto, pero el diseño del formulario es más exclusivo. No existe un formulario especial, solo se utilizan marcadores de posición para recordar a los usuarios lo que se debe completar en cada ubicación. Es muy considerado, intuitivo y considerado.
20. Visualización personalizada de la ubicación de la oficina
Al igual que en el segundo caso, CPB Group tiene oficinas en todo el mundo, pero el estilo de diseño también es más exclusivo. El contenido de las distintas oficinas está integrado con fondos personalizados, la información está integrada y el estilo de presentación está lleno de personalidad.
21. Introducir negocios.
No es raro presentarse en la página Acerca de nosotros, pero hay muchas otras cosas que puedes hacer, como presentar tu negocio, mostrar tu marca e invitar a los usuarios a chatear. Eso es lo que hace la página Acerca de nosotros de Hello Monday.
22 Fondo de vídeo
Agregar fondos de vídeo a sitios web se ha convertido en un método muy popular, y Moodboard, que existe como un estudio de producción cinematográfica, utiliza fondos de vídeo en la página Acerca de nosotros. no sólo se adapta a la naturaleza del trabajo de su equipo, sino que también hace que toda la página Acerca de nosotros sea más vívida.
23. Utiliza el diseño de cuadrícula
Para diseñar una página estructurada, la cuadrícula es siempre tu mejor amiga. La información sobre nuestra página en Urban Influence utiliza una cuadrícula para organizar toda la página. El contenido que se mostrará, la parte de entrada del usuario, la parte decorativa y el mapa mostrado están claramente distribuidos en la página.
24. Hacer la interfaz más amigable.
Los diseñadores tenemos mucho trabajo por hacer si hacemos que la interfaz sea más fácil de usar. El diseño de la interfaz claro y fácil de leer es fundamental. La información debe transmitirse de forma clara, sin combinaciones de colores agresivas, una presentación familiar y amigable y una interacción fácil de operar. Todas estas son cosas que los diseñadores deberían hacer bien.
25. Guía paso a paso
Poner en contacto requiere una serie de operaciones. Si todo el proceso de interacción se divide en varios pasos, guiando a los usuarios a operar paso a paso y agregando efectos dinámicos y microinteracciones, definitivamente será una experiencia diferente.
26. Añadir accesos directos a contactos
Los líderes de las diferentes partes del equipo suelen ser diferentes. Los usuarios suelen tener un objetivo claro en mente cuando abren la página Contáctenos. Cómo agregar una sección de preguntas frecuentes y la información de contacto de contactos específicos para que los usuarios puedan comunicarse con diferentes responsables de manera más directa.
27. Integrarse con otras partes del sitio web.
El sitio web de Robbie Leonardi parece estar diseñado como un juego de ordenador plano. Cuando navegas por la página, irás a diferentes páginas y harás diferentes cosas con el personaje principal, y la página Acerca de nosotros es una de ellas. Es una "escena". Esta es una forma de integrar páginas y vale la pena aprenderla.
28. Foto de equipo
Muchos sitios web están dirigidos por un equipo completo de desarrollo y diseño, por lo que es muy razonable y personalizado tomar una foto de grupo como imagen de fondo de nuestra página.
29. Utilice espacios en blanco
Normalmente, los espacios en blanco pueden mejorar la sensación de espacio y estructura de toda la página, y Beta Tataki colocó una pieza muy diseñada en nuestra página. tiene sentido del tacto y la presencia de contenido como información de contacto se mejora a través de espacios en blanco.
30. Diseño de fuente flexible
Un diseño de fuente bien diseñado no sólo es decorativo, sino que también incluye cierto contenido. La página Contáctenos de Pauline Osmont utiliza negro, plateado y dorado para crear un diseño visual atractivo para la máquina tipográfica. A medida que se desplaza hacia abajo en la página, verá un formulario que es fácil de leer y formatear.
31. Show personal
Esta también es una forma común de mostrar contenido en los últimos años. Los diseñadores sostienen carteles para mostrar sus diseños. Esta técnica de diseño también es muy adecuada si se utiliza en una página de contacto. Al igual que la página de Mark Jaworkski, los consejos, las presentaciones y las tablas de mensajes del diseñador se muestran claramente en esta pizarra plana.
32. Enumera la información de contacto de las redes sociales.
¿Qué sitio web no tiene varias cuentas en redes sociales hoy en día? Para muchos usuarios, es más conveniente ponerse en contacto con los enlaces de redes sociales individuales de su propio sitio web en la página Acerca de nosotros.
33. Utilizar métodos de comunicación tradicionales.
El estilo retro es una buena opción, pero diseñar con información de contacto tradicional parece más reflexivo e interesante. La página de contacto de Lionway está diseñada como una postal, con cierta información fija simplemente incluida en la factura impresa.
34. Redacción divertida
El diseño del copywriting también es una parte importante de la página de contacto. Un diseño de redacción amigable y divertido hará que los usuarios se sientan cerca de usted, pero una redacción igualmente divertida y divertida hará que los usuarios lo recuerden.
35. Muestra tu personalidad
Contacta con el estudio de diseño Resn Nuestro diseño de página es definitivamente una de las páginas más personalizadas en este conjunto de casos. Elementos de diseño llenos de estilo de los años 80 e imágenes de miembros del equipo con pasamontañas de animales forman el cuerpo principal de la página.
36. Uso de mapas de información
Los mapas de información son una tecnología de diseño que ha surgido en los últimos años. Usar infografías en su página "Acerca de nosotros" también es una buena opción si hay un contenido de presentación adecuado. La página "Acerca de nosotros" de Quicksprout utiliza infografías para presentar contenido claro, fácil de leer y preciso.
37. Animación y dibujos animados
En la página "Contáctenos", es muy común y efectivo utilizar dibujos animados e imágenes de animación para presentar a los diseñadores y equipos de diseño. La página "Acerca de nosotros" de Melonfree presenta imágenes de dibujos animados de diseñadores y desarrolladores.
38. Utilice gráficos translúcidos
El ojo humano siempre identifica conscientemente el contenido de la estela, por lo que incluso si los elementos translúcidos se instalan juntos, no afectará seriamente la experiencia de lectura. El diseño de la página de Indofolio hace pleno uso de elementos translúcidos, colocando información de contacto central en un rectángulo semitransparente. Con los gráficos, los usuarios aún pueden ver detalles en segundo plano, pero la información de contacto clave no queda oculta.
39. Efecto dibujado a mano
Las páginas de contacto dibujadas a mano, especialmente aquellas que son bastante llamativas, siempre pueden hacer que los usuarios sientan la consideración del diseñador. El diseño de la página de Mario Petrone es bastante divertido e interesante.
40. Utilice sólo un cuadro desplegable.
La página de contacto de Spoke Tricycle no es en realidad una página completa, sino un cuadro desplegable. Este llamativo cuadro desplegable naranja aparece cuando haces clic en un enlace en la navegación.
Caso de estudio del sistema de color de diseño web
El naranja también se conoce como naranja o naranja. Su poder de penetración es superado solo por el rojo y su color es más cálido que el rojo. El naranja es un color muy vivo en el diseño web. Da a las personas una sensación de lujo y calidez, emoción y entusiasmo, alegría y vitalidad.
El naranja es muy utilizado en páginas web. Puede crear diferentes subatmósferas cambiando los colores, lo que no solo puede mostrar vitalidad juvenil, sino también lograr un efecto estable. La longitud de onda del naranja está entre el rojo y el amarillo y tiene significados simbólicos como salud, vitalidad, coraje y libertad. Para que todos comprendan mejor el color naranja, a continuación se analizan diferentes tipos de páginas web.
1. Análisis de caso de diseño de sitio web de catering
Caso recomendado: naranja + amarillo + naranja oscuro
Toda la página es principalmente naranja, con diferente brillo y pureza. El "amarillo" armoniza, la página es muy armoniosa y nada monótona. Muy buenas fotografías, los colores de las fotografías de comida son similares y no demasiado discordantes. Utilice el blanco para superponer la página web y darle una sensación de jerarquía.
2. Caso práctico de página web de entretenimiento
Caso recomendado: naranja oscuro + caqui + amarillo.
La página completa se muestra a través de una combinación de naranja oscuro y amarillo claro, lo que hace que la página parezca más cálida. La base oscura y el texto amarillo logran un efecto visual prominente y discreto, dando vitalidad al sitio web.
Tres. Análisis de caso de sitio web de comercio electrónico
Caso recomendado: naranja + caqui + verde
En este caso, hay relativamente muchos colores y la navegación naranja asistida por el color caqui más brillante no Parece muy desordenado, pero será más distintivo y animado. Agregue algunos botones verdes para decorar la página, para que la página no sea tan monótona y haya un pequeño efecto visual verde entre las miles de naranjas.
Cuatro. Estudio de caso del sitio web de una organización de desarrollo científico y tecnológico
Los colores utilizados en la página son relativamente complejos, pero dan a las personas la sensación de estar desordenadas y ordenadas. Puede notar que todas las páginas están escritas en rojo oscuro y que aparece naranja cerca del texto rojo, como el texto rojo en la parte superior, el naranja en la parte inferior y los títulos grandes de color naranja y los títulos pequeños de color rojo, lo que hace que la página esté ordenada.
Resumen: La naranja es muy utilizada. Ajustar la saturación y la pureza puede lograr muy buenos efectos visuales. Por supuesto, aunque proporciona impacto visual, se puede utilizar un poco de color contrastante para aliviar y aliviar la fatiga visual.