DISEÑO GRAFICO YOU YOU

FUNDAMENTOS DEL DISEÑO GRAFICO

Muchos ven el diseño, como la rama que se dedica a hacer que las cosas se vean bonitas, si bien esto es parte del diseño no abarca en su totalidad la función del diseño como tal.
 Elementos Conceptuales
Los elementos conceptuales son aquellos que estan presentes en el diseño, pero que no son visibles a la vista. Se dividen en 4 elementos

Punto: Indica posición, no tiene largo ni ancho, es el principio y el fin de una línea.

 Linea: Es una sucesión de puntos, tiene largo, pero no ancho, tiene una posición y una dirección.

Plano: Un plano tiene largo y ancho, tiene posición y direccion y además esta limitado por lineas.

 

Volumen: El recorrido de un plano en movimiento se convierte en volumen, tiene posición en el espacio, esta limitado por planos y obviamente en un diseño bi-demensional el volumen es ilusiorio.

B. Elementos Visuales

Por ejemplo cuando se dibuja una figura en el papel, esa figura esta formada por lineas visibles, las cuales no solo tienen un largo, sino que un ancho, un color y claro una textura (definida por los materiales utilizados).
Asi pues como ya han de suponer, los elementos visuales son:

Forma: Todo lo visible tiene una forma, la cual aporta para la percepción del ojo una identificación del objeto.

Medida: Todas las formas tienen un tamaño.

Color: El color se utiliza comprendiendo no solo los del espectro solar, sino asimismo los neutros (blanco, negros, grises) y las variaciones tonales y cromáticas.

  

Textura: Tiene que ver con el tipo de superficie resultante de la utilización del material. Puede atraer tanto al sentido del tacto como al visual.

C. Elementos de Relación

Se refiere a la ubicación y a la interrelación de las formas en un diseño

Dirección: La dirección de una forma depende de como esta relacionada con el observador, con el marco que la contiene o con otras formas cercanas.

Posición: La posición de una forma depende del elemento o estructura que la contenga.

Espacio: Todas las formas por mas pequeñas que sean ocupan un espacio, el espacio así mismo puede ser visible o ilusorio (para dar una sensación de profundidad)

Gravedad: El efecto de gravedad no solamente es visual, sino que también psicológica. Podemos atribuir estabilidad o inestabilidad a una forma o a un grupo de ellas.

D. Elementos Prácticos

Los elementos prácticos van mas allá del diseño en si y como es de esperar son conceptos abstractos.
Representación: Se refiere a la forma de realizar el diseño: puede ser una representación realista, estilizada o semi-abstracta.
Significado: Todo diseño conlleva conciente o subconscientemente un significado o mensaje.
Función: Para lo que esta creado dicho diseño.
Si bien la información recopilada y analizada en este articulo trata sobre el diseño en general, puede ser aplicada muy fácilmente al diseño web o al diseño grafico. Si bien es cierto cada rama tiene sus diferencias parten de una misma base para todos, al fin y al cabo la función de un diseño es crear un elemento tanto estéticamente adecuado como al mismo tiempo funcional y práctico.
Y recuerden: "El diseño no se trata de hacer cosas bonitas, sino inteligentes"
  
EL COLOR Y SU EXPANSION:
Probablemente alguna vez os hayáis preguntado por qué la mayoría de las páginas web que hay en internet tienen un fondo claro y no negro. De hecho, las páginas que tienen un fondo negro suelen quedar peor. Esto se debe al carácter expansivo de los colores, no se verá igual un texto sobre fondo negro que blanco:

 Tipografía 
Teoría del color 
Espaciado y composición

TIPOGRAFÍA

Empezaremos hablando básicamente sobre la tipografía en internet, la cual tiene sus propias reglas, aunque como en el diseño gráfico la regla principal es que todo sea legible, es algo así como la regla de oro de las tipografías (si no se puede leer no mola).
A la hora de trabajar con nuestros textos podemos separar en dos grupos, títulos y cuerpos de texto o mensajes.
Para los primeros necesitaremos letras generalmente gruesas y detalladas. Es muy recomendable que las tipografías escogidas para los títulos concuerden perfectamente con el diseño de la página y también tendremos que tratar su color con mucho cuidado, ya que el color en los títulos expresa mucho, pero esto lo veremos más adelante

Para los segundos deberemos usar tipografías "Lisas" (Arial, Verdana), nunca con "Serifa" (Times). Aquí tenéis una imagen de ejemplo:

Las tipografías Lisas son mucho más legibles en un monitor porque al ser más rectas, son más factibles de dibujar por el monitor, en cambio las tipografías con Serifa tienen muchos más detalles y a tamaños pequeños se hace poco legible en una pantalla, que no en papel.

También debido a la tecnología Flash principalmente (si es que somos raritos) surgieron las Pixel Fonts, unas tipografías especialmente diseñadas para que éstas se viesen bien a un determinado punto, ya que "caían" justo en el píxel del monitor. Éstas fuentes han tenido mucho éxito y son muy recomendables usarlas en Flash, ya que hacen los textos muy legibles y no se ven borrosas las letras.

TEORÍA DEL COLOR Aunque parezca mentira, los colores de los objetos nos transmiten emociones muy fuertes, pese a que, generalmente no nos demos cuenta de ello. Los hospitales carecen de color rojo, pues éste es asociado a la sangre, y en las oficinas suele predominar el blanco que denota orden y pulcritud (en las BOFH Room predomina el color verde placa base).
¿Acaso os imagináis trabajando en unas oficinas de color rojo? Sería demasiado estresante, pues es un color de un fuerte impacto visual y que tiene mucha fuerza y energía. Esto son claros ejemplos de como en la actualidad estamos usando los colores para nuestro beneficio, para trabajar mejor, para estar más tranquilos, etc.
Algunas de las cosas más importantes que debemos saber del color son:

• El color y su expansión
• Armonía y contraste
• Significado del color

 El texto sobre fondo blanco es más legible y por lo tanto el lector debe forzar menos la vista, sintiéndose agradecido. Esto también lo podemos ver en colores claros y oscuros, no es algo que suceda únicamente en blanco y negro.

Armonía y contraste

Armonía: Crear una gama de colores para nuestra web que este compuesta por colores de la misma gama o tono. Por ejemplo, CLab es una web con colores armónicos, ya que usa el mismo color y diferentes 
tonalidades del mismo.

 

Contraste: Combinar diferentes colores para crear una gama 
 como, por ejemplo, claros y oscuros, cálidos y fríos, etc. 

Es obvio que en esta imagen cada casilla nos está expresando una idea diferente.

ESPACIADO Y COMPOCISION:

 Llegados a este punto yo suelo recomendar que visiten muchos websites de calidad, y se fijen cómo han montado la web, porqué han utilizado ese color ahí y no otro, cómo han espaciado sus textos, etc... pero aún así hay algunas cosas que suelen ser básicas y veremos aquí.

  No se si es un término correcto decir que el texto 'respire', pero es la expresión que utilizo cuando quiero que mi web sea legible. En estas dos imágenes de aquí abajo podemos ver como una tiene el texto muy pegado a la imagen y su interlíneado es muy bajo para el tamaño de letra escogido, haciendolo confuso para la lectura. La otra imagen en cambio, se lee perfectamente.