Diseño web Sitio web: cómo diseñar un sitio web
El diseño de la estructura del sitio web incluye el diseño de columnas del sitio web y el diseño de módulos del sitio web. Es una expresión lógica que determina los servicios proporcionados por el sitio web y también es la relación jerárquica entre las páginas.
1. Las columnas del sitio web pueden desempeñar un papel a la hora de delinear el importe.
2. Las columnas del sitio web tienen funciones de navegación claras.
3. Los módulos del sitio web deben estar ordenados, claros y estrechamente integrados.
2. Diseño del tema del sitio web
El diseño del tema del sitio web es en realidad el diseño del estilo de presentación visual del sitio web. El estilo del tema del sitio web debe atraer completamente la atención de los usuarios y brindarles una experiencia de visita agradable.
1. Diseñar un logotipo que refleje el contenido del sitio web y colocarlo en un lugar destacado del sitio web.
2. Los colores del sitio web deben estar unificados y resaltar el color del tema del sitio web.
3. Las imágenes del mismo tipo deben tener el mismo efecto.
4. El sitio web debe tener un eslogan promocional claro.
3. Tipos de diseño de sitios web
1. Diseño de fuente china
Este tipo de diseño se divide en columna superior, columna izquierda, área de contenido central y derecha. columna y el área del pie de página inferior, que tiene la forma de un carácter chino. La estructura de fuente china es actualmente una estructura de diseño de páginas web de uso común. Es adecuada para sitios web con varias categorías de información y requiere una buena organización.
2. Diseño en forma de T
Este tipo de diseño consta de la columna superior, la columna izquierda, el área de contenido y la columna inferior. La forma es un poco como la "T". " escrito en letras inglesas. En la actualidad, los sitios web en forma de T aparecen con más frecuencia en los sitios web corporativos de algunas instituciones, empresas e instituciones autorizadas.
3. Diseño de marco izquierdo y derecho
Este tipo de sitio web consta principalmente de una columna izquierda y un área de contenido. Es relativamente simple y se utiliza principalmente para presentar contenido interesante. Es principalmente la primera opción para muchos blogs y sitios web personales.
4. Diseño del marco superior e inferior
Este tipo de sitio web consta de dos columnas, la columna superior se usa para colocar logotipos, enlaces y otra información, y la columna inferior se usa para colocar logotipos, enlaces y otra información. para colocar el contenido de la página web. Los sitios web de Shangxia se utilizan a menudo para visualización personalizada y también se utilizan comúnmente para visualización corporativa en portales corporativos.
5. Diseño del texto del título
La estructura de diseño de este tipo de sitio web consta de una columna superior y un área de contenido. La barra superior muestra el título del artículo. Se utiliza principalmente para mostrar el título del artículo y el área de contenido se utiliza para colocar el contenido del artículo. Este diseño se utiliza a menudo en el diseño de algunos artículos y sitios web académicos.
El diseño del sitio web no utilizará solo una de las estructuras de diseño enumeradas anteriormente, sino que logrará el efecto deseado mezclando varias estructuras de diseño, lo que a menudo se denomina "diseño integral".
En cuarto lugar, diseño de la página del sitio web
La página del sitio web es la expresión final del sitio web. Las páginas del sitio web están determinadas por la calidad del contenido de la página y la belleza de la página. Los principios que debe seguir el diseño de páginas son los siguientes:
1. En línea con los atributos de la industria y las características corporativas de la empresa. Cuando los clientes abren el sitio web, pueden sentir intuitivamente los conceptos y características que transmite la empresa.
2. Satisfacer los hábitos de navegación de los usuarios. Dependiendo de la importancia del contenido del sitio web, los usuarios pueden encontrar la información que necesitan en el menor tiempo posible.
3. En línea con los hábitos de uso de los usuarios. Coloque las funciones utilizadas frecuentemente por los usuarios en un lugar destacado del sitio web.
4. Coincidencia gráfica.
5. Propicio para la optimización de motores de búsqueda. Reduzca las imágenes y animaciones y utilice más descripciones de texto para que sea más fácil para los motores de búsqueda incluirlo y para que los clientes lo encuentren más fácilmente. Solución de rejilla.
Cómo diseñar un directorio de sitios web Método 1: Tres reglas básicas 1, Regla 1: Escuche a sus clientes. 2. Regla 2: sepa qué buscan sus usuarios y diseñe en consecuencia. 3. Regla 3: Escúchate a ti mismo. Método 2: Política 1. Practique un buen diseño de interfaz de usuario. 2. Establecer un estilo coherente. 3. Maximizar la legibilidad. 4. Haga que su sitio web sea universalmente legible. 5. Pruebe su sitio web. 6. Publica tu sitio web. Diseñar un gran sitio web puede parecer un gran desafío, pero siempre que sigas los elementos básicos del diseño, encontrarás que el proceso será divertido y placentero. ¡No sólo suena bien! Explicaremos los elementos básicos del diseño y algunas pautas generales para ayudarle a diseñar un sitio web fácil de usar.
Método 1:3 Reglas Básicas
1. Regla 1: Escuche a sus clientes.
Puedes diseñar “el mejor sitio web que el mundo haya visto jamás”, una rica fuente fina y negra, un sitio web artístico audaz que grite “¡Visítame ahora!” Desafortunadamente, lo que sus clientes quieren es una gran barra de menú de estilo rosa y naranja. Te despiden del mejor sitio web que hayas tenido y nunca más tendrás la oportunidad de enfrentarte a los usuarios. El cliente los colocará en un disco duro de respaldo. Investigar la imagen corporativa del cliente. Algunos clientes le informarán sobre sus sitios web favoritos. Esto no solo lo alentará a atender sus ideas, sino que también le brindará una inspiración de diseño inesperada.
Si crees que los sitios web naranja y rosa son una broma, imagina cómo este sitio web genial promociona sus productos:
2. Regla 2: Sepa que sus usuarios están buscando algo y diseñe en consecuencia. . La gente crea sus sitios web porque quiere que otros los vean. Este sitio web puede utilizarse con fines informativos, comerciales o para el entretenimiento de una audiencia selecta. Como diseñador, necesita saber para quién está diseñando su sitio web para que permanezcan en él después de abrirlo. Quizás esté pensando: "Si su sitio web se ve hermoso, los usuarios se quedarán". Veamos un ejemplo inmobiliario. Este es un sitio web con un diseño simple e interesante. Tiene mucho espacio en blanco abierto, colores llamativos y un formato de pantalla ancha moderno y fuerte con hipervínculos resaltados:
Ahora piense en el efecto de vender una propiedad de esta manera en el mismo lugar: una página abarrotada, colores elegantes, mucha publicidad.
¿Piensa qué sitio web puede ayudar a las personas a encontrar casas mejor? ¡Sí, el que enumera "casa" para que la gente pueda navegar! Cuando las personas buscan “bienes raíces en venta en Santa Mónica”, no les importa la estética del sitio web. No quieren saber nada de los agentes inmobiliarios y no quieren ver bellas fotografías de la ciudad. Lo que quieren ver son bienes raíces.
3. Regla 3: Escúchate a ti mismo. Sabes lo que les gusta a tus clientes y lo que quiere el mercado. ¡Ahora es el momento de centrarse en usted mismo, el diseñador de sitios web! Crea una plantilla en tu software de dibujo para que puedas elegir. Cree elementos de página en diferentes capas (esto se puede modificar más adelante sin romper toda la plantilla). Estos factores pueden incluir: Encabezado. Se utilizará en todas las páginas del sitio web. El título de la página incluye el nombre y el logotipo del sitio web, así como enlaces a otras páginas subordinadas (como "Acerca de", "Contacto", etc.). ).Los títulos de las páginas unifican las distintas partes de su sitio web, tanto visual como funcionalmente. También es una buena idea configurar el primer botón de la barra de menú para volver a la página de inicio.
Echemos un vistazo al sitio web de Apple, de la siguiente manera:
Como la mayoría de los productos Apple, su página de inicio está muy limpia y ordenada. Observe la barra de menú en la parte superior de la página, cada botón con un título que coincide con el contenido y el cuadro de búsqueda. Si su sitio web también lo admite, podrá tener acceso amigable a todas las páginas requeridas. Ahora, echemos un vistazo a la página correspondiente al botón del iPad, que tiene varios elementos de página:
El cambio en la barra de menú simplemente oscurece el botón del iPad.
El tema de la página se muestra en letra negra grande en la esquina superior izquierda.
Aparecerá una nueva barra de submenú para que los usuarios puedan conocer más sobre el producto. Si hace clic en esos submenús, verá que cada página ofrece contenido nuevo relacionado con el tema, pero es consistente en diseño y estilo.
Quizás en tu sitio web, el título principal de la barra de menú contenga subtítulos de varios niveles. Puedes considerar el uso de menús emergentes en lugar de barras de menú secundarias, como en el siguiente sitio web de Musician's Friends:
Los diseños de barras laterales son comunes en los sitios web, pero no todos los sitios web los requieren. Recuerde: el contenido es el rey. Pero también es un elemento muy importante que debe diseñarse cuidadosamente para garantizar la intuición y evitar confusiones innecesarias. A diferencia de la barra de menú, el contenido de la barra lateral puede ser dinámico. Considere las siguientes dos barras laterales, del sitio web de marketing inmobiliario Trulia, la primera es para compradores:
La segunda es para inquilinos. Tenga en cuenta que tienen información muy similar, pero un enfoque completamente diferente, y ambos aparecen en la misma ubicación en la barra lateral:
El cuerpo de la página. Esta es la parte principal de su sitio web y la parte más variable de su diseño. Si está diseñando un sitio web de comercio electrónico, es posible que tenga una exhibición de productos en una página y veinte productos a la venta. Tu trabajo es unir estas dos partes para que no parezcan inconexas.
Puede utilizar colores, fuentes y elementos de interfaz similares para combinarlos.
Pie de página. No todos los sitios web tienen o necesitan esta sección. A menudo se utiliza para ordenar cosas diversas o para centrarse en partes no enfocadas del sitio web para acceder. El siguiente es un ejemplo de un sitio web de Groupon:
Método 2: Estrategia
1. Colocar varios elementos del sitio web, como encabezados, barras laterales, logotipos, gráficos y texto, en los mismos lugares en cada página hará que su sitio web sea intuitivo y navegable. Mantenga el mismo encabezado en la parte superior de cada página. Independientemente de si el contenido de su sitio web tiene muchos elementos repetidos, debe asegurarse de que cada página tenga un encabezado unificado.
Mantén el diseño lógico. Debes asegurarte de que los elementos de tu página estén organizados de forma lógica según la importancia o el tema; todas las páginas de tu sitio web deben hacer lo mismo.
2. Establecer un estilo consistente. Un diseño unificado puede aportar coherencia estructural al sitio web y un estilo unificado puede aportar armonía al tema. Cíñete a dos o tres colores principales y asegúrate de que combinen.
Evita utilizar demasiados estilos o tamaños de fuente. Si planea alternar entre varias configuraciones diferentes, asegúrese de usarlas de la misma manera en cada página.
El uso de hojas de estilo en cascada (CSS) para gestionar estilos unificados también facilita la modificación de elementos en todo el sitio web sin tener que ir a cada página para realizar cambios.
3. Maximizar la legibilidad. Para que las palabras sean más fáciles de leer, debemos dividirlas en partes más pequeñas. Utilice subtítulos y espacios adecuados para separar las secciones.
Utiliza negrita o diferentes tamaños de fuente para mostrar la jerarquía e importancia del tema.
Presta atención al procesamiento de textos. No hagas la fuente demasiado pequeña y aumenta el interlineado para que las secciones grandes de texto sean más legibles. Los bloques de texto grandes son más difíciles de leer, por lo que es mejor dividirlos en párrafos más pequeños.
4. Haz que tu sitio web sea universalmente legible. Utilice HTML estándar y evite etiquetas, funciones y complementos que solo funcionen con una determinada marca o versión de navegador. Si bien la mayoría de los navegadores y computadoras modernos pueden manejar imágenes complejas, el acceso a estas páginas web será más rápido si las imágenes se pueden mantener pequeñas y optimizadas para la web. Debe haber un equilibrio entre calidad y velocidad.
5. Prueba tu sitio web. Asegúrese de que todo funcione correctamente y que las imágenes se muestren correctamente. También puede realizar algunas pruebas de usabilidad: pida a algunos miembros de su público objetivo que prueben la claridad y facilidad de uso del sitio y proporcionen comentarios sobre el mismo.
6. Publica tu sitio web. Si aún no lo ha hecho, primero debe comprar un nombre de dominio. Revise los enlaces periódicamente para asegurarse de que todavía estén ahí y busque sugerencias enviadas por correo electrónico por los visitantes del sitio.
Consejo: no bombardees a tu audiencia con gráficos sofisticados. Las animaciones flash, los colores brillantes, los fondos estampados y la música que se reproduce automáticamente cada vez que se carga una página eran una experiencia divertida en la década de 1990, pero ahuyentarán a los usuarios de Internet de hoy. Cíñete a fondos simples que contrasten con el color del texto para maximizar la legibilidad.
Para adaptarse a los visitantes con discapacidades auditivas y visuales, se pueden subtitular los vídeos, transcribir el audio y explicar la accesibilidad. Aunque las tablas son una forma eficaz de organizar la información, es posible que los visitantes con discapacidad visual no puedan escuchar el contenido de la tabla de manera ordenada cuando utilizan un programa de lectura de pantalla.
Es posible que tengas tus propias ideas sobre el diseño o algunos diseños favoritos que se hayan utilizado en otros sitios web. Puedes diseñar tu diseño basándose en ellos, pero puede que sea más fácil comprar una plantilla ya preparada.
Para evitar desperdiciar tinta de impresión en tus visitantes, querrás utilizar una hoja de estilo separada para formatear tu sitio para impresión. Apague la imagen de fondo al configurar los parámetros de impresión.
Utiliza texto negro sobre fondo blanco.
Elimina la barra de menú y cualquier imagen innecesaria.
Siempre puedes utilizar CSS para mantener el espaciado adecuado entre párrafos.
Advertencia: Evite el plagio y respete todas las leyes de derechos de autor. No agregue imágenes que no provengan de Internet o que tengan elementos estructurales no autorizados. Todo lo que se agregue al sitio debe cumplir con la ley y la ética.
40 Casos Excelentes de Diseño Web Diseñar nuestras páginas no es difícil, pero diseñar una versión perfecta no lo es. Por lo general, depende de su punto de partida, ya sea un diseño personalizado o una operación de marca.
¿Debería proporcionar su propia información de contacto u obtener la información de contacto del usuario? Los siguientes excelentes ejemplos le mostrarán cómo diseñar nuestras páginas.
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. "Whatcanwehelpyouwith" puede guiar a los usuarios a hacer clic en "Únase a nosotros" o "Contrátenos" para participar en la suscripción por correo electrónico.
2. Mostrar oficinas en todo el mundo
En la página “Acerca de nosotros” de Tool, el diseñador marcó en ojo las direcciones y direcciones de las oficinas del equipo en Los Ángeles, Nueva York y Francia. -Captura de fuentes. Datos 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 ProductiongLocation 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 e integra a los usuarios. El contenido que puede ser de interés y las partes específicas que deben comunicarse se dividen, 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. "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, y 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 HelloInnovation 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. BooneSelections es una forma elegante y profesional de integrar la paleta de colores de su marca y los elementos de diseño relacionados en su página Acerca de nosotros. Como empresa profesional de importación de vinos, la página Acerca de nosotros de BooneSelections 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 la página Acerca de nosotros de ThisTambién es sólido y está en su lugar, aunque el mapa de la página muestra 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 de DeuxHuitHuit no proporciona métodos de comunicación tradicionales, sino que está diseñada como un cuadro de diálogo intuitivo y sencillo. El cuadro de diálogo "Saluda" en la parte superior recuerda directamente al usuario que siempre que ingrese el contenido, el desarrollador del sitio web puede verlo.
11. Indique el 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 "TravaillonsEnsemble" muy llamativo en la fuente del título de nuestra página. Esta fuente es más ligera y única, pero tiene una. mucho efecto. Alto grado de reconocimiento.
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 LegworkStudio, 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, dentro de información de contacto y temas relacionados. La información está incluida. 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. QEDGroup 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 JosephAAvoue. 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. La página "Acerca de nosotros" de HelloMonday hace precisamente eso.
22 Fondo de vídeo
Incluir fondos de vídeo en 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 de UrbanInfluence sobre nuestra página utiliza una cuadrícula para organizar toda la página. El contenido que se mostrará, la parte para la entrada del usuario, la parte decorativa y el mapa mostrado están todos 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 forma más directa.
27. Integrarse con otras partes del sitio web.
El sitio web de RobbyLeonardi 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 BetaTataki le dio un toque de diseño a nuestra página. espacio en blanco para mejorar la presencia de contenido como información de contacto.
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 tipografía. 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 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 MarioPetrone es bastante divertido e interesante.
40. Utilice sólo un cuadro desplegable.
La página de contacto del portavoz 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 tecnológico
Los colores utilizados en la página son relativamente variados, pero confunden mucho a la gente.