Categorí­a: 'Diseño web'

5 webs útiles para diseñadores: octubre 2008

Como todos los meses, desde nuestro departamento de diseño os traemos cinco páginas web que ofrecen aplicaciones gratuitas útiles en el día a día de un diseñador. Y por cierto, estaremos encantados de que nos enviéis las que vosotros mismos descubráis.

Color Theory Visualizer

  1. Color Theory Visualizer.
    Si te gusta jugar con los colores, prueba esta esfera de color que ofrece ColorJack. De una forma muy visual, podrás hacer variaciones sobre un color dado, hallar su complementario o incluso aplicarle efectos que simulan enfermedades de percepción como la protanopia. Lo mejor: pueden exportarse los resultados en paletas de color para Photoshop e Illustrator.

Gradient Color creator

  1. Gradient Color creator.
    Elige un tamaño en píxels, la dirección y los colores del degradado, y en pocos segundos obtendrás una imagen .PNG, el código HTML y el CSS para ponerla como fondo.

CSS Compressor

  1. CSS Compressor.
    Una de las claves para aligerar el tiempo de descarga de una web es que el código pese lo menos posible, eliminando espacios innecesarios. Introduce tu código CSS en esta web y comprueba cómo el peso del mismo se aligera en un 15%.

Tagatum

  1. Tagatum.
    ¿Alguna vez te has preguntado la frecuencia con la que dos etiquetas son asignadas juntas a un mismo post? Gracias a esta herramienta online nos hemos enterado de que la palabra que con más frecuencia se etiqueta junto a “design” es “retro”, y que también suele relacionarse “web application” con “blog”. Datos curiosos que con más detenimiento pueden arrojar interesantes conclusiones.

IMG2TXT

  1. IMG2TXT.
    En esta página puedes obtener una versión ASCII de cualquier imagen GIF, JPG, o PNG, tan sólo proporcionando la URL en la que está alojada. También puedes especificar los caracteres que quieres que se empleen y si deseas que salgan al azar o no. El arte ASCII ya no volverá a ser lo mismo.

Añadir Comentario October 6th, 2008 Envía esta entrada a menéame Envía esta entrada a del.ici.ous

7 Principios del diseño de aplicaciones

Hoy día disponemos de herramientas muy potentes para el diseño de aplicaciones. Ya sea en entornos web o de escritorio, somos capaces de crear aplicaciones complejas, rápidas, altamente interactivas. JavaScript, AJAX, Flash, Flex y muchas otras herramientas proporcionan a los desarrolladores un asombroso poder para el diseño de aplicaciones que eran casi inimaginables hace tan sólo unos años.

Sin embargo, el poder proporcionar todas estas herramientas a los usuarios no significa que éstos puedan alcanzar sus objetivos. De hecho, es bastante común distraerse en la tecnología y olvidar las bases del diseño de interacción, dejando al usuario frente a una aplicación muy lograda pero que no responde a sus necesidades.

Es importante que tengamos bien presentes ciertos principios básicos a la hora de diseñar aplicaciones web:

1. Diseñar para los detalles

Casi todas las aplicaciones requieren que el usuario haga elecciones. Los diseñadores debemos asegurarnos de que el usuario encuentre la información que necesita para evaluar las diferencias entre cada opción y poder hacer así la elección correcta. Los errores básicos más comunes son:

  1. Saturar de información al usuario.
  2. Abusar de tecnicismos que el usuario no entiende.
  3. Dar prioridad a la forma sobre el contenido, y sacrificar parte de la información o la accesibilidad de ésta empleando de forma errónea tecnologías vistosas como Ajax y Flash.

Un buen diseñador de aplicaciones debe centrarse en los detalles de la información, más que en los métodos de presentarla. Se debe preguntar constantemente ¿Estamos dándole al usuario información suficiente para que cumpla su objetivo?

2. Diseñar para el reconocimiento y un feedback apropiado

No hay duda de que ciertas técnicas interactivas como drag-and-drop o la selección múltiple mejoran la experiencia del usuario. Sin embargo, a menudo no se acompañan de pistas visuales que ayuden al usuario a reconocerlas, y a menos que sean usuarios avanzados que ya las conocen, es poco probable que lo descubran por sí mismos. Debemos indicárselo.

Por otro lado, también es importante mostrar al usuario el efecto de sus acciones. Si manipula un drag-and-drop y los cambios son tan sutiles que parece no haber ocurrido nada, el usuario buscará un botón de “refrescar” que no existe y se frustará.

3. Diseñar para las experiencias previas del usuario

No se trata de replicar las experiencias del usuario en el mundo real (por ejemplo, haciendo que al pasar las páginas de un documento las hojas se curven), sino de pensar en las aplicaciones que nuestros usuarios ya están acostumbrados a usar. Si sabemos que tiene experiencia en Microsoft Excel, a la hora de mostrar datos en tablas, lo más eficaz es imitar la forma en que se presentan en ese programa.

Incluso si se trata de una aplicación que forma parte de una suite, siempre es más importante aprovechar esta experiencia previa de los usuarios que la semejanza entre las aplicaciones que forman la suite. Por ejemplo, si estás diseñando una aplicación para contables, es mejor que se parezca al Excel que a otra aplicación de la misma suite dirigida, por ejemplo, a diseñadores gráficos.

4. Diseñar para la Flexibilidad

Las cosas no siempre funcionan tal y como las habías planeado. Esperamos que nuestros usuarios obtengan buenos resultados a la primera, pero no siempre funciona de ese modo, simplemente porque en ciertas ocasiones no obtienen lo que esperaban. (…)

Los diseños deben ser flexibles. Los usuarios quieren una vía por la que experimentar. (…) Hemos descubierto que los usuarios raramente presionan el botón “Anterior” [del Historial de Navegación] a menos que tengan una razón para regresar a un punto anterior. Los diseñadores pueden eliminar ese deseo de dar marcha atrás proporcionando a los usuarios mecanismos de control en la pantalla actual. Como mínimo, una función de “Deshacer” que permita a la aplicación volver al punto inicial por sí misma sin los feos mensajes de error del navegador. (…)

Diseñar para la flexibilidad significa proporcionar a los usuarios un modo fácil de revertir lo que han hecho, tanto si implica cambiar los parámetros de búsqueda de un producto como cerrar una ventana que han abierto.

5. Diseño a la Defensiva

Imagina que preguntas a un dependiente por un par de pantalones de cuero de tu talla y te contesta: «Lo siento, pero el item que especificó no está disponible. Por favor, pruebe de nuevo, seleccionando otro tamaño o color.». Después de dos o tres intentos, probablemente te eches atrás y dejes los pantalones.

Sí, los sitios web lo hacen todo el tiempo. Nos indican que hemos olvidado incluir un número en nuestra contraseña o que hemos añadido un espacio extra en el número de nuestra tarjeta de crédito. Nos informan de que hemos dejado en blanco un campo obligatorio o creado una configuración que no puede ser llevada a cabo debido a requisitos que entran en conflicto. (…)

Defenderse contra las interrupciones es otra dimensión del problema. Las interrupciones ocurren todo el tiempo. Los usuarios están trabajando a través de una aplicación cuando, de repente, necesitan contestar una llamada de teléfono o buscar algo en otra página. Cuando regresan, han olvidado dónde estaban o han perdido su lugar en la aplicación. Ahora se enfrentan a tener que reiniciar el proceso de nuevo.

En Google Docs, se ofrece frecuentemente la posibilidad de “autoguardar”. Mientras los usuarios trabajan en sus documentos, el sistema registra cualquier cambio. Si el usuario se aparta de su equipo y regresa un tiempo después, el documento está tal y como lo dejó, incluso si cerró la sesión del navegador.

Diseñar “a la defensiva” consiste en considerar los puntos de control en una aplicación y construir defensas creativas para proteger al usuario.

6. Diseñar para Frecuencias Apropiadas

(…) Es posible que una persona sólo utilice ciertas aplicaciones, como la autenticación segura de una aplicación, sólo una vez cada varios años. Esa misma persona puede usar otras aplicaciones muchas veces al día.(…)

Cuando los usuarios interactúan con un diseño de forma repetida, comienzan a hacer las cosas de memoria, como ocurre con la terminología, la ubicación de las funcionalidades, y las secuencias de comandos. Los usuarios frecuentes se frustran cuando esas cosas son difíciles de memorizar.

Sin embargo, los usuarios ocasionales no pueden confiar en la memoria y necesitan pistas visuales. Los equipos de diseño necesitan preguntarse acerca de la frecuencia de la funcionalidad y diseñar apropiadamente. Cuando se mezclan audiencias para cierta funcionalidad -en la que algunas características son muy utilizadas por algunos usuarios pero poco usadas por otros- los diseñadores necesitan poner especial cuidado en asegurarse de que cada audiencia obtiene lo que necesita del diseño. Los usuarios frecuentes quieren una infraestructura eficiente y fácil de memorizar. Los usuarios ocasionales quieren pistas visuales que les ayuden a comprender lo próximo que hagan.

7. Diseño para el Minimalismo

Sólo porque puedas diseñar un widget no significa que debas diseñarlo. El drag and drop, por ejemplo, toma tiempo, energía y cierta coordinación. (…) No hay mejor llamada a los diseños minimalistas que la reciente invasión de carruseles que infestan muchos sitios web. (…) Jugar con interesantes efectos cinemáticos es divertido por un rato. Sin embargo, la novedad pronto desaparece y la dificultad de interacción con el widget se hace evidente cuando los usuarios seleccionan accidentalmente un item incorrecto o no obtienen información suficiente sobre lo que están viendo.

Los efectos interesantes pueden ayudar en el diseño de aplicaciones. En Delicious, el popular servicio de marcadores, los usuarios asignan etiquetas a las páginas para hacer más fácil encontrarlas en el futuro. Los diseñadores de Delicious han añadido al sistema una funcionalidad que sugiere etiquetas potenciales, basadas en registros anteriores y en las elecciones de otros usuarios, para ayudar a fortalecer el uso de una etiqueta. Esta sofisticada implementación proporciona al usuario un valor añadido. Sí, es una aproximación minimalista que da poder al usuario sin sobrepasar las interacciones.

Traducción y resumen del artículo | 7 Critical Considerations for Designing Effective Applications y su continuación, de User Interface Engineering

1 Comentario October 2nd, 2008 Envía esta entrada a menéame Envía esta entrada a del.ici.ous

25 aplicaciones básicas

En el blog de Carlos Leopoldo nos hacen una buenísima recopilación delas 25 aplicaciones que todos deberiamos tener , estas son solo algunas :

  • TrueCrypt, con esta aplicación puedes encriptar tu memoria USB para proteger tu información.
  • ToDoList, esta es una herramienta para organizar tus tareasm listas de pendientes, etc.
  • Portable Firefox, no dejes información personal en computadoras públicas o compartidas que uses, además puedes ir con tu lista de Marcadores y extensiones a todos lados.
  • Pidgin Portable, excelente programa de mensajería instantanea todo en uno, soporta las redes de AIM, ICQ, MSN Messenger, Yahoo, G-Chat, etc.

Añadir Comentario September 16th, 2008 Envía esta entrada a menéame Envía esta entrada a del.ici.ous

¿ No te gusta el Flash ?

Si no te gusta el flash, seguramente es por que todavia no has visitados sitios como estos :

Hemos seleccionado unas poquitas pero en http://www.thefwa.com tienes muchas mas.

1 Comentario September 15th, 2008 Envía esta entrada a menéame Envía esta entrada a del.ici.ous

Jugando con tablas

La maquetación por tablas ya no es tan popular como lo era hace unos años, algo que ha llevado a más de uno (me incluyo en algunos momentos) a mandar las tablas al ostracismo apelando a la palabra mágica que últimamente rodea a todo lo relacionado con el diseño web: La Accesibilidad.

Pero quizá, en ese afán de desentendernos de las tablas, llegamos a extremos en los que tratamos de maquetar una tabla sin tablas.

Pues para todos aquellos que les ha pasado algo similar, vamos a repasar como hacer una tabla accesible.

Vamos a analizar las etiquetas que componen la estructura de una tabla y ver qué es cada uno de sus componentes:

  • La etiqueta <table>: esta etiqueta define dónde comienza la tabla. Se le debe de añadir el atributo summary="" en el que se describa de forma breve un resumen de la tabla. Además, lo común es darle un atributo id para poder darle estilo a través de CSS como un elemento individual.
  • Etiqueta <caption>: en esta etiqueta se puede poner el título de la tabla.
  • La etiqueta <thead>: etiqueta que define el comienzo de la cabecera de la tabla. Dentro de esta etiqueta se definirá la fila con <tr> como se hace en las tablas habitualmente, pero las celdas se definen como <th> sustituyendo al ya conocido <td>.
  • La anteriormente mencionada etiqueta <th>: esta etiqueta define las celdas que componen la cabecera de nuestra tabla, y como tal, el navegador les dará su peso específico “pintando” el contenido en negrita y centrándolo en la celda. Se debe de acompañar del atributo scope
  • Etiqueta <tbody>: dentro de esta etiqueta estará el cuerpo de nuestra tabla. Se definen las filas y las celdas con las sobradamente conocidas etiquetas <tr> y <td>.
  • Atributo scope="": este atributo se utiliza para vincular la información contenida en las diferentes celdas de una tabla. Se utiliza únicamente con las etiquetas <th> y <td>, y puede tomar un solo de sus valores.
    Supone una alternativa simple al atributo headers.
    ¿Esto a efectos prácticos en qué se traduce?, en que para definir inicios de columnas e inicios de fila, se debe de añadir el atributo scope="" para hacer la tabla accesible a los lectores de pantalla.

    Los valores que puede tomar son:

    1. row: la celda se refiere al inicio de una fila.
    2. col: la celda se refiere al inicio de una columna.
    3. rowgroup: la celda se refiere al inicio de un conjunto de filas.
    4. colgroup: la celda se refiere al inicio de un conjunto de columnas.

Como ejemplo de todas estas etiquetas, añado el siguiente código de una tabla:

<table summary="Tabla de ejemplo" id="tabla" >
	<caption>Título de la tabla</caption>
	<thead>
	   <tr id="cabecera" >
		<th scope="col">Título de columna 1</th>
		<th scope="col">Título de columna 2</th>
		<th scope="col">Título de columna 3</th>
	   </tr>
	</thead>
	<tbody>
	   <tr>
		<td scope="row">1ª celda de fila 1</td>
		<td>2ª celda de fila 1</td>
		<td>3ª celda de fila 1</td>
	    </tr>
	    <tr>
		<td scope="row">1ª celda de fila 2</td>
		<td>2ª celda de fila 2</td>
		<td>3ª celda de fila 2</td>
	     </tr>
	     <tr>
		<td scope="row">1ª celda de fila 3</td>
		<td>2ª celda de fila 3</td>
		<td>3ª celda de fila 3</td>
	     </tr>
	     <tr>
		<td scope="row">1ª celda de fila 4</td>
		<td>2ª celda de fila 4</td>
		<td>3ª celda de fila 4</td>
	     </tr>
	</tbody>
</table>

Este código pintaría una tabla como la siguiente:

Título de la tabla
Título de columna 1 Título de columna 2 Título de columna 3
1ª celda de fila 1 2ª celda de fila 1 3ª celda de fila 1
1ª celda de fila 2 2ª celda de fila 2 3ª celda de fila 2
1ª celda de fila 3 2ª celda de fila 3 3ª celda de fila 3
1ª celda de fila 4 2ª celda de fila 4 3ª celda de fila 4

A modo de "regalito", un último consejo para que las celdas de las tablas queden contiguas a través de CSS.

Utilizar el atributo border-collapse:collapse; en la id de la tabla para que las celdas se unan.

Un ejemplo:

con border-collapse:collapse
a b c
d e f
sin border-collapse:collapse
a b c
d e f

1 Comentario September 4th, 2008 Envía esta entrada a menéame Envía esta entrada a del.ici.ous

5 webs útiles para diseñadores: septiembre 2008

Como cada mes, os presentamos cinco excelentes utilidades y aplicaciones web gratuitas que no debéis perderos si os dedicáis a esto del diseño web. Ya se sabe que los recursos de un diseñador son a veces su mejor arma…

Generador Lorem Ipsum

  1. Lorem Ipsum.
    El pasaje conocido como Lorem Ipsum, texto de relleno estándar para bocetos y prototipos, no siempre es fácil de encontrar, cortar o ajustar al tamaño que necesitamos. En esta web puedes generar aleatoriamente un fragmento, especificando número de párrafos, palabras o incluso bytes.

Color Palette Generator

  1. Color Palette Generator.
    Simplemente introduce una imagen (indicando su URL o cargándola) y obtendrás una paleta de colores en código hexadecimal.

RoundedCornr

  1. RoundedCornr.
    ¿Eres un amante de los bordes redondeados? Aquí encontrarás una sencilla aplicación online que te generará las imágenes y el código (html y css) para integrarlos.

FontStruct

  1. FontStruct.
    Crea, comparte y descarga tipos de fuente online. Todas las funcionalidades son completamente gratuitas, aunque algunas requieren registro.

Mon.itor.us

  1. Mon.itor.us.
    Monitorización tanto interna (CPU, memoria, Intranet) como externa (sitios web), además de seguimiento del tráfico de visitas.

1 Comentario September 2nd, 2008 Envía esta entrada a menéame Envía esta entrada a del.ici.ous

Selectores CSS avanzados

Ahora que IE 6 parece que está empezando a desaparecer de nuestras vidas (casi la mitad de los usuarios de IE se han pasado al 7) y por tanto de nuestras pesadillas, sería bueno recordar algunos de los selectores que por su culpa nos hemos podido utilizar de forma normal.

Todos tenemos en mente el selector universal (* {…}), el selector de tipo o etiqueta (p {…}), el selector descendente (p span {…}), el selector de clase (.clase {…}) y el selector de id (#id {…}). Pero, ¿alguien recuerda el selector de hijos, el selector de adyacentes o el selector de atributos?

Estos selectores (entre otros muchos) han sido los grandes damnificados del aplastante dominio tiránico que ha ejercido IE 6 a lo largo de los años. Este tipo de selectores no funcionan con este “navegador” por lo que no se ha podido hacer uso de ellos abogando por el “bien común”.

Pasemos a ver cómo funcionan algunos de estos selectores:

Selector de hijos:

Se trata de un selector similar al selector descendente, pero muy diferente en su funcionamiento. Se utiliza para seleccionar un elemento que es hijo directo de otro elemento y se indica mediante el “signo de mayor que” (>). Por ejemplo:

p > span { color: blue; }
 
<p><span>Texto1</span></p>
	
<p><a href="#"><span>Texto2</span></a></p>

En el ejemplo anterior, el selector p > span se interpreta como "cualquier elemento <span> que sea hijo directo de un elemento <p>", por lo que el primer elemento <span> cumple la condición del selector. Sin embargo, el segundo elemento <span> no la cumple porque es descendiente pero no es hijo directo de un elemento <p>.

Selector adyacente:

El selector adyacente utiliza el signo + y su sintaxis es:

elemento1 + elemento2 { ... }

La explicación del comportamiento de este selector no es sencilla, ya que selecciona todos los elementos de tipo elemento2 que cumplan las dos siguientes condiciones:

  • elemento1 y elemento2 deben ser hermanos, por lo que su elemento padre debe ser el mismo.
  • elemento2 debe aparecer inmediatamente después de elemento1 en el código HTML de la página.

En el siguiente ejemplo:

h1 + h2 { color: red }
 
<body>
<h1>Titulo1</h1>
 
	
<h2>Subtítulo</h2>
...
 
<h2>Otro subtítulo</h2>
...
</body>

Los estilos del selector h1 + h2 se aplican al primer elemento <h2> de la página, pero no al segundo <h2>, ya que:

  • El elemento padre del primer <h2> es <body>, el mismo padre que los dos elementos <h2>.
  • El primer elemento <h2> aparece en el código HTML justo después del elemento <h1>, por lo que se cumple la segunda condición.
  • El segundo elemento <h2> no aparece justo después del elemento <h1>, por lo que no se cumple la segunda condición y el selector h1 + h2 no se aplica en el segundo elemento <h2>.

Selector de atributos:

El último tipo de selectores avanzados lo forman los selectores de atributos, que permiten seleccionar elementos HTML en función de sus atributos y/o valores de esos atributos.

Los cuatro tipos de selectores de atributos son:

  • [nombre_atributo], selecciona los elementos que tienen establecido el atributo llamado nombre_atributo, independientemente de su valor.
  • [nombre_atributo=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo con un valor igual a valor.
  • [nombre_atributo~=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo y al menos uno de los valores del atributo es valor.
  • [nombre_atributo|=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo y cuyo valor es una serie de palabras separadas con guiones, pero que comienza con valor. Este tipo de selector sólo es útil para los atributos de tipo lang que indican el idioma del contenido del elemento.

A continuación se muestran algunos ejemplos de estos tipos de selectores:

/* Se muestran de color azul todos los enlaces que tengan
un atributo "class", independientemente de su valor */
	
a[class] { color: blue; }
	
/* Se muestran de color azul todos los enlaces que tengan
un atributo "class" con el valor "externo" */
	
a[class="externo"] { color: blue; }
	
/* Se muestran de color azul todos los enlaces que apunten
al sitio "http://www.ejemplo.com" */
	
a[href="http://www.ejemplo.com"] { color: blue; }
	
/* Se muestran de color azul todos los enlaces que tengan
un atributo "class" en el que al menos uno de sus valores
sea "externo" */
	
a[class~="externo"] { color: blue; }
	
/* Selecciona todos los elementos de la página cuyo
atributo "lang" sea igual a "en", es decir,
 todos los elementos en inglés */
	
*[lang=en] { ... }
	
/* Selecciona todos los elementos de la página cuyo
atributo "lang" empiece por "es", es decir,
 "es", "es-ES", "es-AR", etc. */
	
*[lang|="es"] { color : red }

Estos son algunos de los “olvidados” que pueden volver con más fuerza a medida que el “demonio” (cambiese por IE 6) desaparezca de nuestras vidas.

Por último, una aplicación que te dice qué selectores son válidos para el navegador que usas en ese momento:
Test de selectores CSS en red

1 Comentario August 28th, 2008 Envía esta entrada a menéame Envía esta entrada a del.ici.ous

Concurso de diseño de <hr>

Si eres diseñador o te gusta el diseño, puedes participar hasta el 1 de septiembre en el concurso de estilar líneas horizontales que ha propuesto la revista Smashing Magazine bajo el título The <hr> contest (El concurso de <hr>).

Requisitos del diseño a enviar: debe ser creativo y original, creado expresamente para el concurso o al menos no haber sido usado con anterioridad en ningún diseño, ser reconocible como elemento divisor, estar en formato PNG, JPG o GIF, y a ser posible, enviar el documento matriz (es decir, el PSD, PNG, etc).

El premio es esta tableta gráfica valorada en unos 430$, y el honor de aparecer en este prestigioso blog de diseño.

Una línea enviada al concurso

Añadir Comentario August 26th, 2008 Envía esta entrada a menéame Envía esta entrada a del.ici.ous

Especificidad CSS

La Real Academia Española define la especificidad como la cualidad y condición de ser específico, o lo que es lo mismo: concreto, determinado. En los últimos años, los expertos en CSS se han apropiado de este término para denominar la cualidad que hace que un estilo prime sobre otro cuando ambos deberían afectar a un mismo elemento.

El principio en el que se basa es simple: el elemento más específico gana. Parece claro que una clase definida específicamente para un elemento html (como p .intro { }) prima sobre la definición general de ese elemento en la hoja de estilos (que sería p {}). Pero, ¿y dos etiquetas html frente a un id? (como por ejemplo div p {} y #cabecera {}), ¿por qué este elemento no sale como debería?. Esa es la clase de preguntas que responde la especificidad.

¿Cómo se calcula? Asignando un valor a cada tipo de elemento:

  • Un selector HTML tiene una especificidad de 1.
  • Dos selectores HTML tienen una especificidad de 2, es decir que se aplica siempre el selector con más elementos.
  • Un selector de clase tiene una especificidad de 10.
  • Dos selectores HTML con un selector de clase tienen una especificidad de 10 + 1 + 1.
  • Un selector id tiene una especificidad de 100.

Una vez asignados estos valores, éstos se suman para calcular el total (véanse ejemplos en htmldog y csstricks ) o se comparan por separado (véase un ejemplo de esto último en Smashing Magazine).

Por último, os recomendamos esta simpáticachuleta de especificidad CSS ambientada en Star Wars.

Añadir Comentario August 21st, 2008 Envía esta entrada a menéame Envía esta entrada a del.ici.ous

Cómo dejar de ser un diseñador vago

Al trabajar con una amplia variedad de proyectos, he aprendido una cosa: los diseñadores son vagos (a veces incluso yo). Sin embargo, la mayoría querríamos a menudo despedirnos rápidamente de un proyecto y seguir adelante con el siguiente. Aunque podrían escribirse muchas anotaciones sobre esto, ofrezco aquí algunas sugerencias para garantizar que las cosas sean un poco más fáciles al final:

  • Nombra tus carpetas y capas
    ¿Qué diablos significan “Capa 234″ y “Bloque derecho Copia 23″? ¿Alguna vez has intentado trabajar con los archivos de otra persona y has encontrado que una capa tenía cientos de capas en su interior?
  • Asegúrate de que cubres la mayoría de los escenarios de uso
    No hay nada peor para los desarrolladores que tener que adivinar cómo algo tiene que interactuar. Diseña en primer lugar para el peor caso de uso posible y sólo entonces dedícate al mejor escenario de uso (¡en ese siempre eres bueno!)
  • Un archivo para gobernarlos a todos
    Si utilizas un solo archivo de Photoshop y haces todo el trabajo ahí, te será más fácil editarlo y evitarás la duplicación de trabajo. Las capas han sido inventadas por una razón ¡úsalas!
  • No utilices imágenes perfectas
    ¿Estás usando imágenes geniales para ocultar las carencias de tu diseño? Considera que tu trabajo está bien hecho sólo cuando puedas vender tu impresionante diseño al cliente sin ningún tipo de imagen en él.

Ninguna de estas sugerencias requiere un gran esfuerzo, ¿verdad? Si las conviertes en hábitos simplificarás el trabajo y harás amigos después del plazo de entrega del proyecto ¡El mundo se convierte en un lugar mejor!

¿Alguna sugerencia para estos diseñadores vagos?

Traducción libre del artículo «How To Stop Being A Lazy Designer» de la revista alemana Smashing Magazine.

3 Comentarios August 12th, 2008 Envía esta entrada a menéame Envía esta entrada a del.ici.ous

Previous Posts

  Sabías que...
 
Sabías que...

... ya somos más de 1000 millones de internautas.

Hace tan solo 3 años se estimaban en poco más de 600 millones el número de internautas, lo que supone una tasa de incremento anual del 18%.

¿Aún sigue pensando que su empresa puede vivir de espaldas a Internet?

 
 
2mdc.com diseño web     C/ Matias Turrión, 24, 1º, Madrid 28043      Tel: 91 759 00 24       Fax 91 759 15 18     Diseño web