Crear guía de estilo para el sitio web: controlas de control bajo control, independientemente de quién funcione.

Diseñador de sitios web, propietario de negocios y todos los vendedores! ¿Alguna vez ha encontrado estos problemas ... el sitio web que está bellamente diseñado, hay algunas partes que no se ven compatibles, el logotipo está estirado o incluso el texto y la voz y el tono son diferentes en diferentes direcciones? [Cite_Start] Estos problemas no son solo nuevos con los novatos. Pero es frecuente en la organización o equipo que hay muchas personas que trabajan o siempre cambian el equipo. [Cite: 137, 138, 139]

Imagine que si el cliente llega a encontrar un sitio web que "la cara no sea estable". Espera, así, así. La fiabilidad de la marca disminuyó inmediatamente. Más que eso también ralentiza el proceso. Porque el equipo tiene que sentarse y debatir que "¿Cuál es el estándar correcto?" O "¿Qué color debemos usar en este botón?" Estas cosas son "problemas mundiales" que hacen que tanto el diseño como el trabajo de marketing "tropiecen" no es un gesto, ¿verdad?

¡Pero no te preocupes! Hoy te llevaré a conocer las "armas secretas" que ayudarán a "desbloquear". ¡Estos problemas son ** "Guía de estilo de sitio web" ** o "Manual de estilo de sitio web"! [Cite_start] Es una impresión verde que ayudará a su sitio web. "El mismo estándar" de la cabeza a los pies, independientemente de quién viene a ver el trabajo, [Cite: 137, 138, 139] Este artículo no es solo la teoría, sino que "el manual" realmente puede ayudarlo a crear su propia guía de estilo de inmediato. ¡Con ejemplos y secretos de la experiencia directa que demostraron que "puede controlar la marca bajo control" realmente!

Solicite ilustraciones: "Las personas están confundidas acerca de ver el sitio web con color y fuentes que no son compatibles, hay muchos tipos de logotipos en una página y el otro lado que muestra el sitio web que parece ordenado. Tenga el mismo estándar tanto la pantalla"

[cite_start]

Problemas reales en la vida: cuando el sitio web carece de "marca Porter" [cita: 23, 24, 25]

[cite_start]

En la era del sitio web hay "cara" e "canales importantes" en comunicación con los clientes. Lo que tendemos a encontrar y creamos un dolor de cabeza tanto para los diseñadores, el marketing como para los dueños de negocios. Son estos problemas. [Cite: 137, 138, 139]

• "Diseño balanceándose ... como una persona sin principios!": ¿Alguna vez has notado que algunos de los sitios web se ven modernos? Pero cuando va a otra cara, ¿se ve viejo o tal vez la fuente cambió para cambiar en la misma página? [Cite_start] Esto no es solo una belleza. Pero confunde a los clientes y sienten que su marca "no profesional" [cita: 157]
• [Cite_start] "El equipo no coincide ... ¡porque no hay un estándar central!": Supongamos que 3 diseñadores trabajan en el mismo sitio web. Si no hay una guía de estilo claro, una persona puede usar este tono azul. Otra persona usa ese tono. Una persona usa un ícono como este. Otra persona usa otros tipos. Finalmente, el trabajo que salió es "desordenado", no una sola pieza. [Cita: 145]
• "Resuelve y resuelve de nuevo ... ¡no puedo terminar, no terminar!": Cuando no hay tiempo estándar para editar o agregar piezas nuevas, ingrese al sitio web que tenga que sentarse y decidir nuevamente que "¿qué tipo de uso?" [Cite_start] perdiendo tiempo y perdiendo dinero usando [cite: 147, 148, 149, 151]
• "La marca no se ve confiable ... ¡debido a la falta de consistencia!": La consistencia (en consentimiento) es el corazón de la credibilidad. Si su marca se comunica en forma inconsistente, los clientes son difíciles de recordar y confiar. Especialmente si se trata de un también se centra en la marca

[cite_start]

El problema clásico que a menudo encuentro es "el aspecto del sitio web que se ve hermoso pero sin una identidad clara", lo que hace que los clientes sientan que "este sitio web es amigable". No sentí una marca fuerte. [Cita: 157]

Solicite ilustraciones: "Una imagen de una persona sentada en las sienes frente a una pantalla de computadora que muestra una variedad de sitios web de diseño e inconsistente, tiene una flecha que apunta a diferentes elementos".

[cite_start]

¿Por qué es ese problema: cuando "comprender" no coincide [cita: 29, 30, 31, 32]

[cite_start]

El problema mencionado anteriormente no ocurre debido a que nadie pretendía. En la mayoría de los casos proviene de la "brecha" que falta en el trabajo, es decir, "estándares centrales que todos mantienen unidos". [Cita: 145]

Veamos cuál es la razón principal. Eso hace que nuestro sitio web sea "perdido" fácilmente:

• Clear "Blueprint" es como construir una casa sin un plan. Cada creador siguió su propio entendimiento. Finalmente, la casa no salió de acuerdo con el concepto. El sitio web también. Si no hay una guía de estilo, no hay "impresión verde" que diga lo que debería ser.
• [Cite_start] La marca "Interpret" no es la misma: incluso después de hablar sobre la marca, pero cuando es hora de hacer cada persona puede interpretar "el color de la marca" "fuentes utilizadas" o "tono escrito" es diferente. Lo que hace que el trabajo sea inconsistente en absoluto [Cite: 145]
• El "equipo circulante": especialmente en grandes organizaciones o proyectos que tienen independientes para ayudar a trabajar cuando las nuevas personas entran sin guía de estilo, se tomarán el tiempo para comprender. Y la mayoría "adivinará" antes de causar errores fácilmente, esto es diferente de trabajar con la agencia de flujo web que a menudo tiene un sistema estándar.
• "Nadie posee" reglas: muchas veces que nadie es directamente responsable de determinar y cuidar estos estándares. No causando una comunicación clara y no hay referencias para que todos regresen para ver
• Con vistas a los "pequeños detalles". IMPORTANTE: Algunas personas pueden pensar que el espacio, el uso de párrafos o el tamaño del icono es un asunto pequeño, pero estas pequeñas cosas juntas "experiencia de usuario" (UX) son buenas y consistentes.

Presentado para las ilustraciones: "Muchos de los miembros del equipo son confusos. Hay una junta blanca que está llena de conceptos que no son compatibles. Y tienen preguntas como '¿Puede esta fuente usar?' O 'este color de botón está bien?' Flotando sobre la cabeza "

[cite_start]

Si se deja, cómo afectará: el sitio web se convertirá en "las ruinas de la marca" [Cite: 35, 36, 37, 38]

[cite_start]

Ignorar la creación de la Guía de estilo de sitio web no es solo un pequeño efecto, sino que puede "corroer" el éxito de su negocio como no puede esperar. [Cite: 166, 167]

• "Credibilidad negativa": piénselo. Si su sitio web parece viñeta, espere un momento como otra fuente, ¿cómo se sentirán los clientes? [cite_start] Verá que su marca "no presta atención" "sin estándares" y "poco confiable", lo que afectará directamente la decisión de compra o usará el servicio [Cite: 174]
• [CITE_START] "Clientes confundidos ... y luego se vayan": los buenos sitios web deben "guiar" a los usuarios para alcanzar la meta sin problemas, pero si el diseño no es consistente, el botón está en diferentes lugares. El color cambió. Los clientes estarán confundidos, frustrados y finalmente presionarán fuera de la página web. Esa es una desafortunada pérdida de conversión [cita: 168]
• [CITE_START] "Eficiencia de trabajo": el equipo debe perder el tiempo con el trabajo no estándar, el debate sobre el trabajo no end y el trabajo duplicado. Debido a que no hay un punto de referencia claro, estos son "costos ocultos" muy altos [Cite: 147].
• "Los gastos se intensifican": cuando es necesario ajustar con frecuencia o tener que contratar a alguien para que arregle el trabajo que no sea sistemático, el costo de desarrollar y cuidar el sitio web inevitablemente aumentará.
• "La marca es débil ... no es importante en el mercado": en la era de la alta competencia, tener una marca fuerte y memorable es importante. Pero si su marca no es única, consistente y consistente, se "tragará" en el mercado que tiene muchos competidores fácilmente. Especialmente si está creando un sitio web corporativo que espera marcas y ventas. Este es el corazón.

Solicitante para la ilustración: "Imagen del sitio web que se ve roto allí hay piezas de diseño dispersas y mensajes de" confianza perdida "o" confianza perdida "aparecen en la pantalla".

[cite_start]

¿Hay alguna solución? Y dónde comenzar: cree una "brújula" para su marca [Cite: 41, 42, 43, 44, 45, 46]

La solución de todos los problemas mencionados es "crear una guía integral de estilo de sitio web". ¡Esto es fácil! Es para determinar las "reglas" o "estándares" para todos los elementos del sitio web. Para involucrar a todos, ya sean diseñadores, desarrolladores o escritores de contenido capaces de trabajar consistentes y efectivos

¿Y dónde debería comenzar? Veamos un paso simple. Que puede aplicar de inmediato:

1. Determine el "corazón principal" de la marca (núcleo de marca)

• Visión y Misión: ¿Cuál es tu objetivo? ¿Por qué haces esto?
• Valor principal: ¿Cuál es su marca?
• Grupo objetivo: ¿Con quién te estás comunicando? ¿Qué tipo de persona es?
• Identidad de marca: ¿Qué te hace diferente de los competidores?
• Estos se convertirán en la "base" de toda la guía de estilo, porque cada diseño y comunicación debe reflejar estas cosas. Comprender la voz y el tono de la marca es una parte importante de este paso.

2. Especifique los "elementos importantes" del sitio web.

Lo que debe determinarse claramente en la guía de estilo es el siguiente:

• [cite_start] logotipo (logotipo): tamaño, proporción, uso en diversos fondos, espacio libre, logotipo (espacio de limpieza), do y don (cite: 42, 44]
• [CITE_START] Colors (colores): paleta, el color principal y el color secundario (colores primarios y secundarios), y especifique el código de color (hex, RGB, CMYK) y el uso apropiado para cada color, como CTA, color de fondo, color de fuente [CITE: 42, 44].
• [Cite_start] Tipografía: Especifique la fuente principal y las fuentes secundarias utilizadas en el sitio web para el tema (encabezados H1-H6) y el contenido (texto del cuerpo) con el tamaño, el peso y la altura de línea utilizada en cada parte [CITE: 42, 44]
• Ícono e imágenes (iconos e imágenes): defina el estilo del icono (como plano, línea, relleno), fuente y tipos de imágenes utilizadas (como personas reales, imágenes de stock, pinturas), incluido el tono de humor de la imagen.
• [CITE_START] Botones (botones): el diseño del botón (color, forma, tamaño), varios estatus del botón (normal, desplazamiento, activo, desactivado y CTA Copy [cite: 42, 43, 44]
• [CITE_START] Formulario (Formularios): Diseño de información, botón Enviar y Error/éxito [Cite: 42, 44]
• [Cite_start] Voice & Tone (tono de voz y tono de comunicación): especifique qué marca de su marca hablará con el cliente con un tono (como el conocimiento amigable, divertido,). Esto es muy importante para escribir contenido y mensajes en el sitio web [Cite: 42, 44]
• Otros elementos: como el diseño (sistema de cuadrícula), el uso de espacio en blanco, la animación o las reglas para usar varios componentes

3. Elija la herramienta correcta.

Puede crear una guía de estilo en un documento PDF simple o usar herramientas especializadas como:

• Figma: Sistemas de diseño (enlace externo) : es una herramienta popular para el diseño de UI/UX que tiene una característica para crear y administrar el sistema de diseño (que es parte de la guía de estilo).
• Invision: Design System Manager (enlace externo) : otra plataforma que permite al equipo crear, administrar y difundir el sistema de diseño sistemáticamente.
• WebFlow CMS (para ciertos elementos): puede usar el CMS de flujo web para almacenar y administrar la guía de estilo de los componentes repetidos en el sitio web, como colores, fuentes o iconos, para que todos puedan usarla más fácilmente.

4. Comunicación y aplicación

Completó la guía de estilo. Deben hacer que todos en el equipo accedan y comprendan esto por completo, tengan capacitación, recomenden y sigan revisando para asegurarse de que todos cumplan con los estándares establecidos.

Solicitud de ilustraciones: "Muchas imágenes de manos están funcionando en el mismo proyecto de sitio web, con 'Guía de estilo de sitio web' que está abierta en el medio de la tabla. Es como un plan que se hace referencia a todos y tiene un logotipo de Figma e Invisision al lado".

[cite_start]

Ejemplos de lo real que solía ser exitoso: cuando "consistencia" crea "confianza" [cita: 49, 50, 51, 53]

Para ver claramente cómo la guía de estilo de sitio web es "poderosa". Me gustaría dar un ejemplo de un estudio de caso real (que tengo la oportunidad de trabajar) de una empresa de tecnología en una tecnología.

"Guía de estilo antes ... Caos para dominar la ciudad": Anteriormente, esta compañía había crecido rápidamente. Hay muchos equipos de desarrollo y diseño. Cada equipo trabaja en diferentes direcciones. El resultado es que sus sitios web y aplicaciones tienen una variedad de "caras". Algunas piezas usan fuentes ariales. Algunos usan el tamaño de Roboto no es igual. Los botones CTA son muchos colores, muchos tamaños que los clientes están confundidos de que "¿cuál es el botón para presionar?" La tasa de conversión nunca supera el 1.5% y los nuevos clientes que a menudo salen del sitio web rápidamente. Porque siento que el sitio web se ve "no sistemático" y "no confiable"

"Misión ... crea estándares para el crecimiento": la compañía decide invertir en la creación de "Guía de estilo de sitio web" y "Sistema de diseño". Al especificar todo, desde el uso del logotipo, la paleta de colores, el sistema de tipografía, la icongraphy, los estados de botón hasta la voz y el tono para el contenido. El equipo tarda unos 3 meses en recolectar, analizar y establecer estos estándares a fondo. Así como probar con usuarios reales para garantizar que todos los elementos sean fáciles de usar y consistentes

"Resultados ... ¡voltee completamente el juego de negocios!": Después de anunciar la guía de estilo completa y ajustar el sitio web y las aplicaciones de acuerdo con los nuevos estándares. ¡El resultado es "asombroso"! Dentro de los 6 meses:

• [Cite_Start] ¡ La tasa de conversión aumentó en más del 200%! Del 1.5% al ​​4.5% porque los clientes entienden más fácil y más seguro en el uso [CITE: 240]
• [Cite_Start] La tasa de límite disminuyó en un 30%! El usuario está en el sitio web por más tiempo. Debido a la experiencia suave y consistente [cita: 241]
• [Cite_Start] ¡40%disminuyó el tiempo de desarrollo! El equipo puede trabajar más rápido. Debido a que existen estándares de referencia claros, no pierden el tiempo debatiendo o resuelven el trabajo duplicado [Cite: 241]
• La imagen de la marca es más fuerte: la marca se ve más profesional y más confiable. Hace que sea más fácil atraer nuevos clientes y los viejos clientes regresan para usar el servicio repetidamente

Este es un claro ejemplo de que "invertir" con la guía de estilo de sitio web no es solo una "belleza" sino "inversión" que crea "enormes rendimientos para el negocio de manera sostenible. Y esto es lo que nuestro servicio de diseño UX/UI es muy importante.

Solicitar ilustraciones: "El gráfico que muestra la tasa de conversión y la imagen de la marca que ha aumentado significativamente. Con la línea de implementación de la guía de estilo antes y después y tiene un símbolo confiable"

[cite_start]

Si quieres seguir, ¿qué hacer? (Se puede usar de inmediato): la lista de verificación creó la "Guía de estilo de sitio web" de Sitio web "[Cite: 56, 57, 58, 59]

Listo para crear su propia Guía de estilo de sitio web, ¿verdad? Esta es la lista de verificación que puede usar de inmediato. Ya sea un proyecto pequeño o grande, aconsejo abrir un archivo. ¡Y comience a agregar información de acuerdo con estos temas!

1. Brand Core Essentials

• Logo:
  • Defina la versión principal, la versión secundaria (como el logotipo completo, el icono) y la versión en blanco y negro
  • Especifique el tamaño mínimo y máximo que está permitido.
  • Especifique el espacio libre alrededor del logotipo (espacio de limpieza) para dejar el logotipo claro.
  • Contraindicaciones al uso del logotipo (como no estirar, no cambie de color que no sea una marca)
• Paleta de colores:
  • Defina el color principal de la marca (colores primarios) con Hex, RGB, CMYK.
  • Definir colores secundarios para una variedad de uso
  • Establezca color para botones de llamada a la acción (CTA), colores para varios estatus (como éxito, advertencia, error) y colores de texto
• Tipografía:
  • Especificar las fuentes principales y las fuentes de reserva utilizadas
  • Establezca fuentes para encabezar (H1, H2, H3, H4, H5, H6) con altura de línea y espaciado de letras.
  • Establezca el tamaño de fuente para el texto del cuerpo, la leyenda y varios botones.
  • Especifique el uso de fuentes en cada contexto (como H1, solo use con el tema)

2. El elemento principal de interfaz de usuario (interfaz de usuario)

• Botones:
  • Botón principal, botón secundario y otros botones (como botón Ghost, botón de enlace)
  • Especificar color, tamaño, forma y diversos estados (normales, flotantes, activos, deshabilitados)
  • Determine el texto en el botón. (Capitalización, tamaño de fuente)
• Formulario (formularios):
  • El diseño de campos de entrada (texto, correo electrónico, número), menores desplegables, casillas de verificación, botones de radio
  • Especifique el color del marco, el color del texto, el marcador de posición y el estado de error/éxito
  • Determinar la forma de olla (como la parte superior, lado, lado)
• Íconos:
  • Especifique el icono principal que se usa (como Font Awesome, Iconos de material o iconos personalizados)
  • Determine el estilo del icono (como línea, relleno, duotona) y el tamaño correcto.
• Imágenes:
  • Establezca el tipo de permiso (fotos reales, ilustraciones, fotos de stock)
  • Especifique tonos de color, estilos y emociones de la imagen utilizada.
  • Directrices para usar personas (como varias razas, que muestran emociones reales)

3. Contenido y comunicación)

• Voz y tono:
  • Establezca la personalidad de la marca en comunicación (amigable, expertos, comedia, inspiración)
  • Especifique el vocabulario específico de la marca (terminología específica de la marca) que debe usarse o no debe usarse.
  • Establezca pautas para usar abreviaturas, números, fechas y marcas de párrafos
• Escribir tema y contenido:
  • Directrices para el título de escritura (breve, firme, estimulante)
  • Escribir copia corporal (párrafo corto, fácil de leer, usar puntos de bala)
  [cite_start]
  • Usando el enlace interno y el enlace externo en el contenido [citar: 12]

4. Estructura y diseño (Diseño y espacio)

• Sistema de cuadrícula: Defina el sistema de cuadrícula que se utiliza para colocar los elementos en la página web para que el diseño sea ordenado y receptivo.
• Espacio en blanco: determine la distancia estándar entre varios elementos para que el sitio web se vea aireado y fácil de leer

Cuando tenga esta lista de verificación en su mano, lo ayudará a usted y a su equipo a trabajar más directamente. Y esto es lo que el servicio de desarrollo de sitios web corporativos tiene nuestro en la creación de trabajos de calidad

Solicite ilustraciones: "Las imágenes correctas de la lista de verificación son correctas. Hay iconos sobre el diseño y el contenido al lado de cada elemento con 'Lista de verificación de su guía de estilo de sitio web'.

[cite_start]

Preguntas que las personas tienden a preguntar y claras respuestas: resuelva la pregunta de la Guía de estilo de sitio web [Cite: 62, 63, 64, 65, 66, 67, 68]

He compilado una pregunta común sobre la creación de la guía de estilo de sitio web. ¡Para hacerte seguro y listo para hacerlo de inmediato!

P1: ¿Qué tan detallado? ¿Tienes que usar todo?

R: Dependiendo del tamaño del proyecto y el número de personas involucradas. Para un proyecto pequeño o algunos equipos pueden comenzar especificando solo las partes más importantes, como logotipo, color, fuentes y voz y tono, son suficientes. Pero si se trata de una gran organización o sitios web complejos, debe ser detallado y cubierto en todos los elementos UI/UX. El principio es "lo suficientemente detallado como para que todos funcionen de manera consistente. Sin tener que adivinar"

P2: Si nuestra marca aún no es estable, ¿cómo podemos crear una guía de estilo de sitio web?

R: Si la marca todavía no sugiere comenzar determinando claramente la "identidad de marca" o "identidad de marca", como la visión, la misión, el valor principal, la personalidad de la marca. Estas serán la base de otros elementos en la guía de estilo, o pueden comenzar a crear un estilo de "producto viple mínimo (MVP)" primero y luego desarrollar gradualmente más cuando la marca es más clara.

P3: ¿En qué se diferencia la guía de estilo de sitio web del sistema de diseño?

R: Guía de estilo de sitio web es como un "manual" que recopila reglas y estándares de varios elementos. Se usa en sitios web como colores, fuentes, logotipos, estilos de escritura. El sistema de diseño "es más grande y más complicado". Es un conjunto de "componentes reutilizables" con "principios" y "herramientas" que permiten a los diseñadores y desarrolladores crear grandes productos digitales, por ejemplo, un botón en el sistema de diseño. Tendrá un código listo para usar. Hay un documento que dice cómo usarlo. La guía de estilo de sitio web es parte del sistema de diseño, que se discute específicamente en el sitio web.

P4: Después de crear una guía de estilo, ¿qué tienes que hacer a continuación?

R: La creación es solo el comienzo. Lo más importante es "usar" y "mantenimiento".

• Comuníquese con todos en el equipo. Comprender: Organice reuniones, capacitación o envíe documentos a todos los involucrados.
• Solicite para usar: consulte el sitio web actual y ajuste a la guía de estilo.
• Utilizado como herramienta de referencia: cada vez hay un nuevo diseño o desarrollo para aprovechar la guía de estilo
• Revise y actualice regularmente: cuando la marca cambia o tiene una nueva tecnología, siempre debe revisar y actualizar la guía de estilo

Solicite ilustraciones: "La imagen de una persona sonrió con confianza. Con íconos, preguntas y respuestas que flotan y tienen un libro de 'Guía de estilo de sitio web' en la mesa".

[cite_start]

Resumen para ser fácil de entender + quiero intentar hacer: "¡Puede controlar la marca ... puede controlar las ventas!" [Cite: 71, 72, 73, 74, 75, 76]

¿Cómo estás? [Cite_start] Espero que este artículo te haga ver claramente que ** "Guía de estilo de sitio web" no es solo un documento complicado, sino que es una "inversión que ayudará a tu" marca "a controlar y conducir a" crecimiento empresarial "de manera sostenible ** [CITE: 279, 280]

[cite_start]

En una era en la que las competiciones comerciales en línea son feroces de un sitio web que "parece un profesional" "confiable" y "crea una buena experiencia" para los usuarios. Es importante hacerle destacar a los competidores [Cite: 281] y la Guía de estilo de sitio web es la clave que hará que estas cosas realmente sucedan. Si acaba de comenzar a crear un nuevo sitio web o en busca de una manera de mejorar el sitio web existente.

[cite_start]

Recuerde que la "consistencia" es "credibilidad" y "credibilidad" es "ventas" [cite: 281]. No esperes. ¡"Desbloquee el potencial" de su marca en línea con una fuerte guía de estilo de sitio web!

¡Es hora de "hacer"!

Comience por recolectar equipos relevantes, establezca el alcance de la guía de estilo que desee, luego agregue gradualmente los detalles en cada parte de acuerdo con la lista de verificación que doy. Si no está seguro de cómo comenzar o necesita expertos para ayudar a cuidar esto

¿Quiere que Vision X Brain sea "Socio experto" para ayudarlo a "crear una guía de estilo de sitio web" que ayudará a "controlar la marca bajo control" y "actualizar su negocio" al siguiente nivel? ¡Haga clic aquí! ¡Consulte a nuestros expertos gratis! ¡Sin obligación! ¡O si desea conocer el servicio de diseño UX/UI que crea servicios de desarrollo y que nuestros más pueden pasar para ver más detalles! Estamos listos para ayudar a su sitio web. "Crea resultados impresionantes"!

Solicite ilustraciones: "Imágenes de la marca del logotipo que se ven estables y ordenadas junto con el gráfico de ventas más alto y el" Construye su marca, aumenta el mensaje de su "ventas" o la 'consistencia impulsa el éxito' "

‍