40 excelentes casos de diseño web
El diseño de una página Acerca de nosotros no es difícil, pero no es fácil diseñar una versión perfecta. Por lo general, depende de su punto de partida. ¿Quiere un diseño personalizado o una operación de marca? ¿Quiere proporcionar su propia información de contacto u obtener la información de contacto del usuario? Los siguientes excelentes casos le indicarán cómo diseñar una excelente página Acerca de nosotros. .
1. Interfaz amigable
Una interfaz de contacto amigable siempre hará que las personas se sientan amigables. Si además tiene alguna funcionalidad y es fácil de leer, los usuarios se sentirán más cómodos. "¿En qué podemos ayudarle?" puede guiar a los usuarios a hacer clic en "Únase a nosotros", "Contrátenos" y participe en la suscripción por correo electrónico.
2. Muestre oficinas en todo el mundo
En la página Acerca de nosotros de Tool, el diseñador utiliza fuentes llamativas para marcar las direcciones y la información de contacto de las oficinas del equipo en Los Ángeles, Nueva York. York y Francia, ¿los usuarios que hacen clic en la página Acerca de nosotros solo quieren saber esta información? La información de contacto correcta y el 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 a diferencia de otras páginas similares, simplifica la comunicación. El proceso divide el contenido que los usuarios Puede prestar atención a 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 simplificar y desviar.
4. Avatares 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, y que es el resultado de su arduo trabajo. Los avatares pueden hacer que una página sea más personal y más real y accesible.
5. Anime a los usuarios a comunicarse
El propósito principal del diseño de la página Acerca de nosotros suele ser la comunicación, y el diseño de la página de Hello Innovation implementa completamente esta idea: tratar de alentar a los usuarios a Comunicarse activamente con el sitio web. Utilice un diseño amigable y accesible, deje información de contacto y anime a los usuarios desde la redacción hasta la dirección de correo electrónico. Hablemos, ¿qué tan difícil puede ser?
6. Utilice imágenes para transmitir metáforas
El Museo del Diseño tiene muchas colecciones relacionadas con el diseño y el número de teléfono en la página Acerca de nosotros es No solo es una colección del sitio web y sirve como una metáfora importante para transmitir la imagen de "comunicación" a los usuarios. Esto tambié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 pueden hacer que las personas sean inolvidables. La enorme cantidad de información que ingresan todos los días hace que las personas solo recuerden los más destacados. Sin embargo, es posible que los diseños extraños no sean adecuados para ninguna marca o sitio web, pero para esos sitios web extravagantes, esas ideas únicas siempre pueden funcionar.
8. Expresar la personalidad de la marca
Para los sitios web, es naturalmente razonable y apropiado presentar la personalidad de su propia marca en la página Acerca de nosotros. Así es como Boone Selections integra de manera elegante y profesional los colores de la marca y los elementos de diseño relacionados en la página Acerca de nosotros. Como empresa importadora de vinos profesional, 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
El diseño de esta página Acerca de nosotros es confiable y está en su lugar. El mapa de la página indica la ubicación de la empresa cuando se desplaza hacia abajo en la página cuando hace clic en él. , también puede ver la descripción detallada de la dirección, la forma de tomar el metro a lo largo de la línea, la dirección de correo electrónico para la comunicación, el número 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 simple e intuitivo.
El cuadro de diálogo "Saludar" en la parte superior avisa al usuario de manera muy directa. Siempre que se ingrese el contenido, el desarrollador del sitio web puede verlo.
11. Marca el horario de apertura/laboral
Para las webs oficiales de instituciones como restaurantes, museos, tiendas, etc. que tienen un horario comercial específico, marca el horario de apertura del almacenar en la página Acerca de nosotros. El tiempo dedicado a recibir consultas telefónicas permite a los usuarios recibir servicios de manera más eficiente.
12. Utilice fuentes llamativas
La fuente del título en la página Acerca de nosotros de Panache utiliza un "Travaillons Ensemble" muy llamativo. Esta fuente es más liviana, única pero extremadamente poderosa. Alto reconocimiento.
13. Utilice una combinación de colores atrevidos
La combinación de colores clásica negro, blanco y amarillo se aplica a la página Acerca de nosotros de Sponge. Esta combinación de colores de fuerte contraste se combina con detalles meticulosos para representar. , Haz que toda la página luzca nítida y texturizada. Los diseñadores utilizan colores brillantes para centrarse en la información más importante, lo que facilita que los usuarios la noten.
14. Utiliza 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 lo suficientemente estilizadas y personalizadas. La página Acerca de nosotros de Legwork Studio ha agregado una ilustración de 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 el complejo fondo del boceto. Coloque los detalles de contacto y la información relevante. allá. La complejidad y la sencillez, dibujadas a mano y gráficas, forman un marcado contraste.
16. Utilice formularios para comunicarse
La comunicación es mutua. Puede enviar mensajes al sitio web o puede dejar su información de contacto y dejar que el operador del sitio web le envíe mensajes. QED Group deja un formulario directamente en la página Contáctenos a través del cual puede dejar sus datos de contacto.
17. Utilice 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 A Avoue. No hay un diseño magnífico ni funciones sofisticadas. Anillo delgado con la información de contacto más básica en el medio, así de directo.
18. Humor
Un diseñador con humor no perderá ninguna oportunidad de ser divertido. Los diseñadores de Bio-Bak también intentarán impresionar a la gente incluso en la página de contacto. Las fuentes de graffiti y la redacción divertida hacen reír a la gente. Puedes sentir el sentido del 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 información de contacto, pero el diseño del formulario es más exclusivo. No hay un formulario especial, pero. el uso de los símbolos de lugar de ocupación recuerda a los usuarios el contenido que debe completarse en cada ubicación, que es considerado, intuitivo y muy atento.
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 está integrado con el. Fondo personalizado, la información está integrada y la presentación es personalizada.
21. Presenta tu negocio
No es inusual presentarse en la página Acerca de nosotros, pero hay muchas otras cosas que puedes hacer además de esto, como presentar tu propio negocio. , mostrar también es una buena forma de atraer a los usuarios para que hablen de tu propia marca. La página Acerca de nosotros del Hola Lunes hace precisamente eso.
22. Fondo de vídeo
Añadir 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, lo utiliza en la página Acerca de nosotros. El vídeo Los antecedentes no solo se ajustan a la naturaleza del trabajo de su equipo, sino que también dan vida a toda la página Acerca de nosotros.
23. Utiliza el diseño de cuadrícula.
Para diseñar una página estructurada, la cuadrícula es siempre tu mejor amiga. La página Acerca de nosotros de Urban Influence utiliza una cuadrícula para organizar la información en toda la página. El contenido que debe mostrarse, la parte para la entrada del usuario, la parte decorativa y el mapa para mostrar están claramente distribuidos en la página.
24. Haz que la interfaz sea más amigable.
Si quieres que la interfaz sea más amigable, los diseñadores tienen mucho trabajo por hacer. El diseño de interfaz claro y fácil de leer es el más básico. La información debe transmitirse con claridad, sin combinaciones de colores agresivas, métodos de presentación que hagan que las personas se sientan familiares y amigables y métodos de interacción fáciles de operar. bien.lugar.
25. Guía paso a paso
Poner en contacto implica una serie de operaciones. Si todo el proceso de interacción se divide en varios pasos, se puede guiar al usuario paso a paso. operar, agregar animación y micro interacción es definitivamente una experiencia diferente.
26. Agregar accesos directos de contacto
Las personas responsables de las diferentes partes del equipo suelen ser diferentes. Los usuarios suelen tener objetivos claros al abrir la página de contacto Cómo agregar la parte de preguntas frecuentes. a él?, y agregar la información de contacto de contactos específicos para que los usuarios puedan comunicarse con diferentes personas a cargo de manera más directa.
27. Integre con otras partes del sitio web
El sitio web de Robby Leonardi parece estar diseñado como un juego de computadora de estilo plano. Cuando navegas por la página, seguirás al protagonista diferente. Las páginas hacen cosas diferentes, e ir a la página Acerca de nosotros también es una de las "escenas". Esta es una forma de integrar páginas y vale la pena aprenderla.
28. Foto del equipo
Muchos sitios web son operados por un equipo completo de desarrollo y diseño. También es muy razonable y personalizado utilizar una foto de los miembros del equipo como imagen de fondo. Página Acerca de nosotros.
29. Utilice espacios en blanco
Por lo general, los espacios en blanco pueden mejorar la sensación de espacio y estructura de toda la página, y Beta Tataki colocó un número de teléfono con un sentido completo de diseño en la página. Página Acerca de nosotros. La presencia de contenido como información de contacto se fortalece al dejar espacios en blanco.
30. Haz uso de fuentes y diseños.
Las fuentes y diseños bien diseñados no sólo son decorativos, sino que también pueden contener cierto contenido. La página Contáctenos de Pauline Osmont utiliza negro, plateado y dorado para crear un diseño tipográfico atractivo. A medida que se desplaza hacia abajo en la página, verá formularios bien diseñados para facilitar la lectura.
31. Exhibir a mano
Esta también es una forma relativamente común de mostrar contenido en los últimos años. Los diseñadores sostienen personalmente tableros de exhibición para exhibir trabajos de diseño. Si se utiliza en la página de contacto, la técnica de este diseñador también es bastante apropiada. Al igual que esta página de Mark Jaworkski, las habilidades, la introducción y la forma del mensaje del diseñador se muestran claramente en esta pizarra que se mantiene plana.
32. Enumere la información de contacto de las redes sociales
¿Qué sitio web no tiene varias cuentas de redes sociales ahora? Publique todos los enlaces de redes sociales de su sitio web en la página Acerca de nosotros, para muchos. usuarios es más fácil contactar.
33. Toma prestados métodos de comunicación tradicionales.
El estilo retro es una buena opción, pero usar la información de contacto tradicional para diseñar parece más reflexivo e interesante. La página de contacto de Lionway está diseñada en forma de postal y parte de la información fija simplemente se incluye en una factura impresa.
34. Redacción divertida
El diseño de redacción 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 cercanos a ti, pero igualmente divertidos. La redacción ingeniosa también la hará memorable para los usuarios.
35. Muestra personalidad
El diseño de la página de contacto del estudio de diseño Resn es definitivamente una de las páginas más personalizadas en este conjunto de casos, llena de elementos de diseño al estilo de los 80 e imágenes del equipo. Los miembros que llevan capuchas de animales forman la mayor parte de la página.
36. Utiliza infografías
Las infografías son una técnica de diseño que está en auge en los últimos años. Si existe un contenido de visualización adecuado, también es bastante adecuado utilizar gráficos informativos. la página Acerca de nosotros. No es una mala elección. 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
El uso de dibujos animados e imágenes de estilo anime para presentar a los diseñadores y equipos de diseño en la página de contacto es un método muy común y muy eficaz en la página Acerca de nuestro de Melonfree. muestra imágenes de dibujos animados de diseñadores y desarrolladores.
38. Utiliza gráficos traslúcidos
Los ojos humanos siempre identificarán conscientemente el contenido de la tablilla de piedra deseada, por lo que incluso si los elementos traslúcidos se cargan juntos, no afectarán especialmente gravemente a la lectura. experiencia. El diseño de la página de Indofolio hace pleno uso de elementos translúcidos y coloca la información de contacto principal en un rectángulo translúcido. A través de los gráficos, los usuarios aún pueden ver los detalles del fondo, pero la información de contacto clave no quedará confusa.
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. Este diseño de página de Mario Petrone es bastante divertido e interesante.
40. Utilice únicamente un cuadro desplegable
La página de contacto de Spokes Pedicabs en realidad no es una página completa, pero en su lugar se utiliza un cuadro desplegable cuando hace clic. en el enlace de navegación, aparecerá este llamativo cuadro desplegable de color naranja.
Análisis de caso del sistema de color de diseño web
El naranja también se llama 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, que da a las personas una sensación de lujo y calidez, emoción y entusiasmo, alegría y vitalidad.
El naranja se usa ampliamente en páginas web. Puede crear diferentes atmósferas cambiando el tono del color. 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 naranja, a continuación se analizan diferentes tipos de páginas web.
1. Análisis de caso de diseño web de alimentación y dieta
Caso recomendado: naranja + amarillo + naranja oscuro
Toda la página es principalmente naranja, con diferente brillo y El "amarillo" puro se mezcla y la página es muy armoniosa y nada monótona. Las imágenes están bien resaltadas y las imágenes de comida tienen tonos similares, por lo que no serán demasiado abruptas. El uso del blanco para superponer capas en la página web tiene un sentido de jerarquía.
2. Análisis de caso de páginas web de entretenimiento
Caso recomendado: naranja oscuro + amarillo tierra + amarillo
Toda la página se basa en la combinación de naranja oscuro y amarillo claro. La pantalla hace que la página parezca más cálida, con una base oscura y texto amarillo, logrando un efecto visual prominente y discreto, dando vitalidad al sitio web.
3. Análisis de caso de sitio web de comercio electrónico
Caso recomendado: naranja + caqui + verde
Este caso utiliza relativamente muchos colores, y naranja El color caqui con Un mayor brillo de la ayuda a la navegación no se verá muy desordenado, pero será más distintivo y animado. Además, se utilizan algunos botones verdes para embellecer la página, lo que hace que la página parezca menos monótona y tiene un efecto visual de un poco de verde entre miles de naranjas.
IV. 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 hacen que la gente se sienta ordenada en medio del caos. Puede notar que la página usa rojo oscuro como texto y aparece naranja cerca del texto rojo, como el texto rojo sobre un fondo naranja en la parte superior, el título grande en rojo y el título pequeño en naranja. Página caótica y ordenada.
Resumen: El naranja se utiliza mucho ajustando la saturación y la pureza se pueden conseguir muy buenos efectos visuales. Por supuesto, además del impacto visual, se pueden utilizar adecuadamente tonos un poco contrastantes para suavizar el efecto visual. , debilitando así el impacto visual. Fatiga visual.