viernes, 27 de marzo de 2009

Plantillas para empaques descargables y gratis!

0

En Your Packing Source puedes descargar muchas plantillas descargables de empaques listos para usarse. Puedes descargarlos en diferentes formatos (PDF, EPS y 3dPDF) y agregarles gráficos o lo que necesites.

Migrando a Wordpress.

0

Próximamente My Design Tools se mudará a Wordpress. De momento puedes checar tambien el blog sustituto con las mismas entradas hasta hoy: http://mydesigntools.wordpress.com/
Espero que sea para mejorar...

jueves, 26 de marzo de 2009

40 Excelentes logos credos con Helvética.

0

Aquí algunos ejemplos...








Les dejo el enlace para ver la lista completa.

Los Logos de batman.

0

Excelente recopilación de la mutación que ha sufrido el diseño de los logotipos que ha portado Batman en el pecho a través de los años.

miércoles, 25 de marzo de 2009

Textos que funcionan: como redactar para la Web

0


Por Marta Sylvia del Río Guerra.


Una creencia errónea es que, al crear el contenido de un sitio web, bastará con copiar la información que se tiene en folletos y documentos institucionales. Esto se hace cuando se parte de dos premisas equivocadas: (a) el texto de un material impreso se puede presentar y leer de la misma forma en una pantalla y (b) la gente lee lo que es importante para la organización dueña del sitio.

Para el primer punto, ergonómicamente es mucho más cansado leer pixels en una pantalla que texto en un papel. (CBASSE, 1983) Por ello, cuando el usuario está leyendo un artículo largo que le resulta interesante, muchas veces lo imprimirá para continuar leyendo de un papel. Para la segunda premisa, la gente no lee lo que es importante para la organización. Piense en los últimos tres sitios que haya visitado. ¿Leyó toda la información de la página? Por supuesto que no. Cada usuario lee únicamente lo que es importante para él. Por ello es tan relevante conocer qué buscan los usuarios que visitan el sitio.


Diseño de Información

Para tener un sitio amigable y funcional, debemos diseñar la información del mismo. Esto es el mismo principio que rige al diseño gráfico en general; debe de tenerse en mente el objetivo antes de comenzar a diseñar, o en este caso, redactar. De acuerdo con Nathan Shedroff (2008), el diseño de información “es un campo y un enfoque que intenta diseñar comunicaciones claras y entendibles mediante el cuidado de la estructura, el contexto y la presentación de los datos y la información”.


Deben cuidarse 4 aspectos:

• ¿Qué? El tema central o propósito de la página debe ser lo más claro posible.


• ¿Quién? Reclamar la propiedad de una página es básico.


• ¿Dónde? Nunca olvidar la naturaleza internacional del medio.


• ¿Cuándo? Indicar la fecha de publicación, las páginas envejecen.


Un ejemplo muy sencillo sería la publicación de una página que hable sobre índices de deforestación de bosques de coníferas. Lo primero que debe quedar claro es por qué se publica esta información. ¿Está diseñado para centros de investigación o para concienciar a niños de escuelas primarias sobre la importancia del tema? El lenguaje empleado y los resultados presentados variarán mucho en base a mi audiencia. En segundo lugar, ¿quién publica esta información? No tendrá la misma credibilidad si lo publica la SEMARNAT, Green Peace o una asociación regional de madereros. En tercer lugar debe especificar dónde se genera esta información. ¿Se está hablando de los bosques de Querétaro, de México o del mundo? Por último, saber de cuándo son estas cifras. Si son de hace 2 años, ya cambiaron.


Simplificar los textos

El lenguaje debe simplificarse lo más posible, eliminando adjetivos, juicios de valor, y ambigüedades. Hay que dar un tono positivo al mensaje. Se recomienda dar información completa, en forma amigable y sin tecnicismos. Esto último es especialmente importante para los mensajes de error.




Simplificar las ligas

Cuando agregamos ligas, debe especificarse qué contienen para que el usuario decida si quiere accederla o no. Conviene incluir referencias a otras páginas del sitio, para facilitar la navegación del usuario. Cuando se trate de descargar un documento, conviene especificar tamaño y formato.




Redacción de pirámide invertida

Cuando sea posible, se recomienda utilizar la técnica de la pirámide invertida, escribiendo la idea principal y luego sustentando y agregando detalles. De esta forma, si el usuario no termina de leer, habrá captado la idea principal. No es el mejor estilo para un libro o una historia, pero enfoca la atención a la información más relevante.

Blanca Nieves se casó con su príncipe azul tras escapar de numerosos peligros, incluyendo un cazador asesino y una manzana envenenada. (Woodtke, 2002, p.16) Busque más información sobre el príncipe, los 7 enanos, la madrastra, la manzana envenenada y el espejo mágico.


Redactar para buscadores

Otro punto importante de un sitio web es redactar para que los buscadores puedan encontrar fácilmente mi contenido. Se les puede indicar qué información existe y cada cuando tiempo se actualiza. Entre los expertos de diseño de sitios web, se conoce como mejorar la buscabilidad (findability). Es importante recordar que los textos embebidos en imágenes no podrán ser localizados por los buscadores.



Bibliografía

Jeney, C. (2006) Writing for the Web: A Practical Guide (1a ed.) USA: Prentice Hall

Price, J. Price, L. (2002) Hot Text. USA: New Riders

Shedroff, N. Diller, S. Rhea D. (2008) Making Meaning: How Successful Businesses Deliver Meaningful Customer Experiences (1a ed). USA: New Riders Press

Woodtke, Christina (2002). Information architecture. USA: New Riders Press


Referencias Web

CBASSE Commission on Behavioral and Social Sciences and Education (1983). Video Displays, Work, and Vision.
Disponible en: http://www.nap.edu/openbook.php?isbn=0309033888&page=R9

martes, 24 de marzo de 2009

Arte Vs. Diseño

2

El arte y el diseño. Gran tema, ¿no?

Hoy, en una reunión, hablábamos sobre si el diseño debería mezclarse con el arte (específicamente en un simposium, con talleres, conferencias y expos) o habría que separar ambas temáticas. Yo creo que, a pesar de ser dos cosas diferentes, no son opuestas, ni se contraponen siempre. El arte tiene mucho de diseño y el diseño tiene algo de arte, sobre todo en cuestión de aprendizaje y aplicación de técnicas y habilidades.

Existen sus diferencias muy marcadas.

El arte se hace, generalmente, claro, para satisfacer principalmente un impulso creativo o sentimental del artista, donde el principal objetivo es generar una obra que tenga un significado casi imperceptible para los demás, debido a que solamente el autor sabe lo que tenía en la mente en el momento de la concepción. Claro que también hay excelentes obras realizadas bajo el propósito de difundir un hecho, pero el artista trata, en la medida de sus posibilidades, de incluir de algún modo ese toque que distinga y caracterice a su obra.

Por otro lado, el diseño se genera en base a un fin determinado, a ser exhibido y apreciado, a comunicar, a transmitir un mensaje directo y fácil de interpretar (claro, con sus muy creativas excepciones) y a vender los resultados de esta difusión. El diseño parte de una investigación y un objetivo, donde, lo que va en medio de esta obtención de información y el cumplimiento de la meta, es encaminado por la creatividad y la técnica.

Aún con estas diferencias tan marcadas, donde uno es objetivo y el otro casi espiritual, tienen muchas cosas en común. Ambas, como en la mayoría de las disciplinas, requieren de un aprendizaje técnico y conocimientos teóricos. Usualmente los interesados en ambos temas suelen tener ciertos talentos y habilidades, aunque a veces un tanto escondidos o reprimidos. 

No entiendo porqué, pero la gran mayoría de los diseñadores y artistas tendemos a ser un tanto ...¿cómo decirlo?... extravagantes (unos mas y otros menos, claro. Hay niveles!), pero es muy característico. Inclusive ya hasta normal socialmente (Me ha tocado ver casos de personas que creen que "X" no es muy buen diseñador porque no tiene el cabello pintado de rojo, o no trae pantalones rotos o deslavados, o no anda en patineta, o se baña todos los días, o no usa una mac).

En fin, este tema da para mucho más y me encantaría ver comentarios de lo que opinan sobre el arte y el diseño.

Finalmente les dejo esto de Jens Meiert:

Arte
El arte oculta. El arte tiene un significado y lo esconde a propósito. El arte entrega un mensaje y lo esconde a propósito. Es un arte el crear arte. El arte es inutilizable por definición.

Diseño
El diseño revela. El diseño revela el significado, un mensaje, una función. El mal diseño hace lo contrario: lo obscurece y lo oculta.

¿quieres saber que tipografía es?...WhatTheFont!

0


En WhatTheFont! pudes identificar que fuente tipográfica se está usando en un cartel, web, revista, etc.
Sólo sube una imagen de donde quieres que se reconozca esa fuente, haz algunos ajustes sencillos y listo!

Diseño y diseñadores: Que debe de dominar el diseñador del futuro?

0

Excelente artículo en el blog Diseño y Diseñadores publicado por Jesús Gaytan sobre lo que hay que tener para ser un diseñador "completo".

Lo pueden leer en el enlace...

Diseño y diseñadores: Que debe de dominar el diseñador del futuro?

lunes, 23 de marzo de 2009

Proceso de diseño usable

0


Este es el proceso que hay que seguir para lograr un diseño con un alto nivel de usabilidad, según el U.S. Department of Health and Human Services: Usability.
En esta imagen se puede observar el proceso, pero aquí pueden acceder a cada una de las partes del mismo y observar detalladamente en que consisten.

domingo, 22 de marzo de 2009

Historia de las GUI (grapthical user interfaces) 1981-2009

0

La interfaz gráfica del usuario (GUI por sus siglas en inglés) es un conjunto de objetos gráficos mediante los cuales se representan información y acciones disponibles en un sistema. Básicamente, y en términos mas sencillos, es lo que todos conocemos como un “Desktop” o escritorio. Probablemente todos damos por sentado que la GUI siempre ha existido en el mundo de la computación, y puede que muchas personas no pueden concebir el uso de un ordenador que no utilice esta interfaz. Sin embargo por allá a inicios de los 70’s, no existía tal cosa como una interfaz gráfica para ningún tipo de sistema.

Los avances a los que hemos llegado hoy en día con sistemas como Mac OS X Leopard o KDE son realmente saltos astronómicos en materia de eficiencia, usabilidad y por supuesto, uno de nuestros temas predilectos, estética.

En este post, haremos una adaptación del articulo de WebDesigner Depot al castellano, revisando la evolución en el diseño de las GUI, para saber como pudimos pasar de esto:

1

Fuente: toastytech.com

A esto:

3218848917_09762e7c71_bFuente: Flickr.

La primera imagen de este Post, es la primera GUI desarrollada en la historia. Sus creadores fueron los estudiosos chicos del Centro de investigación Xerox en Palo Alto (PARC) en los años 70. La primera PC en utilizar esta interfaz fue la famosa Xerox Alto, desarrollada en 1973. Sin embargo, este fue un producto dirigido al ámbito investigativo, por tanto nunca fue lanzado al mercado.

1981-1985

Xerox 8010 Star (1981)

El primer sistema descrito como una computadora de escritorio totalmente integrada, incluyendo aplicaciones y GUI. También fue conocida como la “Xerox Star”, después renombrada como “Viewpoint”, y después renombrada una vez mas como “GlobalView”.

xerox-8010-star

Fuente: toastytech.com

Apple Lisa Office System 1 (1983)

También conocido como Lisa OS, que en este caso no es abreviatura de “Operative System” sino de “Office System”. Desarrollado por Apple con la intención de ser una estación de procesamiento de documentos.

Sin embargo este sistema no duró lo suficiente, ya que el sistema operativo de Apple era mas barato. La versión se desarrolló hasta Lisa OS, Lisa OS 2 en el 83 y Lisa OS 7/7 3.1 en el 84.

apple-lisa-1

Fuente: GUIdebook

VisiCorp Visi On (1984)

Fue la primer GUI de escritorio desarrollada para la PC IBM. El sistema estaba dirigido a grandes corporaciones, por tanto su precio era casi inasequible para el usuario promedio de aquella época. El sistema hizo uso del mouse (innovador para su tiempo) y tenía incluido un sistema de instalación y ayuda, mas no poseía iconos.

visi-on3

visi-on4

Fuente: toastytech.com

Mac OS System 1.0 (1984)

El sistema 1.0 fue el primer sistema operativo GUI creado para Macintosh. Tenía varias de las características de los sistemas operativos actuales, como las ventanas y los iconos. Las ventanas podían ser movidas con el mouse, lo cual pudo haber dejado descrestado a mas de algún parroquiano de la época, al igual que el sistema de copiar y pegar carpetas moviéndolas de ventana en ventana, definitivamente como pa volverse loco.

mac-os-1

Fuente: toastytech.com

Amiga Workbench 1.0 (1985)

Oh si! bienvenidos al horroroso mundo de los desktops del año 85… a color. Amiga estuvo desde un principio mas allá de su época, comenzando por añadir el color a su GUI (solo 4, Negro,Azul,Naranja y Blanco) además de facultades multitasking, sonido estéreo (blow my ears) e iconos multiestado (seleccionados y deseleccionados). Miren ese reloj, que mono!

amiga-workbench-10

Fuente: GUIdebook

Windows 1.0x (1985)

Primogénito bastardo (con GUI) de una tiranía que subyugaría al mundo de la informática durante al menos otros 25 años ( y sigue contando) Oh, la humanidad!.

Primer sistema operativo basado en una GUI, padre gráfico de la mayor parte de cosas que manejamos hoy en día, con brillantes y rimbombante iconos a una lujosa resolución de 32×32 y gráficos a color, si señor, si yo fuese un geek del 85 estaría babeando sobre mi teclado. Oh y miren! otro reloj análogo! que mono! sin embargo este reloj fue retirado luego, comenzando así la mítica carrera de disparos en el pie de Microsoft.

windows-11

Fuente : makowski-berlin.de

GEM (1985)

GEM (Administrador de entrono gráfico) fue una GUI con estilo “Ventanero” creado por Digital Research, Inc. Inicialmente creado para sistemas operativos que trabajaran bajo los procesadores Intel 8088 y Motorola 68000 (nuestros procesadores contemporáneos tienen nombre muy decentes, a Dios gracias) para luego ser desarrollado para correr bajo DOS también.

gem_11_desktop1

Fuente:: Wikipedia

1986 - 1990

IRIX 3 (1986)

El sistema operativo de 64-bit creado para UNIX. Compatible con iconos vectorizados, característica que venia incluida en la GUI años antes de que Mac OS X fuera creado.

800px-irix_desktop

Fuente:: osnews.com

GEOS (1986)

El GEOS (sistema operativo de entrono gráfico) fue desarrollado por Berkeley Softworks. Diseñado originalmente para la Commodore 64 (mítica)incluia un procesador de palabras gráfico, llamado geoWrite y un programa de dibujo llamado geoPaint.

geos_commodore_64-1

Fuente:Wikipedia

Windows 2.0x (1987)

La segunda versión del popular sistema operativo traía como novedad un nuevo manejo de las ventanas, haciendo que el usuario pudiese modificar el tamaño y aspecto de estas:

windows-2

Fuente: guidebookgallery.org

OS/2 1.x (1988)

Fue inicialmente desarrollado en conjunto por IBM y Microsoft, sin embargo las dos compañías tuvieron una ruptura comercial en 1991, haciendo que Windows utilizara esta tecnología en su propia GUI e IBM siguiera desarrollando el OS/2. La interfaz de este sistema operativo fue bautizada como “administrador de presentación”. Este sistema solo usaba iconos monocromáticos.

os-2-1

os-2-111

Fuente: pages.prodigy.net

NeXTSTEP / OPENSTEP 1.0 (1989)

Un entonces bien alimentado y con pelo Steve Jobs salió con la idea de crear la mejor computadora de investigación para universidades especializadas en ciencias de la computación y laboratorios. Esta idea se convirtió en una StartUp llamada NeXT Computer Inc.

La primera computadora de esta compañía fue lanzada en el 88, sin embargo se avanzo bastante con el lanzamiento de NeXTSTEP 1.0 GUI en el 89, la cual evolucionó luego en OPENSTEP. Si, la verdad es un poco complicado.

Con iconos a 48×48 y mas colores disponibles, esta GUI se convirtió en el embrión de lo que serían las GUI en los años a venir, al menos hablando del apartado estético de estas.

nextstep-11

Fuente: kernelthread.com

OS/2 1.20 (1989)

Pequeñas mejoras con respecto a su anterior versión, pero en varias áreas. Ventanas mas suaves, mayor movilidad de los iconos, realmente poco digno.

os-2-12

Fuente: pages.prodigy.net

Windows 3.0 (1990)

Quien escribe este post siente nostalgia, ya que el primer sistema operativo que manejó con propiedad fue este, en una “portátil” IBM de casi 1 tonelada de peso. En esta versión, Microsoft explotó a fondo el potencial de las GUI, empezando a mejorarlas de forma significante.

El sistema operativo hacía uso de mas de 640KB de memoria y espacio en el disco duro, lo cual permitía una mayor resolución en pantalla y por supuesto mejores gráficas, como Super VGA 800×600 (Nostalgia) y 1024×768.

Microsoft contrató a la diseñadora Susan Kare para que hiciera los iconos de esta versión e ideara un diseño unificado para la interfaz.

windows-31

windows-3

Fuente:: toastytech.com

1991 - 1995

Amiga Workbench 2.04 (1991)

Muchas fueron las mejoras de esta versión de GUI. El esquema de colores fue cambiado y fue incluido el estilo 3D. El escritorio podía ser dividido de modo vertical en pantallas de distintas resoluciones y profundidad de color, lo cual hoy día se ve un poco raro. La resolución por defecto era de 640×256, sin embargo el Hardware soportaba resoluciones aun mayores.

amiga-workbench-2

Fuente:: guidebookgallery.org

Mac OS System 7 (1991)

La versión 7.0 de MAC OS fue la primera de su tipo en ser compatible con el uso de los colores. Sombras de gris, azul y amarillo fueron añadidas a los iconos.

macos-7

Fuente:: guidebookgallery.org

Windows 3.1 (1992)

Esta versión de Windows incluía fuentes TrueType, las cuales ya venían preinstaladas. Esto hizo de Windows una plataforma para publicación realmente funcional, por primera vez en su historia.

Antes, solo era posible lograr esta funcionalidad mediante el uso del Adobe Type Manager el sistema de fuentes de Adobe. Esta versión también incluía un sistema de color llamado (favor no hacer click si sufren de epilepsia o tiene graves problemas soportando el mal gusto) Hotdog Stand, el cual usaba brillantes tonos de rojo, amarillo y negro.

Este sistema fue ideado para ayudar a personas con cierto grado de ceguera de color a ver los gráficos con un poco mas de facilidad.

windows_311_workspaceFuente: Wikipedia

OS/2 2.0 (1992)

Esta fue la primera GUI que fue sujeto de aceptación internacional, así como pruebas de accesibilidad y usabilidad. Toda la GUI fue desarrollada usando diseño dirigido a los objetos. Cada archivo y folder era un objeto que podía interactuar y ser asociado con otros archivos, carpetas y aplicaciones. También tenía la funcionalidad de “Drag and Drop”.

os-2-2

Fuente: toastytech.com

Windows 95 (1995)

Con una interfaz totalmente rediseñada, se añadió el clásico botón “X” en cada ventana para cerrarla. El equipo de diseño le brindó características de estado (activado, desactivado, seleccionado, etc) a los iconos y otras gráficas. El botón “inicio” aparece por primera vez. Un gran paso a nivel gráfico, independientemente de la calidad del sistema operativo.

windows-95

Fuente: : guidebookgallery.org

OS/2 Warp 4 (1996)

Lanzado por IBM, este cambio le dio un renovado aspecto visual al área de trabajo. Los iconos fueron ubicados en el escritorio, donde archivos personalizados y carpetas también podían ser creados. Tenía un lugar donde enviar los archivos eliminados como la papelera de Windows y MAC OS, sin embargo esta no almacenaba copias para recuperar los archivos.

os-2-warp-41Fuente: : toastytech.com

Mac OS System 8 (1997)

256 iconos a color por defecto en esta versión de la GUI. Mac OS 8 fue uno de los primeros sistemas que adoptaron iconos isométricos, también llamados pseudo-3D. El tema gris platino se volvió un clásico constante en las futuras GUI.

macos-8Fuente: guidebookgallery.org

Windows 98 (1998)

Los mismos iconos de la versión 95., pero la GUI podía usar mas de 256 colores para renderización. El Explorer cambió por completo y el cansino Active Desktop aparece por primera vez.

windows-98Fuente: toastytech.com

KDE 1.0 (1998)

En un principio, el equipo desarrollador de esta GUI describe a KDE como “Un entorno de Escritorio contemporáneo para estaciones de trabajo Unix. KDE llena la necesidad de un escritorio amigable para estaciones de trabajo Unix, similar a los escritorios de MacOSX o Windows” Este sistemas es, personalizable como pocos, lo cual le ha hecho ganar bastante adeptos con conocimiento avanzado en sus siguientes versiones.

800px-kde_10Fuente: Wikipedia

BeOs 4.5 (1999)

Este sistema operativo fue desarrollado para computadoras personales. originalmente escrito en 1991 para correr en Hardware Bebox. Fue después mejorado para tomar ventaja de las nuevas tecnologías. La GUI de BeOS fue desarrollada bajo los principios de diseño claro y limpio.

800px-beos_desktopFuente: Wikipedia

GNOME 1.0 (1999)

Muy orgullosos se deben sentir los Mexicanos al saber que los padres de este genial proyecto fueron Miguel de Icaza y Federico Mena. GNOME Viene de GNU Network Object Model Environment, inicialmente desarrollado para RedHat Linux, aunque después fue desarrollada para otras distros.

gnome-1Fuente: visionfutur.com

2001 - 2005

Mac OS X (2001)

A inicios del año 2000, Apple anunciaba su nueva interfaz Aqua, y en 2001 la compañía lanzaba su nuevo sistema operativo. Con nuevos iconos de 128×128 Anti-aliasing y semi-transparentes. Mucha crítica negativa le cayó encima a esta GUI, aparentemente la gente no estaba lista para cambios tan grandes, sin embargo con el tiempo la gente se adaptó al estilo y hoy día este sigue siendo la base de todos los OS X.

mac-osx-1Fuente: guidebookgallery.org

Windows XP (2001)

Como en las anteriores actualizaciones de Microsoft, este sistema operativo fue un cambio radical en la GUI. Con la opción de cambiar de Skin a la GUI, los usuarios podían manipular a gusto el aspecto de esta. Iconos de 48×48 (vamos, es Microsoft) por defecto renderizados en millones de colores.

windows-xp1Fuente: guidebookgallery.org

KDE 3 (2002)

Desde su versión 1.0 el escritorio mejoró cantidades. Con gráficos mejorados e iconos, redefinieron la experiencia del usuario promedio de este OS.

kde-3Fuente: netbsd.org

2007 - 2009

Windows Vista (2007)

Uno de los fracasos mas certeros en la historia de Microsoft, mas sin embargo un gran avance en la GUI. Bastante animación en 3D, transparencia con Aero, y una barra lateral con Widgets. Y miren! los relojes analógicos vuelven!

windows-vistaFuente: technology.berkeley.edu

Mac OS X Leopard (2007)

Dulce para los ojos, tan bonito que dan ganas de lamerlo (WTF). Este OS de sexta generación, mejoró muchísimo la interfaz de usuario. Básicamente sigue siendo Aqua pero con barras para scroll y el clásico gris platino renovado, ahora con mas azul. La GUI tiene ahora un toque mas 3D, con un dock con iconos interactivos y animados.

mac-osx-leopardFuente: : skattertech.com

GNOME 2.24 (2008)

Los chicos de GNOME pusieron bastante esfuerzo en crear temas y arte en la versión 2.24, ya que su meta es hacer “Que tun computadora luzca bien”. Organizaron una competencia para encontrar los mejores fondos para escritorio que sus usuarios pudieran crear.

Fuente: gnome.org

KDE v4.2 (Mar 2009)

La versión 4 de este desktop trajo muchas mejoras, como manejo de ventanas suave pero animado, y siguiendo la tendencia de Microsoft incluyeron Widgets (con relojes analógicos, por supuesto). El tamaño de los iconos es ajustable, y los elementos de diseño son mas fáciles de configurar al gusto. Nuevos sonidos, temas e iconos fotorealistas. Ahora también puede correr bajo plataformas Windows y Mac OS X.

kdeFuente: Wikipedia

Visto en Isopixel.

*También pueden ver este artículo sobre la historia de las GUI en Ars Technica.