Reading text on a white screen with a poor choice of typography is quite hard to the eyes. User style sheets is an accesibility feature that comes handy for everyone. For example on Safari, we can go to Preferences > Advances and select our custom made style sheet. The changes will apply on every website made in HTML, it won’t work on Flash sites.

Customizing background color and font

If you’re not familiar with CSS coding, you can try out typography.css from the Better Web Readability Project. If you want to hand code your CSS choose a neutral background color, a font designed for the screen and a big font size.

Hiding undesired content

Do you participate in Twitter? If you don’t want to keep track of your followers number, look up the class or ID of the container in Firebug and add a line to your user style sheet.

#follower_count_link{display:none}

User vs Author style sheets

What does user styles sheet meant for designers? Just remember not to abuse on !important declarations, so that the user can adjust the web page to their needs and likes.

Loading mentions Retweet

Para realizar una pieza impresa o digital podemos optar por utilizar recursos gratuitos o pagos, pero ¿en diseño, lo barato sale caro?

Una familia completa (regular, cursiva, negrita y otras variantes) cuesta alrededor de US$ 150, es bastante tentador entonces utilizar una fuente gratis. Cualquiera puede diseñar un alfabeto, pero un buen diseño debería tener en cuenta varios factores, por ejemplo:

• el idioma: cada idioma tienen secuencias de letras que se repiten, en español, después de la q siempre va una u, por lo tanto aparte del diseño del caracter individual, qu tiene que funcionar bien juntos. Obviamente también vamos a necesitar tildes y ñ.
• el medio: teniendo en cuenta cómo los pixeles forman una imagen en la pantalla o cómo los puntos de tinta dibujan las formas, hay tipografías optimizadas para distintos medios, inclusive hay tipografías diseñadas para ahorrar papel o tinta.
• la técnica: dibujar una letra, no es tan sencillo como parece, prueben imprimir un par de letras de distintas fuentes en tamaño A4 y van a notar la diferencia.

Usos de las fuentes gratis

Piezas publicitarias (folletos, calendarios, volantes, afiches, animaciones): en el tamaño que se van a usar, si tuvieran defectos, no se notan, y no tiene mucho sentido gastar en una fuente fantasía que se va a utilizar una única vez.

Logotipos: si la tipografía se va a modificar sustancialmente y es sólo el punto de partida y además se necesitan unas pocos caracteres  - no el set completo - se puede utilizar cualquier fuente, hay muchas fuentes gratis que son "parecidas a..…." y en este caso con parecido alcanza y sobra.

Usos de las fuentes comerciales

Diseño editorial: en diarios, revistas, libros, conviene usar una tipografía de las clásicas, que son todas con licencia, o una tipografía de un diseñador contemporáneo, pero de calidad comprobada, porque es mucha cantidad de texto y en tamaños pequeños, como para arriesgarse. 

Señalética: en proyectos de gran envergadura, con un costo alto, es ridículo quererse ahorrar unos dólares. De las fuentes comerciales hay mucha información disponible y se puede investigar fácilmente qué tipografías son más adecuadas para este tipo de piezas.

¿Y para el diseño web?

Aparte de las fuentes del sistema, ahora con @font-face y varios servicios (Typekit y otros) se puede usar cualquier fuente cuya licencia lo permita, en diseño web, lo que estamos viendo en la pantalla es el producto final, así que si queda bien, es válido.

Loading mentions Retweet

Wireframing is like paper prototyping but digital. Two advantages are:

• digital files are easy to share (with co-workers, clients)
• changing the position of elements is a snap

It can be done with any software that allows you to draw basic shapes, so why look for a specific software?

• to have a library of commonly used components that can be edited 
• to build basic interactivity without programming, in order to test usability at an early stage

I've tested 5 softwares, I draw the same basic layout in each one. In alphabetical order:

1. Axure

Type: desktop | Price: $589

Axure has a two side panels, so the working space is small. It has too many options and it seems quite difficult for doing a quick wireframe. Sometimes you have an idea and you want to draw it, and the complexity of this software gets in the way. 

2. Balsamiq

Type: Desktop (Adobe Air) | Price: US$ 79

Balsamiq is probably the most popular software. It has a sketchy feeling that looks kind of cute, but also childish, I don't see myself showing that to a client. The preview of the components is not very clear, I had to drag some to the working area to see what they were. I loved the grid at first sight, but it didn't help me much. It has good keyboard support (CTRL+C, CRTL+V).

3. FlairBuilder

Type: Desktop (Adobe Air) | Price: US$ 99

FlairBuilder has two different themes (classic and sketchy). You can see the measure of the elements while you draw, so if you want an specific width, you don't need further editing. It has a design and a preview mode, in preview, the videos and maps really work! 

4. Mockflow

Type: Web app | Price: Free (limited), US$ 50/year

The elements can be aligned using guide lines that work similar to Adobe Flash. Besides the default library, you can add more, for example cursors and different browser windows.

5. Pencil

Type: Mozilla Firefox add on | Price: free

The working area is tiny, there are not many components and they are all desktop software oriented. The point of wireframing is no to insert every single image, so "no image" is ridiculous. 

The Choice

Both Flair Builder and Mockflow have the functionalities I want (components library and building interactivity). For wireframing they are more expensive than what I expected, but you can substitute the placeholders for actual images, change colors, etc. so the wireframe can evolve and depending on the project, you can jump to the coding stage without using other software in the middle. 

I choose Mockflow, because since it is web based, I can use it at home (in my desktop or my laptop) and at the office, without paying for additional licenses. 

Do you use any wireframing software?

Loading mentions Retweet

The first time I ran Google Chrome, I was impressed by the minimal interface.

• the icons are in solid colors, without text labels, all icons in the normal state are the same color
• no fancy gradients
• there is only one bar at the top
• the search and address bar are the same
• etc.

Then a few days ago, I saw this page peal, so I click it.

Surprise! The Google themes... I don't know how to describe them, they're so busy! Who wants to browse the web within a yellow notepad???

It's not the first time Google design team comes up with this kind of stuff (have you ever tried Gmail themes?), but they don't cease to amuse me.

Loading mentions Retweet

Today I received my Typekit invitation and in just about 5 minutes, I changed the titles font in one blog! I research about font replacement techniques, but all seemed quite hard to implement, so I can't believe how easy to use is Typekit.

Right now I'm using a trial account (free), but as soon as I finish some re-designs I'll choose an upgrade. The prices are ok, considering the cost of a font-family.

Loading mentions Retweet

Un framework sirve para desarrollar más fácil, Hartija trae unos pocos estilos definidos que sirven para hacer una versión imprimible de una página web.

Yo no soy muy amiga del papel, pero para muchos usuarios resulta cómodo imprimir una página para leerla luego, en cualquier lugar, sin conexión a Internet y sin necesidad de estar frente a una pantalla.

En este artículo de Eric Meyer CSS Design: Going to Print publicado en A List Apart, se explica cuáles son los puntos a tener en cuenta al imprimir una página web:

• no imprimir la navegación y otros elementos que no tengan sentido en papel

• utilizar una tipografía y tamaño adecuados

• mostrar la URL completa de los enlaces

Con Hartija es fácil y rápido hacer una versión imprimible, no necesariamente hay que usarlo tal cual, se pueden hacer modificaciones, pero es una ventaja contar con un esqueleto para no olvidarse de ningún punto importante. Para verificar cómo quedará el diseño, se puede ver en la vista preliminar (en Firefox u Opera).

Una vez que está la versión imprimible pronta se puede agregar un botón para imprimir la página.

Loading mentions Retweet

Las fotografías tilt - shift hacen que los objetos tamaño normal parezcan minuaturas por la poca profundidad de campo, al estar tanto el sujeto como el fondo fuera de poco se pierde la noción de escala, visualmente son similares a las fotografías macro de objetos realmente pequeños. Se obtienen mediante 2 movimientos:

• tilt: rotación del lente relativo al plano de la imagen
• shift: movimiento del lente paralelo al plano de la imagen

Se necesita un lente tilt shift y es aconsejable realizar las tomas desde un ángulo alto, para acentuar la idea de que se está mirando a objetos pequeños.

El efecto tilt - shift en Photoshop se puede conseguir básicamente aplicando el filtro Lens Blur a una parte de la imagen (usando una máscara con degradé) y ajustando las curvas.

Enlaces

• 50 Beautiful Examples Of Tilt-Shift Photography via Smashing Magazine
• 45 Great Tilt-shift Photographs via Abduzeedo

Loading mentions Retweet

Erich Salomon (1886 - 1944) fue un precursor del periodismo fotográfico moderno. Utilizando equipos pequeños y sin lámparas ni flash se caracterizó por fotografiar a políticos en actitudes naturales, no posando.

La foto superior fue tomada en el año 1931 y corresponde al momento en que un ministro francés nota la presencia del fotógrafo en una reunión donde no se admitía a periodistas. Es una de esas fotos inolvidables que con verlas una vez, te quedan grabadas en la memoria.

Loading mentions Retweet

La fotografía macro son primeros planos de objetos muy pequeños. Un ejemplo típico es el ojo de un insecto, para lo cual se utiliza un lente especial. La profundidad de campo se reduce drásticamente, queda el sujeto en foco y el fondo desenfocado.

Siempre que tengamos que fotografiar algo pequeño, es importante recordar que en modo normal no se enfoca a corta distancia y que con el zoom difícilmente alcanza, así que utilizando el modo macro (una función de la mayoría de las cámaras digitales) se resuelven los inconvenientes.

50 fotografías macro Esta es una de las pocas galerías donde no hay insectos desagradables (sí algunos san antonios), así que entren sin miedo.

Loading mentions Retweet

Paul Annet de Clearleft (los creadores de Silverback) habla sobre la magia y el diseño web.

Comenta sobre el fenómeno de Silverback, el sitio que gracias a un efecto visual consiguió tener 20.000 visitas en un día cuando el producto aún era un boceto en papel, la flecha en el logotipo de FedEx, y otros ejemplos de cositas escondidas, que la gente se sorprende y divierte cuando las encuentras.

Despúes muestra y comenta varios sitios experimentales con propuestas novedosas: un sitio que es sólo navegación, el trailer de una película que parece salirse de la ventana, varios ejemplos que usan transparencia, fondos que cambian de color (hechos con un 1x1px.gif animado!)…

Explica el modelo Kano de la satisfacción del cliente y con este concepto redondea la idea de que un sitio tenga “algo más”, aparte de funcionar correctamente es lo que a la gente le encanta. Al final responde la pregunta de cómo venderle esa creatividad al cliente o cómo elegir los clientes correctos.

Enlaces

• Owltastic - by Meagan Fisher el búho mueve los ojos al pasar el mouse por encima.

Loading mentions Retweet