[Otros] [Cerrada] Escuela de diseño web

Teoría: Definición y Jerarquía de diseño web

Antes de comenzar con la primera clase de esta escuela, se debe de saber con que estamos trabajando, como se forma y como se descompone, en este caso no se trabajara con toda la estructura del diseño web en si, a que me refiero con esto, dado el caso de que esto es un foro es donde por mas se puede empezar.
Trabajaremos con el diseño en si de un foro, mas bien un skin, no se si explicarme correctamente para todos, pero poco a poco se darán cuenta a lo que estamos tratando de llegar.

El diseño web o también conocido como desarrollo web se trata básicamente de realizar un documento con información hiperenlazado con otros documentos y asignarle una presentación para diferentes dispositivos de salida (en una pantalla de computador, en papel, en un teléfono móvil, etc), pero no solo eso también se enfoca en establecer un diseño tanto digno o especial a el sitio donde estamos trabajando.


Sin tomar tanto en cuenta como esta estructurado desde la base, solo se fomentara en la vista del navegante. Esta forma-base de su diseño esta en 3 etapas, llamadas de la siguiente forma.

• Header.
  La cabecera de nuestro sitio, el menu para nuestro navegante y la frase de dicho sitio. Lo mas destacado de esta es: Logo, Navbar(Menu) y Descripción.
  -
• Cuerpo o Body(en ingles).
  El contenido de nuestro sitio, donde se encuentra documentada toda la información, usuarios, publicidad, etc. Normalmente en foros esta es estructurada de la siguiente forma: Categorías, Foros, Estadísticas, Rangos, Usuarios, Firmas.
  -
• Footer.
  Parecido al Header, pero se diferencia tanto pequeña como corta, redes sociales, ayuda, derechos de autor o publicidad de otros sitios amigos.

Comenzamos desde su inicio que seria la estructura del código base:
Las 3 categorías con las que trabajaremos, serán las ya mencionadas, Header - Body - Footer. Si olvide algún dato o fundamento, creo que no es de ningún problema, porque solo trabajaremos con el diseño en si. Ya conocido lo que sabemos, también como esta formado, lo que tiene cada modulo y sub-modulo del mismo.
Bien creo que es todo lo que hay que saber, cualquier duda que se tenga puede hacerla en su respectivo tema. Ademas si algún alumno tiene una idea o conocimiento mas que agregar dígamela.

Logo (Logotipo).
Es un signo o imagen grafico(a) que identifica una empresa/compañía/fabrica/etc.
-
Banner(Anuncio).
Es un anuncio normalmente rectangular colocado arriba, abajo o en los lados del contenido principal de un sitio web y que enlaza con el sitio web del anunciante. En otros términos es considerable hacerlo pasar también por un logotipo pero con dimensiones mas grandes.
-
Header(Cabecera).
Es la parte general del sitio donde se aloja el logotipo y la información de dicho sitio web. Es decir, es un rectángulo grande, donde se encuentra información respecto al sitio.


Comparando cada uno con su utilidad y/e significado el mas importante es el Header, ya que es la parte principal del foro, donde se aloja el logotipo + banners. Para simplificar su diferencia, el logotipo es el significado del contenido del sitio web, el banner es mas que nada publicidad con respecto al sitio y el header es la parte donde se encuentran ambos contenidos.

Aplicando el conocimiento previsto,se mostrara cada termino en WaH:

Como se darán cuenta el logo no esta en si en el Header, pero esta dentro del respectivo lugar. Lamentablemente WaH no tiene los banners en su header, pero los podremos encontrar en otros lugares de la web/foro.

Ahora usemos esta teoría en practica. Si hacemos un boceto en Photoshop sin ningún estilo de capa, solo retocando el lugar de cada cosa, es decir (header,logotipo y banner):

-
Así es como "normalmente" se ven los 3 elementos juntos, bien, ahora hagamos la magia de como en verdad se verían en un sitio:

Bien ya tenemos un poco concluido lo que es un Header, Logo y Banner. Asi que es hora de que cada uno de ustedes lo pongo en practica.

Ya tengo los permisos ^^

Boton(Button).
(Es una metáfora común) utilizada en interfaces gráficas. Los botones suelen ser representados como rectángulos y/o formas con una leyenda o icono dentro, generalmente.

Navbar(Barra de Navegación).
Una barra de navegación (o sistema de navegación) es una sección de una página web o una página en línea para ayudar los visitantes en viajar a través del documento en línea.

Y bien en caso del botón para que sea mas simple es solo una forma rectangular y dentro de ella un texto o icono? Podría ser pero normalmente los botones respetan un estilo gráfico y hay millones de ellos, en este caso se explicara los estilos que conozco o los que mas bien se deben de manejar al empezar esto.

Los estilos de botones son de gran variedad y de la misma siguen saliendo mas. Aunque normalmente para diseñar hay 5 estilos que yo principalmente recomiendo (son solo los que utilizo ja):
Flat(Diseño Plano): El “Flat Design” o “Diseño Plano” consiste en eliminar o reducir todo tipo de decoración en un diseño de interfaz o web para simplificar el mensaje y facilitar la funcionalidad. Se eliminan texturas, degradados, biselados, sombreados… en definitiva, siempre se utilizan colores vivos y tipografías clásicas.


Minimalist(Minimalism): Se refiere a cualquier cosa que haya sido reducida a lo esencial, despojada de elementos sobrantes.


Ideal: Bueno para mi es el mejor de todos, ya que tiene todos los detalles a tu gusto, colores, fuentes, fondos, etc. Prácticamente es el que tu diseñas sin seguir un concepto. De aquí es donde mas se desglosan mas estilos.
-
Donde ah quedado la Navbar? es lo que mas te estas preguntando. Según mi mentalidad la navbar es mas que nada una barra con botones y sus diferentes links. Es decir:


Si miramos bien, comprendemos que es tan solo botones pegados y claro no suele ser lo mismo en todos los sitios. El concepto clave es respetar un gran orden si te trata de cada botón por separado y al final unirlos. Dejemos de lado la teoría.