Les quiero compartir algunos consejos para hacer diseños de paginas web, no vamos a hablar de tips de programación ni nada de eso, este artículo va dirigido a diseñadores gráficos que deseen iniciarse en el diseño de paginas web, porque hacer un diseño para web no es lo mismo que diseñar la portada de una revista, flyers, etc…, en lo absoluto son cosas muy distintas.
Consejos para hacer diseños de paginas web
1. Los programas para diseñar paginas web
Hay personas que buscan programas especiales para diseñar paginas web, sinceramente mejor no se rompan la cabeza, en la actualidad cualquier programa puede servir para diseñar paginas web, hace unos años existía Macromedia la empresa que creo originalmente los programas Flash, Dreamweaver y Fireworks, ellos se encargaban de hacer programas “especiales” para crear contenido para web, posteriormente Adobe compro Macromedia y continuo con el desarrollo de estas aplicaciones hasta el lanzamiento de Adobe CC, donde Dreamweaver y Fireworks desaparecieron oficialmente.
Quedando el Adobe Photoshop como programa de la suite de Adobe para hacer cualquier tipo de diseños incluso web aunque también podríamos utilizar Illustrator o Adobe Muse que se especializa en diseño web para quienes no sepan programación, pero en este mundo de diseño Adobe no es el único, Pixelmator y Gimp por mencionar algunos o incluso Corel son programas muy buenos con los cuales podemos hacer diseños web, lo único que necesitamos de un programar de diseño para hacer paginas web es, que nos permita:
- Cambiar dimensiones del area de trabajo
- Generar transparencias
- Guardar en JPG, PNG o GIF
- Eso es todo, y actualmente no hay programa que no permita hacer esto.
Mi recomendación es utilizar Adobe Photoshop CC, ¿Porque?, bueno porque es un programa muy potente con muchas herramientas al guardar en PNG o JPG realiza una compresión muy adecuada de los archivos limitando la perdida de calidad, permite generar sprites de manera automática a partir de Photoshop CC 14.1, y si no créanme que cualquier otro programa es muy bueno.
2. La resolución ¿300 dpi?
En diseño una de las primeras “reglas” que te mencionan es que tus diseños si son impresos tienes que hacerlos a una resolución de 300 dpi, recalco, solo si son Impresos, bueno este asunto de los DPI tiene mucho que ver con la plataforma de producción, hacer diseños con una resolución menor a 300 dpi no provocara que estos se vean mal o pierdan calidad.
Para hacer diseños web o cualquier diseño que únicamente vaya a ser utilizado en equipos digitales como monitores, tabletas, móviles o incluso televisores la resolución ideal es 72 dpi, como resultado sus archivos editables serán más pequeños (mucho mas pequeños) y no perderán calidad en lo absoluto.
3. Las dimensiones
Al igual que con el asunto de la resolución, las dimensiones para hacer un diseño web van de la mano con la plataforma, si hablamos de diseñar paginas web convencionales según Stats Counter la resolución de pantalla mas utilizada es de 1366×768 seguida por 1024×768 pixeles, por cierto olviden los centímetros y milímetros, la unidad medida que se utiliza para web es Pixeles.
Entonces podemos considerar como la dimensión ideal para diseñar una pagina web 1000 pixeles de ancho por infinito.
4. ¿JPG, GIF o PNG? o ¿BMP?
De inicio BMP queda totalmente descartado, en cuanto a los otros formatos el ideal es JPG porque conserva la calidad de las imágenes y su compresión permite utilizar imágenes de poco peso que no afectan el rendimiento de la pagina, sin embargo el archivo JPG no permite transparencia, ahi entre PNG que es un formato que permite transparencias y también realiza una compresión de los archivos.
Los archivos PNG deben ser utilizados para iconos y elementos pequeños, la recomendación es realizar sprites, los sprites son una imagen con transparencia que incluye todos los iconos y estos son utilizados en web utilizando CSS para mostrar solo porciones de la imagen.
5. El usuario final
Siempre diseña pensando en que una pagina web no es una imagen que simplemente admiras, siempre debes pensar que un diseño web será una aplicación que debe permitir la interacción con el usuario, y para que la interacción del usuarios con tu diseño sea una realidad debes pensar en que el diseño facilite la navegación entre secciones.
Los enlaces deben poder ser identificados con facilidad, los botones de acción como por ejemplo botones para compras, botones para enviar mails o para registrarte deben ser llamativos y simples a la vez, su ubicación casi debe ser estratégica.
Para todo esto debes considerar que será lo primero que vera el usuario al cargar la pagina, para ello siempre debes tener en cuenta las dimensiones de la pagina para saber como ubicar o crear un layout atractivo que permite identificar los menus de navegación el contenido importante y las opciones de integración o contacto que se permitan.
6. Inspiración
Esta es básica y quizás el consejo mas importante, no copiar, inspirarte, esto es una practica obligatoria para todo diseñador sea web, de publicidad, moda, industrial, etc. no necesitamos explicar mucho de esto, pero les podemos recomendar algunos enlaces donde podrás encontrar diseños web atractivos para inspirarte y conocer los elementos que se utilizan comúnmente en una pagina y cuales se pueden utilizar.
7. Conoce al programador
Los programadores y diseñadores tienen muchas diferencias, pero hay que aprender a trabajar en equipo, lo mejor es conocer las habilidades del programador para saber hasta donde puede volar tu imaginación, en programación todo se puede pero todo lleva su tiempo y no es justo esperar que todos los programadores sepan todo.
Considera que un programador con poca experiencia se puede tardar mas en implementar un diseño web muy trabajado y con muchos elementos a diferencia de un programador experimentado, ahora que si el tiempo no es un impedimento para el desarrollo del proyecto entonces adelante que siempre es bueno aprender.
8. Conoce el código
Si, aunque seas diseñador deberías conocer un poco de código, por lo menos lo básico de HTML y CSS, por ejemplo en diseño web se utiliza código CSS para implementar todo el diseño de la pagina y HTML sirve para la estructura del layout.
En CSS y diseño web en general no se utilizan colores CMYK, recuerda que estamos trabajando en un proyecto que se visualizara a través de un monitor, los colores en diseño web deben ser expresados en RGB (255,155,0) o Hexadecimal (#FFCC00).
Con conocer el código no me refiero a que termines viendo el mundo como Neo (Matrix) no se trata de eso, la idea de conocer del código, es que conozcas las posibilidades que la programación web te permite, cierto repito que todo se puede, pero si nunca haz hecho diseño web esto te puede ser de mucha utilidad, por ejemplo puedes considerar que los botones de tu pagina web tengan dos colores uno básico y que cambie el color cuando el puntero del mouse pase encima, y también puede haber animaciones con CSS.
Un buen libro para aprender HTML y CSS es HTML and CSS Book.
Espero que estos consejos sean de utilidad para todos, les invito a compartir el artículo para que sus amigos diseñadores conozcan un poco sobre el tema, después de todo la industria tiene mucho interés en Internet.