¿Cómo hago una plantilla de guía de estilo?

Estoy creando un sitio web y estoy en la etapa de creación de marca y estilo en la que elijo un esquema de color, combinaciones de fuentes, etc. Quiero crear una guía de estilo muy básica para mostrar a mis clientes para que la revisen. Es un sitio general y funciona como una guía de estilo general. ¿Alguien podría recomendar una plantilla de guía de estilo que se pueda editar y personalizar?

Actualización: hice una mejor búsqueda en Google y encontré una plantilla que podría funcionar http://rafaltomal.com/free-web-style-guide-psd-template/ pero aún así quiero compartir esta publicación y ver si alguien tiene mejores recomendaciones.

En lo que respecta a lo simple, eso lo cubre y los componentes clave de una guía de estilo.

Respuestas (2)

Esta es una muy buena pregunta. Pero me temo que no se puede estandarizar una guía de estilo. Hay pautas para hacer uno, pero mucho depende completamente de la complejidad del sitio web que está creando.

La guía que tienes en tus manos se centra en la tipografía, que es algo realmente bueno. Pero no todos los sitios web pueden entenderse así. Algunos sitios/clientes necesitan un poco más para estar convencidos. Pon tu-

  1. ¡Incluye algo de inspiración! Siempre es una buena idea compartir su proceso de pensamiento y las cosas que lo inspiraron mientras creaba la interfaz de usuario. Muchos buenos diseñadores que conozco no se inspiran en otros sitios web atractivos, sino en cosas que los rodean: diseños de revistas, letreros de metro. A veces, los clientes comparten gustos similares y pueden entusiasmarse aún más con el proyecto. La mayoría de las reuniones de diseño son aburridas para ellos.
  2. Estilos de botones primarios y secundarios. Evite el tamaño y las discusiones destacadas para más adelante. Bríndeles una comprensión de cómo funcionarán los botones.
  3. Copie el estilo de las llamadas a la acción (en caso de que sean únicas)
  4. Un par de iconos para ilustrar el estilo. A veces, puede combinar dos elementos básicos para crear un ícono (tal vez un círculo de color de la marca + un ícono mínimo). Muéstrales ese proceso.
  5. Muéstreles cómo se utilizarán las imágenes. Cómo funcionará la alineación en sus diseños y cómo se distinguirán las secciones.
  6. Muéstreles diferentes estados de desplazamiento para varios elementos (botones, imágenes destacadas, etc.) Asegúrese de mirar los que realmente importarán y no cada cosa pequeña. Esto depende del proyecto.
  7. Muéstreles cómo los colores interactuarán en la idea básica. Cuáles serán colores de realce y cuáles serán de fondo. También es una buena idea explorar la legibilidad en fondos más oscuros para secciones específicas.
  8. Muéstreles algunas cuadrículas básicas que ha planificado para el sitio y qué prioridades ha establecido para la navegación del usuario (tal vez navegación del sitio o acciones inmediatas después de consumir contenido).

Lo más importante a tener en cuenta es poder presentar soluciones posibles y prometedoras a algunos de los problemas que el cliente debe haber mencionado en las primeras reuniones. Aquí es donde debes escuchar con atención. No todos los clientes comprenderán la importancia de la tipografía y el diseño, pero seguramente recordarán preguntarle dónde está ese gran cartel con "haga clic aquí para comprar". Debe haber abordado ese diseño y mostrarles posibles soluciones.

Con las aplicaciones, esto puede ser realmente complicado. Las expectativas del cliente pueden variar desde solo una guía de fuente y color hasta un estudio completo de interacción del usuario para justificar la inversión.

<--cita ninja--> Siempre sigue haciendo preguntas. Te acercarás a la respuesta. <--/cita ninja-->

He usado estas plantillas de guía de estilo basadas en el concepto y la plantilla de mosaicos de estilo .

Son buenos para las primeras etapas cuando estás explorando estilos, no tanto para las especificaciones cuando realmente estás construyendo el producto.