,

Guía de estilo para crear un diseño web profesional

El desarrollo profesional de páginas web es cada vez más complejo y por lo general no es un trabajo de una sola persona. Es importante asegurarse de que el diseño es consistente y optimizado para cumplir con los objetivos del negocio online y crear experiencias agradables para los usuarios.

Una de las formas de asegurar que el equipo está en la misma línea de diseño sobre las piezas separadas de la página web y ahorrar tiempo en el desarrollo es crear documentación de diseño o una guía de estilo de diseño web profesional .

Es beneficioso tener una guía de estilo con el fin de crear una experiencia común entre las diferentes páginas. También ayuda a garantizar que el desarrollo futuro o la producción de terceros seguirán directrices de la marca y se percibe como parte de una idea global.

Lucas Clum ha tocado la superficie de uso de guías de estilo como el primer paso en el diseño web el año pasado y me gustaría echar un vistazo más a fondo sobre la forma de crear una guía de estilo de diseño web usable para la mayoría de proyectos.

¿Qué es una Guía de Estilo?

Una guía de estilo es una colección de elementos pre-diseñados, los gráficos y los diseñadores o desarrolladores de reglas que se deben seguir para asegurarse de que las diferentes páginas guardan un similitud en cuanto a la navegabilidad y crearán una experiencia común al final de cada visita.

que es una guia de estilo

¿Por qué es importante?

Es extremadamente importante cuando varios diseñadores están trabajando en un mismo sitio web o aplicación web, para asegurar que ellos no interpretan demasiado y no modifican o ajustan estilos basados en preferencias generales. En el desarrollo web, el hecho que tengan elementos definidos de la página web hace que sea más fácil para los desarrolladores reutilizar estos elementos. Por otra parte, se puede hacer que sea más fácil porque van a conseguir que se centren en los elementos que tienen de código y verán exactamente cómo tienen que desarrollar la web desde el principio.

Con el fin de hacer más fácil el desarrollo web, es deber del diseñador incluir todas las posibles interacciones, tales como leer más, haga clic en, visitar y otros estados de los botones, títulos, enlaces, etc.

Creación de una Guía de Diseño Web Estilo

1. Estudio de la Marca

En primer lugar, es necesario estudiar la marca para que pueda entender lo que significa. Conozcer la historia que hay detrás de la marca, observar a la competencia y averiguar la visión, misión y valores del negocio. Es importante profundizar en la marca por lo que la guía de estilo será visualmente y emocionalmente la imagen representativa de la empresa.

Un diseñador que no le guste tocar código, simplemente abrir Photoshop y dar un título y una breve descripción de lo que el boceto es y para qué sirve.

Si le gusta codificar, es mejor crear un documento HTML con activos predefinidos para que puedan ser reutilizados fácilmente.

2. Definir la tipografía

Se debe obtener la tipografía correcta, ya que es una de las herramientas de comunicación más importantes entre los visitantes y su sitio web.

Establecer la jerarquía de titulares: h1, h2, h3, h4, h5 y h6. Y a continuación, el cuerpo del texto, negritas y cursivas variaciones. Pensar en los enlaces pequeños, en el anchor-tag, elegir la fuente tipográfica, tamaño y color.

Tipografía de una web

3. Paleta de colores

Es increíble cómo los humanos percibimos el color y tonos asociados con marcas conocidas. Piensa en Coca-Cola, apuesto a que te viene el rojo inmediatamente.

Ajustar los colores primarios para la guía de estilo que dominará el sitio web, los colores dominantes deben incluir no más de tres tonos. En algunos casos, sin embargo, tendrá colores secundarios e incluso terciarios para ilustrar su interfaz de usuario, conviene definir también estos. También se incluyen los colores neutros como el blanco, gris y negro para los colores de la marca a destacar.

4. Voz

La voz que me refiero es al trato con el que se comunica en la web. Por ejemplo una web de una marca joven y de moda, los mensajes estándar de la página convendría cambiarlos… un ejemplo sencillo dado que demuestra que la voz tiene que ser adaptada, original, divertida e indentificadora. En lugar de decir “Usted tiene 404 de error” se puede decir “Oh, has roto la interwebs. 404 de error. “ Si la voz es más corporativa, podría no modificarse, pero la brillantez se esconde en las cosas pequeñas.

5. Iconografía

Los iconos han existido durante miles de años y son mayores de texto y palabras.Tomar ventaja usando iconos en proyectos web, dará una idea a los visitantes, en cuanto a lo que se está ofreciendo y lo que se espera encontrar. Eligiendo  los iconos apropiados, va a dar más contexto a los contenidos de la paleta de colores, textos o gráficos. Al usar iconos, es conveniente pensar en el público objetivo, la religión, la historia, para evitar conceptos erróneos y malentendidos. De nuevo hay que pensar en la marca y sus valores, no hay que utilizar iconos dibujados a mano en un sitio web bancario.

Iconos para una web

Iconfinder es una gran herramienta para encontrar iconos.

NounProject  está construyendo un lenguaje visual de los iconos que cualquiera puede entender

6. Imágenes

De los aspectos más importantes en una web son las imágenes y fotografías, así que en gran medida la calidad de las fotografías y que sean lo más profesionales posibles, ayudan de forma amplia a nuestra imagen en internet. Definen el estilo que el sitio web debe utilizar. Una vez más, pensar en los valores de la marca y de su misión. Por ejemplo, una organización sin animo de lucro (ONG) utilizará una imagen llamativa que tenga una fuerte connotación emotiva.

El diseñador profesional de páginas web, será el encargado de orientar en la elección de imágenes y fotografías, pudiendo realizar nuevas fotografías, contratar un fotógrafo profesional o comprar fotos en uno de los cientos de bancos de imágenes que hay en internet y trabajar con fotografías que ayuden al diseño web.

Sitios web para las imágenes libres: 16 lugares para encontrar las mejores fotos de archivo .

7. Campos de Formularios

Los formularios son los que hacen una web más interactiva y dinámica, ya que el usuario puede introducir datos e interactuar con la base de datos, creando cuentas, añadiendo productos al carrito, contactar con la web. Es importante establecer una jerarquía y aconsejable colocar comentarios en todos los campo del formulario – cuando esta activo, libración, añadir mensaje error, de advertencia y mensajes de éxito incluyendo cosas tales como una contraseña puede ser demasiado débil, dirección de correo electrónico no válida  por ejemplo, o” de e-mail fue enviado con éxito.

8. Botones

Los botones son una mezcla de la paleta de colores, formularios y voz. Hay que tener en cuenta a estos elementos gráficos, creados anteriormente, para crear botones consistentes llamativos y funcionales con diferentes diseños establecidos. Es importante los diferentes estados del botón, reposo, sobre

9. El espaciamiento

¿Cómo puede ser espaciada una guía de estilo? Es extremadamente importante mencionar la separación. Al igual que en la música el silencio es muy importante, en el diseño web, los espacios vacíos dan sensación de orden, limpieza y armonía. Puede ser en forma de una rejilla utilizada para un diseño; se puede separación definida entre titulares, botones, imágenes, formas y otros elementos.

Conseguir espaciamiento adecuado es importante porque le da más aire para respirar a los elementos gráficos, y el uso armonioso hace que el trabajo se vea estructurado y profesional.

10. Dos mejor que Uno

Por último, pero no menos importante: Hacer la sección dos mejor que uno, poner variaciones de casi todo y averiguar cual es la elección acertada, en logotipos, iconos, colores, tipografía etc conviene probar por lo menos dos variantes para saber cual tiene una mejor aceptación o encaja mejor en determinados momento y plataformas.

variaciones de logotipo twitter

Activos y directrices de la marca de Twitter

 

Conclusión

Hay que estudiar la marca para la que se está creando una guía de estilo para crear un diseño web profesional para, asegúrese de obtener diferentes partes de diseño y asegurarse de que esta guía  es consistente e incluye todos los escenarios posibles al implementar diseños en las diferentes plataformas online.

 

0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

Tu dirección de correo electrónico no será publicada.