RSS
 

Archive for the ‘Creatividad’ Category

Imagen montevideana

23 Feb

El proyecto de diseño del sistema de identificación del Gobierno Departamental de Montevideo.

En el año 2006, la Intendencia Municipal de Montevideo realiza un llamado a licitación para el rediseño de su isologotipo y el desarrollo de un Programa de Identidad Institucional que normalizara el universo de aplicaciones de la entidad. En el brief proporcionado por el cliente se mencionaba la atomización de la comunicación, y la falta de coherencia en la resolución del vasto universo de aplicaciones de la marca, algunas con graves problemas funcionales, lo que redundaba en una escasa visibilidad e identificación de las mismas ante sus audiencias. Se presentaron nueve proyectos de diferentes estudios y agencias de publicidad, siendo la propuesta de i+D la seleccionada.

montevideo_marca_nueva.gif

La propuesta se centró en dos aspectos claves, el primero, en el ámbito proyectual, consistió en la definición de un estilo visual concreto y propio, basado en la claridad y simpleza del diseño con el fin de lograr una fácil y rápida caracterización, permitiendo que el programa pudiera extenderse y cubrir un espectro muy amplio sin perder su centralidad y grado de integración.

montevideo_pictogramas.gif

El segundo aspecto fue una minuciosa estrategia de implantación que asegurara un óptimo desarrollo de la nueva identidad visual de la Intendencia.

El principal desafío fue desarrollar un sistema de identidad que pudiera incluir las muy diversas necesidades y facetas de comunicación de la Intendencia. La novedad de integrar dentro de la propuesta de identificación un sistema de pictogramas tiene como objetivo expandir estas posibilidades, tendiendo un puente entre ciudadanos e institución a través de un estilo que quiebra tanto con la solemnidad como con la complacencia de muchas de las comunicaciones de las instituciones gubernamentales del país. Los pictogramas, abandonando su neutralidad, plantean representaciones de los aspectos característicos de la ciudad y de la vida de los montevideanos, desde la cultura y la arquitectura, a la geografía y la música, pasando por el deporte y los servicios. Representaciones que apelan a la identificación y a la inclusión, a través de un clima distendido, lúdico y cómplice. La idea fue generar una herramienta para identificar, para situar y señalar, que a la vez fuera una propuesta desestructurada y optimista; una forma directa y original de ver, conocer y comprender la ciudad, de participar en ella.

montevideo_submarcas.gif

Fuente: http://foroalfa.org/es/caso/16/Imagen_montevideana

SocialTwist Tell-a-Friend
 
No Comments

Posted in Creatividad, Diseño

 

10 buenas ideas para tu blog sacadas de grandes blogs

04 May

Origen del post

Los llamados top blogs o grandes blogs son aquellos que vemos siempre primeros en los principales rankings. Y si bien no podemos llegar a ser como ellos en un día, al menos miremos que ideas nos pueden servir para nuestro blog.

Lo común y lo no común

Además de las características predefinidas por las estructuras de los blogs como colocar los tags al final de los posts, un sencillo buscador y el blogroll en el sidebar o en el footer, la mayoría de blogs seguimos esquemas muy similares. Muchos somos los que tenemos posts relacionados al final de cada post y top comentaristas en el sidebar. Otros ponen posts incompletos en la portada, estadísticas muy variadas en el sidebar, las categorías o páginas como un menú, nubes de tags, paginación numérica, un footer tamaño gigante para poner lo que no pueden o no quieren en el sidebar y un largo etcétera.
En este juego de plugins y widgets donde modificamos posts, sidebar y footer, muchas veces encontramos que la originalidad se ha perdido. No creo que hoy en día alguien se crea único por tener en su sidebar un buscador de Google y un traductor de su blog a otros idiomas. Ahora más que nunca las herramientas están más a la mano y muchos son los blogs que te ayudan a usarlas.
Bajo este contexto, lo común es eso común y lo poco común es lo que debemos buscar para realmente personalizar nuestro blog y hacerlo especial.

<!--more-->

10 ideas sacadas de top blogs

Esta lista está hecha de las cosas menos comunes que he encontrado, lo cual no necesariamente implica que sean los primeros ni los únicos en haberlas aplicado.
Para ver los ejemplos y mayores preguntas sobre su funcionamiento, dirigirse a los blogs enlazados :roll:

  1. Microsiervos. Me gusta la sección que tienen en el pre-footer, llamada Enlaces de otras áreas temáticas microsiervas, donde en un par de categorías: Internet y Ciencia, aparecen enlaces a otros blogs fuentes de sus posts. Esta es una forma interesante de Link Love.
  2. Enrique Dans. Y muchos se preguntarán, que punto es rescatable de este blog?. Bueno, es interesante la forma en que ha logrado fusionar su identidad con la de su blog. Nada más miren la cabecera con su foto, las fotos de flicker, fotos suyas en los posts, sus artículos tan personales, es decir que si bien es un blog de tecnología no lo ha despersonalizado para nada. Al contrario, su sidebar dice mis fotos, mis fuentes diarias, cosas que leo, etc.
    Lo que se logra con esto es que cuando la gente entre a su blog, no vea un blog, sino a su persona misma. Esto le ha válido para tener muchos seguidores, aunque también algunos detractores.
  3. Mangas Verdes. Terminando cada post tiene los posts publicados hace exactamente un año, lo cual despierta la curiosidad de los lectores y reutiliza artículos que podrían quedar en el olvido. Esto es previo y complementario a los post relacionados que pone al final.
  4. Mangas Verdes. Después de los post del año anterior, se encuentra un buscador de posts por fecha, algo que normalmente no encontramos en un blog y que puede resultar muy útil.
  5. Mangas Verdes. Después del buscador de fechas, aparece una lista de las cuentas de Twitter que han twiteado el post actual, dando la posibilidad de enviarlo desde allí mismo. Esta opción es buenísima para obtener promoción en Twitter por parte de nuestros seguidores a cambio de la promoción de su cuenta en nuestro post. Muy buena idea.
  6. Mangas Verdes. En los comentarios, generar un enlace al último post del blogger que comenta. Esto implica que a cambio de un comentario, los demás lectores pueden fisgonear sobre lo último que ha escrito el comentarista y decidir si les interesa. Si bien, he visto esta modalidad en algún otro blog, sigue siendo una práctica muy poco utilizada.
  7. Loogic. Una sección de videos, donde agrega todos los videos que considera de interés para sus lectores y así se ahorra hacer posts sobre videos. Además los lectores al saber que existe dicha sección la visitarán con regularidad. Para esto se usa una lista de reproducción que se puede crear y administrar muy fácilmente en youtube.
  8. Martin Varsavky. Poner en portada y en la parte superior principal, las secciones de los más recientes y los más comentados. Algo muy elemental que siempre se pone en el sidebar y que pocos revisan, pero al ponerlo en el primer lugar visible aumenta las probabilidades de que el lector encuentre algo que le interese e incluso puede que abra varias pestañas. Usado por pocos.
  9. aNieto2K. Atentos a esto: miniposts semianónimos. Esta interesantísima forma de presentar posts, consiste en hacer un post en el que simplemente queremos difundir algún artículo interesante encontrado por ahí, pero que no da para un post entero. Entonces hacemos un minipost que aparentemente no tiene título pero sí lo tiene cuando accedemos a él(#) sólo que no se muestra en la portada. Simplemente genial.
  10. 86400. Un elemento distractor en la parte superior justo debajo de la cabecera. Este mensajito ingenioso no sólo llama la atención :eek: y distingue su blog sino que también explica porque el nombre numérico de su blog.

Fuente: tensaiweb
http://tensaiweb.info/blog/10-buenas-ideas-para-tu-blog-sacadas-de-grandes-blogs/

SocialTwist Tell-a-Friend
 
No Comments

Posted in Accesibilidad, Ajax, Creatividad, Diseño, RSS, SEO, Usabilidad, Wordpress, web 2.0

 

Safari crece, Chrome iguala a Opera

28 Nov

 

Los navegadores Safarí y Google Chrome han ido tomando terreno en el mercado a tal punto que han logrado superar, y empatar por otro, a Opera que ya lleva más de 10 años en el mercado.

Guerra de los NavegadoresSegún un estudio de la compañía de análisis OneStat al que ha tenido acceso Mac World, el porcentaje que tiene el navegador de Apple es del 2.42 a nivel mundial lo que lo coloca como el tercero en la lista. Y a nivel de Estados Unidos posee un 3.95%.

Y Google Chrome que fue lanzado hace menos de 3 meses ha logrado un 0.62% del mercado solo en Estados Unidos, y 0.55% a nivel mundial al igual que Opera.

El primer lugar sin duda lo tiene Internet Explorer con un 81.36% según el reporte y descendiendo casi dos puntos desde febrero cuando tenía 83.27 de porcentaje, luego sigue Mozilla Firefox a quien ya lo vemos a casi un 15%.

Vemos como el navegador de Google y de Apple han ido quitándole terreno más que todo a Opera a quien ya están destronado del listado, el cual es un buen navegador pero que no han sabido mercadear y cuyo fuerte está por el momento en los dispositivos móviles.

Yo igual sigo con Firefox y sus maravillosas extensiones las cuales ningún otro navegador ha podido superar y mientras no lo hagan ni pienso en mudarme.

Fuente Maestros del Web

SocialTwist Tell-a-Friend
 
No Comments

Posted in Creatividad, Navegadores, informacion

 

Backgrounds animados con jQuery

30 Sep

Interesante script para jQuery que usa el plugin para modificar la posición del background y que nos permite hacer efectos con el background similares a los que se suelen hacer con Flash.

Mediante un fondo de mayor tamaño que el elemento y con una forma irregular (esquinas, ondas, degradado, …) se trata de que al mover el fondo, el efecto que se produzca sea el de una animación.

El script sería algo así:

$('#nav a')
  .css( {backgroundPosition: "0 0"} )
  .mouseover(function(){
    $(this).stop().animate(
      {backgroundPosition:"(0 -250px)"},
      {duration:500})
    })
  .mouseout(function(){
    $(this).stop().animate(
      {backgroundPosition:"(0 0)"},
      {duration:500})
    })

Using jQuery for Background Image Animations

Vía / Script & Styles

SocialTwist Tell-a-Friend
 
No Comments

Posted in CSS, Creatividad, Curiosidades, Diseño, Herramientas, Recursos gratis, Tutoriales, grafico

 

Coverflow: galeria de imagenes al estilo iPhone

19 Sep

Muy buena librería javascript que nos permite visualizar imágenes como la galería de carátulas que ofrece el iPhone. La transición entre imágenes será mediante una rotación en 3D (un lado es más alto que otro mientras se va colocando en la posición correcta).

coverflow.png

Muestra etiquetas y efecto de reflejo, y su uso es muy sencillo:

tan solo habría que ejecutar un script similar a este:

code lang="javascript">Coverflow.init(
[
	{src: 'img/img-0-lo.jpg', label:
{album: 'All That I Am', artist: 'Santana'}},
	{src: 'img/img-1-lo.jpg', label:
{album: 'August & Everything After', artist: 'Counting Crows'}},
  /* ... */
	{src: 'img/img-10-lo.jpg', label:
{album: 'Viva la Vida', artist: 'Coldplay'}},
	{src: 'img/img-11-lo.jpg', label:
{album: 'We Were Here', artist: 'Joshua Radin'}}
],
{
	createLabel: function(item)
	{
		return item.label.album +'
'+ item.label.artist;
	},

	onSelectCenter: function(item, id)
	{
		var img = new Image();
		img.onload = function()
		{
			Lightbox.show(this.src, id);
		};
		img.src = item.src.replace('-lo.jpg', '-hi.jpg');
	}
});

JS Coverflow

Fuente: Sentido Web

SocialTwist Tell-a-Friend
 
No Comments

Posted in Creatividad, Diseño, Herramientas, JavaScript, Recursos gratis, grafico

 

Consejos para estructuras CSS

31 Mar

Buenos consejos para realizar tus estilos CSS bien estructurados.

  • Se sencillo: usa solo que sea estrictamente necesario. No uses muchas capas div y puedes obtener el mismo resultado con una o dos. Si ves que la estructura se complica, quizás estés haciendo algo mal, intenta buscar otra forma muy sencilla.
  • Escrible claro: usa tabulaciones, comentarios para diferenciar partes y nombres que sean claros y explicativos.
  • Se metódico: usa los mismos nombres en tus proyectos. Agrupa por tipología y ordena alfabéticamente para una lectura más sencilla.
  • Organízate: diferencia y define las distintas partes para poder plasmarlas en tus estilos.
  • Resetea los estilos por defecto: debido a las diferencias entre los navegadores es conveniente dar estilos a algunas etiquetas HTML (ul, a, …)
  • Tabula los elementos: no solo uses el tabulador para los distintos estilos de un elemento, sino para crear una estructura de estilos, si un estilo depende de otro, deberá estar por debajo de este y con mayor tabulación.

Fuente: sentidoweb.com desde http://woork.blogspot.com/2008/03/write-well-structured-css-file-without.html
Imagen : http://woork.blogspot.com/2008/03/write-well-structured-css-file-without.html

SocialTwist Tell-a-Friend
 
No Comments

Posted in CSS, Creatividad, Diseño, Estándares web, Usabilidad, html

 

10 errores en el diseño de aplicaciones

25 Feb

Un articulo en el que se nos explica diez errores que se cometen cuando se diseña una aplicación, un resumen sería el siguiente:

  • Controles no estándares: los enlaces, botones, radio buttons y demás controles tienen una utilidad específica y estándar. Cambiar el comportamiento no es lo correcto y no hace más que confundir al usuario.
  • Inconsistencia: diferentes cosas para una misma utilidad, usa lo mismo en el mismo lugar para la misma acción.
  • Acciones no perceptibles: se debe saber qué acción realiza un control a simple vista. Si hay que investigar para qué sirve algo no cumple su cometido.
  • Controles sin reacción: cada control debe indicar 3 cosas: mostrar a los usuarios el estado actual, cómo se interpretan los comandos y qué está pasando.
  • Malos mensajes de error: no basta con decir que hay un error, sino que es lo que ha pasado y que se puede hacer para solucionarlo.
  • Preguntar por lo mismo dos veces
  • No hay valores por defecto: os valores por defecto sirven para que haya más rapidez en las respuestas, para enseñar mediante el ejemplo y para dirigir a usuarios novatos.
  • No explicar cómo funciona la aplicación: en aplicaciones estándar eso no es muy problemático, pero en otras aplicaciones hay que explicar qué se puede conseguir y cómo y no únicamente acceder a la aplicación.
  • No indicar qué se hace con la información
  • Mostrar características internas: al usuario no le importa y no llegará a entender cosas internas de la aplicación, por lo que no es necesario que el usuario lea.

Top-10 Application-Design Mistakes

via: sentidoweb.com

SocialTwist Tell-a-Friend
 
1 Comment

Posted in Accesibilidad, Creatividad, Diseño, Estándares web, Interfases, Usabilidad, informacion

 

Importancia de los espacios en blanco en el diseño

11 Feb

El espacio que rodea a este bloque de texto es tan importante como otros factores, como el uso apropiado del color, el tipo y gráficos.

El espacio que rodea a este bloque de texto es tan importante como otros factores, como el uso apropiado del color, el tipo y gráficos. Lo sé, hay una tendencia, especialmente en la web, de rellenar todos y cada uno de los rincones con texto. “El espacio en blanco está mal”, parece ser el eslogan, “¡debe ser eliminado!” “¡Abajo con espacios en blanco!”

Lo gracioso es que, a la mayoría de nosotros nos han enseñado desde la escuela primaria a utilizar los espacios en blanco. Recuerdo como mis maestros siempre insistian en que pusieramos un margen de 2cm en el lado izquierdo de cada página. Nos lo metieron tanto en la cabeza, hasta que se convirtió en un hábito que no he podido romper, incluso hasta el día de hoy. Lo cual es en realidad un gran hábito.

Entonces, ¿por qué es tan importante el espacio en blanco? Parte de la razón es psicológica y parte física: el texto necesita espacio para respirar. Cuando grandes cantidades de texto cruzan de lado a lado los bordes de la página, nos dan la sensacion de multitud y de que algo esta rebosando. Largos pasajes de texto, escritos de lado a lado, cansan a los ojos.

Pruébalo. Coje hoja de papel normal, y escribe varias líneas de texto de un borde de la página al otro, sin dejar ningún espacio en la parte superior o margen izquierdo y derecho. Ahora coje otra hoja de papel y justo en el medio, escribe unas líneas de texto, dejando una generosa cantidad de espacio en blanco en todos los lados (por ejemplo 2.5 cm en cada lado y 3 en la parte superior.) Ahora compara las dos páginas. ¿Cuál es más fácil de leer?

Por cierto, los espacios en blanco no tienen porque ser en blanco. Pueden ser de cualquier otro color. Con espacio en blanco nos referimos a cualquier área vacía (de color o blanco, opaco o transparente) que carece de texto.
En esta columna por ejemplo, te habrás dado cuenta que está rodeada de una generosa cantidad de espacio en blanco. Esto combinado con un menor ancho de columna, mejora la legibilidad del texto y que hace que sea mucho más fácil de leer.

Otra razón para el uso de espacio en blanco se relaciona con un tema que voy a revisar con más detalle en una próxima columna: contraste. Una gran cantidad de espacio en blanco alrededor de un bloque de texto llama mucho la atención del lector, especialmente en un medio donde hay mucho texto, como un periódico, donde cada rincón está lleno de lineas de información.

Al igual que este texto, por ejemplo.

Puedes comprobar que leyendo esta columna de un vistazo, escaneándola, te pararás a ver que pone en esa linea que está tan solitaria, y no prestarás atencion a todos los demas párrafos. Ese es el poder de un espacio en blanco. Muchas veces, en los periódicos como el Wall Street Journal o el New York Times, verás anuncios de página completa, con casi nada más en la página excepto una solitaria frase del texto. Podrias pensar que están tontos o algo, que una empresa paga miles de euros por este anuncio de página completa, y luego no se aprovechan de él llenándolo de texto, mensajes, etc. Y, sin embargo, puede que no puedas evitar saltarte el anuncio. Ese es el poder de los espacios en blanco (y el contraste.).

Así que la próxima vez que te encuentres preparando un informe, un boletín de noticias, o un anuncio de una venta de una casa, piensa en el espacio en blanco. La primera vez que lo haces conscientemente, puede resultar difícil (lo sé) Pero con el tiempo te acostumbrarás a él, y me pregunto cómo hacia las cosas sin el.

Autor: Design matters
http://www.sheriftariq.org/design/whitespace/index.html

SocialTwist Tell-a-Friend
 
No Comments

Posted in Creatividad, Diseño, Estándares web, Interfases, Tipografia, informacion, usuarios web, web 2.0

 
« Older Entries