¡Hola, alumnos! El tiempo pasa volando y ya estamos en la quinta clase del Taller de Adobe Photoshop. ¡Nuestra primer práctica!

Pero quizá les sorprenda que haya tanta teoría en la práctica, jejeje, esto es porque los que van a practicar son ustedes. Hoy comenzarán a diagramar sus sitios web, pero verán que hay muchos pasos previos al diseño en sí. ¡Comencemos!

Photoshop es una excelente herramienta para diseñar la plantilla de nuestro sitio web. Al final del curso veremos que se puede hacer un sitio enteramente con Photoshop (aunque lo más recomendable es usar DreamWeaver para optimizar la plantilla y terminar el sitio).Volviendo al tema, es importante conocer las herramientas que ofrece Photoshop a la hora de diseñar un sitio web, las cuales veremos a lo largo del taller.

Pero un sitio web no sólo es su estructura, también tiene contenido (imágenes, textos, etc). Por lo que también es importante saber cómo generar ese contenido.

Comenzando a diagramar tu Sitio Web

Si queremos hacer bien las cosas, el diseño de nuestro sitio comenzará en una hoja de papel. Allí volcaremos nuestras ideas.

Hay que tener en cuenta que el sitio debería tener una buena estética, pero sin descuidar la accesibilidad ni la usabilidad, es decir que el usuario pueda comprender de un vistazo todo lo que ofrece el sitio, cómo se accede a ello y que pueda “usarlo” (navegarlo) con facilidad.

En los ejemplos que veremos no nos vamos a volver locos con diseños archi-complejos, porque sabiendo diseñar una página estándar tendremos los conocimientos para hacer después algo más creativo.

La primera pregunta es: ¿De qué tipo de sitio se trata? (Comercial, institucional, un portfolio, un blog, etc).
La segunda: ¿Cuál será el público de mi sitio?

Teniendo en cuenta estas dos cuestiones básicas, podemos tener una idea de qué tipo de diseño realizaremos, si será más o menos complejo (¡ojo! complejo no significa complicado), formal o informal, etc. Y también qué elementos voy a necesitar en él (carrito de compras, botoneras extras, íconos, etc).

Un sitio básico puede tener una o más barras horizontales superiores, barras verticales (columnas), un sector central para el contenido y una barra horizontal inferior (pié del sitio).

Elementos que lo conforman

No hay límites para esto, pero generalmente se utiliza un banner principal, con una imagen, tal vez un texto integrado a la imagen o el logo de nuestro sitio, una barra de navegación (dividida en botones, donde cada uno nos llevará a una sección distinta del sitio), que puede ser horizontal o vertical, y el cuerpo o sector donde irá el contenido propiamente dicho.

En base a esto podremos ir pensando cómo irán distribuidos estos elementos en el diseño de nuestra página. Luego de bocetarlos en papel, para tener una idea más clara de cómo quedará finalmente, podemos dedicarnos a conseguir los recursos, imágenes, íconos, tipografías, etc.,etc., etc., que incluiremos, ya sea que vayamos a retocarlos o no.

Incluso podemos buscar varias fotos que nos interesen para (luego veremos cómo) fusionarlas en una sola imagen, una especie de collage (bien hecho) como se suele ver a menudo por la web.

Tarea nº 1: Piensen en lo explicado, creen un sitio (”en una hoja de papel”) y asígnenle un nombre de dominio (imaginario, estilo: “pepito.com”). Elijan la estructura que más les convenga y los elementos que necesitarán (por el momento céntrense en la página de inicio).

Tarea nº2: Recolecten por la web todos los recursos necesarios (fotos, íconos, etc.) que crean que pueden ser útiles. Nada está de más en esta etapa. Pueden buscar imágenes desde Flickr o a través de Google (como haremos un sitio para practicar, no importa qué tipo de imágenes usemos, pero luego tendremos que usar imágenes libres de derechos, al momento de publicar un sitio real).

La interfaz del Sitio

Todavía no nos meteremos a diseñar la interfaz, pero a partir de esta clase comenzaremos a ver varios ejemplos prácticos que nos permitirán hacerlo más adelante.

Lo que sí haremos es plantearnos qué elementos reaccionarán de una manera u otra frente a una acción del usuario (por ejemplo: un botón que cambia al pasarle el cursor por encima, un campo que se expandirá al agregarle más contenido, etc).

Es importante que realicen este trabajo porque en base a esto haremos los ejercicios de las clases siguientes.

Boceten todo en papel, miren infinidad de sitios por la web para aprender cómo se comportan, qué cosas están buenas y cuáles no, etc.

Para terminar la clase quisiera decirles que no se desanimen porque no van a usar Photoshop en esta primera práctica. Todo Diseñador Gráfico sabe que el trabajo principal se realiza fuera de la PC, sobre papel y en la cabeza.

¿Te gusta este artículo? Compártelo con tus amigos!