Conceptos básicos para el diseño de una página web

Esta guía es para novatos que están empezando con el diseño web y no tienen claros los conceptos de diseño. Si estás apenas empezando en el mundo del diseño para Internet, esta guía te aclarará varias cosas, pero no mucho si ya tienes experiencia..

Preparativos iniciales

Para crear una web necesitamos varias cosas. Aquí muestro las básicas

• Tu programa de diseño (Corel, Photoshop, Fireworks, Paint)
  
• La temática de tu web (restaurantes, personal, autos, keyra)
  
• Un trasero y ojos aguantadores.

Usa la cabeza

Para armar una web hay varios métodos. Por lo general yo uso el cuerpo humano, es una forma fácil de visualizar el diseño de una web, para no tener problemas de derechos de autor y esas cosas. Usaré como ejemplos mis propios diseños (aclaro que aun no están terminados).












El ejemplo 1 es un diseño estándar. Imaginemos que este diseño es un cuerpo humano, el rectángulo gris de la parte de arriba que representaría la cabeza se le llama header o encabezado. Generalmente este elemento se ubica en la parte superior pero en algunas ocasiones se llega a mover a los laterales como en elejemplo 3.

Este elemento es muy importante ya que es lo primero que ve un usuario. Se le puede incluir el logo, alguna pequeña animación o como en el caso de cristalab una imagen, un buen header por lo general es sencillo y limpio, sin caer en efectos exagerados.

El menú

El menú lo comparo con el brazo, y puede ser lateral, superior o de cuello. En todos los ejemplos anteriores he utilizado el menú lateral. Por lo general un menú es suficiente aunque algunos incluyen dos los cuales pueden estar ubicados a los lados dándole a la web realmente el aspecto de una persona (cabeza, cuerpo, brazos y pies).

El menú de cuello se ubica entre el cuerpo de la web y la cabeza. Particularmente no me gustan los menús dobles en
especial cuando tienen las mismas opciones. Sin embargo, como siempre y a pesar de lo desagradable que nos llegue a parecer, el cliente es el que paga y tenemos que hacer lo que a ellos les guste.

Contenido en un contenido

El body (área central o cuerpo) es donde va a ir nuestra información principal. El cuerpo se ubica en el área central de la web siempre tratando de darle el mayor espacio posible.

El cuerpo unido a un buen diseño puede llegar a ser muy flexible, como en el ejemplo 1, 3 y 4. Por ejemplo, el cuerpo del ejemplo 4 es pequeño ya que lo he diseñado pensando en la carga de algún juego o vídeo. El ejemplo 1 es mayormente ocupado por el cuerpo para la integración de grandes cantidades de noticias. El ejemplo 3 esta pensado para una pequeña descripción, con una o dos imágenes como apoyo. Dependiendo de la flexibilidad de tu web podrás adaptar tu cuerpo para darle la mejor opcion al cliente.

Patas para arriba

El pie se ubica en la parte inferior de la web. El pie está presente en la mayoría de las webs, por lo general se usa como rebase del diseño para que el body no se vea cortado al llegar al limite vertical. También se usa para agregar los derechos de autor o el nombre de la empresa que diseño la web.

Ya quiero que termine este tutorial chafa

Estos son los puntos bases para el diseño de una web, espero que les sirva, cualquier cosa que sea utilidad o aporte a este tema por favor postealo.

FAQ (Preguntas Frecuentes)

Antes de que empiecen a hacer preguntas del millón pondré algunas que creo serán las que harán (así es, pensé en todo)

PREGUNTA: ¿Por qué llamas de manera incorrecta algunos elementos?
RESPUESTA: Porque este tutorial esta pensado en los novatos que se confunden al iniciar una web, y al llamar a los elementos ejemplificando el cuerpo humano es mas sencillo de entender

PREGUNTA: ¿Puedo robar tus diseños?
RESPUESTA: No, en especial el EJEMPLO 4 esa es la imagen de mi futura web personal, pero puedes usarlos como base para armar los tuyos, recuerda diseño original antes y nunca uses templates si quieres llamarte a ti mismo diseñador.

PREGUNTA: ¿Harás otro tutorial?
RESPUESTA: Desgraciadamente todo indica que sí.

Tips de última hora

Bueno ya tranquilo ya casi termina esta tortura, solo unos datos finales para mejorar tus diseños:

• Si se te dificulta hacer un diseño novedoso, solo haz uno estándar, y a partir de ahí crea ligeras modificaciones al diseño como en el ejemplo 2.
  
• Si la combinación de colores no se te da bien, intenta esto: utiliza un color estandar, rojo, azul, amarillo. No utilices rojo quemado, azul turquesa o colores difíciles de combinar. Cuando tengas un color juega con el brillo y el contraste, siempre tratando de que el color se vea vivo, entre menos opaco mejor. Casi no uso colores opacos, para mi gusto quedan fatal (a menos que el cliente indique lo contrario).
  
• Incluye siempre imágenes ya que resaltan y le dan vida a una web. Un diseño sencillo con buenas fotos y buena combinación de colores pueden dar como resultado una hermosa creación, sin tener que recurrir a filtros exagerados.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.