Diseño web: color, tipo y elementos gráficos

Para crear un sitio web eficaz, tiene que seguir los principios básicos de diseño para la mezcla de colores, tipo y gráficos. También debe usar el espacio de la página web de manera eficiente para lograr un diseño que no es demasiado lleno de gente, es factible y práctico desde el punto de vista de la ingeniería, es lo suficientemente flexible como para mostrar una variedad de medios, y mantenga todos los elementos importantes “por encima de la tapa” - dentro de la espacio visible inicial. ¡Uf! Eso es mucho.

Aquí hay algunas pautas para el color, tipo y gráficos a tener en cuenta para la aplicación de los principios de diseño probado y verdadero en el contexto del diseño de sitios digitales.

Elija una paleta de colores de la marca apropiada para su web

La mayoría de las empresas que crean sitios ya tienen una paleta de colores de la marca establecida y directrices que le dan una ventaja para este tipo de proyectos. Para los nuevos productos o iniciativas, eventos, etc., sin embargo, puede no ser una mirada establecido. En estos escenarios, es útil preguntar a su cliente para obtener una lista de adjetivos que describen el estado de ánimo del sitio que están buscando. O pedirles que si tienen una preferencia o aversión paleta. A partir de ahí, se puede establecer una paleta de colores y un conjunto de estilos que funcione para todo el sitio. Aquí están algunas ideas:

Video: Modos de color en diseño gráfico, RGB, CMYK y HSB // marcocreativo

  • Luces y sombras. Su sitio siempre necesitará una gama de valores de color con el fin de crear un contraste. Mediante el establecimiento de una paleta de colores estándar para sacar de, puede ayudar a asegurar una organización coherente y armonioso a través del sitio.

  • Color de fondo. En realidad, hay sólo dos opciones para el fondo que va detrás contenido: A un fondo oscuro o la luz. Un color de fondo de gama media no proporcionará suficiente contraste para que el texto y el otro contenido legible. Para obtener información rica y sitios utilitarios, lo mejor es elegir un fondo claro de los contenidos a menos que la marca requiere de otro modo. Una gran cantidad de texto de color claro sobre un fondo oscuro es simplemente difícil de leer. Esto no significa que su página web debe ser todo oscuro o toda la luz.

    Video: Teoria Sobre Diseño Gráfico // Color

  • Color de texto. Las opciones de color de cuerpo del texto sitio web y titulares dicen mucho profesionalismo del sitio. A menos que el diseño requiera de otro modo por ello, evitar el uso de blanco y negro o puro puro para el cuerpo del texto o los colores que tienen demasiada saturación. Estos colores son muy fuertes y pueden “zumbido” en la página mientras el usuario intenta leer un párrafo de texto. En su lugar, utilizar un gris profundo, tal vez insinuado hacia un tono más cálido o más frío. De lo contrario usar una forma similar insinuó blanquecino. Esta estrategia le permite elegir colores más fuertes o más brillante para los titulares, viñetas y subtítulos.

    Una paleta de muestra: tenue luz y los colores oscuros son en la fila superior. colores de la marca están en el medio ro
    Una paleta de muestra: tenue luz y los colores oscuros son en la fila superior. colores de la marca están en la fila del medio. Los colores de acento están en la fila inferior.

    Video: Diseño Gráfico Psicología Del Color Parte 5

    Este sitio limpiamente diseñado utiliza una buena mezcla de claros y oscuros para presentar contenido. [©
    Este sitio limpiamente diseñado utiliza una buena mezcla de claros y oscuros para presentar contenido.

Utilice las fuentes para establecer el estado de ánimo de su sitio

Usted tiene que tener cuidado con las fuentes, ya que pueden proyectar mucha personalidad. Dependiendo de la fuente que elija, su sitio web puede expresar nerviosismo, profesionalismo, y todo lo demás. Del mismo modo que se elige una combinación de colores adecuada, también debe elegir fuentes apropiadas para su sitio web.

Video: DISEÑO GRÁFICO: PASOS PARA SER CREATIVO

En general, serif fuentes (fuentes que tienen pequeñas repisas en las puntas de cada letra) transmiten sensaciones de estabilidad, profesionalismo y clase. Sans-serif fuentes (no hay repisas en las puntas) transmiten la sensación de modernidad y limpieza. En la web, fuentes sans-serif se utilizan a menudo para los bloques de texto del cuerpo y subtítulos, ya que tienden a leer mejor en la pantalla. Las fuentes serif, por el contrario, se utilizan a menudo para las frases cortas y los titulares, porque se muestran normalmente en tamaños de fuente más grandes, y por lo tanto son legibles en la pantalla. (Por supuesto, esto es sólo una línea de base. Muchos sitios utilizan fuentes serif y san serif en el sentido contrario.)

Utilizar de manera eficiente los elementos gráficos en el diseño web

En el diseño de impresión, puede utilizar elementos gráficos con bastante libertad, pero en el diseño web, grandes fotografías o gráficos complejos que ocupan toda la página puede ser como elefantes pesado. Fotos grandes significan grandes tamaños de archivos que se descargan lentamente. En el diseño de páginas web, utilizar gráficos de gran tamaño con moderación, y tratar de volver a utilizar elementos gráficos (como los estilos de botón y el dibujo de fondo) siempre que sea posible. De esta manera, se puede definir un conjunto estándar de estilos gráficos que los desarrolladores pueden convertir en los estilos CSS que pueden ser aplicadas en todo el sitio. Además, puede simplemente utilizar el código CSS para asignar el color y forma a los elementos HTML, eliminando la necesidad de utilizar gráficos en absoluto, y lo que es un proceso sencillo para actualizar un sitio completo con sólo cambiar unas pocas líneas de código. Tal uso combinado de estilos CSS y las imágenes se puede crear un sitio de gran riqueza visual que sea eficiente para construir y mantener, y que las cargas rápidas.

Este botón no es un mapa de bits. Está hecha con un uso inteligente de código CSS para definir el color
Este botón no es un mapa de bits. Está hecha con un uso inteligente de código CSS para definir el gradiente de color, el radio de la esquina, y el texto.
Artículos Relacionados