StyleMesh

El principio del principio...

2008-11-24T19:48:00.000-08:00

¿Te has preguntado donde surge el principio de la composición?

¿Dónde surge el principio de los elementos en el Diseño?

Pues la respuesta esta en el movimiento Bahaus, este movimiento Alemán que dio mucho de que hablar y tan sólo se componía de unos cuantos colores (Azul, blanco, rojo y amarillo).

Bien decía el pintor Kandinsky que todas las formas se componen de tres elementos: el círculo, el triángulo y el cuadrado; elementos que conllevan al principio de las formas.. el principio de la composición y la creación. Ya que a partir de dibujos tan sencillos se llegan a diseños tan complejos...

Te dejo con un diseño del Bauhaus para que sepas de que hablo...

Inspiración con Tipografía

2008-11-22T21:46:00.000-08:00

Realmente no deja de sorprenderme lo mucho que podemos encontrar entre los trabajos que los artistas suben a deviantArt. Esta vez, decidí hacer una búsqueda de trabajos de diseños con tipografía, para traer hasta ustedes lo más inspirador para futuros trabajos que planeen hacer, con la debida referencia al autor.

Este me llamó la atención inmediatamente. Se titula Muerte por Tipografía.

Este, aunque más sencillo, me pareció muy significativo también. Una pequeña representación de la palabra Tipografía en inglés, en forma de árbol.

Y por último, uno que me sorprendió en creatividad y manejo de elementos. No lo agregamos a la entrada por su tamaño, pero les anexamos el vínculo para que lo puedan apreciar mejor. Veanlo completo, realmente vale la pena echarle un vistazo a detalle. La vida en tipografía.

Diseños ingeniosos alrededor del mundo

2008-11-21T22:37:00.000-08:00

El diseño está en todos lados. Todos los días lo vemos y no precisamente en páginas web o en fotografías. Todos los elementos que nos rodean tienen un diseño creativo que en algún momento alguien desarrolló de cero.

Si, tengo que usar la palabra desarrollar, soy ingeniera.

En fin, como dice mi compañera Mori, en la fotografía captamos sentimientos. Yo creo que todos los diseños a nuestro alrededor nos transmiten un sentimiento, ese sentimiento que el diseñador se esforzó por expresar con su creación.

Observemos esta fotografía, capturada por un fotografo australiano

Pero, como les decía, el diseño es más que solo lo fotográfico y lo informático. Veamos este video que nos muestra un diseño aplicado a una fuente en un centro comercial japonés.

Y, en el mundo de la animación, quizá ya muchos han visto este cortometraje ideado por Jeffrey Paul en San Francisco como propuesta de matrimonio para su novia.

Y, volviendo a los temas de arte con tipografía, veamos este diseño de cartel por un diseñador indú

En resumen, creo que se dan cuenta de que no pueden decir que les falta la inspiración.

Un Poco Más De Foto...

2008-11-21T16:19:00.000-08:00

La fotografía, es el arte que se volvió reproducción y que se perdió de acuerdo a ciertos artístas; sin embargo, estoy en contra de este pensamiento ya que el artísta fotográfico debe de crear un espacio, debe de crear un contexto, y crear un campo de profundidad.. la verdad es que no cualquiera puede hacer una buena toma.

No cualquiera puede llegar a transmitir un sentimiento a través de la foto...

Te recomiendo ver las mejores fotos del 2000... fotos que no cualquiera puede llegar a capturar...

20 Ejemplos de Fotografía a la Intemperie

2008-11-21T00:59:00.001-08:00

Creo que, siendo un blog de diseño, tenemos aún que abordar un tema muy importante: la fotografía. Y no hay mejor manera de empezar que con fotografía de exteriores.

Tanto mi compañera Mori Franco como yo misma amamos la fotografía, aunque claro, ella es mucho mejor fotógrafa que yo. Quizá en noticias posteriores quiera mostrarnos algo de su trabajo.

Por mientras, yo les traigo 20 imágenes de fotografía exterior que les traerán inspiración, tanto a aquellos aficionados de la fotografía como a aquellos que piensan en explorar esta área.

La fuente, por supuesto, resulta ser deviantArt.

Photoshop para Principiantes: Part III

2008-11-20T22:23:00.000-08:00

Volvamos con los tutoriales de Adobe Photoshop (Recordándoles que se están llevando a cabo con la versión de Adobe Photoshop CS3 en inglés)

En el tutorial pasado les mencioné la opción de dar efectos especiales a nuestras capas y eso es precisamente lo que les explicaré en este tutorial.

Recordando: La ventana de efectos especiales es la que obtenemos con el botón que está en la parte inferior del panel de capas, o dando doble click sobre la capa en específico a la que queremos adicionar los efectos. De este modo, abrimos la siguiente ventana:

Recién abriendo la ventana de la imagen anterior, como podemos notar nos da las opciones de efectos por default. Aquí podemos cambiarle la opacidad del mismo modo en el que lo haríamos directamente en el panel de capas como lo vimos en el tutorial anterior. No entraremos mucho en detalle con este apartado.

Ahora procedemos a explicar los fundamentos de las demás pestañas de la ventana de efectos de capa:

Drop Shadow (Efecto de sombra): La primera pestaña de la ventana nos ofrece las siguientes opciones predeterminadas:

También podemos observar nuestro lienzo, en el cual se van viendo nuestros cambios en tiempo real. Si le movemos la opacidad, esto tiene una relación directa en qué tan fuerte será el tono del color de nuestra sombra (el cual podemos cambiarle también haciendo click en el cuadro negro que ven ahí). Podemos separarla (con la opción de distance o distancia), podemos moverla de sitio según donde queramos posicionar nuestra fuente de luz (con la opción de angle o ángulo). También podemos cambiar su tamaño y su difusión (spread y size) o agregarle ruido (Noise) y cambiarle el contorno (contour). Más o menos son las mismas funciones en todas las pestañas. Para darles un ejemplo, movimos los valores determinados de este modo:

Y obtuvimos el siguiente resultado:

Inner Shadow (sombra interior): Como podrán adivinar, es lo mismo que el apartado anterior, pero en lugar de verse fuera del elemento al que le estamos agregando el efecto, se ve dentro. Veamos un ejemplo en el que hemos modificado algunas de las características (muy similares a las de drop shadow):

A partir de ello se obtuvo este resultado:

Outer Glow (Brillo externo): Cambiando de sombra a brillo, el concepto no varía mucho. Aquí les mostramos un ejemplo con fondo negro para que puedan apreciar el efecto.

Inner Glow (Brillo interno): Igual que Drop e Inner Shadow, Inner glow es el contrario de Outer glow. Mostramos un ejemplo.

Bevel and Emboss (Efecto de relieve): Esta es la pestaña que más opciones tiene, y les recomendamos que experimenten a fondo porque les ofrece una amplia gama de posibilidades para darle dimensión a las cosas. Aquí les mostramos un ejemplo sencillo, en el cuál cambiamos el color del texto para que se viera bien el efecto:

Satin: Es una especie de sombra, pero puede adoptar muchas formas más, también ayudando a dar dimensión a los elementos en la capa. Les mostramos, de nuevo, un ejemplo sencillo con otro color diferente de negro para que lo aprecien:

Color Overlay (Sobreponer un color): Si tienen un elemento de algún color, se lo pueden cambiar por medio de este efecto. Simple, lo se, pero tienen la opción de ponerle el color en cierta opacidad para lograr un efecto entre ambos, el original y el sobrepuesto.

Gradient Overlay (Sobreponer un gradiente): En lugar de sobreponerle un color, ¿Porqué no muchos?

Pattern Overlay (Sobreponer un patrón): Color, gradiente...y una imagen repetida. El patrón también es una buena opción para darles vida a los elementos dentro del diseño.

Stroke (Delineado): Esto lo uso mucho yo en lo personal cuando hago tiras cómicas. Trazo los globos de diálogo como figuras blancas para que tapen todo trazo debajo de ellos, y luego les pongo un delineado delgado negro con esta opción ¿Qué usos podrán darle ustedes?

Les recomiendo, en esta parte, que jueguen con las opciones. No entré mucho en detalle porque la mejor manera de aprender esto es explorando. Vean como se ve todo mezclado, revuelvan cosas, quiten, pongan...aprendan.

Esta es la última parte que yo propongo del tutorial para principiantes. Si hay algo en específico que les gustaría saber, podemos hacer una continuación de los tutoriales.

Esperamos sus comentarios y sugerencias

YO SOY PERSONAL

2008-11-20T13:19:00.000-08:00

¿Yo Personal?

Esta es la frase que tendemos a escuchar en este mundo del Internet, en donde cada página nos intenta ofrecer información personalizada, y única para nosotros...
nos ofrecen "CUSTOMIZATION".

¿Qué es esto?

Simple y sencillamente, es una forma de presentarle al usuario la información de una manera que pueda ser personalizada, con la información que el usuario requiera, y con la información que sea de su interés...

Google, ya había entrado en este vicio a través de Igoogle; al igual que su competidor Yahoo; todo esto para quien este detrás de la pantalla se sienta como en casa y disfrute de sus gustos.

En esta ocasión, una Felicitación...

porque Google nos vuelve a sorprender con los temas de colores en el Gmail.

Usabilidad

2008-11-19T16:06:00.000-08:00

¿Quieres saber qué es realmente la Usabilidad?

Básicamente, es una forma de centrarse en el usuario y decir.. ¿Cómo le facilitó la vida?
¿Cómo hago que sea más sencilla la interacción hombre-máquina?

Para conocer un poco más de la usabilidad te recomiendo estos sitios:
Microsoft
Usabilidad-Accesibilidad

y por supuesto, un sitio que no debes de dejar de visitar porque se alimenta de consejos importantes del Gurú de la Usabilidad Jakob Nielsen, y por supuesto te invito a que investigues un poco de Jesse James Garret.

Nuevo Blog de un Caricaturista

2008-11-18T20:04:00.000-08:00

Hoy a través de los feeds del blog Drawn! me enteré de esta noticia que seguramente les caerá excelente a todos aquellos diseñadores especializados en las caricaturas, la ilustración de personajes, etcétera:

Giuseppe Ferrario tiene un blog.

Sus posts, con sus trabajos más recientes, pueden resultar excelentes referencias e inspiraciones para los artistas que congenian con su área de interés. Me parecieron en lo particular agradables sus diseños de personajes, les recomiendo que lo agreguen a sus favoritos.

Photoshop para Principiantes: Parte II

2008-11-17T21:04:00.000-08:00

Siguiendo con los tutoriales para diseñadores principiantes, aquí les traemos la segunda parte, que va a ahondar en el tema de las capas en Adobe Photoshop (recordándoles que las imágenes de ejemplo son de la versión CS3 pero, dado el nivel de estos tutoriales, aplican para cualquier otra versión con cambios mínimos).

Bueno, recordando:

Las capas son las que nos permiten dividir nuestro diseño en partes o elementos que, al ser modificados, no afectan a otros. El panel de capas es el que nos permite crear y administrar estos elementos, y podemos ver su imagen a la derecha.

En la misma imagen, podemos apreciar unos botones en la parte inferior. Estos botones son acciones importantes en la administración de las capas dentro del lienzo de nuestro diseño. Los más relevantes por el momento se explican a continuación:

Agregar estilo de capa - Con este botón podemos modificar los efectos o el estilo de una capa en particular (con excepción de la de fondo). Para esto, se abre la ventana de opciones de estilo. Entraremos en detalle con esta ventana en el tutorial posterior a este.

Añadir nueva carpeta - Cuando trabajamos en diseños muy complejos, acabamos teniendo miles de capas. Por esto se nos presenta la opción de agruparlas en carpetas. Solo hace falta hacer click en el botón de Añadir Nueva Carpeta y arrastrar las capas hacia esa carpeta para realizar la asociación.

Añadir nueva capa - Crea una capa nueva transparente encima de la que esté seleccionada en ese momento.

Borrar capa - Elimina la capa seleccionada.

Además de estas opciones de la parte inferior, tenemos otras opciones en la parte superior del panel. De igual modo, solo explicaré las más escenciales:

Visibilidad de la capa - Cuando el ojito esté presente (lo cual ocurre por defecto) podremos ver el contenido de la capa en cuestión. Si damos clic sobre el ojo, lo quitamos y el contenido de la capa se vuelve invisible. Esto puede ser útil para trabajar con capas en específico sin que nos estorben otras que no queramos modificar.

Nivel de Opacidad - Se los voy a explicar visualmente, ya que no pude pensar en las palabras correctas. Tenemos un diseño cuyo lienzo posee por el momento dos capas: la de fondo, rellena de un color verde, y la primera capa con un dibujo al azar. Nuestro panel de capas y nuestro lienzo se ven así:

El nivel de opacidad es, por defecto, 100%. Seleccionamos la capa donde se encuentra el dibujo y le cambiamos el nivel a 50%:

¿Notan como se empieza a ver el color verde del fondo a través del dibujo?

Asegurar pixeles transparentes - Si habilitamos esta opción en una capa, significa que no podremos modificar las áreas transparentes de dicha capa. Veamos un ejemplo:

Tenemos el mismo dibujo, esta vez sobre un fondo transparente para que sea más claro el ejemplo. Nuestro lienzo y nuestro panel de capas se ven como en la imagen anterior. Habilitamos entonces la opción de asegurar pixeles transparentes y, hecho esto, seleccionamos la herramienta de pincel (yo estoy utilizando un pincel grande para que se vea bien lo que quiero mostrarles) y pintamos un trazo arbitrario sobre la capa que acabamos de asegurar.

¿Ven como nuestro trazo no cubrió áreas transparentes?

Asegurar pixeles de imagen - Exactamente el contrario del anterior. En lugar de no poder pintar en lo transparente, si habilitamos esta opción solamente podremos pintar en las secciones transparentes.

Asegurar posición - Parecido al anterior, pero en lugar de asegurar áreas aseguramos posición de una capa. No podremos utilizar la herramienta de mover en esa capa.

Asegurar todo - No podremos modificar nada en una capa con esta opción habilitada.

Eso es todo por el momento. Esperamos sus comentarios para que nos ayuden a mejorar.

¡Felices Trazos!

Atajos de Photoshop para Agilizar tu Trabajo

2008-11-16T23:18:00.001-08:00

Este es un pequeño post para que los diseñadores más expertos no digan que esto se vuelve negligente para con ellos.

¿Trabajan muy seguido con Adobe Photoshop? Estoy segura de que ya se saben varios atajos (shortcuts) para hacer las cosas más rápido y evitarse la molestia de ir hasta el menú y buscar la opción que quieren ¿Pero cuántos se saben?

Los dejo con un par de links útiles donde pueden encontrar atajos para trabajar más ágilmente en Adobe Photoshop:

18 Atajos de Photoshop Excepcionalmente Útiles

28 Atajos Más de Photoshop Excepcionalmente Útiles

Photoshop para Principiantes: Parte I

2008-11-16T21:06:00.000-08:00

Muchos nos han pedido que pongamos a su disposición tutoriales de uso de software de diseño, específicamente de Adobe Photoshop, y en lugar de pasarles listas de tutoriales de funciones concretas o de resultados especializados, creí prudente empezar desde cero ya que recibimos visitas de muchos ingenieros que apenas quieren empezar a moverle a las cuestiones de diseño.

Antes que nada, voy a aclarar que los tutoriales serán enfocados a Adobe Photoshop CS3. De cualquier modo, las interfaces no varían mucho entre versiones de este software, lo que varía es la cantidad de funcionalidades (y me ha gustado mucho la versión CS3, aunque espero que la CS4 será mucho mejor)

Empecemos por explicar la interfaz, es decir, nuestra área de trabajo:

En resumen, las herramientas están situadas a la izquierda normalmente, y cada vez que seleccionamos una de ellas, sus opciones aparecen en la parte superior donde dice Opciones de

la Herramienta. Por ejemplo, si es la herramienta del pincel, ahí aparecen las opciones de formas y tamaños de la brocha.

En el medio es donde aparece(n) nuestro(s) lienzo(s), que es(son) el(las) área(s) donde podemos trabajar en nuestros diseños (los archivos en blanco, documentos nuevos, o imágenes a modificar)

Abajo en la esquina izquierda, como parte de la barra de herramientas, encontramos los colores activos, como muestra la imagen. Los dos botoncitos que tiene en la parte de arriba son para borrar los colores activos en ese momento y volverlos blanco y negro (el de la izquierda) y para invertir los colores activos de fondo a frente y viceversa (el de la derecha)

Estas son las principales herramientas, considerando que vamos empezando apenas en el uso de photoshop:

Mover: Se utiliza para, como su nombre lo indica, mover elementos dentro de nuestro lienzo. Esto se lleva a cabo en base a las capas, las cuáles explicaremos más adelante.

Selección cuadrada (u oval): Sirve para seleccionar áreas de nuestro dibujo o diseño (también en base a las capas de nuestro lienzo). Se selecciona siempre en base a una figura, ya sea cuadrada u ovalada. También están las opciones de selección por línea y columna.

Lazo: De igual modo es una herramienta de selección. La diferencia radica en que podemos seleccionar en base a una figura que nosotros vayamos construyendo con el lazo.

Varita Mágica: La última de nuestras herramientas de selección, hace una selección en base a un color. Es decir, si damos clic en una foto, se va a seleccionar toda el área contigua del color del sitio en el que dimos click. Podemos variar su exactitud con las opciones de la herramienta.

Recortar lienzo: Esta herramienta disminuirá el tamaño de nuestro lienzo en base al área rctangular que seleccionemos.

Pincel: Por obviedad, la principal herramienta con la que pintamos en el lienzo. También puede ser el lapiz. En ambos casos, las brochas se pueden personalizar en la parte de opciones de la herramienta.

Borrador: Se explica a sí mismo, ¿No? Solo diré que, si estamos trabajando en la capa de fondo, en lugar de borrar, pintará del color que tengamos seleccionado como color de fondo.

Bote de Pintura: Dependiendo del color de frente seleccionado, rellena el área seleccionada de ese determinado color.

Texto: Para escribir texto. Genera su propia capa y sus opciones de tipografía están en la parte superior.

Gotero: Selecciona como color de frente el color del área en el que se haya hecho un click.

Lupa o Zoom: Aumenta el zoom del lienzo para ayudarnos a trabajar en detalles muy pequeños.

En la sección de paneles es donde encontramos cosas un tanto más interesantes. Explicaré los más relevantes por el momento ya que estamos en nivel principiante:

Panel de Capas: Aquí es donde agregamos o quitamos capas en nuestro lienzo, para facilitarnos el trabajar con nuestro diseño. La capa que siempre tenemos por defecto es la de fondo o background. Las capas son muy útiles, porque así podemos trabajar en detalles sobre imágenes y si nos equivocamos, podemos borrar sin afectar lo que está en capas inferiores.

Panel de Historial: Este panel lleva un recuento de todas las acciones que hemos realizado. De este modo, por poner un ejemplo, si abrimos un nuevo lienzo y pintamos un trazo, luego le cambiamos el color, y luego agregamos un efecto, y nada nos gustó, podemos irnos a este panel y eliminar las tres acciones de golpe.

Por el momento creo que sería bueno que se pusieran a explorar las herramientas y continuaremos en posts futuros. Apreciaría también sus comentarios, pues quiero saber si hace falta explicación más a detalle o si hay cosas en específico que quisieran saber.

Como diría Bob Ross: ¡Felices Trazos!

Arte en 3D

2008-11-15T02:09:00.000-08:00

El otro día revisando los posts recientes del blog de Abduzeedo, me topé con un post en el que nos comparten unas imágenes impresionantes de retratos hechos en 3D. La verdad es que muchos de ellos se ven muy reales, mis respetos a los diseñadores que los hicieron.

Vale la pena mirarlos aunque sea para inspiración (como es mi caso, pues mis habilidades de diseño no llegan a esas escalas). A continuación les comparto algunos de los que a mi más me llamaron la atención, pero pueden verlos todos dirigiéndose al post original.

Este de la bruja es mi favorito sin lugar a dudas. El diseño me encantó: típico pero a la vez muy peculiar. Y la exageración de los rasgos le da un toque.... que te llama la atención enseguida. Me gusta mucho la luz también.

El color (la mezcla de azules y blancos) en esta imagen fue lo que más me llamó la atención

Tiene que encantarles este. Parece sacado directamente de una película antigua y se ve demasiado real.

Este parece foto... sinceramente

Hay algo en los ojos de este personaje que me intriga...

Tenía que haber una imagen de un sujeto atractivo, por supuesto. Me encanta el cabello, junto con la iluminación y el brillo de los ojos... la verdad si me engaña.

Este diseño me llamó más la atención por la paleta de colores que maneja que por los personajes en sí.

De nuevo una combinación de azules que llama mi atención, esta vez en mezcla con negro.

Y yo se que no es el más original, pero realmente me gustó esta imagen de Hulk.

Adobe CS4: Los demos a tu disposición

2008-11-14T22:20:00.000-08:00

Muchos hemos estado en ansias por la nueva suite de Adobe CS4, y ahora ya tenemos a nuestra disposición las descargas en versión demo de los programas.

Pueden dirigirse a la página de descargas de Adobe para probar los programas por 30 días. Creo que es algo por lo que cualquier diseñador siente curiosidad en estos momentos, yo misma me declaro fanática de Adobe 100%

Ilustración de Personajes

2008-11-13T12:35:00.000-08:00

Ok, creo que hemos monopolizado mucho el blog ya sea con tipografías, iconos o web. Voy a dar un giro un poco más alejado, veamos más aspectos que el diseño gráfico tiene que ofrecernos.

Y para esto voy a abordar lo que más me gusta: Ilustración de personajes.

Para esto me dispongo a darles varias fuentes. Últimamente he encontrado muchos recursos de diseño al respecto que podrían serles útiles. El principal quizá es Lineboil.

Lineboil es un blog sobre animación. ¿Y para qué diseñamos personajes si no pensamos animarlos? Yo se que hay muchos propósitos, pero ese es siempre el más popular, y creo que les será de mucha utilidad, definitivamente es contenido que no se pueden perder.

Y claro, para satisfacer sus necesidades de inspiración, les comparto unos personajes que encontré en un post de VectorTuts. En el post original pueden encontrar muchos más, les sugiero que lo vean. El diseño de esos personajes me gustó mucho por su simplicidad y originalidad.

Y siguiendo con los recursos de diseño que nos ofrece VectorTuts, les comparto las ligas a algunos tutoriales de ilustración de personajes que pueden encontrar ahí. Se van a entretener un rato con ellos.

1. Crear un Pulpo Super Feliz

2. Manteniendo el Ritmo y el Flujo de Movimiento en el Diseño de Personajes con Vectores

3. Crear un Pajarito Mascota Estilo Twitter

Más sobre Isotipos (Iconos)

2008-11-12T15:51:00.000-08:00

Volviendo al tema de iconos...(isotipos)

¿Qué es importante? ¿Cómo los diseño?

Los iconos deben de ser:

Fáciles de entender
Sencillos (sin detalles)
Universales (lo que representa para ti, debe representar para otros)...

Te comparto el sitio de PixelGirl, para que te des una vuelta por la galería de iconos disponible...

Los 10 errores que no debes cometer en tu CSS

2008-11-12T10:20:00.000-08:00

Volviendo un poco al diseño web e involucrándonos un poco en el desarrollo, quisiéramos compartirles un listado de errores frecuentes y graves que se hacen al crear hojas de estilo o CSS. Pongan atención, puesto que de ellos depende el correcto funcionamiento de su sitio web a futuro.

Siempre deben fijarse de no estar cayendo en:

Ignorar la compatibilidad con navegadores distintos - Existen muchos navegadores, no solo Internet Explorer o Firefox ¿Están seguros de que su CSS se ve igual en Safari, Google Chrome u Opera, por mencionar algunos?
No tomar en cuenta resoluciones menores - ¿Se acaban de comprar una laptop con resolución 1280x800 y quieren diseñar un sitio web que cubra toda la pantalla? Piensen primero en el público meta de su sitio web ¿Están seguros de que todos los que entren tienen una pantalla así de grande?
No considerar el uso de frameworks - ¿Porqué complicarnos la existencia y arriesgarnos de más? Existen frameworks que nos ayudan a crear CSS compatibles con multiples navegadores y guiándonos en el proceso. Por ejemplo Blueprint o BluetripCSS. Les recomiendo que usen uno.
No utilizar clases genéricas - No tiene caso estar poniendo nombres diferentes a las clases si nos va a complicar la existencia en un futuro. Piensen en cambios de diseño posteriores.
No validar el HTML - Si, el HTML afecta a nuestro CSS. Si no tenemos un HTML válido, el CSS puede no funcionar, ¿Y a qué me refiero con válido? Etiquetas que no están cerradas adecuadamente, por ejemplo.
No validar el CSS - Ya que nuestro HTML es válido, también tenemos que validar el CSS. Para ambos casos, les recomiendo los validadores de la W3C.
Usar imágenes de fondo gigantescas - El usuario se desespera si una página tarda mucho en cargarse, y esto es lo que este tipo de imágenes ocasionan. Hay que pensar en optimizar los recursos siempre.
Usar CSS para todo - No exageren. Yo se que cuando descubrimos una tecnología, nos emocionamos, pero no quieran hacer uso de todos y cada uno de los recursos de la misma. Planeen bien su efectividad primero.
Usar CSS embebido - No debemos introducir CSS en el HTML, esto nos va a crear problemas cuando queramos cambiar de diseño, lo hará mucho más tedioso. Tiene que estar todo en un archivo por separado para que no tengamos que revisar detalles página por página.
Usar demasiados archivos - De igual modo, no es recomendable tener mil archivitos .css anexados a nuestra página. Tendríamos que estar seguros de que no se sobreescriben unos a otros.

Corazón Inspirador

2008-11-11T20:39:00.000-08:00

Les tenía que mostrar este proyecto japonés que encontré en uno de los más recientes posts del blog de Reaction ¡Tienen que encontrar inspiración en esto! Es de lo más creativo que he visto recientemente.

UAWEB - Congreso de Usabilidad en Monterrey

2008-11-10T12:02:00.000-08:00

Como muchos saben, el pasado 5 de noviembre fue el Congreso UAWEB en Cintermex, finalizando oficialmente el viernes 7 de noviembre a las 2pm. Tuve la oportunidad de asistir a este congreso, junto con mi compañera Mori Franco, y no podíamos dejar de compartirles las cosas que aprendimos:

Mejores Prácticas en el Diseño de Portales Gubernamentales

Orgullosamente les comentamos que nuestro profesor de aquí de la Universidad de Monterrey, el Ingeniero Luis Carlos Aceves, acaba de publicar este libro en conjunto con la Licenciada Adriana Martínez Bejarano, quien labora también en la universidad a cargo del administrador de contenido del portal.

El congreso inició con la presentación de su libro, el cual habla sobre las consideraciones de diseño que es importante tomar al momento de diseñar un sitio web, enfocado a los servicios que el gobierno debe ofrecer a los ciudadanos por medio del mismo y tomando como referencia ejemplos de portales gubernamentales de todo el mundo.

Taller de Estándares Web: AJAX, JQuery, CSS

A modo de introducción, se habló sobre estos lenguajes y algunas de las cosas que uno es capaz de hacer empleando los mismos.

Mejorando el Acceso al Gobierno a través de un mejor uso de la Web

José Manuel Alonso, miembro de la W3C, dio esta conferencia acerca de la manera en la que el gobierno debería acercarse a los ciudadanos a través de internet para darles una mejor experiencia.

Taller de Drupal

Drupal es un CMS que hoy en día esta ganando mucha popularidad, empatándose con el ya tan conocido Joomla. Se habló de la manera en la que se puede hacer uso de esta herramienta, para facilitar la administración de sitios web.

Beyond Web 2.0

Lo más llamativo de este congreso fue la conferencia magistral del tan conocido mundialmente Jesse James Garrett, creador del término AJAX y escritor del libro The Elements of User Experience. La conferencia fue sumamente llamativa e interesante, valió la pena la asistencia. Habló sobre los nuevos trabajos y proyectos de AdaptivePath, la compañía en la que él trabaja, y sobre como actualmente construir sitios web es un proceso inverso a lo que anteriormente se pensaba.

En resumen:

La Web 2.0 cambió por completo la manera de desarrollar, ya que antes se pensaba hasta el último en la interfaz del usuario, después de haber establecido las funcionalidades en base a la información con la que se contaba. Ahora, primero hay que pensar en el usuario, en las funcionalidades que él necesita y en la información que él quiere ver.

Tenemos que tener siempre en cuenta que lo que el usuario ve es muy diferente de lo que nosotros vemos (estas gráficas me encantaron, tenemos que admirarle su cretividad a Garrett)

Nos expuso este video también que ilustra lo poco que Microsoft piensa en el usuario. Es un video que expone lo que sucedería si Mocrosoft diseñara el empaque del iPod:

También nos presentó los nuevos proyectos que tiene su empresa, AdaptivePath. Aquí se los muestro.

Después siguió un Panel de discusión sobre Web 2.0 en México, en el cuál también participó Garrett.

Y la última conferencia fue sobre mercadotecnia en Yahoo, Marketing Online, expuesta por Luis Arvizu, Director Comercial de Yahoo México.

En general, toda una experiencia. Esperamos haberles podido compartir algo útil de lo que obtuvimos con esta experiencia.

¿Photoshop Real?

2008-11-08T14:11:00.001-08:00

Esta imagen me pareció muy curiosa, así que quise compartirla con ustedes. Al parecer quisieron hacer una versión real del Adobe Photoshop, con herramientas y todo, jaja.

Lo vi en un post de Criterion el otro día que verificaba mis suscripciones RSS. Valía la pena compartirlo.

Próximamente compartiremos con ustedes también las experiencias del UAWEB. Estén pendientes.

¿ISOTIPO?

2008-11-05T18:54:00.000-08:00

¿Qué es esto del isotipo?

Suena raro y novedoso, pero la verdad es una palabra común en nuestro mundo creativo y gráfico. El isotipo, nace por allá de la Segunda Guerra Mundial, con el fin de educar a las personas (Otto Neurath, es quien lo desarrolla, en el Círculo de Viena).

El Isotipo, es en pocas palabras un pictograma, es decir, un gráfico simple que ha de representar una idea, una acción, un concepto o algo tangible; y el cual debe de ser entendido por todas las personas ya que es un lenguaje visual univeral.

¿Más claro? Ahi te van unos ejemplos del isotipo:

Señales de Tránsito, Pictogramas de las Olimpiadas, Pictogramas de los Baños...

Hoy quise abordar el tema del Isotipo, porque a pesar de que creamos que sólo se aplica en ciertas ramas del diseño, éste se aplica en todas las áreas, desde la señalética hasta la Web, ya que en la Web el Isotipo es representado por ese icono que nos facilita la vida, y que nos ahorra tiempo, que nos permite identificar y navegar rápidamente en los diversos sitios Webs.

Tutoriales para creación de layouts en Adobe Photoshop

2008-11-05T17:04:00.000-08:00

Volviendo a mi tema favorito (diseño web, por si no lo habían notado), creo que una cuestión importante es el software en el que creamos nuestro layout. A mi en lo particular me gusta utilizar Adobe Photoshop, y por eso este post que encontré en Vandelay Design me resultó de lo más llamativo.

Para no perder la pauta que hasta ahora he mantenido en la mayoría de mis posts, ahí les va otro listado. Esta vez es de tutoriales para la creación de layouts en Adobe Photoshop.

35 Tutoriales para la Creación de Layouts en Adobe Photoshop

Sitios que usan la tipografía como único elemento de diseño

2008-11-04T22:45:00.000-08:00

Siguiendo por los temas relacionados a tipografía, volvemos a lo que mi compañera Mori Franco deja muy en claro en su post sobre la creatividad en el diseño involucrando la tipografía. Como lo pudieron ver en los videos de ejemplo que les proporcionó, se puede hacer mucho.

¿Y qué tanto, exactamente?

No hay límite para lo que uno quiere y puede crear, factor apoyado por este listado de sitios que utilizan la tipografía como único elemento de diseño.

¿Interesante? Leí de ello en Design Float, pero el post original lo pueden encontrar en el blog de 3.7.

25 Sitios que usan la tipografía como único elemento de diseño

Día de Muertos con tipografía

2008-11-03T21:52:00.000-08:00

Navegando por los posts que muchos blogs hicieron con referencia a la temporada de Halloween, sin duda el que más me llamó la atención fue este post sobre tipografías relativas al día de muertos hecho por Yves Peters de The FontShop FontFeed.

Creo que la imagen habla por si sola.

Diríjanse al post original en el sitio de FontFeed para descargar esta tipografía original en versión gratuita.

Trabajos para diseñadores: Dónde encontrarlos

2008-10-31T13:12:00.000-07:00

Actualmente, como saben, todo está en línea.

Todo

Incluso pueden buscar trabajo en línea ¡No se compliquen! Estaba leyendo algunos posts nuevos de You The Designer y hablan sobre una lista de los 10 mejores lugares de la web donde pueden encontrar un trabajo en el ámbito del diseño web y en el ámbito de diseño gráfico.

Claro, habrán algunos que serán en alguna localización específica de Estados Unidos (no por eso descartables por completo), pero hay muchos que son en línea, trabajo de freelance que puedes hacer desde cualquier ubicación.

Los dejo con dos listados, dependiendo del trabajo que busquen. Espero que los encuentren de utilidad.

10 Lugares para encontrar trabajo en Diseño Web

10 Lugares para encontrar trabajo en Diseño Gráfico

Tipografía Kinética

2008-10-30T17:02:00.000-07:00

¿Qué es?
La tipografía es todo aquello con lo que escribimos, son las letras, números y símbolos en cajas altas y cajas bajas (mayúsculas y minúsculas) que se utilizan en nuestro diario existir.

La tipografía puede jugar diversas funciones: para lectura, para formar textura o como elemento visual, no importa cómo se use, lo importante es pensar en nuestro propósito. Para ello es importante pensar en qué es lo que vamos a diseñar, por qué lo vamos a diseñar y para quien lo vamos a diseñar.

Otro aspecto que debemos de considerar es la elección de nuestra tipografía con serif o sin serif, una vez que hayamos definido todos los lineamientos que obedecerá nuestro diseño podremos llevar la tipografía de lo plano al movimiento:

Elementos Clave para los Sitios Web

2008-10-29T13:26:00.000-07:00

Para todo aquel que enfoca su trabajo de diseño en el ámbito Web, creo que esto será de mucha utilidad.

¿Qué es lo que se tiene que considerar para que un sitio web esté bien hecho? Una vez pasada la etapa de planeación, se pueden considerar básicamente los siguientes aspectos, provistos por FreelanceFolder.com:

Buen diseño visual (tiene que ser visualmente agradable para que alguien quiera navegar en él)
Interfaz pensada para el usuario (siempre debe considerarse al usuario promedio de un sitio para enfocar el diseño de la interface)
Sistema de navegación principal a la vista (considerando que hay distintas resoluciones de pantalla, debería estar en los primeros 500 o 600 pixeles del diseño de tu sitio)
Repetir navegador en la parte de abajo (debe duplicarse para ahorrarle al usuario tener que volver hasta el principio para poder navegar)
Contenido significativo
Una página de 'Acerca de' con contenido sólido (hay que satisfacer la curiosidad innata de los usuarios)
Información de contacto (si ofreces un servicio, debe haber manera de contactarte para solicitarlo de manera directa)
Buscador (si manejas grandes volúmenes de información)
Opción de suscripción/registro (para mantener informados a tus usuarios de las veces que actualizas tu contenido, sobre todo en blogs por medio de RSS)
Mapa de sitio (en especial útil si no pudiste agregar un buscador)
Separar el diseño del contenido (por medio de CSS)
XHTML y CSS válidos (pueden certificarse por medio de las herramientas que provee la W3C)
Compatibilidad de navegadores (¿Funciona igual en Internet Explorer, Safari, Firefox o Google Chrome?)
Imágenes optimizadas para web (no deben pesar mucho o las páginas tardarán mucho en cargarse, guardar todas las imágenes a 72dpi)
Estadísticas, monitoreo y análisis (Recomendamos usar Google Analytics para verificar cuantos usuarios visitan tu sitio periodicamente, desde qué países, usando qué navegadores, etc)

¿Quieren una explicación más amplia? Pueden leer el artículo completo en inglés acerca de estos detalles de diseño y desarrollo.

Formas para Adobe Photoshop

2008-10-28T20:42:00.000-07:00

Dando una vuelta por Vandelay Design, me encontre con un listado muy interesante de fuentes para obtener formas para Adobe Photoshop. A mi en lo particular me gusta mucho hacer composiciones combinando formas y vectores, por lo que me pareció un hallazgo de lo más útil.

A continuación les muestro un listado de algunas de ellas:

Si quieren, pueden referirse al listado completo para ver todas las fuentes.

Portafolios Creativos

2008-10-27T19:29:00.000-07:00

Paul Rand: "Design is so simple, that's why it's so complicated"

El diseño gráfico, ya sea de forma impresa o de forma digital es complejo, porque no es sólo cuestión de estética, sino además, es cuestión de funcionalidad, es la rama del pensamiento creativo, difícil de describir y aún más difícil de elaborar.

El diseñador antes de comenzar debe crear su propio estilo metodológico, para saber qué pasos va a seguir, para saber en qué piensa concluir.

¿Cuándo comienza el diseño Web?

Algunos dicen que en 1993, año en que existían alrededor de 50 sitios web, actualmente hay miles... de los cuales algunos son portafolios muy interesantes de gente creativa, te recomiendo algunos:

Jens Jebens
Chand
Javier Rico
Graphic Design

Además, te doy estos sencillos tips:
-Piensa cómo organizar tu información... (piensa en el usuario)
-Piensa en cómo se va a ver tu site (piensa en contraste)
-Piensa en cómo van a leer (piensa en legibilidad y leibilidad)
-Piensa en quién es tu usuario (quién te va a visitar)
-Piensa en consistencia (y armonía)
-Piensa en creatividad (pero, que no se te olvide la funcionalidad)

Edición Multimedia... ¡Gratuita!

2008-10-27T11:06:00.000-07:00

De nuevo paseando entre las novedades de SixRevisions, me encontré con un listado de editores de imágenes que son gratuitos y están catalogados como los mejores que hay por el momento. Y quizá la mejor parte es que son en línea, por lo que no hay necesidad de descargarlos.

Así que, si no cuentan con Adobe Photoshop, estos programas pueden serles de gran utilidad:

En lo personal, las utilidades de SUMO Paint me parecieron de lo más entretenidas. Si lo que buscan es probar cosas nuevas, les recomiendo que jueguen un poco con ese.

Por otro lado, y sobre el mismo tema de edición multimedia, creo que les

será interesante saber que ya existe una versión de Linux con utilidades open-source para la edición de imágenes, video y audio. Se trata de Ubuntu Studio. Creo que no se podían quedar atrás, ¿Eh?

20 sitios para aprender a usar Adobe Illustrator

2008-10-25T17:26:00.000-07:00

Ya pasando a cuestiones más de diseño gráfico puro (dejando de lado el diseño orientado a web), debo compartirles algo que vi publicado recientemente en el blog de SixRevisions que me pareció muy útil para todos aquellos que están empezando.

¿Saben usar Adobe Illustrator? ¿No? SixRevisions hizo una compilación de los 20 mejores sitios en donde pueden aprender a utilizarlo. Si quieren saber cuáles son, a continuación les muestro la lista:

¡Suerte en su aprendizaje!

El Web 2.0 y el Diseño Gráfico Actual

2008-10-24T12:02:00.000-07:00

Quisiera establecer claramente esta relación, antes de cualquier otro post como el anterior. El Web 2.0 es la manera en la que se establecen relaciones en línea actualmente, reemplazando la manera en la que percibíamos la Web anteriormente (Web tradicional). El diseño web debe adaptarse también a estos cambios, pero es más sencillo comprender el tema viendo el siguiente video, obtenido de YouTube (uno de los máximos exponentes de Web 2.0 hoy en día):

Como podemos observar, Web 2.0 no es solo una manera de diseñar o de construir sitios, es una manera de generar contenido en conjunto con los usuarios. Permitirles a los usuarios que generen el contenido que quieren ver, lo cual nos lleva a pensar siempre en lo que será más sencillo para ellos. Hablaremos de esto en específico en posts por venir.

Tenemos que tener esto en mente en nuestros proyectos de desarrollo posteriores. Pregúntense lo siguiente: ¿Es mi sitio web sencillo y accesible a todo el público al que está destinado? ¿Qué grado de interacción estoy permitiendo? ¿Es esta interacción amigable?

CSS: Abriéndose paso en el mundo del diseño web

2008-10-23T22:52:00.000-07:00

Siguiendo un poco sobre la línea del diseño web, aprovechamos para hablar del lenguaje que cada vez está más presente en el diseño de sitios web actualmente junto con las tendencias crecientes al Web 2.0: CSS, o Cascading Style Sheet (Hojas de Cascada de Estilo).

La tendencia con el surgimiento del Web 2.0 y la creciente importancia del término de 'Accesibilidad' es el separar el contenido del diseño, lo cual es posible utilizando CSS. Trabajamos con CSS ya sea con código embebido en la etiqueta de nuestro código HTML, o como un archivo aparte. Para ahondar en el uso de CSS, les recomiendo accedan al Manual de CSS en línea, ya que tiene todo lo que necesitan para comenzar.

Pero fuera de las instrucciones técnicas, hay un proceso creativo que se debe seguir al momento de trabajar con CSS, un proceso lógico si lo prefieren, para que el resultado sea lo mejor posible. Este proceso puede variar dependiendo de cada persona, pero una autora de blog (Verlee's Blog) nos propone una metodologia interesante al respecto. Se las resumo a continuación:

Analizar y Definir las Áreas/Cajas/Contenedores ID - Teniendo en mente nuestro diseño, debemos pensar en la manera de dividirlo, en términos de columnas y encabezados. Para esto podemos apoyarnos en dibujos, pensando en las áreas distintas que vamos a utilizar.
Definir el fondo - Pensaremos en si vamos a utilizar colores planos, imágenes, un fondo de toda la página o fondos por áreas.
Guardar para Web - Ya con todo lo anterior, se crean los .JPG, .PNG o .GIF que se necesiten, dependiendo del diseño en particular.
Crear tus áreas con CSS - Terminando todo el proceso de preparación, se puede empezar con la programación.

Pueden irse directamente al post de Verlee que tiene la información completa de este método en inglés.

Les recomiendo trabajar ya sea con Dreamweaver o con TopStyle para apoyarse un poco. También les recomiendo que se pasen por CSS ZenGarden, que tiene muchos ejemplos del uso de CSS.

Diseñando tu blog con Dreamweaver

2008-10-22T15:54:00.000-07:00

Ya comenzando con los posts de noticias en este blog, pensé que sería oportuno postear sobre una novedad directamente relacionada al mundo del blogging, aunque hablando más de Wordpress y no de Blogger.

Todas las herramientas de blogging tienen sus ventajas de manera individual, y podemos considerar que esta sería una nueva y muy significativa ventaja para Wordpress.

Para todos aquellos usuarios de Dreamweaver (me cuento entre ellos), ya está a nuestra disposición un plugin llamado Themedreamer.

Themedreamer es un nuevo plugin que vincula las plantillas de Wordpress y permite modificarlas en tiempo real directamente desde Dreamweaver, es decir, proporcionando una retroalimentación del tipo WYSIWYG (What-You-See-Is-What-You-Get, Lo que ves es lo que obtienes). Las áreas de contenido dinámico se representan temporalmente por texto al azar.

Ya se puede descargar la versión de prueba que dura 15 días, y también pueden observar algunos videos para darse una mejor idea del funcionamiento de este plugin.

Mensaje de Bienvenida

2008-10-22T12:48:00.000-07:00

Bienvenidos a StyleMesh, una bitácora virtual para los conocedores del diseño gráfico, mentes creativas dispuestas a revolucionar el mundo a través de trazos y creaciones artísticas.

StyleMesh, esta abierto para todos los conocedores de este mundo gráfico, es aqui donde se conjugan las ideas y se materializan los elementos, donde revolvemos y creamos el estilo.

Creativos: bienvenidas sus aportaciones e ideas para mejorar el estilo, y convertirlo en centro y origen de nuevas ideas.

A cargo de este blog, estamos Pam Rodriguez y Mori Franco, dispuestas a exponer nuestros elementos compositivos para introducir las innovaciones del diseño en cada mente.