No se ustedes, pero, en la ciudad en la que vivo estoy muy acostumbrado a ver tarjetas de presentación “Feas”. Lamentablemente son un elemento que algunas empresas de diseño no le dan importancia. Y es que la gran mayoría de estas empresas ofrecen paquetes de tarjetas baratas con una tirada de impresión larga, vamos lo que cobran es el material, la tinta, y no el diseño.

La pregunta sería ¿que tan importante es la tarjeta de presentación?, por lo visto para muchas personas que ofrecen algún servicio la respuesta puede ser “poca”, pero para la persona que recibe el servicio la respuesta puede ser “mucha”. Como diseñadores: ¿Vale la pena invertir tiempo en el diseño de una tarjeta de presentación? o como cliente: ¿Vale la pena pagar un precio alto por una tarjeta de presentación?.

La respuesta final creo que esta en la persona que ofrecerá un servicio. Habrá clientes que lo único que les interesa es tener ese papelito que pueden repartir por toda la ciudad para que la gente conozca su servicio y por otro lado habrá gente que desea vender una buena imagen y que la tarjeta de presentación sea muy acorde a la estrategia de venta o imagen que este manejando.

La imagen es algo muy importante que debemos de cuidar al momento de vendernos, no importa si tu servicio es “simple” o “complicado”, recuerda, eres un producto y te tienes que vender bien, parece nada, pero una buena imagen  puede garantizar el éxito o fracaso de tu negocio o de tu persona a nivel profesional. Si eres un Ingeniero y llegas con una tarjeta de presentación fea, con una mezcla de colores inapropiados seguramente esto te restara puntos. Te lanzo una ultima pregunta: ¿A que taxista solicitarías sus servicios?.

Desarrollar sitios web que se adapten a distintas resoluciones y distintos dispositivos es algo que se esta volviendo más común, es por ello que siempre es recomendable tener una forma de previsualizar el resultado final.

La mejor opción siempre será hacer la previsualización desde el dispositivo en el cual queremos trabajar el sitio, ya sea un iPod, iPhone, iPad, Android, etc. Sin embargo, puede que en el momento no cuentes con alguno de estos dispositivos y tendrás que buscar una alternativa que te muestre el resultado lo más fiel posible al resultado final.

Para esos momentos Responsive Design Test Bookmarklet será tu opción a elegir, como su nombre lo indica hablamos de un sencillo Bookmark que nos permite definir las resoluciones que queramos probar. Una vez definimos las resolución que deseamos tendremos que arrastrar el bookmark a la abarra de Bookmarks de nuestro navegador. Ahora, solo tendremos que activarlo desde la pagina que deseamos y el resultado será mostrado:

Ejemplo de mi portafolio en distintas resoluciones

En algunas entradas he platicado sobre @font-face, si aun no conoces esta propiedad de CSS te invito a darle un vistazo  << mientras tanto, yo te espero >>. Bien, una vez que ya sabes que es @font-face y sus alcances, hoy aprenderemos como usar pictogramas con @font-face. Su uso es prácticamente igual a usar cualquier fuente tipográfica.

A estas alturas tal vez te estés preguntando ¿que es un Pictograma?. Un pictograma es un símbolo que representa un objeto real, generalmente es utilizado para anuncios, la idea de un pictograma es que debe ser sencillo y fácil de relacionar con el objeto real que se desea representar.

Una vez tenemos ubicado de que se trata @font-face y que son los pictogramas lo único que nos queda es buscar un set de pictogramas adaptados para ser usados como fuente tipográfica (en internet hay muchas).

Por ejemplo podemos descargar esta fuente llamada Modern Pictograms. Una vez descargada la fuente tan solo tenemos que implementarla en nuestro archivo CSS.

@font-face {
    font-family: 'ModernPictogramsNormal';
    src: url('modernpics-webfont.eot');
    src: url('modernpics-webfont.eot?#iefix') format('embedded-opentype'),
         url('modernpics-webfont.woff') format('woff'),
         url('modernpics-webfont.ttf') format('truetype'),
         url('modernpics-webfont.svg#ModernPictogramsNormal') format('svg');
    font-weight: normal;
    font-style: normal;
}

Implementarlo es tan sencillo como aplicar la propiedad css font-family, como por ejemplo:

h1 {
 font-family: ModernPictogramsNormal;
}

El resto depende de ustedes. Aquí podemos ver un ejemplo más visual.

El diseño y desarrollo web son dos ecosistemas que se encuentran en constante cambio. Sin embargo, hay ciertos elementos que a lo largo del tiempo nunca han cambiado o mejor dicho, han sufrido pocos cambios, estos elementos son las partes estructurales de una pagina web; hablamos de menús horizontales, formularios, títulos, listas, tablas, etc.

Tener a la mano estos elementos para ser usados es una buena practica que debes de tener, perder tu tiempo en armar un Slider o una tabla son cosas en las que no deberías de invertir mucho tiempo.

Para esto HTML KickStart es un gran recurso. HTML KickStart en una pagina web en la cual se ofrecen un gran numero de elementos listos para ser implementados en tu nuevo proyecto. Hablamos de un set completo de HTML5, CSS y  jQuery, los cuales pueden ser implementados fácilmente en el proyecto que estes trabajando, algunos de los elementos que podemos encontrar en HTML KickStart son:

- Slideshow
- Botones CSS3
- Formularios
- Menu Horizontal
- Pestañas
- Galerias
- Listas
- LightBox
- Tablas
- Sistema de Layouts

HTML KickStart es sin duda un recurso que todo diseñador y desarrollador web debe de tener en su arsenal.

Visita HTML KickStart

Las guías en Photoshop son una de las características más importantes de la aplicación, estas, permiten alinear con precisión los elementos con los cuales estamos trabajando. Podríamos decir que su uso es bastante sencillo ya que solo basta con arrastrar de alguna de las reglas: horizontal o vertical, hacia el área de trabajo y listo hemos creado una regla. Sin embargo, cuando queremos ser precisos en la colocación de estas guías no siempre se puede lograr dicha precisión.

Gracias a la extensión GuideGuide la tarea de crear guías será cosa de niños. Su uso no podría ser más sencillo basta con abrir el panel de la extensión y comenzar mover los diferentes valores que esta nos permite, básicamente nos permite realizar las siguientes acciones:

1. - Guías para la parte superior, inferior, izquierda y derecha de nuestra área de trabajo.
2. - Número de columnas y filas que queremos que tenga nuestra área de trabajo.
3. - Tamaño de las filas y columnas.
4. - Separación entre filas y columnas.

Cada una de estas guías las realizaremos desde un panel en el cual tan sol tendremos que ir agregando los valores que deseamos, una vez logremos establecer las guías que deseamos podemos guardar el resultado como un template para futuros proyectos.

GuideGuide es una gran extensión para Photoshop, es compatible con Photoshop Cs4 y Cs5, y lo mejor de todo es que  totalmente gratuita, así que a disfrutarla que el mundo se va a acabar.

Descarga GuideGuide

Visto en: Webdesign Depot

Illustrator es una de mis aplicaciones favoritas a la hora de diseñar logos o algunos elementos para la web, llevo algunos años usándola y cada que me pongo a jugar con Illustrator descubro nuevos trucos que me ayudan a mejorar mi trabajo.

Conocer todas las posibilidades de una herramienta como Illustrator no es algo sencillo, por eso siempre he pensado que la mejor forma de aprender a usar este tipo de herramientas es siguiendo tutoriales. Si sigues un tutorial aprenderás como realizar X o Y efecto y sin darte cuento estarás aprendiendo a utilizar alguna de las herramientas básicas que Illustrator te ofrece. Veamos una recopilación de tutoriales que te ayudaran a practicar y mejorar tu habilidad en esta excelente aplicación de Adobe.

Estampas

Patrones

Alinear objetos

Efecto mezclilla

Calendario

Sonic

Hace unos días les mostré una pequeña recopilación de retratos con tipografía. Si te gusto la anterior entrada, esta te gustara más. Hoy, les traigo una aplicación para iOS, la cual nos permite aplicar ese efecto tan vistoso de llenar una fotografía con palabras.

La aplicación lleva por nombre WordFoto y tengo que decirles que los resultados que obtendremos son espectaculares, su uso no podía ser más sencillo, tan solo tenemos que tomar una fotografía o escoger una de nuestra biblioteca y aplicarle uno de los 8 efectos predefinidos: classic color, classic gray, cómic, black label, howing, prankzter, Romance y blocky.

Efectos de WordFoto

Si los efectos que vienen predefinidos no te convencen no te preocupes, la aplicación te permite crear 8 efectos más. Por otro lado tenemos el apartado que le da vida a la aplicación: decorar una fotografía con palabras; aquí podemos crear las palabras que queremos que tengan nuestras fotografías. Con las palabras y efectos que la aplicación te ofrece el resto depende de tu imaginación. La aplicación tiene un costo de $ 24 pesos en la App Store de México.

En los últimos años he visto una tecnica que ha llamado mi atención por lo llamativa y bonita que es. Esta técnica trata de representar un rostro o a un personaje a través de una determinada tipografía, en muchas ocasiones los resultados son espectaculares. Desconozco si esta técnica tiene algún nombre en espesifico  especifico pero les invito a ver algunos ejemplos.

Einstein

Obama

Dalai Lama

Dennis Hoper

Child Of Korn

Muhhamad Ali

Visto en : On Extra Pixel

Notification Control no es un aplicación como tal, simplemente es una pagina web en la cual se nos presentan una serie de enlaces para desactivar los mensajes que las redes sociales más populares nos envían a nuestro E-mail.

Por poner un ejemplo, hace ya algún tiempo al equipo de Twitter se le ocurrió la maravillosa idea de mandarte un e-mail cada que alguien te seguía, o marcaba como favorito algún twitt tuyo, o simplemente retwiteaba algún mensaje, recibir correos masivos por esto no se me hace nada practico ya que tu bandeja de entrada se puede llenar de “basura”. A si como twitter hay otras redes sociales que hacen lo mismo y no es de sorprender que al abrir tu bandeja de entrada te encuentras con cientos de e-mails de estas redes. Pues bien si no te quieres romper la cabeza en Notification Control nos dan los enlaces directos a cada una de esas redes sociales donde podemos desactivar las molestas notificaciones que llegan a nuestro E-mail.

Las aplicaciones para iOS son el elemento que le dan vida a los dispositivos de Apple. Me atrevería a decir, sin temor a equivocarme que en la App Store hay aplicaciones para TODO.

Hace 1 mes me vi en la necesidad de someterme a un tratamiento medico, este consistía en tomar un buen numero de pastillas, ya saben: Tomar 1 pastilla cada 8 horas durante 15 días, y así con cada una de las demás pastillas. No se ustedes, pero a mi esto se me suele olvidar por lo tanto necesitaba una aplicación que me permitiera llevar un control del tratamiento que estaba tomando y que ademas me avisara en el momento que tenia que tomar mis pastillas.

En la App Store, encontré varias aplicaciones que servían para lo que buscaba, sin embargo, por x o y razón no encontraba una que se adecuara a mis gustos, hasta que encontré Pillboxie. Pillboxie me encanto desde el principio, ya que cuenta con un diseño muy bien cuidado, y a su vez  servia para lo que yo necesitaba: llevar un control de las pastillas que me tenia que tomar.

Pillboxie se usa de una manera muy intuitiva, no como otras alternativas que se basan más en opciones en forma de listas con un sin fin de opciones las cuales  llegan a confundir al usuario.

Ingresar un recordatorio de las pastillas a tomar es muy sencillo: Creamos la “pastilla”, le asignamos una imagen, la guardamos, posteriormente arrastramos la pastilla creada a los horarios en los que debemos tomarla, y el resto lo hará la aplicación, ya que cada que se cumpla la hora de tomar nuestras pastillas la Pillboxie nos enviara una notificación a modo de recordatorio.

Con un excelente diseño, una interfaz intuitiva y de fácil configuración esta aplicación se va al cajon de favoritas, sobre todo cuando se vean en la necesidad de tomar  un tratamiento medico. ¿Saben que es lo mejor de todo?, la aplicación es totalmente gratuita.

Descarga Pillboxie desde la App Store