Styleshout es un sitio mantenido por Erwin Aligam, en el cual puedes descargar templates de gran calidad en CSS y XHTML válidos de forma gratuita. Están distribuidos bajo la licencia 2.5 de Creative Commons Attribution. Además tiene una sección de templates premium con un costo realmente bajo. Vale la pena darse una vuelta y checar lo que hay.

Platicando con un amigo, me preguntaba que en que programa trabajaba para diseñar gráficos para sitios web, y le respondí que en Fireworks, sorprendido y hasta casi ofendido, me reclamo el hecho de ponerlo por encima de Photoshop. A lo cual le dije que eran dos programas muy distintos con diferentes objetivos en mente, tal como lo es el diseño impreso y el diseño web.

Nunca me he declarado fanático de uno u otro software en especial, simplemente trabajo con el que me acomodo mejor y soy mas productivo, bien dicen que “el hábito no hace al monje”. En el caso de Photoshop y Fireworks, son programas enfocados a diferentes segmentos. Mientras que el primero es un completo estudio digital, desde el que puedes transformar una sencilla imagen en una obra de arte o inclusive iniciar un proyecto desde cero, gracias a su excelentes herramientas de pintura e infinidad de filtros, su objetivo, como habia mencionado antes, es el diseño impreso y la fotografía digital. Es por esto que cuenta con herramientas avanzadas de calibración y manejo del color, que dicho sea de paso, consumen una gran cantidad de recursos del ordenador en que se este trabajando, debido al tamaño de los archivos que se manejan, que generalmente son de una buena cantidad de Mb.

En cambio Fireworks, es un programa enfocado totalmente al desarrollo y optimización de gráficos para internet. La revolución de pantalla siempre será 72 ppp, es decir que una imagen del tamaño de toda la pantalla de un monitor con resolución de 1024 x 768 pixeles, solo pesará unos cuantos bytes, a diferencia del tamaño de una imagen del mismo tamaño pero para impresión. ¿Pero esto que significa? Pues que Fireworks aprovecha al máximo este punto y las recursos que gasta son mucho menores que los de Photoshop, haciendo un flujo de trabajo mas rápido y agradable, gracias a que suprime varias herramientas innecesarias para el diseño web, como son manejo de color avanzado, edición de imágenes avanzada, entre otras. Pero a cambio de esto, tiene un mejor manejo de vectores dentro del archivo, genera archivos más pequeños, tiene una gran herramienta de optimización para imagenes para web, su formato nativo de archivo es PNG que nos permite generar archivos en capas con un peso muy pequeño.

En Fireworks también podemos diseñar archivos para impresión, pero no es lo ideal, ya que el modo de color para un proyecto que será impreso es CMYK y el modo de color que maneja Fireworks es RGB, que es lo que se maneja en diseño web. Para eso esta Photoshop.

Ustedes ¿que piensan?

Web whithout words es un proyecto muy interesante donde cada semana, escogen un sitio web popular y lo reconstruyen quitando todas las imagenes y texto, reemplazándolos por bloques. Además de que hacen un “perfil psicológico” del sitio en cuestion. Imperdible.

En Hicksdesign, el blog de los diseñadores del logo de Firefox y uno de los principales promotores del diseño web basado en estandares, nos traen varios scripts muy útiles para exportar los layers de un archivo de Illustrator a archivos PNG independientes. Muy útil si manejas varios iconos en un solo archivo de illustrador y deseas exportarlos en un solo paso.

Para usarlo simplemente descarga los scripts y guardalos en el folder Adobe Illustrator>Presets>Scripts de Illustrator.

Para exportar layers de Illustrator a PNG a 72 dpi, descarga el script aqui.

Es ahí donde entra Collabtive una herramienta Open Source de trabajo en grupo que a través de una sencilla interfaz, nos ofrece las funciones básicas como, agregar proyectos nuevos, manejar usuarios, mensajes, manejo de tiempo, sistema de chat, envío de archivos entre otras cosas. Se instala en tu servidor de una manera muy sencilla, y la capacidad de almacenamiento es delimitada únicamente por el hosting en que este instalado. Es fácilmente personalizable editando los archivos del template standard y agregar el diseño de acuerdo a la imagen corporativa de la compañia. Además de permitir la suscripción via RSS a los contenidos de los proyectos. Y lo mejor, es totalmente gratuito.

Sitio web de Collabtive

WordPress es la plataforma de blog mas extendida en internet, su facil instalación y configuración hacen que practica mente, cualquier persona, pueda iniciar un blog sobre el tema que sea. De hecho parte de su filosofia es, “La famosa instalación de 5 minutos”. Además cuenta con una gran comunidad de desarrolladores que dia a dia extienden su funcionalidad gracias a plugins y hacks.
Pero no solo sirve como plataforma de blog, ultimamente se ha extendido su funcionalidad a sitios corporativos, que gracias a su facilidad de uso permiten la facil administración de sitios de pequeña y mediana escala. A continuación te presentamos una lista de pluguins esenciales para transformar WordPress en un potente CMS (Content Management System).

1.- Adminimize.- Su función esencial es ocultar todo lo innecesario del panel de administración, haciendo mas facil el manejo del contenido. Podemos elegir la pagina inicial del panel de administracion, en lugar del tablero, permisos de edición a los diversos roles de usuarios que manejan el sitio, además de poder simplificar la sección de edición de paginas y posts dejando únicamente los campos necesarios, entre muchas otras cosas.

2.- Lighter Menus.- Organiza en forma de cascada los menús del área de administración, permitiéndonos una mejor organización de la interfaz y un acceso más rápido a todas las áreas de la administración.

3.- Contact Form 7.- La manera mas sencilla de crear y administrar un formulario de contacto.

4.- AWS Easy Page Link.- Nos brinda la opción de crear vínculos a diferentes paginas dentro del sitio.

5.- NextGEN Gallery.- Crea y administra galerías fotográficas, permitiéndonos agregarlas fácilmente a nuestro sitio, simplemente introduciendo el identificador de nuestra galería dentro del cuerpo del post o página. Además podemos manejar diversos efectos para mostrar las imagenes.

6.- WordPress Navigation List Plugin NAVT.- Un útil plugin para manejar, organizar y estilizar la negación del sitio, ofrece una interfaz de administración plagada de AJAX, que de primera instancia parece complicada, pero una vez que la utilizamos, todo se reduce a arrastrar y soltar.

7.- Events Calendar.- Modifica el calendario original de WordPress , de forma que muestra los futuros eventos que se introducen, también permite mostrar los próximos eventos en forma de lista.

8.- Fluter.- Un interesante plugin, en fase beta que nos permite crear nuevos tipos de contenido personalizado y agregarlos al menú de escribir. De esta manera podemos ampliar las posibilidades de creación de contenido de acuerdo a nuestras necesidades.

9.- WordPress Automatic Upgrade.- Gracias a esta extensión nos será posible tener actualizado el sistema con un simple click, ya que una vez que hay una versión nueva, basta con hacer click en un botón y para actualizarla a la ultima, de esta forma siempre tenemos nuestro sistema al dia.

10.- WP Super Cache.- Permite generar archivos html de nuestras páginas, ayudando a reducir en gran medida la carga del servidor y entregando la información de forma rápida y utilizando los menores recursos posibles.

Con estos plugins he podido realizar la gran mayoria de las necesidades en algunos sitios que he realizado basados en WordPress . Si alguien tiene alguna otra sugerencia sera bienvenida.

Si necesitas iconos gratuitos para un proyecto, en PICBI hacen una recopilación de 20 sets de iconos gratuitos listos para descargar. Para ver la lista de iconos haz clic aqui.

También en Freeziq nos ofrecen 10 sets listos para descargar aqui.

Visto en Digg

Un simple papel puede evitarnos muchos dolores de cabeza como si fuera una Aspirina, este mentado papel es el contrato. En su parte mas simple, un contrato es un acuerdo entre dos partes acerca de algo, esto nos permite establecer los compromisos y limitantes de algo. En un proyecto de diseño es indispensable el contrato para establecer las obligaciones y límites que adquirimos con nuestros clientes, muy útil cuando el cliente nos pide, prácticamente, un rediseño solo porque ese color azul no le pareció lo suficientemente convincente, haciéndonos trabajar horas extra que no habían sido cotizadas inicialmente.

En Ley en Línea desarrollaron una guía descargable en formato PDF para redactar un contrato para un Desarrollo Web, también puede servir de base para preparar uno para otro tipo de trabajo dentro del diseño. Visita el sitio para descargarla.

Durante el renacimiento, el uso de la proporción áurea se extendio entre las artes, uno de los artistas que más uso le dio fué Leonardo Da Vinci. Sus obras se apegaban a una reticula basada en la proporción aurea, en la Gioconda, el rostro encaja perfecto en un rectángulo áureo y las partes de la cara a su vez se componen de rectangulos o proporciones aureas.

Pero ¿Que es la proporción áurea?

El número áureo representa la proporción que existe entre dos segmentos, tales que el segmento menor es al mayor lo que el mayor es a la totalidad.

La fórmula es: (A/B)=(A+B)/A

Tal proporción corresponde al Número Áureo o Phi: 1,618. De suerte que el segmento AB es 1,618 veces A, y A es 1,618 veces B. Inversamente, B es 0,618 veces A, y A es 0,618 veces AB.

Una forma facil de entender es dibujando un cuadrado y agregar un punto medio en uno de sus lados, luego lo unimos con uno de los vertices del cuadrado y por ultimo llevamos esta distancia hacia alguno de los lados a partir del punto que dibujamos, obtenemos gráficamente un rectángulo con proporciones áureas.

Que es lo mismo que multiplicar la recta AB por el numero Phi y nos resultara igual a la recta AC. Esta proporcion equivale aproximadamente a dos segmento desiguales, uno de 62% y otro de 38% de una recta por tamaño 100%.

¿Que ventajas ofrece esta proporción?

Se dice que si a una linea recta le agregamos un punto en un lugar que no sea el centro, la mayoria de las veces lo agregaremos acercándonos a la proporción de 62% y 38%. Esto nos permite ofreces composiciones mas armoniosas que puedan enfocar la atención en un punto deseado. Una de las formas para trabajar con el número áureo es dimensionando el soporte. Esto no es otra cosa que utilizar un área de trabajo que tenga proporciones áureas.

El rectángulo dibujado anteriormente es un area de trabajo áurea, si esto lo aplicamos al diseño web obtenemos que para una intefaz 1024 x 768 con un ancho de 1010 pixeles visibles (le restamos 14 pixeles, que es lo que usan las barras de deslizamiento laterales) le corresponderia una altura de 624 pixeles. Aqui surge un problema, ya que en el diseño web generalmente podemos saber la anchura de un contenido, pero no la altura, ya que depende de la cantidad de contenido que estará en la página. Pero gracias a esta área de trabajo podemos crear una reticula proporcionada, para ajustar los elementos principales del diseño de un sitio web y ajustando los restantes con proporciones aureas.

En este caso hemos dividido el area total en dos areas, de la cual el rectangulo del lado derecho es un rectángulo áureo. ¿Como resultaron esas medidas? de multiplicar el ancho total (1010 px) por Phi dando como resultado 624px, asi el rectángulo queda dividio en un cuadrado y otro rectángulo áureo que a su vez vamos a dividir.

Si seguimos dividiendo infinitamente y luego trazamos un arco por la diagonal de cada cuadrado, se obtiene la espiral logarítmica, que aparece frecuentemente en la naturaleza y su ejemplo mas clásico la concha de un nautilus.

Con estos rectángulos aureos que hemos conseguido, podemos diseñar la reticula básica para hacer el diseño de nuestro sitio web.

Esta reticula es básica, pero sirve de ejemplo para ilustrar lo que se puede hacer utilizando la proporción áurea para diseñar, las posibilidades son infinitas, se puede cambiar la orientacion de los rectangulos al lado derecho, hacer tres columnas, etc. En este caso es una retícula a dos columnas orientada al lado derecho con cabecera y un pie de página, cada una de las secciones encaja en un rectangulo aureo, habrá ocasiones en que esto no sea posible, porque, como habiamos comentado anteriormente, muchas veces no se puede tener el control total sobre el contenido, y la altura es la que se ve afectada, pero si definimos bien la anchura de las secciones, la proporción se seguirá manteniendo en gran medida. En caso de que sea un diseño líquido, se trbaja con porcentajes en lugar de pixeles.

Si quieren saber más sobre la sección áurea, aqui hay unos links interesantes:

La Divina Proporcion

Composición Divina

Espiral Logarítmica

Número Áureo

Espero que esta pequeña guia les sea util, Espero sus comentarios!!