Archivos de la categoría Diseño

Stui – CMS para diseñadores

Stui - panel de administración de contenidos de sitios web

La razón por la cual éste blog se mantuvo desactualizado durante el último tiempo es que estuve desarrollando Stui.

Stui es un CMS o sistema de administración de contenidos ideal para diseñadores que no sepan programación, ya que permite a sus clientes modificar el contenido del sitio sin romper el diseño. El cliente puede administrar el contenido (textos, imágenes, audios, videos, etc) sin conocimientos técnicos a través de esta aplicación web.

El diseñador no toma contacto en ningún momento con el área de programación, ya que la implementación corre por cuenta del equipo de Stui y las actualizaciones son automáticas.

Los invito a ver las características del sistema en nuestro sitio web: www.stui.com.ar

Stui - Administrá tus contenidos

Bocetos, como en papel, pero con Adobe Air

Siempre, cuando se tiene una idea para un programa o un sitio nuevo, una de las primeras cosas que se hace es hacer un bosquejo de su GUI (o interfase de usuario gŕafica, en español). Para esto, se utiliza, generalmente, un bloc de notas (A5, en mi caso) donde se dibuja a mano alzada y rápidamente como quedaría la idea plasmada.

A través de IncubaWeb, fui a dar con una aplicación hecha con Adobe Air que permite realizar estos bocetos en la PC de una forma simple, prolija y, por sobre todo, rápida.

Balsamiq Mockups presenta un bloc de notas (que sería el canvas de trabajo) sobre el que se pueden ubicar representaciones de todo tipo de objetos presentes en una aplicación o sitio web con sólo hacer Drag & Drop. Estos objetos (ventanas, botones, iconos, listas, tabs, links, reproductores, mapas, etc), una vez ubicados en sobre el bloc de notas, se pueden modificar. Así, se pueden reordenar, agregar y borrar estos objetos muy fácilmente, cosa que en el papel muchas veces implica empezar de nuevo.

Una vez terminado el boceto, éste puede ser exportado en formato PNG.

El programa en cuestión está disponible por U$S79 y es posible probarlo con una demo en su sitio.

Su creador hizo un video mostrando lo simple que resulta hacer un boceto de iTunes con su programa:

Se comenta en diversos blogs que su creador logró juntar U$S10.000 en sólo 6 semanas y, muy probablemente, recaude mucho más.

La única contra que le encuentro es que no se puede usar en Linux con amd64, pero esto es debido a que Adobe no tiene una versión de Air para el mismo.

Ejemplos de bocetos

Boceto de iTunes hecho con Balsamiq Mockups

Para qué resolución diseñar? (II)

Para complementar el punto “espacio real de diseño” del post anterior, subo esta imágen donde se ve el espacio real donde se visualiza la página:

Espacio real Mozilla Firefox

Mozilla Firefox – 1024×768 px

En la imagen se nota que en este caso el espacio del que se dispone es de 1008×575 px, ya que las solapas de firefo tienen 30 px de altura, al igual que la barra de google.
La barra de scroll (algo controlable mediante CSS), ocupa 16 px.Estadísticas globales:
http://www.w3counter.com/globalstats.php
http://www.w3schools.com/browsers/browsers_stats.asp

Para qué resolución diseñar?

Esta es una de las primeras preguntas que se hacen a la hora de diseñar un sitio web. Diseñar para 800×600? para 1024×768? Pero no es la única pregunta. Qué navegador hay que priorizar? Se debe utilizar Flash o Javascript? Aún sabiendo cual es la resolución que se debe adoptar, de cuanto espacio real se dispone?

La respuesta a estas preguntas está, entre otros lugares, en las estadísticas.
Antes de realizar un sitio se debe saber a que público está dirigido. Luego, mediante las estadísticas, se intentará que la mayor cantidad de usuarios posible visualicen bien la página.

  1. Resolución de pantalla: La resolucíon de pantalla varía según el lugar y el tiempo. No será lo mismo diseñar una página para EE.UU. que para España que para Argentina:

    Las resoluciones de pantalla más populares en España son:

    Abril 2006
    1. 1024 x 768 53.88%
    2. 800 x 600 21.36%
    3. 1280 x 1024 13.17%
    4. 1152 x 864 3.53%
    5. 1280 x 800 2.86%

    Las resoluciones de pantalla más populares en México son:

    Abril 2006
    1. 1024 x 768 61.62%
    2. 800 x 600 25.61%
    3. 1280 x 1024 4.82%
    4. 1152 x 864 2.54%
    5. 1280 x 800 1.87%

    Las resoluciones de pantalla más populares en Argentina son:

    Abril 2006
    1. 1024 x 768 48.01%
    2. 800 x 600 42.63%
    3. 1280 x 1024 3.56%
    4. 1152 x 864 2.04%
    5. 1280 x 800 1.06%

    Fuente

    Asímismo, las estadísticas varían en el tiempo, ya que antes, la resolución más usada era 800×600, y mucho antes: 640×480

  2. Navegador: A menos que la página se haga para un público muy especial, es sabido que (lamentablemente, a mi modo de ver) Internet Explorer es al día de hoy, el navegador más utilizado, con casi el 60% del mercado y siendo la versión 6 la predominante. También se debe tener en cuenta a Firefox, que ganó terreno y ya tiene una porción importante de usuarios.
    Igual, resulta conveniente consultar las estadísticas más actuales al momento de diseñar la página, ya que pueden cambiar.
  3. Flash y Javascript: Al diseñar con Flash o Javascript se debe tener en cuenta que no son mayoría los usuarios que saben como instalar el plug-in de Flash o como activar Javascript en su navegador, así que es conveniente revisar las estadísticas sobre el tema.
    Aquí, en general, el 95% de los usuarios tienen el plug-in de Flash instalado y javascript activado. Esta cifra crece año a año.
  4. Espacio real de diseño: Una vez que se decide que resolución usar, sería conveniente saber de cuanto espacio se dispone para diseñar la página sin que aparezca scroll (si no se lo desea). Por ejemplo: si se decide usar 1024×768, no se diseñará la página para que ocupe 1024px x 768px, ya que hay que descontar la barra de inicio, la barra de menú, las barras plug-in (como la de google, yahoo, msn, etc) las solapas de los tabs..

    Screen size IE 6 Firefox Opera Mozilla Netscape
    800 × 600 779 × 400 781 × 434 777 × 427 779 × 420 781 × 389
    1024 × 768 1003 × 568 1005 × 602 1001 × 595 1003 × 588 1005 × 557

    Fuente

    También hay que tener en cuenta que no siempre las ventanas se encuentran maximizadas.

Finalmente, hay que agregar que no sólo hay que tener en cuenta las estadísticas actuales, sino también intentar realizar una proyección, para que no haya que rediseñar la página en el corto plazo.