1. Consigue una plantilla:
Siempre es bueno recurrir a una linda plantilla de diseño ya previamente construida, seguramente la diseñó alguien con conocimientos superiores a los que tenemos.
2. Imágenes y fotografías:
Siempre es recomendable utilizar imágenes optimizadas para web, es decir, comprimidas a un peso adecuado para no aumentar el tiempo de carga de nuestro sitio web. Para optimizar nuestras fotografías pueden realizarlo con cualquier software de edición de imágenes como Picasa, Photoshop o el mismo editor de imágenes de office. A veces es muy cómodo usar imágenes tal como son y usan el mismo editor de imágenes de Joomla para aumentar o reducir su tamaño. Al aumentar de tamaño una foto o imagen, las fotos se revientan y sus pixeles se notan claramente. En el caso contrario, al reducir su tamaño con el editor, tendremos una foto o imagen con un peso mayor al que necesitamos aumentando considerablemente el tiempo de carga de nuestro sitio web.
3. Las fuentes o tipografías:
Siempre recurrir a tipografías pensando en la persona que verá nuestro sitio web, a veces cuando seleccionamos una fuente no común, puede que la persona detrás de la pantalla no la tenga instalada en su pc y el navegador seleccionará cualquier otro tipo de fuente que tenga este instalada. Si quieres darle un lindo estilo a tu sitio web, recurre a Google Fonts (http://www.google.com/webfonts) o a @font-face (http://www.font-face.com/) y si estas trabajando con un framework tipo Gantry o Warp, solo seleccionala desde la configuración de la plantilla.
4. Respetar el diseño original de la plantilla:
Es probable que la persona que ha diseñado la plantilla que estamos utilizando tenga más conocimientos que nosotros en términos de estética, orden, estilo, claridad, etc. Si podemos acomodar respetando el diseño original es lo mejor.
5. Evitar el uso excesivo de imágenes para bordes y efectos:
Se recomienda reemplazar los típicos bordes de imágenes que están hechos con una imagen por una línea de código de css, por ejemplo, en lugar de poner una línea de separación de texto de color, es mejor hacerlo desde el mismo editor de texto, por ejemplo JCE (http://www.joomlacontenteditor.net/) o desde el CSS identificando el elemento con firebug o web developer e incluir un código como: Div estilox {border-top: 5px dotted green; }
6. Evitar el uso de Flash:
Actualmente, los sitios web que contienen animaciones con Flash, están en retirada, principalmente por la invasión de nuevos dispositivos portátiles para navegar por internet. Flash puede ser reemplazado por rotadores de imágenes de los cuales hay cientos en el Joomla Extensions Directory, la mayoría construidos en JQuery, JavaScript, HTML5 e incluso con sólo CSS.
7. Ver webs:
Existen muchos sitios web que tienen portafolios actualizados diariamente con los mejores diseños web del momento, de ellos podemos rescatar ideas, nuevas tendencias, e incluso líneas de código de CSS. Recomiendo http://www.webdesign-inspiration.com/
8. Herramientas de diseño en el navegador:
Si vamos a trabajar en diseño web es fundamental saber cómo está hecho un sitio web en términos de código CSS fundamentalmente. Estas además permiten realizar cambios y ver en vivo el resultado (ojo, que al actualizar el navegador estos cambios se pierden) en el código Existen herramientas complementarias al navegador como Firebug o Web Developer (personalmente la que uso).
9. Software de escritorio:
Siempre es necesario contar con software para escritorio para redimensionar imágenes, crear banners, dar algún tipo de efecto a una foto, etc. Hay gratuitas como GIMP o Paint.net, Picasa, etc; y de pago como Adobe Photoshop, Fireworks, etc.
10. Editor de código:
Siempre es bueno tener a mano un buen editor de código para descargar y modificar archivos de nuestra web, hay gratuitos como Notepad++, Coda, etc. Y de pago como Dreamweaver.
Contacto:
Leo Soto es un entusiasta colaborador de la comunidad Joomla! en Chile. Es especialista en Joomla! CMS, CSS y desde hace un tiempo a esta parte uno de los referentes al momento de hablar de Warp Framework en las comunidades hispanohablantes.
Web Site: www.leosotoweb.com
Email:
Facebook: leo.soto.54
Twitter: @leo__soto
Google+: https://plus.google.com/105468630251455104656