Sebastián Thüer

Comunicación, diseño y tecnología

Diseño Web

La ilustración en el diseño web

· ·

Se calcula que para finales del 2010 había unos 255 millones de sitio web, según una estimación de Focus. Conseguir un diseño atractivo, original e innovador sin caer los lugares comunes del diseño no es una cuestión sencilla.

Por eso es que cada vez se están viendo más sitios que utilizan las ilustraciones como elemento diferencial dentro de su composición. Un dibujo transmite personalidad, originalidad y, si está bien empleado, consigue atraer la atención del usuario hacia el lugar apropiado.

En WDL hacen un interesante recorrido por 25 sitios web que utilizan ilustraciones y dibujos a mano en su diseño. Una buena alternativa para salir de la proliferación de fotografías de los bancos de imágenes que abundan hoy en día.

Algunos ejemplos






Una herramienta para manejar las resoluciones de pantalla en diseño web

· ·

Uno de los dolores de cabeza más frecuentes en el diseño web es lidiar con las resoluciones de pantalla. Mientras en la gráfica optimizamos la composición para un tamaño determinado, los diseños que salen por pantalla pueden ser reproducidos en infinidad de condiciones: desde la pantalla de un smartphone hasta un LCD de 42 pulgadas.

No es solamente una cuestión de tamaño. El problema también afecta al ratio, es decir, la relación entre el alto y el ancho de la pantalla. Podemos tener ratios que van del 3:5 al 16:9 con lo cual las proporciones y distribución de los elementos varía considerablemente.

Punchcut es una empresa de diseño especializada en experiencias móviles y convergencia de dispositivos que ha puesto a disposición de los diseñadores un interesante set de recursos para contemplar el diseño con múltiples dispositivos. En un ZIP ofrecen una serie de PSD de base con el diseño en los dispositivos más frecuentes, un archivo con los ratios y resoluciones más habituales un archivo TPL para Photoshop con los preseteos para cada caso.

Roots, un theme de WordPress para diseñadores web

· ·

Desde hace un tiempo en el diseño web se está imponiendo la tendencia de reutilizar una serie de bibliotecas o recursos genéricos que permiten solucionar algunos problemas puntuales sin tener que convertirse en un experto en la materia. No me refiero solamente frameworks de JavaScript como jQuery, Prototype o Yahoo User Interface que están ampliamente extendidos. También se están comenzando a utilizar frameworks de CSS para estandarizar la generación de estilos, frameworks de HTML5 para extender este lenguaje a los navegadores más antiguos y sistemas de retículas como 960 grid system o 1140 CSS grid.

Roots es un theme para WordPress que se presenta como excelente opción para diseñadores web ya que incorpora muchos de etos recursos. Utiliza HTML5, microformatos y tiene predefinidas una serie de opciones como organizar los posts por año y nombre, guarda los nuevos archivos en el directorio assets y, afirman los creadores, produce un código más limpio que la mayoría de las demás plantillas para WordPress.

Como lo indica su nombre, Roots es un theme para ser utilizado de base en muchos diseños y permite agilizar muchísimo el desarrollo de diseños web en WordPress ya que soluciona una serie de problemas comunes a los que se enfrentan los diseñadores cuando quieren desarrollar un theme para este sistema de gestión de contenidos.

Adobe lanza su Creative Suite 5.5

· ·

Adobe acaba de anunciar el lanzamiento de Creative Suite 5.5, una nueva versión de su paquete de aplicaciones de diseño que está concentrada en mejoras sobre HTML5, Flash y, fundamentalmente, optimizar el desarrollo de aplicaciones para nuevos dispositivos como Smart Phone y iPad.

Esta actualización es parte de una nueva estrategia que está realizando la compañía. Hasta ahora Adobe venía renovando de forma más o menos importante sus aplicaciones cada 2 años, pero los tiempos de espera se hacían demasiado largas mientras se lanzan gadgets nuevos.

Los usuarios de Dreamweaver se verán beneficiados con muchas mejoras en HTML5 -funcionalidades que hasta ahora funcionaban a través de una extensión pero no eran parte del corazón del producto- y la ainclusión de frameworks de desarrollo para dispositivos móviles. Además, hay actualizaciones para Flash Builder y Flex, que también añaden soporte para tecnología móvil.

Además, se verán benficiados los diseñadores que utilicen in InDesign y quieran diseñar para tabletas como iPad, las basadas en Android y el nuevo BlackBerry PlayBook.

Licencias por suscripción

Las licencias de la suite de Adobe no son precisamente baratas, especialmente las más completas. Por eso es interesante la idea de lanzar un plan de suscripción mensual o anual que te permite disfrutar de una licencia por un tiempo acotado. No es una versión web sino el producto de escritorio 100% funcional pero con una clave de registro que vence luego de cierto tiempo.

Por ejemplo, una licencia de Dreamweaver arranca en $19 dólares y una Photoshop en $35. La suite básica son consigue por $65 y la Master Collection -con todos los productos- por $129 dólares. Una opción interesante por si te interesa un uso ocasional.

Sin embargo, para un uso a largo plazo te sigue conviniendo comprar la licencia completa. Considerando que el ciclo de actualizaciones es de 2 años, una suscripción por este tiempo a Adobe Creative Suite Web Premium te saldría $2136 dólares, contra $1799 de la versión full de una licencia permanente.

Primeras impresiones de Internet Explorer 9

· ·

Rápido, compatible con los estándares de la web  y con el foco puesto en el contenido. No parece, pero estamos hablando de Internet Explorer 9. La nueva versión del navegador de Microsoft, ya disponible, deja atrás una larga lista de intentos fallidos y ofrece un producto que tiene un desempeño muy bueno. En las primeras 24 horas, ya tiene 2,3 millones de descargas.

A primera vista, la interfaz del IE9 recuerda mucho a Chrome. La barra de direcciones es el verdadero centro del navegador. Desde ella se pude escribir una dirección web, buscar o consultar en el historial. Una serie de iconos en su interior permiten recargar o detener la carga de la página y activar la vista de compatibilidad, esto es, hacer que los sitios web “optimizados” para versiones anteriores del navegador se sigan viendo correctamente.

Al igual que el navegador de Google, en Microsoft han tomado nota que los usuarios no quieren un navegador repleto de funciones. Por el contrario, buscan interfaces claras y simples que les permitan concentrarse en navegar por la web.

La integración de Internet Explorer 9 con Windows 7 permite agregar un sitio  a la barra de tareas. Esto no solo simplifica el acceso a los sitios más frecuentes, sino que realmente ayuda a que el usuario vea una aplicación web realmente como una aplicación.

Más puntos a favor: Finalmente han incluido un gestor de descargas, una utilidad prácticamente impresindible hoy en día para gestionar todos los diferentes archivos que se bajan de la web. Además, los mensajes de advertencia y error son muchos menos molestos y no perjudican la experiencia de usuario.

Diseño web para Internet Explorer 9

Para los diseñadores web la principal ventaja de IE9 es el soporte que ofrece para HTML5 y CSS3, dos de las tecnologías que en poco tiempo se convertirán en estándard. Internet Explorer 9 puede maneja audio y video embebido y tiene soporte para la canvas, la nueva funcionalidad de HTML5 a través de la cual se pueden generar dinámicamente imágenes, gráficos y animaciones sin necesidad de plugins.

En principio, la reacción de la comunidad está siendo bastante positiva. En ArsTechinca hablan de The most modern browser there is: Internet Explorer 9 reviewed, donde destacan su simpleza, velocidad y el apego a los estándares. En Endgadget elogian la performance de IE9 frente a Chrome y Firefox en varios test.

Microsoft, por su parte, ha lanzado el sitio Beauty Of The Web para mostrar las posibilidades de su nuevo navegador. Claramente se advierte el cambio de estrategia con un importante apartado destinado a mostrar cómo la empresa está siguiendo las últimas tendencias y no imponiendo estádares de facto.

Problemas

Aunque Internet Explorer 9 funciona bien, no es perfecto. Por ejemplo, al entrar a tu cuenta de Gmail verás un aviso donde te recomiendan activar la vista de compatibilidad para no tener problemas. Otro problema que noté al utilizarlo en estos días es que no funciona Lightbox, un script que te permite mostrar una galería de fotos de forma bastante visual y práctica (la que uso en este blog, por ejemplo). 

Además, IE9 pone una condición bastante restrictiva para ser usado: solo funciona sobre Windows 7, con lo cual los viejos usuarios de XP -que todavía quedan varios, especialmente los que adquieron netbooks hace un par de años- se quedan fuera.

Conclusión

Personalmente, luego de probarlo por estos días no hay dudas: es el mejor Internet Explorer que se ha hecho hasta ahora. Los sitios se ven bien, las aplicaciones web responden rápido y si alguna página se cuelga se puede seguir navegando por las demás pestañas (aunque si insistimos en cargar una página con errores puede que el programa se cuelgue). En caso que el programa se cierre, podemos recuperar la sesión anterior.

En síntesis, un paso adelante de Microsoft al ofrecer un producto acorde a las expectativas y tendencias actuales donde corrige viejos vicios. Para los diseñadores web, también es un alivio saber que no habrá que usar los viejos hacks para corregir problemas de visualización. Sin embargo, hay que tener cuidado y seguir testeando, especialmente al usar algunas librerías de JavaScript.